/*
Theme Name: Sante du Golfe
Author: Nadege Trouillas
Description: Magazine sante du littoral varois : bandeau plein, grille de breves, encadres a filet, typographie condensee. Structure volontairement differente des autres titres du parc.
Version: 1.0.0
Text Domain: sante-golfe
*/

/* DIRECTION : « le panneau de front de mer ».
   Bleu profond, sable clair, filets fins. La page s'organise en bandes horizontales
   (bandeau, breves, dossier) plutot qu'en colonne + sidebar : la lecture descend,
   la colonne laterale n'arrive qu'en bas de page sur telephone. */

:root{
  --sable:#f6f2ea; --sable-2:#ece5d8; --nuit:#0f2f45; --nuit-2:#0a2332;
  --mer:#17697f; --mer-clair:#2d93a8; --corail:#c25a42; --blanc:#fff;
  --gris:#5a6a74; --filet:#d7cfc0;
  --titre:"Archivo",Impact,"Arial Narrow",sans-serif;
  --texte:"Source Sans 3","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--sable);color:#152532;font:400 17px/1.66 var(--texte)}
img{max-width:100%;height:auto;display:block}
a{color:var(--mer)}
h1,h2,h3{font-family:var(--titre);font-weight:600;line-height:1.18;margin:0 0 .45em;letter-spacing:-.01em}
.bande{max-width:1160px;margin:0 auto;padding:0 18px}

/* en-tete */
.quai{background:var(--nuit);color:#e9f1f4}
.quai .bande{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;padding-block:16px}
.pavillon{text-decoration:none;color:#fff;display:block}
.pavillon b{display:block;font-family:var(--titre);font-size:27px;letter-spacing:.01em}
.pavillon i{font-style:normal;display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#9fc0cc;margin-top:3px}
.plume{display:flex;gap:11px;align-items:center;font-size:13px;color:#cfe0e6}
.plume img{width:46px;height:46px;border-radius:4px;object-fit:cover}
.plume b{display:block;color:#fff;font-size:13.5px}
.cap{background:var(--nuit-2)}
.cap .bande{display:flex;flex-wrap:wrap}
.cap a{color:#cfe0e6;text-decoration:none;padding:13px 16px 13px 0;font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;min-height:44px;line-height:1.5}
.cap a:hover{color:#fff}

/* bandeau d'ouverture */
.hisser{background:var(--mer);color:#fff}
.hisser .bande{padding-block:34px;display:grid;gap:12px}
.hisser h1{font-size:30px;margin:0;color:#fff}
.hisser p{margin:0;max-width:70ch;color:#ddeef2;font-size:17.5px}

/* breves : grille de vignettes */
.breves{display:grid;gap:14px;margin:24px 0 6px}
.breve{background:var(--blanc);border:1px solid var(--filet);display:block;text-decoration:none;color:inherit}
.breve img{width:100%;aspect-ratio:16/10;object-fit:cover}
.breve .dedans{padding:14px 15px 18px}
.jalon{display:inline-block;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--corail);margin-bottom:7px}
.breve h2{font-size:19px;margin:0 0 .3em}
.breve time{font-size:12.5px;color:var(--gris)}

/* dossier : liste dense */
.dossier{margin:30px 0 10px}
.dossier>h2{font-size:15px;letter-spacing:.16em;text-transform:uppercase;border-bottom:3px solid var(--nuit);padding-bottom:8px;margin-bottom:18px}
.ligne{display:grid;gap:12px;padding:16px 0;border-bottom:1px solid var(--filet)}
.ligne .vignette img{width:100%;aspect-ratio:3/2;object-fit:cover}
.ligne h3{font-size:20px;margin:.1em 0 .35em}
.ligne h3 a{color:inherit;text-decoration:none}
.ligne h3 a:hover{color:var(--mer)}
.ligne p{margin:.2em 0 .6em;color:#31424e}
.ligne .suite{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--corail);min-height:44px;display:inline-flex;align-items:center}

/* encadres de bas de page */
.amarres{display:grid;gap:18px;margin:28px 0 40px}
.amarre{border:1px solid var(--filet);background:var(--blanc);padding:18px}
.amarre h2{font-size:14px;letter-spacing:.15em;text-transform:uppercase;color:var(--nuit);margin-bottom:.7em}
.amarre ul{margin:0;padding:0;list-style:none}
.amarre li{padding:8px 0;border-bottom:1px dotted var(--filet)}
.amarre li:last-child{border:0}
.amarre li a{text-decoration:none;color:#152532}
.amarre li a:hover{color:var(--mer)}
.amarre.signature{background:var(--sable-2)}
.amarre.signature img{width:70px;height:70px;border-radius:4px;margin-bottom:10px}
.quete{display:flex;gap:8px}
.quete input{flex:1;min-width:0;min-height:44px;padding:0 12px;border:1px solid var(--filet);font:inherit;font-size:16px;background:var(--sable)}
.quete button{min-height:44px;padding:0 16px;border:0;background:var(--nuit);color:#fff;font:inherit;font-size:12px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}

/* article */
.feuillet{background:var(--blanc);border:1px solid var(--filet);padding:20px 18px 30px;margin:22px 0}
.feuillet h1{font-size:29px}
.chapeau{font-size:18.5px;color:#2f4250}
.ourlet{font-size:13px;color:var(--gris);border-bottom:1px solid var(--filet);padding-bottom:10px;margin-bottom:18px}
.texte h2{font-size:23px;margin-top:1.5em}
.texte img{margin:1.2em 0}
.paraphe{margin-top:28px;border-top:3px solid var(--nuit);padding-top:16px;display:flex;gap:14px;align-items:flex-start}
.paraphe img{width:66px;height:66px;border-radius:4px}

/* pied */
.lest{background:var(--nuit);color:#c9dbe2;margin-top:30px}
.lest .bande{padding-block:24px;display:grid;gap:12px}
.lest a{color:#e6f1f4}
.lest small{color:#8fa9b4}

.navigation-pages{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 34px}
.navigation-pages .page-numbers{min-height:44px;line-height:44px;padding:0 14px;border:1px solid var(--filet);background:var(--blanc);text-decoration:none;color:#152532}
.navigation-pages .current{background:var(--nuit);color:#fff}

@media (min-width:720px){
  .breves{grid-template-columns:repeat(3,1fr)}
  .ligne{grid-template-columns:220px 1fr;align-items:start;gap:20px}
  .amarres{grid-template-columns:repeat(3,1fr)}
  .hisser h1{font-size:38px}
}
@media (min-width:1000px){
  .feuillet{padding:34px 46px 44px;max-width:820px}
  .feuillet h1{font-size:37px}
}