/* APE EELM — feuille de style unique, aucune dépendance.
 *
 * Organisation : variables, base, en-tête, navigation, contenu, blocs hérités
 * de WordPress, composants (agenda, pays), pied, écrans étroits, impression.
 *
 * Le bleu vient du logo de l'association (#1848a0, mesuré sur le monogramme) :
 * le site et sa papeterie parlent ainsi de la même couleur. */

:root{
  /* Encres */
  --ink:#152442;
  --ink-soft:#4d5c76;
  --ink-faint:#6f7d94;

  /* Fonds */
  --paper:#ffffff;
  --wash:#eef1f7;
  --line:#d6dce8;
  --line-soft:#e6eaf2;

  /* Bleu de l'association */
  --blue:#1848a0;
  --blue-dk:#123a83;
  --blue-tint:#e8eefa;

  /* Accent */
  --ochre:#d9962a;

  --wrap:1120px;

  /* Deux tailles de petit texte, et deux seulement.
     Il y en avait cinq (.82 .85 .88 .92 .95rem), sans regle qui dise laquelle
     employer : cinq nuances de « un peu plus petit » que rien ne distinguait
     a l'oeil. */
  --fs-s:.92rem;    /* texte secondaire : legendes, mentions, tableaux */
  --fs-xs:.82rem;   /* etiquettes en capitales : rubriques, dates */

  --radius:6px;
  --radius-lg:10px;
  --shadow:0 1px 2px rgba(21,36,66,.06), 0 8px 24px rgba(21,36,66,.07);
}

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

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* L'en-tête est collant : sans cette marge, une ancre interne (« Back to
   navigation » des fiches pays) amène le titre visé SOUS l'en-tête. */
html{scroll-padding-top:96px}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Atkinson Hyperlegible",system-ui,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6{
  font-family:"Bricolage Grotesque","Atkinson Hyperlegible",sans-serif;
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.015em;
  margin:0 0 .5em;
  text-wrap:balance;
}

a{color:var(--blue);text-underline-offset:.18em;text-decoration-thickness:.07em}
a:hover{color:var(--blue-dk)}

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

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

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--ink);color:#fff;padding:12px 18px;z-index:60;
  font-weight:700;text-decoration:none;
}
.skip:focus{left:0}

/* ---------- en-tête ---------- */

.masthead{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  /* Filet aux couleurs de l'association, en haut de chaque page. */
  border-top:4px solid var(--blue);
}

.masthead-in{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding-block:16px;
}

.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}

/* Le monogramme « P » de l'association, dessiné au pinceau. */
.brand-mark{
  flex:0 0 auto;width:38px;height:44px;
  background:url("img/ape-monogram.png") center/contain no-repeat;
}

.brand-txt{
  display:flex;flex-direction:column;line-height:1.25;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:20px;
  letter-spacing:-.01em;
}

.brand-txt em{
  font-family:"Atkinson Hyperlegible",sans-serif;
  font-style:normal;font-weight:400;font-size:13px;color:var(--ink-soft);
  letter-spacing:0;margin-top:2px;
}

/* Sélecteur de langue : les deux langues toujours visibles, pour qu'une
   famille non francophone repère « en » sans avoir à ouvrir un menu. */
.langpair{
  display:flex;margin:0;flex:0 0 auto;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:14px;
  text-transform:uppercase;letter-spacing:.06em;
}
.langpair .on,.langpair .off{padding:7px 14px;text-decoration:none;display:block}
.langpair .on{background:var(--blue);color:#fff}
.langpair .off{color:var(--blue);background:var(--paper)}
.langpair .off:hover{background:var(--blue-tint)}

/* ---------- navigation ---------- */

.mainnav{background:var(--wash);border-top:1px solid var(--line-soft)}

.mainnav ul{list-style:none;margin:0;padding:0}

.mainnav > .wrap > ul{display:flex;flex-wrap:wrap;gap:2px}

.mainnav a{
  display:block;padding:13px 16px;text-decoration:none;color:var(--ink);
  font-family:"Bricolage Grotesque",sans-serif;font-weight:500;font-size:16px;
}
.mainnav > .wrap > ul > li > a{border-bottom:3px solid transparent}
.mainnav a:hover{color:var(--blue);background:var(--blue-tint)}
.mainnav > .wrap > ul > li > a[aria-current]{
  border-bottom-color:var(--ochre);color:var(--blue);font-weight:700;
}

/* Bouton d'ouverture du menu. Il n'existe que sur petit écran : au-delà, le
   menu tient sur une ligne et n'a pas à être replié.

   La case à cocher est déplacée hors écran plutôt que masquée par display:none :
   un élément en display:none ne peut pas recevoir le focus, et le menu
   deviendrait inatteignable au clavier. */
.navtoggle{position:absolute;left:-9999px;width:1px;height:1px}
.navbtn{display:none}

.nav-item{position:relative}

.sub{
  display:none;position:absolute;top:100%;left:0;z-index:50;min-width:250px;
  background:var(--paper);border:1px solid var(--line);
  border-top:3px solid var(--blue);
  border-radius:0 0 var(--radius) var(--radius);
  padding:6px 0;box-shadow:var(--shadow);
}
/* :focus-within ouvre le menu au clavier, pas seulement à la souris. */
.nav-item:hover .sub,.nav-item:focus-within .sub{display:block}
.sub a{padding:9px 16px;font-size:15px}
.sub a:hover{background:var(--blue-tint)}
.sub a[aria-current]{color:var(--blue);font-weight:700;box-shadow:inset 3px 0 0 var(--ochre)}

/* ---------- accueil ---------- */

.hero{
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--blue-tint),var(--paper));
  padding-block:60px 52px;
}

.hero-kicker{
  margin:0 0 16px;color:var(--blue);font-size:14px;font-weight:700;
  font-family:"Bricolage Grotesque",sans-serif;
  text-transform:uppercase;letter-spacing:.08em;
}

.hero h1{font-size:clamp(2.1rem,5vw,3.2rem);margin-bottom:.35em}

.hero-lede{margin:0 0 30px;font-size:1.12rem;color:var(--ink-soft)}

.hero-act{margin:0;display:flex;flex-wrap:wrap;gap:12px}

/* ---------- contenu ---------- */

.prose{padding-block:40px 48px}

.page-title{font-size:clamp(1.8rem,3.6vw,2.5rem);margin-bottom:.7em}

.prose p{margin:0 0 1.15em}

/* Titres de section.
   Les marges sont en em : elles suivent la taille du titre, donc un intertitre
   discret ne s'entoure pas du même vide qu'un grand titre. 2,2 em faisaient
   58 px au-dessus d'un h2, auxquels s'ajoutait la marge du bloc précédent. */
.prose h2{font-size:1.55rem;margin-top:1.5em}
.prose h3{font-size:1.22rem;margin-top:1.4em}
.prose h4,.prose h5,.prose h6{font-size:1.05rem;margin-top:1.3em}

/* Repère ocre au-dessus des titres de section : il donne un rythme de lecture
   aux pages longues (fiches pays, groupes de travail).

   C'est une barre de largeur FIXE, et non une bordure haute sur le titre : une
   bordure prend la largeur du texte, donc un titre long produisait un trait de
   plusieurs centaines de pixels qui se lisait comme un séparateur de section.

   Un titre qui porte déjà une classe (bandeau bleu, intertitre coloré) a sa
   propre présentation et n'en reçoit pas. */
.prose h2:not([class])::before{
  content:"";display:block;width:44px;height:3px;
  background:var(--ochre);margin-bottom:.5em;
}

.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.15em}
.prose li{margin-bottom:.45em}
.prose li::marker{color:var(--blue)}

/* Les listes qui servent de composants (tuiles, agenda, fiches pays, disques,
   sommaire) ne sont pas des listes de texte : elles n'ont ni puce ni retrait.
   Sans cette remise a zero, `.prose ul` l'emporte sur leur propre `padding:0`
   — une classe seule ne pese pas face a une classe suivie d'un element — et
   les decale de 1,3 em vers la droite. Le defaut se voyait au premier coup
   d'oeil sur mobile : les tuiles ne s'alignaient pas sur le titre. */
.prose .tiles,.prose .events,.prose .countries,.prose .discs,.prose .toc ul{
  padding-left:0;
}

.prose img{display:block;border-radius:var(--radius)}

.prose figure{margin:1.4em 0}
.prose figcaption{
  margin-top:.6em;font-size:var(--fs-s);color:var(--ink-faint);
}

.prose blockquote{
  margin:1.4em 0;padding:4px 0 4px 22px;
  border-left:3px solid var(--ochre);color:var(--ink-soft);
}

.prose table{
  border-collapse:collapse;width:100%;margin:1.8em 0;font-size:var(--fs-s);
}
.prose th,.prose td{
  border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;
}
.prose th{background:var(--wash);font-family:"Bricolage Grotesque",sans-serif}

/* Un tableau large ne doit jamais élargir la page : il défile dans son cadre. */
.prose figure.table-wrap{overflow-x:auto}

.prose hr{
  border:0;border-top:1px solid var(--line);margin:2em 0;
}

/* ---------- mise en page du contenu ----------
 *
 * Vocabulaire du site. Il remplace les classes de l'éditeur WordPress
 * (wp-block-column, has-accent-background-color, wp-image-1975…) qui
 * encombraient les 43 pages sans dire ce qu'elles faisaient.
 *
 *   cols / col ............ colonnes côte à côte
 *   col-icon, col-third, col-35, col-two-thirds, col-full
 *                           largeur d'une colonne
 *   media / media-fig / media-body
 *                           image d'un côté, texte de l'autre
 *   media-icon .............. petite image (pictogramme)
 *   media-photo ............. grande image (photo)
 *   media-right ............. image à droite plutôt qu'à gauche
 *   panel-blue / -white / -grey
 *                           encart de couleur (bandeaux « MISSION »…)
 *   actions / btn ........... groupe de boutons, et un bouton
 *   btn-ghost, btn-100
 *                           variantes de bouton
 *   fig ..................... figure (image + légende)
 *   gap / gap-lg ............ respiration verticale voulue
 *   center / left / right ... alignement du texte
 *   accent .................. texte au bleu de l'association
 *   fs-md / fs-lg ........... texte plus grand
 *   icon / icon-sm .......... pictogramme
 *   v-center / v-top ........ alignement vertical des colonnes
 *   no-stack ................ colonnes qui ne s'empilent pas sur mobile
 */

/* Colonnes */

.cols{display:flex;flex-wrap:wrap;gap:26px;margin:1.5em 0;align-items:flex-start}
.cols.v-center{align-items:center}
.cols.v-top{align-items:flex-start}
.col{flex:1 1 220px;min-width:0}
.col p,.col li{max-width:none}

.col-icon{
  flex:0 0 auto;min-width:120px;
  display:flex;align-items:center;justify-content:center;
}

/* Les largeurs sont amputees de la moitie de l'ecart entre colonnes.
   Sans cela, deux colonnes annoncees a 33 % et 66 % reclament 99,99 % PLUS les
   26 px de gouttiere : elles ne tiennent pas sur une ligne et passent l'une
   sous l'autre. Le defaut venait de l'export WordPress, ou ces largeurs etaient
   des `flex-basis` en dur ; il ne se voyait pas car une colonne pleine largeur
   reste lisible - elle est simplement au mauvais endroit.

   `col-35` valait 35 %, ce qui avec 66,66 % depassait 100 % a coup sur. La
   difference avec un tiers est invisible ; l'alignement, lui, se voit. */
.col-third,.col-35{flex:1 1 calc(33.33% - 13px)}
.col-two-thirds{flex:1 1 calc(66.66% - 13px)}
.col-full{flex:1 1 100%}

.group{margin:1.5em 0}

/* Image + texte */

.media{display:grid;gap:26px;align-items:center;margin:1.5em 0}
.media-icon{grid-template-columns:15% auto}
.media-photo{grid-template-columns:32% auto}
/* direction:rtl inverse l'ordre visuel des deux colonnes sans toucher au
   balisage ; les enfants repassent en ltr pour que le texte reste lisible. */
.media-right{direction:rtl}
.media-right > *{direction:ltr}
.media-body p,.media-body li{max-width:none}
.media-fig{margin:0}
.media-fig img{width:100%}

/* Encarts de couleur */

.panel-blue{background-color:var(--blue);color:#fff}
.panel-blue a{color:#fff}
.panel-white{background-color:#fff}
.panel-grey{background-color:var(--wash)}

/* Un encart a besoin d'air, sinon le texte touche le bord. */
.col.panel-blue,.col.panel-white,.col.panel-grey{
  padding:22px 24px;border-radius:var(--radius);
}
p.panel-blue,h1.panel-blue,h2.panel-blue,h3.panel-blue,
p.panel-grey,h2.panel-grey{
  max-width:none;padding:18px 22px;border-radius:var(--radius);
}

/* Alignements et tailles */

.center{text-align:center}
.left{text-align:left}
.accent{color:var(--blue)}
.underline{text-decoration:underline}
.fs-md{font-size:1.12rem}
.fs-lg{font-size:1.6rem}


/* Respiration voulue par la rédaction, là où la marge du bloc ne suffit pas. */
.gap{height:1.5rem}
.gap-lg{height:2.5rem}

/* Tableaux */

.table-wrap{overflow-x:auto;margin:1.4em 0}
.table-wrap.fixed table{table-layout:fixed}
.striped tbody tr:nth-child(odd) td{background:var(--wash)}

/* Boutons */

.actions{display:flex;flex-wrap:wrap;gap:14px;margin:1.4em 0;padding:0;list-style:none}
.actions.center{justify-content:center}

.btn{
  display:inline-block;background:var(--blue);color:#fff;text-decoration:none;
  padding:14px 24px;border-radius:var(--radius);
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:16px;
  border:2px solid var(--blue);text-align:center;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.btn:hover{background:var(--blue-dk);border-color:var(--blue-dk);color:#fff}

.btn-ghost{background:transparent;color:var(--blue);border-color:var(--blue)}
.btn-ghost:hover{background:var(--blue);color:#fff}

.btn-100{width:100%}

/* Figures : les tuiles de l'accueil mènent quelque part, ça doit se voir. */
.fig{margin:1.4em 0}
.fig a{display:block;border-radius:var(--radius-lg);overflow:hidden}
.fig a img{
  transition:transform .2s ease,box-shadow .2s ease;border-radius:var(--radius-lg);
}
.fig a:hover img{transform:translateY(-3px);box-shadow:var(--shadow)}

/* ---------- pictogrammes ----------
 *
 * Les onze icônes du site sont des SVG inline (includes/icons.php). Elles
 * prennent la couleur du texte : la même icône sert en bleu sur blanc et en
 * blanc sur bleu, là où l'ancien site avait un PNG par variante. */

.ico{
  width:1.25em;height:1.25em;flex:0 0 auto;
  vertical-align:-.25em;color:var(--blue);
}
.ico-sm{width:1.5rem;height:1.5rem;margin-right:.45em}
.ico-lg{width:88px;height:88px;stroke-width:1.2}

/* ---------- tuiles d'accueil ----------
 *
 * Elles étaient trois images de 1024 px dont le libellé était dessiné dans le
 * pixel : intraduisible, non sélectionnable, invisible pour un moteur de
 * recherche, et il fallait trois fichiers de plus pour la version anglaise. */

.tiles{
  list-style:none;padding:0;margin:1.8em 0;
  display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.tiles a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;min-height:230px;padding:28px 22px;
  background:var(--blue);color:#fff;text-decoration:none;
  border-radius:var(--radius-lg);border:2px solid var(--blue);
  transition:background .15s ease,transform .15s ease;
}
.tiles a:hover{background:var(--blue-dk);border-color:var(--blue-dk);transform:translateY(-3px)}
.tiles .ico{width:64px;height:64px;color:#fff;stroke-width:1.3}
.tile-txt{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:1.3rem;line-height:1.2;text-align:center;
}

/* ---------- disques d'adhésion ---------- */

/* Le disque ne tient que si le libellé loge dedans : il faut donc un diamètre
   généreux, ce qui le rend impraticable en dessous de trois par ligne. La forme
   est conservée tant que les trois tiennent côte à côte, et abandonnée ensuite
   (voir la règle sous 620 px). */
.discs{
  list-style:none;padding:0;margin:1.5em 0;
  display:flex;flex-wrap:wrap;gap:24px;
}
.discs li{
  flex:0 0 auto;width:180px;height:180px;border-radius:50%;
  background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;
  padding:20px;text-align:center;
}
.discs span{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:1.02rem;line-height:1.25;
}

/* Sous 620 px, trois disques de 180 px s'empilent : 600 px de défilement pour
   trois libellés, avant même d'atteindre le texte de la page. Ils deviennent
   des bandeaux, qui disent la même chose en un sixième de la hauteur. */
@media (max-width:620px){
  .discs{flex-direction:column;gap:10px}
  .discs li{
    width:100%;height:auto;border-radius:var(--radius);
    justify-content:flex-start;padding:14px 18px;text-align:left;
  }
}

/* ---------- agenda ---------- */

.events{list-style:none;padding:0;margin:1.5em 0;display:grid;gap:16px}
.events li,.countries li{max-width:none;margin-bottom:0}

.event{
  border:1px solid var(--line);border-left:4px solid var(--ochre);
  border-radius:var(--radius);background:var(--paper);padding:20px 22px;
  box-shadow:0 1px 2px rgba(21,36,66,.04);
}

.event-when{
  margin:0 0 8px;max-width:none;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;
  color:var(--blue);
}
.event-title{margin:0 0 6px;font-size:1.18rem}
.event-where{
  margin:0 0 10px;max-width:none;color:var(--ink-faint);font-size:var(--fs-s);
}
.event-summary{margin:0 0 10px;max-width:none}
.event-link{margin:0;max-width:none;font-weight:700}

.events-empty{
  margin:2em 0;padding:22px 24px;border:1px dashed var(--line);
  border-radius:var(--radius);background:var(--wash);
  color:var(--ink-soft);max-width:none;
}

.events-all{margin:1.4em 0;font-weight:700}

/* ---------- fiches pays ---------- */

.countries{
  list-style:none;padding:0;margin:1.5em 0;
  display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.countries a{
  display:flex;align-items:center;gap:14px;
  padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);text-decoration:none;color:var(--ink);
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.countries a:hover{
  border-color:var(--blue);color:var(--blue);background:var(--blue-tint);
  transform:translateY(-2px);
}
.country-flag{font-size:1.7rem;line-height:1}

/* ---------- fiches pays : sommaire collant ----------
 *
 * Ces pages font jusqu'à 28 000 px de haut. Le sommaire vivait en tête, donc
 * hors d'atteinte dès qu'on avait commencé à lire — d'où les 43 liens
 * « Back to navigation » semés dans le texte. Il devient une colonne qui suit
 * le défilement. */

.with-toc{
  display:grid;grid-template-columns:230px minmax(0,1fr);
  gap:44px;align-items:start;margin-top:1.5em;
}

.with-toc-body{min-width:0}

.toc{
  position:sticky;top:110px;
  max-height:calc(100vh - 140px);overflow-y:auto;
  padding-right:8px;
  border-left:3px solid var(--ochre);padding-left:18px;
}
.prose .toc h2,.toc h2{
  font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 12px;padding:0;border:0;display:block;
}
.toc ul{list-style:none;margin:0;padding:0}
.toc li{margin-bottom:6px}
.toc a{
  display:block;font-size:var(--fs-s);line-height:1.35;
  color:var(--ink);text-decoration:none;padding:2px 0;
}
.toc a:hover{color:var(--blue);text-decoration:underline}

/* Sur grand écran le sommaire est toujours là : ces retours font double
   emploi. Ils restent affichés en dessous, où la colonne repasse en pleine
   largeur et n'est plus collante. */
@media (min-width:901px){
  .toc-back{display:none}
}

/* ---------- téléchargement ---------- */

.guide-download{margin:1.5em 0}

/* Lien vers un document (PDF). Le contenu importé l'habillait en <h6>, ce qui
   le faisait passer pour un titre auprès des lecteurs d'écran. */
.doc-link{
  margin:1.4em 0;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
}
.doc-link a{
  display:inline-flex;align-items:center;gap:.5em;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231848a0' stroke-width='1.4'><path d='M9.5 1.5H4a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5z'/><path d='M9.5 1.5V5H13'/></svg>") left center/16px no-repeat;
  padding-left:24px;
}

/* ---------- pied ---------- */

.foot{
  border-top:1px solid var(--line);background:var(--wash);
  padding-block:32px 26px;
}

.foot-cols{
  display:grid;gap:32px;margin-bottom:32px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}

.foot-wordmark{width:170px;height:auto;margin-bottom:16px;display:block}
.foot-brand p{margin:0;color:var(--ink-soft);font-size:var(--fs-s)}

.foot h2{
  font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 12px;
}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:7px}
.foot li a{color:var(--ink);text-decoration:none;font-size:var(--fs-s)}
.foot li a:hover{color:var(--blue);text-decoration:underline}

.foot-act{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 24px}

.foot-legal{
  border-top:1px solid var(--line);padding-top:20px;
}
.fine{color:var(--ink-faint);font-size:var(--fs-s);margin:0}

/* ---------- écrans étroits ---------- */

@media (min-width:761px){
  /* En-tête collant : les fiches pays font plusieurs écrans de haut, garder le
     menu et le sélecteur de langue à portée évite de remonter. */
  .masthead{position:sticky;top:0;z-index:40}
}

@media (max-width:900px){
  /* Une colonne de 230 px collée à gauche n'a plus de sens : le sommaire
     redevient un bloc ordinaire en tête de page. */
  .with-toc{grid-template-columns:1fr;gap:0}
  .toc{position:static;max-height:none;overflow:visible;margin-bottom:1.5em}
}

@media (max-width:760px){
  body{font-size:16px}
  html{scroll-padding-top:12px}
  .wrap{padding-inline:18px}
  .masthead-in{flex-wrap:wrap;gap:14px}
  .brand-txt{font-size:18px}
  .brand-txt em{display:none}
  /* Le menu est replié par défaut : déployé, ses quinze entrées repoussaient
     le contenu de la page hors de l'écran. */
  .navbtn{
    display:flex;align-items:center;gap:10px;
    padding:14px 0;cursor:pointer;color:var(--ink);
    font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:16px;
  }
  .navbtn svg{width:22px;height:22px}
  /* La case a le focus, mais c'est l'étiquette qui se voit : sans cela, un
     utilisateur au clavier ne saurait pas où il se trouve. */
  .navtoggle:focus-visible ~ .mainnav .navbtn{outline:3px solid var(--ochre);outline-offset:3px}

  .mainnav > .wrap > ul{display:none;flex-direction:column;gap:0;padding-bottom:10px}
  .navtoggle:checked ~ .mainnav > .wrap > ul{display:flex}

  .mainnav > .wrap > ul > li{border-top:1px solid var(--line)}
  /* Une rubrique de premier niveau doit se distinguer de ses sous-entrées :
     c'était l'inverse jusqu'ici, les sous-entrées paraissaient au-dessus. */
  .mainnav > .wrap > ul > li > a{
    border-bottom:0;padding:12px 0 6px;font-weight:700;font-size:var(--fs-xs);
    letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
  }
  .mainnav > .wrap > ul > li > a:hover{background:transparent;color:var(--blue)}
  .mainnav > .wrap > ul > li > a[aria-current]{color:var(--blue)}

  .sub{
    position:static;display:block;border:0;padding:0 0 10px;
    box-shadow:none;min-width:0;background:transparent;
  }
  .sub a{padding:9px 0 9px 14px;font-size:1rem;border-left:3px solid transparent}
  .sub a:hover{background:transparent;color:var(--blue)}
  .sub a[aria-current]{border-left-color:var(--ochre);box-shadow:none}
  .hero{padding-block:40px 36px}
  .prose{padding-block:28px 36px}
  .cols{gap:18px;margin:1.2em 0}
  .cols:not(.no-stack) > .col{flex-basis:100%}

  /* Une photo a besoin de toute la largeur : elle passe au-dessus du texte.
     Un pictogramme, non. Les empiler tous les deux coutait 120 px de hauteur
     par bloc — l'icone seule sur sa ligne, plus l'ecart — soit prés de la
     moitié de la page « Groupes de travail » en décor. */
  .media-photo{grid-template-columns:1fr}
  .media-icon{grid-template-columns:38px auto;gap:12px;align-items:start}
  .media-icon .ico-lg{width:38px;height:38px;margin-top:6px}
  .media{margin:1em 0}
  /* La derniere ligne d'un bloc n'a pas besoin de sa marge basse : elle
     s'ajoutait a celle du bloc suivant. */
  .media-body > *:last-child{margin-bottom:0}
  .prose h2{margin-top:1.2em}
  .prose h3{margin-top:1.1em}
  .gap{height:1rem}
  .gap-lg{height:1.6rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* ---------- impression ----------
 * Les familles impriment les pages pratiques (périscolaire, adhésion, guide).
 * On retire la navigation, qui ne sert à rien sur papier, et on rend les URL
 * des liens externes lisibles. */

@media print{
  .masthead,.mainnav,.navbtn,.navtoggle,.foot-cols,.foot-act,.skip,
  .events-all,.toc,.toc-back{display:none}
  .with-toc{display:block}
  body{font-size:11pt;color:#000;background:#fff}
  .wrap{max-width:none;padding:0}
  .hero{background:none;border:0;padding-block:0 16pt}
  .prose{padding-block:0}
  a{color:#000;text-decoration:underline}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
  .event,.countries a{break-inside:avoid}
  .foot{background:none;border-top:1px solid #999;margin-top:16pt;padding-block:8pt}
}