/* ---------------------------------------------------------------------
   WATER START — charte commune aux trois pages
   Ce fichier ne contient QUE les règles strictement identiques dans les
   trois gabarits d'origine. Aucune valeur n'a été modifiée : c'est un
   déplacement de code. Les règles qui différaient d'une page à l'autre
   (marges de .ligne-eau, .banniere et footer, .texte, .trois, les
   media queries) sont restées dans le <style> de chaque page.

   Une seule media query vit ici, et elle est venue après : celle du menu
   repliable du bandeau. Le bandeau étant le même sur les quatre pages, sa
   version petit écran l'est aussi ; la recopier quatre fois aurait fait
   quatre occasions de la faire diverger.
   --------------------------------------------------------------------- */

:root{
  --bleu:#0E3D52;
  --turquoise:#2E8FA6;
  --bleu-pale:#9CC6D1;
  --fond:#F4F8F9;
  --rouge:#E8422E;
  --jaune:#FFC629;
  --texte:#12262F;
  --gris:#5B7A85;
  --trait:#DDE5E8;
  --serif:"Newsreader",Georgia,serif;
  --sans:"Public Sans","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--texte);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
.large{max-width:1120px;margin:0 auto;padding:0 32px}

/* ---------- EN-TETE ---------- */
header{border-bottom:1px solid var(--trait);background:#fff;position:sticky;top:0;z-index:10}
.bandeau{display:flex;align-items:center;justify-content:space-between;height:96px}
.marque{display:flex;align-items:center;gap:1px;text-decoration:none}
.marque .bloc-mot{display:flex;flex-direction:column}
.marque .haut{display:flex;align-items:flex-start;gap:9px}
.marque .mot{font-family:"Michroma",var(--sans);font-size:19px;font-weight:400;color:var(--bleu);letter-spacing:0;line-height:1.15}
.marque .base{display:flex;align-items:center;gap:9px;margin-top:6px;padding-left:16px}
.marque .base span{font-size:11.5px;color:var(--gris);letter-spacing:2.4px}
.marque .base i{display:block;border-radius:50%}
nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0}
nav a{text-decoration:none;font-size:15px;color:var(--gris);padding-bottom:3px;border-bottom:2px solid transparent}
nav a:hover,nav a.actif{color:var(--bleu);border-bottom-color:var(--turquoise)}

/* ---------- UNE ENTREE DE MENU QUI N'A PAS ENCORE DE DESTINATION ----------
   « Emploi » et « Devenir redacteur », decides par Erwan le 10/09/2026 :
   ils restent au bandeau, et disent au survol qu'ils viennent.

   ⚠️ CE N'EST PLUS UN `<a>`, ET C'EST LE POINT PRINCIPAL. Ces deux entrees
   etaient des liens vers `#` : cliquer dessus renvoyait en haut de page, ce
   qui ressemble a une panne. Un `<span>` ne promet rien. Il porte
   `tabindex="0"` pour rester atteignable au clavier — sans quoi la mention
   serait reservee a ceux qui ont une souris.

   ⚠️ LA MENTION EST MASQUEE PAR `opacity`, JAMAIS PAR `visibility` NI
   `display`. La difference n'est pas cosmetique : `visibility:hidden` et
   `display:none` retirent le texte de l'arbre d'accessibilite, et un lecteur
   d'ecran annoncerait « Emploi » sans rien de plus. Avec `opacity:0` le
   texte reste lu — « Emploi Prochainement » — tout en etant invisible a
   l'oeil. Une seule source de texte, deux publics servis. */
nav .bientot{
  position:relative;font-size:15px;color:var(--gris);
  padding-bottom:3px;border-bottom:2px solid transparent;cursor:default;
}
nav .bientot i{
  position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);
  white-space:nowrap;font-style:normal;
  background:var(--bleu);color:#fff;
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 11px;opacity:0;transition:opacity .15s;pointer-events:none;
}
/* La pointe de l'infobulle. Purement decorative, donc en pseudo-element. */
nav .bientot i::before{
  content:"";position:absolute;left:50%;bottom:100%;transform:translateX(-50%);
  border:5px solid transparent;border-bottom-color:var(--bleu);
}
/* ⚠️ `:focus` ET NON `:focus-visible` POUR LA BULLE — mesure faite le
   10/09/2026, et le contraire ne fonctionnait pas. `:focus-visible` est une
   heuristique du navigateur : sur un `<span>`, il ne se declenche pas de
   facon fiable, et la bulle ne s'ouvrait pas au clavier. `:focus` s'ouvre
   aussi au clic, ce qui n'est pas un defaut : c'est un second moyen de lire
   la mention. Le contour de mise au point, lui, reste en `:focus-visible` —
   la ou l'heuristique a un sens : ne pas cerner un element qu'on vient de
   cliquer a la souris. */
nav .bientot:hover i,nav .bientot:focus i{opacity:1}
nav .bientot:hover{color:var(--bleu)}
nav .bientot:focus-visible{outline:2px solid var(--turquoise);outline-offset:3px}

/* ⚠️ SUR UN ECRAN TACTILE, IL N'Y A PAS DE SURVOL — la lecon du bloc
   « Publiez ICI » du 07/09/2026, qui avait exactement ce defaut. Sans cette
   requete, l'infobulle ne s'afficherait JAMAIS sur telephone : l'entree y
   resterait muette, sans rien pour dire qu'elle n'aboutit pas.
   La bulle devient donc une mention en clair, permanente et discrete, posee
   a la suite du libelle. Le menu deplie a la place de l'accueillir. */
@media (hover: none){
  nav .bientot i{
    position:static;transform:none;opacity:1;
    background:none;color:var(--bleu-pale);
    font-size:11.5px;letter-spacing:0;text-transform:none;
    padding:0 0 0 8px;
  }
  nav .bientot i::before{display:none}
}

/* ---------- MENU REPLIABLE, PETIT ECRAN ----------
   Au-dessus du point de rupture du site (900px), ce bloc ne produit RIEN :
   le bouton n'existe pas a l'ecran et le bandeau reste celui d'origine.
   Sous 900px, les sept entrees quittent la ligne du logotype et se rangent
   les unes sous les autres, sous le bandeau.

   Sans JavaScript, la liste reste depliee : le bandeau ne deborde plus, les
   sept entrees restent atteignables. C'est `fil.js` qui, quand il tourne,
   montre le bouton et replie la liste. Le bouton porte donc `hidden` dans le
   HTML : un bouton que rien ne fait fonctionner ne s'affiche pas. */
.bouton-menu{display:none}

@media(max-width:900px){
  /* La liste depliee passe a la ligne au lieu de se serrer a cote du
     logotype. Les 96px du bandeau se reportent sur sa premiere ligne : sans
     cela, ouvrir le menu ferait remonter le logotype d'une vingtaine de
     pixels, le bandeau se resserrant sur son contenu. */
  .bandeau{flex-wrap:wrap;height:auto}
  .bandeau .marque,.bandeau .bouton-menu{height:96px}

  .bouton-menu{display:flex;align-items:center;justify-content:center;
    width:48px;margin-right:-10px;padding:0;
    background:none;border:0;color:var(--bleu);cursor:pointer}
  .bouton-menu[hidden]{display:none}
  .bouton-menu .barres{display:block;position:relative;width:24px;height:2px;background:currentColor}
  .bouton-menu .barres::before,.bouton-menu .barres::after{content:"";position:absolute;left:0;width:24px;height:2px;background:currentColor}
  .bouton-menu .barres::before{top:-7px}
  .bouton-menu .barres::after{top:7px}

  /* `header nav` et non `nav` : les media queries des pages posent encore
     `nav ul{gap:...}` et `nav a{font-size:...}` pour la barre horizontale.
     Le selecteur plus precis reprend la main sans qu'on touche aux pages. */
  header nav{flex-basis:100%;border-top:1px solid var(--trait)}
  header nav.replie{display:none}
  header nav ul{display:block;gap:0}
  header nav li+li{border-top:1px solid var(--trait)}
  /* `.bientot` suit les liens a la ligne pres : dans le menu deplie, une
     entree sans destination doit occuper exactement la meme place qu'une
     autre, sans quoi la liste se met a boiter. */
  header nav a,header nav .bientot{display:block;padding:15px 0 15px 14px;font-size:16px;
    border-bottom:0;border-left:3px solid transparent}
  header nav a:hover,header nav a.actif{color:var(--bleu);border-left-color:var(--turquoise)}
  header nav .bientot:hover{border-left-color:transparent}
}

/* ---------- TRES PETITS TELEPHONES ----------
   Le logotype pleine taille et le bouton tiennent cote a cote jusqu'a 364px.
   En dessous — un Galaxy S a 360px, un vieil iPhone a 320px — le bandeau
   deborderait de quelques pixels. Le logotype se reduit donc, et rien
   d'autre. Les deux dessins gardent leur `viewBox` : un SVG s'inscrit dans
   sa boite sans jamais s'etirer, le plot et le pavillon ne se deforment pas.
   Les flotteurs, dont les tailles sont ecrites dans le HTML, ne bougent pas :
   ce sont des pastilles, elles restent rondes. */
@media(max-width:370px){
  .marque>svg{width:38px;height:28px}
  .marque .haut>svg{width:11px;height:17px}
  .marque .haut{gap:7px}
  .marque .mot{font-size:14.5px}
  .marque .base{gap:6px;padding-left:12px;margin-top:5px}
  .marque .base span{font-size:10px;letter-spacing:1.2px}
}

/* ---------- LIGNE D'EAU, separateur ---------- */
/* la marge basse differe selon la page, elle est declaree page par page */
.ligne-eau{display:flex;align-items:center;gap:9px}
.ligne-eau i{display:block;border-radius:50%}

/* ---------- BANNIERE RESERVATION ---------- */
/* margin-top ajoute par les pages numero et article */
.banniere{background:var(--bleu);color:#fff;padding:52px 0}
.banniere .duo{display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center}
.banniere h2{font-family:var(--serif);font-size:31px;font-weight:500;margin:0 0 12px;line-height:1.25}
.banniere p{margin:0;color:#B9D6DE;max-width:58ch;font-size:17px}
.banniere a{display:inline-block;background:var(--jaune);color:#12262F;padding:16px 30px;text-decoration:none;font-weight:600;font-size:16.5px;white-space:nowrap}
.banniere a:hover{background:#fff}

/* ---------- PIED ---------- */
/* margin-top ajoute par les pages numero et article */
footer{background:var(--fond);border-top:1px solid var(--trait);padding:52px 0 40px;font-size:15px;color:var(--gris)}
.pied{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px}
footer h5{font-size:14px;color:var(--bleu);margin:0 0 12px;font-weight:600}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:8px}
footer a{text-decoration:none}
footer a:hover{color:var(--turquoise)}
.mentions{margin-top:40px;padding-top:22px;border-top:1px solid var(--trait);font-size:13.5px}