/* ==========================================================================
   A.S.I.M.O.V. : feuille de style unique, partagee par toutes les pages.
   Identite conservee du site precedent : fond grege, colonne centrale plus
   claire, filet bleu acier en haut de page, bleu nuit pour le texte, ocre pour
   les grands chiffres. Trois familles seulement : Fraunces, IBM Plex Sans,
   IBM Plex Mono.
   ========================================================================== */

:root {
  /* Couleurs ------------------------------------------------------------- */
  --grege:        #E4E0D4;   /* fond de la fenetre */
  --papier:       #EDEAE1;   /* colonne centrale, legerement plus claire */
  --carte:        #E3E7E4;   /* fond des cartes */
  --encre:        #1C2B38;   /* bleu nuit, texte et boutons pleins */
  --encre-douce:  #4A5A68;
  --acier:        #2C6E9E;   /* bleu acier, accents */
  --acier-profond:#1B4A6B;
  --filet:        #C4BCAC;
  --pastille:     #DCE6EC;
  --pastille-encre:#1B4A6B;
  --ocre:         #B4712C;   /* grands chiffres */
  --ocre-clair:   #C98B45;

  /* Une seule echelle d'espacement, reutilisee partout ------------------- */
  --e1: 4px;   --e2: 8px;   --e3: 12px;  --e4: 16px;  --e5: 24px;
  --e6: 32px;  --e7: 48px;  --e8: 64px;  --e9: 88px;  --e10: 120px;

  --rythme: var(--e9);       /* respiration entre deux sections */
  --largeur-page: 1040px;    /* largeur de la colonne centrale */
  --marge-page: var(--e8);
  --lecture: 68ch;           /* largeur de lecture du texte courant */
  --hauteur-nav: 66px;
  --rayon: 2px;

  /* Typographie ---------------------------------------------------------- */
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--grege);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--acier);
  outline-offset: 3px;
  border-radius: 1px;
}

.evitement {
  position: absolute; left: var(--e4); top: -100px; z-index: 100;
  background: var(--encre); color: var(--papier);
  font-family: var(--mono); font-size: 13px;
  padding: var(--e3) var(--e4); border-radius: var(--rayon);
  transition: top .15s;
}
.evitement:focus { top: var(--e3); }

/* --------------------------------------------------------------------------
   En-tete
   -------------------------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--hauteur-nav);
  background: rgba(237, 234, 225, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--filet);
}

.nav-inner {
  max-width: var(--largeur-page); margin: 0 auto; height: 100%;
  padding: 0 var(--e6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e5);
}

.nav-marque {
  font-family: var(--serif); font-weight: 600; font-size: 19px;
  letter-spacing: 0.05em; text-decoration: none; white-space: nowrap;
}

.nav-liens { display: flex; align-items: center; gap: var(--e5); }

.nav-liens a {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.07em;
  color: var(--encre-douce); text-decoration: none; text-transform: uppercase;
  padding: var(--e1) 0; border-bottom: 1.5px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.nav-liens a:hover { color: var(--acier-profond); border-color: var(--acier); }
.nav-liens a[aria-current="page"] { color: var(--encre); border-color: var(--acier); }

.nav-cta {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.02em;
  color: var(--papier); background: var(--acier-profond);
  text-decoration: none; white-space: nowrap;
  padding: var(--e2) var(--e4); border-radius: var(--rayon);
  transition: background .15s;
}
.nav-cta:hover { background: var(--acier); }

.nav-langue {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.07em;
  color: var(--encre-douce); white-space: nowrap;
}
.nav-langue a { text-decoration: none; }
.nav-langue a:hover { color: var(--acier-profond); }
.nav-langue [aria-current] { color: var(--encre); font-weight: 500; }
.nav-langue span { opacity: 0.45; margin: 0 var(--e1); }

.nav-fin { display: flex; align-items: center; gap: var(--e3); flex: 0 0 auto; }

/* Bouton du menu repliable, masque au-dessus de 900 px */
.nav-bascule {
  display: none; width: 40px; height: 40px; padding: 0;
  background: transparent; border: 1px solid var(--filet);
  border-radius: var(--rayon); color: var(--encre);
  align-items: center; justify-content: center; cursor: pointer;
}
.nav-bascule svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; }
.nav-bascule .croix { display: none; }
.nav-bascule[aria-expanded="true"] .barres { display: none; }
.nav-bascule[aria-expanded="true"] .croix { display: block; }

/* --------------------------------------------------------------------------
   Colonne de page
   -------------------------------------------------------------------------- */

.page {
  max-width: var(--largeur-page); margin: 0 auto;
  background: var(--papier);
  padding: var(--e9) var(--marge-page) var(--e9);
  position: relative;
}
.page::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 6px; background: var(--acier); z-index: 1;
}

section { scroll-margin-top: calc(var(--hauteur-nav) + var(--e3)); }
.section + .section { margin-top: var(--rythme); }

/* Filet de separation entre deux sections */
.separateur { width: 100%; margin: var(--rythme) 0; display: block; }
.separateur svg { width: 100%; height: 16px; display: block; }
.separateur line { stroke: var(--filet); }
.separateur .milieu { stroke: var(--acier); }

/* --------------------------------------------------------------------------
   Hierarchie typographique : surtitre, titre, chapo, texte.
   Memes tailles d'une page a l'autre.
   -------------------------------------------------------------------------- */

.surtitre {
  display: flex; align-items: center; gap: var(--e3);
  margin: 0 0 var(--e5);
  font-family: var(--mono); font-size: 15px; letter-spacing: 0.14em;
  color: var(--acier-profond); font-weight: 500; text-transform: uppercase;
}
.surtitre::before {
  content: ""; width: 12px; height: 12px; flex: 0 0 auto; background: var(--acier);
}
/* La mention legale de l'accroche n'est pas un titre de section : elle reste
   a sa taille d'origine, discrete au-dessus du sigle. */
.surtitre-nu { display: block; font-size: 12px; }
.surtitre-nu::before { content: none; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; color: var(--encre); margin: 0; }

.titre-page { font-size: 46px; line-height: 1.12; letter-spacing: -0.01em; margin-bottom: var(--e5); }
.titre-section { font-size: 31px; line-height: 1.2; margin-bottom: var(--e5); }
.titre-carte { font-size: 21px; line-height: 1.3; margin-bottom: var(--e3); }

.chapo {
  font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.6;
  color: var(--encre); max-width: var(--lecture); margin: 0 0 var(--e6);
}

.texte { font-size: 17px; line-height: 1.75; max-width: var(--lecture); margin: 0 0 var(--e5); }
.texte:last-child { margin-bottom: 0; }

.intertitre {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em;
  color: var(--acier-profond); font-weight: 500; text-transform: uppercase;
  margin: 0 0 var(--e3);
}

.mention { font-size: 13.5px; line-height: 1.6; color: var(--encre-douce); max-width: var(--lecture); }
.source {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.02em;
  color: var(--encre-douce);
}
.source a { color: var(--acier-profond); }

/* --------------------------------------------------------------------------
   Accroche de l'accueil
   -------------------------------------------------------------------------- */

.accroche { text-align: center; padding-bottom: var(--e2); }
.accroche .surtitre { justify-content: center; }
.titre-marque {
  font-family: var(--serif); font-weight: 600; font-size: 66px; line-height: 1.02;
  letter-spacing: 0.05em; margin: 0 0 var(--e4);
}
.nom-complet {
  font-size: 16px; line-height: 1.55; color: var(--encre-douce);
  max-width: 34em; margin: 0 auto var(--e7); text-wrap: balance;
}
/* Version anglaise : le nom de l'association reste en francais, sa traduction
   suit juste en dessous, en plus discret. Sans :has(), l'ecart reste celui du
   nom seul : c'est un peu plus aere, rien de casse. */
.nom-traduction {
  font-size: 14px; line-height: 1.55; color: var(--encre-douce);
  max-width: 34em; margin: 0 auto var(--e7); opacity: 0.9; text-wrap: balance;
}
.nom-complet:has(+ .nom-traduction) { margin-bottom: var(--e2); }

.accroche-phrase {
  font-family: var(--serif); font-weight: 600; font-size: 29px; line-height: 1.4;
  max-width: 24em; margin: 0 auto var(--e5);
}
.accroche-phrase-2 { color: var(--encre-douce); }
.accroche-texte {
  /* 44em : le texte tombe sur quatre lignes pleines, sans mot esseule en bas.
     Mesure a 1440 px ; plus etroit, il se replie tout seul. */
  font-size: 16px; line-height: 1.75; color: var(--encre-douce);
  max-width: 44em; margin: 0 auto var(--e8); text-wrap: pretty;
}
.accroche .vu-dans { justify-content: center; }

/* --------------------------------------------------------------------------
   Liens et boutons
   -------------------------------------------------------------------------- */

.lien-lecture {
  display: inline-flex; align-items: baseline; gap: var(--e2);
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.03em;
  color: var(--acier-profond); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
  transition: border-color .15s, color .15s;
}
.lien-lecture::after { content: "\2192"; transition: transform .15s; }
.lien-lecture:hover { border-color: var(--acier); }
.lien-lecture:hover::after { transform: translateX(3px); }

.boutons { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }

.bouton {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.02em;
  text-decoration: none; padding: var(--e3) var(--e5);
  border-radius: var(--rayon); border: 1px solid var(--acier-profond);
  background: var(--acier-profond); color: var(--papier);
  transition: background .15s, border-color .15s, color .15s;
  cursor: pointer;
}
.bouton:hover { background: var(--acier); border-color: var(--acier); }
.bouton:active { background: var(--acier-profond); }

.bouton-filaire { background: transparent; color: var(--acier-profond); }
.bouton-filaire:hover { background: var(--pastille); border-color: var(--acier); color: var(--acier-profond); }

.bouton-clair { background: var(--papier); border-color: var(--papier); color: var(--encre); }
.bouton-clair:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--encre); }

.bouton svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none;
  stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* --------------------------------------------------------------------------
   Cartes
   -------------------------------------------------------------------------- */

.grille { display: grid; gap: var(--e5); }
.grille-2 { grid-template-columns: repeat(2, 1fr); }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
.grille-4 { grid-template-columns: repeat(4, 1fr); }
.grille-5 { grid-template-columns: repeat(5, 1fr); }
/* L equipe : cinq portraits. Cinq colonnes dans la largeur de la page seraient
   trop etroites (les noms casseraient en deux), on pose donc trois cartes puis
   deux, la seconde rangee centree sous la premiere. Six colonnes servent de
   trame, chaque carte en occupe deux. */
.grille-equipe { grid-template-columns: repeat(6, 1fr); }
.grille-equipe > .membre { grid-column: span 2; }
.grille-equipe > .membre:nth-child(4) { grid-column: 2 / span 2; }

.carte {
  background: var(--carte); border-top: 3px solid var(--acier);
  border-radius: 0 0 var(--rayon) var(--rayon);
  padding: var(--e5) var(--e5) var(--e5);
  display: flex; flex-direction: column;
}
.carte p { margin: 0 0 var(--e4); font-size: 15px; line-height: 1.65; color: var(--encre-douce); }
.carte p:last-child { margin-bottom: 0; }
.carte .lien-lecture { margin-top: auto; align-self: flex-start; padding-top: var(--e3); }

.numero-carte {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em;
  color: var(--encre-douce); display: block; margin-bottom: var(--e3);
}

.etiquette {
  display: inline-block; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pastille-encre); background: var(--pastille);
  padding: var(--e1) var(--e2); border-radius: var(--rayon);
}

/* --------------------------------------------------------------------------
   Grands chiffres, motif recurrent du site
   -------------------------------------------------------------------------- */

.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e6); }
.chiffre-n {
  display: block; font-family: var(--serif); font-weight: 600;
  font-size: 58px; line-height: 1; color: var(--ocre);
  margin-bottom: var(--e3); letter-spacing: -0.01em;
}
.chiffre-l { display: block; font-size: 15px; line-height: 1.6; color: var(--encre-douce); }
.chiffres { margin: var(--e7) 0 var(--e5); }
.chiffres-source {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e5);
  margin: 0; padding-top: var(--e4); border-top: 1px solid var(--filet);
}

/* Question en italique sous le titre d'une carte d'axe */
.carte-question {
  font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 15px;
  color: var(--acier-profond) !important; margin: 0 0 var(--e3) !important;
}

.lien-contact {
  font-family: var(--mono); font-size: 13px; color: var(--acier-profond);
  text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s;
}
.lien-contact:hover { border-color: var(--acier); }

/* --------------------------------------------------------------------------
   Portraits du bureau
   -------------------------------------------------------------------------- */

.portrait {
  width: 100%; aspect-ratio: 10 / 11; object-fit: cover;
  border-radius: var(--rayon) var(--rayon) 0 0;
  filter: saturate(0.9);
  transition: filter .35s ease;
}
.membre:hover .portrait, .membre:focus-within .portrait { filter: saturate(1); }
.membre { display: flex; flex-direction: column; }
.membre-corps { background: var(--carte); border-top: 3px solid var(--acier); padding: var(--e4); flex: 1; }
.membre-nom { font-family: var(--serif); font-weight: 600; font-size: 18px; margin: 0 0 var(--e1); }
.membre-role { font-family: var(--mono); font-size: 11px; line-height: 1.5;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--acier-profond);
  margin: 0 0 var(--e3); min-height: 33px; }
/* Les fonctions tiennent sur une ou deux lignes : on reserve les deux, pour que
   les biographies partent toutes de la meme ligne. Une carte sans fonction
   reserve la meme hauteur. Sans :has(), sa biographie remonte, sans casse. */
.membre-nom:not(:has(+ .membre-role)) { margin-bottom: calc(var(--e1) + 33px + var(--e3)); }
.membre-bio { font-size: 14px; line-height: 1.6; color: var(--encre-douce); margin: 0; }

/* --------------------------------------------------------------------------
   Encadres
   -------------------------------------------------------------------------- */

.encadre {
  background: var(--carte); border-left: 4px solid var(--acier);
  padding: var(--e5) var(--e6); border-radius: var(--rayon);
}
.encadre-sombre {
  background: var(--encre); color: var(--papier);
  padding: var(--e7) var(--e7); border-radius: var(--rayon); border: none;
}
.encadre-sombre h2, .encadre-sombre h3 { color: var(--papier); }
.encadre-sombre p { color: rgba(237, 234, 225, 0.82); }

.citation {
  border-left: 4px solid var(--acier); padding: var(--e1) 0 var(--e1) var(--e5);
  font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.7;
  max-width: var(--lecture); margin: 0;
}

/* --------------------------------------------------------------------------
   Frise verticale des rendez-vous
   -------------------------------------------------------------------------- */

.frise { list-style: none; margin: 0; padding: 0; position: relative; }
.frise::before {
  content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px;
  width: 1px; background: var(--filet);
}
.frise-item { position: relative; padding: 0 0 var(--e7) var(--e6); }
.frise-item:last-child { padding-bottom: 0; }
.frise-item::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 11px; height: 11px; background: var(--acier); border-radius: 50%;
  box-shadow: 0 0 0 4px var(--papier);
}
.frise-cadence {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--encre-douce); margin-bottom: var(--e2);
}
.frise-titre { font-size: 21px; line-height: 1.3; margin: 0 0 var(--e3); }
.frise-item p { margin: 0 0 var(--e3); max-width: var(--lecture); color: var(--encre-douce); font-size: 15.5px; line-height: 1.65; }
.frise-detail { list-style: none; margin: var(--e4) 0 var(--e4); padding: 0; }
.frise-detail li {
  font-size: 14.5px; line-height: 1.6; color: var(--encre-douce);
  padding: var(--e3) 0; border-top: 1px solid var(--filet); max-width: var(--lecture);
}
.frise-detail li:last-child { border-bottom: 1px solid var(--filet); }
.frise-detail strong { color: var(--encre); font-weight: 600; }

/* --------------------------------------------------------------------------
   Cartes de parution
   -------------------------------------------------------------------------- */

.parution { display: flex; flex-direction: column; }
.parution-tete { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--e3); margin-bottom: var(--e3); }
.parution-journal { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 18px; color: var(--encre); }
.parution-date { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--encre-douce); }
.parution-titre { font-size: 20px; line-height: 1.3; margin: 0 0 var(--e2); }
.parution-signature { font-size: 13.5px; color: var(--encre-douce); margin: 0 0 var(--e3); }
.parution-resume { font-size: 14.5px; line-height: 1.65; color: var(--encre-douce); margin: 0 0 var(--e4); }

/* Version anglaise : le titre reste en francais entre guillemets, sa
   traduction suit en italique, et la langue de l'article est annoncee juste
   au-dessus du lien. */
.parution-traduction {
  font-size: 14.5px; line-height: 1.45; color: var(--encre-douce); margin: 0 0 var(--e3);
}
.parution-titre:has(+ .parution-traduction) { margin-bottom: var(--e1); }
.parution-pied { margin-top: auto; padding-top: var(--e3); }
.parution-pied .lien-lecture { margin-top: 0; padding-top: 0; }
.parution-langue {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--encre-douce); margin: 0 0 var(--e2);
}

.parution-une { grid-column: 1 / -1; }
.parution-une .parution-titre { font-size: 28px; }
.parution-une .parution-resume { max-width: var(--lecture); font-size: 15.5px; }
.parution-une .parution-traduction { font-size: 16.5px; }

/* --------------------------------------------------------------------------
   Bandeau de credibilite
   -------------------------------------------------------------------------- */

.vu-dans {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--e3);
  font-size: 15px; color: var(--encre-douce);
}
.vu-dans-l {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--encre-douce);
}
.vu-dans a {
  font-family: var(--serif); font-style: italic; font-size: 17px;
  color: var(--acier-profond); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color .15s;
}
.vu-dans a:hover { border-color: var(--acier); }
.vu-dans .point { opacity: 0.5; }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.pied { background: var(--papier); }
.pied-inner {
  max-width: var(--largeur-page); margin: 0 auto;
  padding: var(--e8) var(--marge-page) var(--e6);
  border-top: 1px solid var(--filet);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--e6);
}
.pied-titre { font-family: var(--serif); font-weight: 600; font-size: 19px; letter-spacing: 0.05em; margin: 0 0 var(--e3); }
.pied p { margin: 0 0 var(--e2); font-size: 13.5px; line-height: 1.6; color: var(--encre-douce); }
.pied-rubrique {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--encre-douce); margin: 0 0 var(--e4);
}
.pied-traduction { display: inline-block; margin-top: 2px; font-size: 12.5px; opacity: 0.85; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: var(--e2); }
.pied li a, .pied-contact a {
  font-size: 14px; color: var(--encre); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color .15s;
}
.pied li a:hover, .pied-contact a:hover { border-color: var(--acier); }
.pied-contact a { display: inline-block; margin-bottom: var(--e2); }

.pied-membre {
  display: inline-flex; align-items: center; gap: var(--e2); margin-top: var(--e3);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.05em;
  color: var(--encre-douce); text-decoration: none;
  border: 1px solid var(--filet); border-radius: var(--rayon);
  padding: var(--e2) var(--e3); transition: border-color .15s, color .15s;
}
.pied-membre:hover { border-color: var(--acier); color: var(--acier-profond); }
.pied-membre svg { width: 13px; height: 13px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.pied-bas {
  max-width: var(--largeur-page); margin: 0 auto;
  padding: var(--e5) var(--marge-page) var(--e7);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--encre-douce);
}
.pied-bas a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.pied-bas a:hover { border-color: var(--filet); }

/* --------------------------------------------------------------------------
   Apparition au defilement, tres discrete
   -------------------------------------------------------------------------- */

.js .apparait { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .apparait.vu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .apparait { opacity: 1; transform: none; transition: none; }
  .lien-lecture::after, .portrait, .bouton, .nav-liens a { transition: none; }
}

/* --------------------------------------------------------------------------
   Largeurs intermediaires
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  :root { --marge-page: var(--e7); }
}

@media (max-width: 900px) {
  :root { --rythme: var(--e8); --marge-page: var(--e5); }

  .nav-bascule { display: flex; }

  /* Panneau plein ecran, sobre */
  .nav-liens {
    position: absolute; top: 100%; left: 0; right: 0;
    height: calc(100vh - var(--hauteur-nav));
    height: calc(100dvh - var(--hauteur-nav));
    background: var(--papier);
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: 0; padding: var(--e6) var(--e5);
    border-top: 1px solid var(--filet);
    overflow-y: auto;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }
  .nav-liens[data-ouvert="true"] { opacity: 1; transform: none; pointer-events: auto; }
  .nav-liens > a {
    width: 100%; font-size: 13px; padding: var(--e4) 0;
    border-bottom: 1px solid var(--filet);
  }
  .nav-langue { padding: var(--e4) 0; font-size: 12.5px; }
  .nav-langue a { border-bottom: none; padding: 0; }
  /* Le bouton Rejoindre reste visible dans la barre, hors du panneau */
  .nav-cta-mobile { display: inline-flex; }

  .titre-page { font-size: 34px; }
  .titre-section { font-size: 25px; }
  .chapo { font-size: 19px; }
  .chiffre-n { font-size: 46px; }
  .titre-marque { font-size: 46px; }
  .accroche-phrase { font-size: 24px; }
  .frise-titre { font-size: 19px; }

  .grille-3, .grille-4, .grille-5 { grid-template-columns: repeat(2, 1fr); }
  .grille-equipe { grid-template-columns: repeat(2, 1fr); }
  .grille-equipe > .membre, .grille-equipe > .membre:nth-child(4) { grid-column: auto; }
  .chiffres { grid-template-columns: 1fr; gap: var(--e5); }
  .pied-inner { grid-template-columns: 1fr 1fr; gap: var(--e6); }
}

@media (max-width: 620px) {
  :root { --marge-page: var(--e4); }
  .titre-page { font-size: 29px; }
  .titre-section { font-size: 23px; }
  .chapo { font-size: 18px; }
  .titre-marque { font-size: 38px; }
  .accroche-phrase { font-size: 21px; }
  .chiffres-source { gap: var(--e3); }
  .grille-2, .grille-3, .grille-4, .grille-5 { grid-template-columns: 1fr; }
  /* L equipe garde deux colonnes meme sur telephone : a cinq portraits pleine
     largeur, la section ferait quatre ecrans de haut. Les noms passent alors
     sur deux lignes, on leur reserve la hauteur pour que les fonctions et les
     biographies d une meme rangee restent alignees. */
  .grille-equipe { grid-template-columns: repeat(2, 1fr); gap: var(--e4); }
  .grille-equipe .membre-nom { min-height: 3.5em; }
  .grille-equipe .membre-role { min-height: 66px; }   /* la plus longue fait quatre lignes ici */
  .grille-equipe .membre-corps { padding: var(--e3); }
  .pied-inner { grid-template-columns: 1fr; gap: var(--e5); }
  .encadre { padding: var(--e5); }
  .encadre-sombre { padding: var(--e5); }
}

/* --------------------------------------------------------------------------
   Filtres de la page « Dans les médias »
   -------------------------------------------------------------------------- */

.filtres { display: none; }
.js .filtres { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e6); }
.filtre {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.03em;
  color: var(--encre-douce); background: transparent; cursor: pointer;
  border: 1px solid var(--filet); border-radius: var(--rayon);
  padding: var(--e2) var(--e4); transition: background .15s, border-color .15s, color .15s;
}
.filtre:hover { border-color: var(--acier); color: var(--acier-profond); }
.filtre[aria-pressed="true"] {
  background: var(--pastille); border-color: var(--acier); color: var(--pastille-encre);
}
.filtre-vide { font-size: 15px; color: var(--encre-douce); margin: 0 0 var(--e5); }

.parutions .parution h2 { margin-top: 0; }
.parution-une { grid-column: 1 / -1; }
.parution-une .parution-titre { font-size: 27px; }
.parution-une .parution-resume { max-width: var(--lecture); font-size: 15.5px; }
@media (max-width: 620px) {
  .parution-une .parution-titre { font-size: 21px; }
}

/* --------------------------------------------------------------------------
   La Lettre A.S.I.M.O.V.
   -------------------------------------------------------------------------- */

/* En-tete facon titre de presse : le nom entre deux filets */
.manchette {
  text-align: center; margin: var(--e5) 0 var(--e8);
  border-top: 1px solid var(--encre); border-bottom: 1px solid var(--encre);
  padding: var(--e5) 0 var(--e4);
}
.manchette-titre {
  font-family: var(--serif); font-weight: 600; font-size: 54px; line-height: 1.05;
  letter-spacing: 0.01em; margin: 0 0 var(--e3);
}
.manchette-ligne {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--encre-douce); margin: 0;
}

.rubrique { border-top: 1px solid var(--filet); padding-top: var(--e4); }
.rubrique-n {
  display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em;
  color: var(--ocre); margin-bottom: var(--e3);
}
.rubrique p { font-size: 15px; line-height: 1.65; color: var(--encre-douce); margin: 0; }

.inscription { max-width: 46em; }
.inscription .titre-section { margin-bottom: var(--e3); }
.inscription p { font-size: 16px; line-height: 1.7; margin: 0; max-width: 38em; }
.inscription-mention {
  font-size: 12.5px !important; line-height: 1.6; margin-top: var(--e5) !important;
  color: rgba(237, 234, 225, 0.62) !important;
}

.vide {
  border: 1px dashed var(--filet); border-radius: var(--rayon);
  padding: var(--e7) var(--e6); text-align: center;
}
.vide p {
  margin: 0; font-family: var(--serif); font-weight: 500; font-size: 19px;
  color: var(--encre-douce);
}

.numeros { list-style: none; margin: 0; padding: 0; }
.numero { border-top: 1px solid var(--filet); padding: var(--e5) 0; }
.numero:last-child { border-bottom: 1px solid var(--filet); }
.numero-tete { display: flex; align-items: baseline; gap: var(--e3); margin-bottom: var(--e2); }
.numero-rang { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--ocre); }
.numero-date { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--encre-douce); }
.numero-titre { font-size: 23px; line-height: 1.3; margin: 0 0 var(--e3); }
.numero-sommaire { margin: 0 0 var(--e4); padding-left: var(--e5); }
.numero-sommaire li { font-size: 14.5px; line-height: 1.7; color: var(--encre-douce); }

@media (max-width: 900px) {
  .manchette { margin: var(--e8) 0 var(--e7); }
  .manchette-titre { font-size: 36px; }
}
@media (max-width: 620px) {
  .manchette-titre { font-size: 28px; }
  .manchette-ligne { font-size: 10px; letter-spacing: 0.12em; }
}

/* --------------------------------------------------------------------------
   Synthèse d'un dîner
   -------------------------------------------------------------------------- */

.diner-lieu {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--encre-douce); margin: 0 0 var(--e6);
}

.enseignements { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.enseignement {
  display: grid; grid-template-columns: 56px 1fr; gap: var(--e4);
  padding: var(--e5) 0; border-top: 1px solid var(--filet);
}
.enseignement:last-child { border-bottom: 1px solid var(--filet); }
.enseignement-n {
  font-family: var(--serif); font-weight: 600; font-size: 22px; line-height: 1.3;
  color: var(--ocre);
}
.enseignement-t {
  font-family: var(--serif); font-weight: 600; font-size: 19px; line-height: 1.35;
  margin: 0 0 var(--e2);
}
.enseignement p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--encre-douce); max-width: var(--lecture); }

.cahier { max-width: 46em; }
.cahier p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--encre-douce); }

@media (max-width: 620px) {
  .enseignement { grid-template-columns: 40px 1fr; gap: var(--e3); }
  .enseignement-n { font-size: 18px; }
  .enseignement-t { font-size: 17px; }
}

/* --------------------------------------------------------------------------
   Mentions légales
   -------------------------------------------------------------------------- */

.legal { max-width: var(--lecture); }
.legal h2 {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--acier-profond); font-weight: 500;
  margin: var(--e7) 0 var(--e3);
}
.legal h2:first-child { margin-top: 0; }
.legal p { font-size: 16px; line-height: 1.75; margin: 0 0 var(--e4); }
.legal a { color: var(--acier-profond); }
.legal-liste {
  display: grid; grid-template-columns: max-content 1fr; gap: var(--e2) var(--e5);
  margin: 0 0 var(--e4); padding: var(--e4) 0; border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
}
.legal-liste dt { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--encre-douce); }
.legal-liste dd { margin: 0; font-size: 15px; }
@media (max-width: 620px) {
  .legal-liste { grid-template-columns: 1fr; gap: var(--e1); }
  .legal-liste dd { margin-bottom: var(--e3); }
}

/* --------------------------------------------------------------------------
   Espace membre
   -------------------------------------------------------------------------- */

.porte-form { max-width: 24em; margin-top: var(--e6); }
.porte-label {
  display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--encre-douce); margin-bottom: var(--e2);
}
.porte-champ { display: flex; gap: var(--e2); }
.porte-champ input {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--sans); font-size: 16px; color: var(--encre);
  background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon);
  padding: var(--e3) var(--e4);
}
.porte-champ input:focus-visible { border-color: var(--acier); }
.porte-voir {
  flex: 0 0 auto; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--encre-douce); background: transparent;
  border: 1px solid var(--filet); border-radius: var(--rayon); padding: 0 var(--e3);
  transition: border-color .15s, color .15s;
}
.porte-voir:hover { border-color: var(--acier); color: var(--acier-profond); }
.porte-err {
  font-family: var(--mono); font-size: 12px; color: #9E2C2C;
  margin: var(--e3) 0 0;
}