/* =========================================================================
   SDJ — Association : palette et composants du site de l'association
   Se charge APRES style.css, qui est le MEME fichier que celui du site des
   cliniques (memes regles, memes composants). Ici : la palette (accent bleu
   nuit, mots en lavande, bandes et pied fonces) et les composants propres
   aux maquettes de l'association. Reglages par bloc = variables en ligne.
   ========================================================================= */

/* ---------- 1. Palette (Kadence : couleurs globales du site de l'association) ---------- */
:root{
  --accent:        var(--bleu);      /* surtitres, liens, survols : bleu nuit (site plus formel) */
  --surbrillance:  var(--lavande);   /* mots mis en valeur dans les titres */
  --carte-claire:  #E9EAEE;          /* cartes posees sur les bandes bleu nuit */
  --sep-clair:     rgba(225,225,255,.82);   /* separateurs sur fond bleu nuit */
}
.accent{ color:var(--surbrillance); }

/* boutons : blanc (sur photo ou bande foncee) ; le bouton fonce est celui du site des cliniques */
.btn--blanc{ background:#fff; color:var(--bleu); }
@media (hover:hover){
  .btn--blanc:hover{ background:var(--lavande); }
  .lien-fleche:hover{ color:#4A5199; }
}

/* ---------- 2. En-tete : rubrique active en pastille bleu nuit ---------- */
.entete .logo img{ width:152px; }                   /* taille reelle du fichier (le logo de la maquette) */
@media (max-width:1024px){
  .entete .logo img{ width:108px; } .tiroir__tete .logo img{ width:84px; }
  .tiroir__lien.est-active{ background:var(--bleu); color:#fff; }   /* rubrique active : pastille bleu nuit, comme le menu */
}
@media (max-width:767px){ .entete .logo img{ width:76px; } }
.nav--asso{ gap:26px; margin-top:15px; }             /* menu un peu plus bas que le centre : aligne sur le logo */
.nav--asso > a,.nav--asso .nav__deroulant > a{ font-weight:500; }
.nav--asso > a.est-active,.nav--asso .nav__deroulant > a.est-active{ background:var(--bleu); color:#fff; font-weight:600; }
.sous-menu__lien img.sous-menu__picto{ object-fit:contain; padding:7px; background:var(--bleute); }

/* ---------- 3. Heros sombres : photo pleine largeur, texte blanc ---------- */
.hero--sombre{ background:var(--bleu); color:#fff; }
.hero--sombre .hero__voile{ background:none; }        /* photos deja assombries ; voile ajoute sur tablette et mobile */
.hero--sombre .hero__texte{ max-width:680px; }
.hero--sombre .hero__texte h1{ max-width:none; color:#fff; text-shadow:0 3px 14px rgba(20,24,52,.35); }
.hero--sombre .surtitre{ color:#fff; }
.hero--sombre .hero__texte p.accroche{ max-width:600px; color:#fff; }
.hero--moyen .hero__inner{ min-height:435px; }
.hero--moyen .hero__texte h1{ margin-top:22px; }       /* (les marges du surtitre et du titre se confondent) */
.hero--moyen .hero__texte p.accroche{ margin-top:30px; line-height:1.2; }
@media (min-width:1025px){
  .hero--moyen{ --hero-pt:58px; }
  .hero--moyen .hero__inner{ justify-content:flex-start; padding-top:var(--hero-pt); padding-bottom:40px; }
}

/* titre de marque « SDJ » souligne de lavande (heros de l'accueil, pied de page) */
.titre-marque{
  display:inline-block; position:relative; margin:0; padding-bottom:var(--trait-ecart, 21px);
  font-size:var(--marque-taille, 89px); font-weight:800; line-height:.9; letter-spacing:-.01em; color:#fff;
}
.titre-marque::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:var(--trait, 4px); border-radius:3px;
  background:var(--lavande);
  transform-origin:left; transition:transform .9s var(--t-doux) .35s;
}
.js .titre-marque.reveal:not(.est-vu)::after{ transform:scaleX(0); }
.hero--marque .hero__texte p.accroche{ margin-top:13px; max-width:none; font-size:24px; line-height:32px; }

/* eventail pose sur la photo d'un heros (position en % de la largeur : il suit le sujet) */
.eclat--lavande{ color:var(--lavande); }
.hero > .eclat-deco{ z-index:2; }

/* ---------- 4. Bandes bleu nuit (Nos actions, Conditions, chiffres) ---------- */
.bande-sombre{ position:relative; overflow:hidden; background:var(--bleu); color:#fff; }
.bande-sombre .surtitre,.bande-sombre h2{ color:#fff; }
.bande-sombre .conteneur{ position:relative; z-index:1; }
/* filigrane : la montagne du logo, en transparence a droite de la bande */
.filigrane{
  position:absolute; z-index:0; right:var(--droite, 0px); top:var(--haut, 4px); width:var(--l, 666px);
  max-width:none; pointer-events:none;
}

/* cartes « action » : picto, titre, texte, lien en bas (4 colonnes) */
.cartes-actions{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-top:var(--ecart, 74px); }
.carte-action{
  display:flex; flex-direction:column; align-items:flex-start; min-height:367px;
  padding:38px 26px 30px 36px; border-radius:var(--rayon-lg); background:var(--carte-claire); color:var(--bleu);
  transition:transform .4s var(--t-doux), box-shadow .4s var(--t-doux);
}
.carte-action__ico{ display:flex; align-items:flex-end; height:96px; }
.carte-action__ico img{ width:auto; max-height:96px; transition:transform .45s var(--t-doux); }
.carte-action h3{ margin-top:16px; font-size:22px; }
.carte-action p{ margin-top:10px; font-size:20px; line-height:26px; }
.carte-action .lien-fleche{ margin-top:auto; padding-top:18px; font-size:19px; }
@media (hover:hover){
  .carte-action:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(10,12,40,.35); }
  .carte-action:hover .carte-action__ico img{ transform:scale(1.08) rotate(-4deg); }
}

/* cartes « critere » : picto et texte centres */
.cartes-criteres{ display:grid; grid-template-columns:repeat(4,minmax(0,260px)); gap:47px; margin-top:var(--ecart, 120px); }
.carte-critere{
  display:grid; grid-template-rows:96px 1fr; justify-items:center; align-items:center; min-height:255px;
  padding:24px 18px 20px; border-radius:var(--rayon-lg); background:var(--carte-claire);
  color:var(--bleu); text-align:center; font-size:20px; font-weight:600; line-height:1.22;
  transition:transform .4s var(--t-doux);
}
.carte-critere img{ align-self:end; width:auto; max-height:96px; transition:transform .45s var(--t-doux); }
@media (hover:hover){
  .carte-critere:hover{ transform:translateY(-6px); }
  .carte-critere:hover img{ transform:scale(1.08); }
}

/* chiffres cles (sur bande foncee : blancs ; sur fond clair : --chiffres-couleur) */
.chiffres{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:start; }
.chiffre{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 12px; }
.chiffre + .chiffre::before{
  content:''; position:absolute; left:-2px; top:var(--sep-haut, 4px); height:var(--sep-h, 137px); width:4px; border-radius:2px;
  background:var(--sep-clair);
}
.chiffre__nombre{ font-size:51px; font-weight:800; line-height:1; letter-spacing:-.01em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.chiffre__texte{ margin-top:24px; font-size:26px; font-weight:500; line-height:32px; }
.chiffres--clairs{ grid-template-columns:repeat(3,minmax(0,1fr)); margin-right:calc(-1 * clamp(0px, (100vw - 1258px) / 2 + 12px, 62px)); }
.chiffres--clairs .chiffre__nombre{ color:var(--chiffres-couleur, #D1D3F3); font-size:40px; }
.chiffres--clairs .chiffre__texte{ margin-top:5px; font-size:20px; line-height:23px; color:var(--bleu); }
.chiffres--clairs .chiffre + .chiffre::before{ display:none; }

/* ---------- 5. Photo decoupee en biais, qui deborde jusqu'au bord de l'ecran ---------- */
.photo-biais{
  position:relative; align-self:end; overflow:hidden;
  margin-right:calc(-1 * max(24px, (100vw - 1210px) / 2));
  clip-path:polygon(18.2% 0, 100% 0, 100% 100%, 0 100%, 0 95.5%, 0.6% 92%, 13.9% 4.5%, 15.4% 1.2%);
  transition:clip-path .9s var(--t-doux);
}
.photo-biais img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--t-doux); }
@media (hover:hover){ .photo-biais:hover img{ transform:scale(1.04); } }

/* ---------- 6. Cartes « public » (photo, titre, texte, fleche) ---------- */
.cartes-public{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:21px; margin-top:var(--ecart, 39px); }
.carte-public{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--rayon-lg); background:#fff; color:var(--bleu);
  transition:transform .4s var(--t-doux), box-shadow .4s var(--t-doux);
}
.carte-public__photo{ display:block; aspect-ratio:291/271; overflow:hidden; }
.carte-public__photo img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--t-doux); }
.carte-public__texte{ display:block; min-height:160px; padding:21px 8px 22px 12px; }
.carte-public__titre{ display:block; font-size:22px; font-weight:800; line-height:1.2; }
.carte-public__desc{ display:block; margin-top:12px; font-size:20px; line-height:27px; }   /* la fleche se loge au bout de la derniere ligne */
.carte-public > .fleche{ position:absolute; right:30px; bottom:28px; transition:transform .3s var(--t-doux); }
@media (hover:hover){
  .carte-public:hover{ transform:translateY(-6px); box-shadow:var(--ombre); }
  .carte-public:hover .carte-public__photo img{ transform:scale(1.07); }
  .carte-public:hover > .fleche{ transform:translateX(6px); }
}

/* ---------- 7. Bandeau photo (« Ensemble pour demain ») ---------- */
.bandeau-photo{
  position:relative; overflow:hidden; color:#fff;
  background-color:var(--bleu); background-size:cover; background-position:var(--pos, 50% 50%);
}
.bandeau-photo .conteneur{ position:relative; z-index:1; padding-top:var(--pt, 30px); padding-bottom:var(--pb, 68px); }
.bandeau-photo .surtitre{ color:#fff; }
.bandeau-photo h2{ font-size:50px; line-height:1.16; text-shadow:0 3px 14px rgba(10,12,40,.35); }
.bandeau-photo .btn{ margin-top:36px; }

/* ---------- 8. Encarts (documents utiles, encore une question) ---------- */
.encart{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:28px;
  padding:var(--p, 30px 32px 30px 16px); border-radius:var(--rayon-lg); background:var(--encart-fond, #FDFDFF);
}
.encart__ico{ width:auto; max-height:164px; }
.encart > .btn{ align-self:end; }                     /* au niveau de la derniere ligne du texte */
.encart h2{ font-size:var(--titre, 36px); }
.encart p:not(.surtitre){ margin-top:14px; font-size:17px; line-height:21px; }
.encart--colonne{ grid-template-columns:1fr; align-items:start; gap:0; padding:var(--p, 42px 33px 42px); background:var(--gris); }
.encart--colonne .btn{ justify-self:start; margin-top:42px; }

/* ---------- 9. Cartes des soins subventionnes (texte + liste, photo a droite) ---------- */
.cartes-subv{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; margin-top:var(--ecart, 48px); }
.carte-subv{
  display:grid; grid-template-columns:minmax(0,1fr) 274px; overflow:hidden; min-height:292px;
  border-radius:var(--rayon-lg); background:var(--gris); color:var(--bleu);
}
.carte-subv__texte{ padding:30px 18px 28px 22px; }
.carte-subv h3{ font-size:21px; }
.carte-subv__age{ margin-top:6px; font-size:17px; line-height:20px; }
.carte-subv .liste-check{ margin-top:18px; gap:0; }
.carte-subv .liste-check li{ min-height:48px; align-items:center; gap:12px; font-size:16px; line-height:19px; }   /* une coche tous les 48 px */
.carte-subv .liste-check img{ flex:0 0 28px; width:28px; }
.carte-subv__photo{ position:relative; overflow:hidden; }
.carte-subv__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--t-doux); }
@media (hover:hover){ .carte-subv:hover .carte-subv__photo img{ transform:scale(1.05); } }

/* ---------- 10. Etapes numerotees dans une bande grise ---------- */
.etapes-num{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; list-style:none; margin:var(--ecart, 74px) 0 0;
  padding:15px 24px 18px; border-radius:var(--rayon-lg); background:var(--gris); counter-reset:etape;
}
.etape-num{ display:flex; flex-direction:column; align-items:center; text-align:center; font-size:20px; line-height:23.8px; }
.etape-num::before{
  counter-increment:etape; content:counter(etape, decimal-leading-zero);
  display:grid; place-items:center; width:80px; height:80px; margin-bottom:33px; border-radius:50%;
  background:var(--bleu); color:#fff; font-size:38px; font-weight:600; letter-spacing:.01em;
  transition:transform .45s var(--t-doux);
}
@media (hover:hover){ .etape-num:hover::before{ transform:scale(1.08); } }

/* ---------- 11. FAQ simple (sans filtres) + encart ---------- */
.faq.faq--simple{ grid-template-columns:minmax(0,514px) minmax(0,560px); gap:120px; margin-top:var(--ecart, 30px); }
.faq--simple .faq__liste{ gap:22px; }
.faq--simple .faq__item{ border-radius:30px; background:var(--gris); }
.faq--simple .faq__question{ min-height:55px; padding:10px 44px 10px 37px; font-size:20px; }
.faq--simple .faq__reponse p{ max-width:none; padding:0 37px 22px; }

/* ---------- 11 bis. Mises en page de section (ordinateur) ---------- */
.impact{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,640px); align-items:end; gap:20px; }
.impact .intro{ margin-bottom:0; }
.partenariat{ margin-top:var(--ecart, 89px); }
.encart--docs{ margin:var(--ecart, 66px) -15px 0 -16px; }
.duo-info{ margin-top:var(--ecart, 20px); }
.formulaire-seul{ max-width:595px; }
.faq-titre{ margin-top:var(--ecart, 50px); margin-bottom:0; }   /* l'ecart avec la FAQ est celui de la FAQ (--ecart) */

/* ---------- 11 ter. Page Contact : formulaire + carte du Valais (cliniques et association) ---------- */
.contact-duo{ display:grid; grid-template-columns:minmax(0,595px) minmax(0,1fr); gap:64px; align-items:start; }
.contact-carte{ margin-top:var(--ecart, 92px); }
.valais__lieu--association .valais__point{ width:16px; height:16px; background:var(--bleu); box-shadow:0 0 0 3px #fff; }
.valais__lieu--association .valais__point::after{ border-color:var(--bleu); animation-delay:.9s; }
.valais__etiquette{                                   /* nom du lieu, a droite du point (entre « Sion » et « VALAIS ») */
  position:absolute; left:14px; top:0; transform:translateY(-50%); white-space:nowrap; pointer-events:none;
  padding:2px 9px; border-radius:var(--rayon-pill); background:var(--bleu); color:#fff; font-size:11.5px; font-weight:700; line-height:1.45;
}
.valais__legende{ display:flex; flex-wrap:wrap; gap:6px 24px; margin-top:18px; font-size:14px; font-weight:600; color:var(--texte-doux); }
.valais__legende span{ display:inline-flex; align-items:center; gap:8px; }
.valais__repere{ display:inline-block; width:12px; height:12px; border-radius:50%; background:#A885FD; }
.valais__repere--asso{ background:var(--bleu); box-shadow:0 0 0 2px #fff, 0 0 0 3px #CFD1E6; }

/* ---------- 12. Pied de page fonce ---------- */
.pied--sombre{ padding:37px 0 39px; background:var(--bleu); color:#fff; }
.pied--sombre .pied__grille > .logo{ margin:11px 0 0 -33px; }      /* la marque deborde un peu dans la marge, comme la maquette */
.pied--sombre .pied__grille > .logo img{ width:172px; }
.pied__marque{ max-width:none; margin:23px 0 0 -12px; }
.pied--sombre .pied__grille{ grid-template-columns:minmax(0,170fr) minmax(0,360fr) minmax(0,232fr) minmax(0,218fr) auto; }
.pied--sombre .pied__liens a,.pied--sombre .pied__social a{ color:#fff; }
.pied__marque .titre-marque{ --marque-taille:68px; --trait:3px; --trait-ecart:14px; }
.pied__marque p{ margin-top:7px; font-size:14px; line-height:19px; }
@media (hover:hover){
  .pied--sombre .pied__liens a:hover,.pied--sombre .pied__social a:hover{ color:var(--lavande); }
}

/* ---------- 13. Formulaire : champs a fin filet sombre ---------- */
.form--sobre .champ input,.form--sobre .champ select,.form--sobre .champ textarea{ border:1px solid #2B2F45; border-radius:9px; }

/* ---------- 14. Transition de page : le rideau d'eau de rincage ----------
   Au clic, un rideau d'eau bleu nuit tombe du haut (bord ondule, levre d'eau claire) et couvre
   la page pendant qu'une petite brosse y entre par la gauche jusqu'au centre (sans logo) ;
   la page suivante voit l'eau s'ecouler vers le bas et la brosse repartir a droite. La brosse
   est DANS l'eau (.rideau__nappe la coupe) : on ne la voit que sur l'eau. site.js fait descendre
   .rideau__eau (translateY(-100%) = au-dessus de l'ecran, 0 = page couverte, 100% = ecoule en
   bas) et traverser la brosse. */
.rideau--eau{ --vague:clamp(34px,4.2vw,60px); }
.rideau__eau{
  position:absolute; left:0; right:0; top:calc(var(--vague) * -1); height:calc(100% + var(--vague) * 2);
  display:flex; flex-direction:column; transform:translateY(-100%); will-change:transform;
}
.sdj-arrivee .rideau__eau,.sdj-premiere .rideau__eau{ transform:translateY(0); }   /* la page s'ouvre couverte */
.rideau__vague{ display:block; flex:none; width:200%; height:var(--vague); overflow:visible; }
.sdj-voile .rideau__vague{ animation:vague 2.2s linear infinite; }                 /* la vague file */
.sdj-voile .rideau__vague--bas{ animation-duration:1.7s; animation-direction:reverse; }
@keyframes vague{ to{ transform:translateX(-50%); } }
.rideau__vague--haut{ margin-bottom:-1px; }
.rideau__vague--bas{ margin-top:-1px; }
.rideau__vague--haut .rideau__flot{ fill:#2C3168; }
.rideau__vague--bas .rideau__flot{ fill:#21254D; }
.rideau__levre{ fill:#A9AEF2; fill-opacity:.6; }                                   /* eau claire au bord */
.sdj-voile .rideau__levre{ animation:levre .9s ease-in-out infinite alternate; }
@keyframes levre{ from{ transform:translateY(-4px); } to{ transform:translateY(4px); } }
.rideau__nappe{
  position:relative; flex:1; overflow:hidden;
  background:linear-gradient(180deg,#2C3168 0%,#262A57 55%,#21254D 100%);
}
/* la brosse, seule dans l'eau : hors champ a gauche, au centre entre deux pages ; elle flotte */
.rideau__brossette{
  position:absolute; left:0; top:50%; width:clamp(200px,20vw,290px); height:auto; overflow:visible;
  transform:translate(-110%,-50%) rotate(-6deg);
}
.sdj-voile .rideau__brossette{ animation:flotte 1.3s ease-in-out infinite; }
@keyframes flotte{ 0%,100%{ translate:0 -7px; } 50%{ translate:0 7px; } }
.sdj-arrivee .rideau__brossette,.sdj-premiere .rideau__brossette{ transform:translate(calc(50vw - 50%),-50%) rotate(-2deg); }
.rideau__brossette-corps{ transform-box:fill-box; transform-origin:70% 60%; }
.sdj-voile .rideau__brossette-corps{ animation:brossage .14s ease-in-out infinite alternate; }   /* va-et-vient du brossage */
@keyframes brossage{ from{ transform:translate(-3px,1px) rotate(-2deg); } to{ transform:translate(3px,-1px) rotate(2deg); } }
.rideau__etincelles{ fill:#D1D1FF; }
.rideau__etincelles path{ transform-box:fill-box; transform-origin:center; }
.sdj-voile .rideau__etincelles path{ animation:scintille .45s ease-in-out infinite alternate; }
.sdj-voile .rideau__etincelles path:nth-child(2){ animation-delay:-.15s; }
.sdj-voile .rideau__etincelles path:nth-child(3){ animation-delay:-.3s; }
@keyframes scintille{ from{ transform:scale(.35) rotate(0deg); opacity:.35; } to{ transform:scale(1.1) rotate(45deg); opacity:1; } }

/* =========================================================================
   15. Tablette (<= 1024 px)
   ========================================================================= */
@media (max-width:1024px){
  /* boutons un peu plus petits, et jamais colles au texte (l'ecart .ecart-haut ne vaut que sur ordinateur) */
  .btn{ padding:14px 26px; font-size:16px; }
  .btn.ecart-haut{ margin-top:30px; }

  .hero--sombre .hero__media{ opacity:1; }
  .hero--sombre .hero__voile{ background:linear-gradient(90deg,rgba(20,24,52,.66) 0%,rgba(20,24,52,.4) 60%,rgba(20,24,52,.18) 100%); }
  .hero--moyen .hero__inner{ min-height:420px; }
  .hero > .eclat-deco{ display:none; }
  .titre-marque{ --marque-taille:84px; }

  .cartes-actions,.cartes-public{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .carte-action{ min-height:0; }
  .cartes-criteres{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
  .chiffres{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:40px; }
  .chiffre:nth-child(3)::before{ display:none; }
  .chiffres--clairs{ grid-template-columns:repeat(3,minmax(0,1fr)); margin:32px 0 0; }
  .filigrane{ width:min(70vw,560px); opacity:.8; }

  .mission-duo{ grid-template-columns:1fr; }
  .impact{ grid-template-columns:1fr; gap:10px; }
  .encart--docs{ margin-left:0; margin-right:0; }
  .photo-biais{ margin-right:-24px; max-height:420px; }
  .cartes-subv{ grid-template-columns:1fr; }
  .etapes-num{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:30px; }
  .faq.faq--simple{ grid-template-columns:1fr; gap:30px; }
  .contact-duo{ grid-template-columns:1fr; gap:44px; }
  .formulaire-seul{ max-width:none; }
  .contact-carte{ margin-top:0; }
  .encart{ grid-template-columns:auto minmax(0,1fr); }
  .encart > .btn{ grid-column:2; justify-self:start; }
  .encart--colonne{ grid-template-columns:1fr; }
  .encart--colonne > .btn{ grid-column:auto; }
  /* pied : la marque comme sur ordinateur (logo a gauche, « SDJ » et baseline a cote),
     puis les deux listes de liens en colonnes, comme sur ordinateur */
  .pied--sombre .pied__grille{ grid-template-columns:auto minmax(0,1fr) minmax(0,1fr); gap:20px 24px; }
  .pied--sombre .pied__grille > .logo{ grid-column:1; justify-self:start; align-self:center; margin:0; }
  .pied--sombre .pied__grille > .logo img{ width:124px; }
  .pied__marque{ grid-column:2 / -1; align-self:center; justify-self:start; text-align:left; margin:0; }
  .pied__marque .titre-marque{ --marque-taille:56px; --trait-ecart:11px; }
  .pied--sombre .pied__liens{
    grid-column:1 / 3; display:flex; flex-direction:column; gap:10px;
    margin-top:8px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14);
  }
  .pied--sombre .pied__liens + .pied__liens{ grid-column:3; }
  .pied--sombre .pied__social{ grid-column:1 / -1; }
  .bandeau-photo h2 br{ display:none; }
  .bandeau-photo h2{ text-wrap:balance; }
  .bandeau-photo h2{ font-size:38px; }
}

/* =========================================================================
   16. Mobile (<= 767 px)
   ========================================================================= */
@media (max-width:767px){
  /* boutons : plus compacts, a leur taille (pas en pleine largeur dans le heros) */
  .btn{ gap:8px; padding:12px 20px; font-size:15px; }
  .btn .fleche{ width:18px; height:13px; }
  .btn.ecart-haut{ margin-top:26px; }
  .hero__actions .btn{ align-self:flex-start; }

  /* heros sombres : la photo reste derriere le texte, voilee de bleu nuit (le texte blanc reste lisible) */
  .hero--sombre .hero__media{ position:absolute; inset:0; aspect-ratio:auto; -webkit-mask-image:none; mask-image:none;
    background-position:var(--pos-m, 70% 50%); }
  .hero--sombre .hero__voile{ display:block; background:linear-gradient(180deg,rgba(20,24,52,.5) 0%,rgba(20,24,52,.62) 55%,rgba(20,24,52,.8) 100%); }
  .hero--sombre .hero__inner{ min-height:0; margin-top:0; padding-top:64px; padding-bottom:44px; }
  .hero--sombre.hero--accueil .hero__inner{ padding-top:96px; padding-bottom:56px; }
  .hero--sombre .hero__texte h1{ font-size:clamp(32px,9vw,40px); }
  .hero--sombre .hero__texte h1 br{ display:none; }
  .titre-marque,.hero--sombre .hero__texte h1.titre-marque{ --marque-taille:72px; font-size:var(--marque-taille); }
  .hero--marque .hero__texte p.accroche{ margin-top:18px; font-size:18px; line-height:1.4; }
  .hero--sombre .hero__texte p.accroche{ font-size:16px; line-height:1.5; }
  .hero--sombre .hero__texte p.accroche br{ display:none; }
  .hero--sombre .hero__actions .btn{ width:auto; }

  .nav--asso{ gap:0; }
  .filigrane{ width:118vw; right:-30vw; top:0; opacity:.55; }

  .cartes-actions{ grid-template-columns:1fr; gap:12px; margin-top:26px; }
  .carte-action{ display:grid; grid-template-columns:60px 1fr; column-gap:16px; align-items:start; padding:20px 20px 18px; }
  .carte-action__ico{ grid-row:span 3; height:auto; justify-content:center; padding-top:4px; }
  .carte-action__ico img{ max-height:54px; }
  .carte-action h3{ margin-top:0; font-size:18px; }
  .carte-action p{ margin-top:4px; font-size:15.5px; line-height:1.4; }
  .carte-action p br{ display:none; }
  .carte-action .lien-fleche{ margin-top:8px; padding-top:0; font-size:15.5px; }

  .cartes-public{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; margin:22px -20px 0;
    padding:4px 20px 6px; scroll-padding:0 20px; scrollbar-width:none; }
  .cartes-public::-webkit-scrollbar{ display:none; }
  .carte-public{ flex:0 0 min(74%,290px); scroll-snap-align:start; }
  .carte-public__texte{ min-height:0; padding:14px 44px 16px 14px; }
  .carte-public__titre{ font-size:17px; }
  .carte-public__desc{ margin-top:6px; font-size:15px; line-height:1.4; }
  .carte-public__desc br{ display:none; }
  .carte-public > .fleche{ right:16px; bottom:18px; }

  .chiffres{ row-gap:28px; }
  .chiffre__nombre{ font-size:38px; }
  .chiffre__texte{ margin-top:8px; font-size:16px; line-height:1.35; }
  .chiffre + .chiffre::before{ top:4px; height:calc(100% - 8px); width:2px; }
  .chiffres--clairs{ grid-template-columns:repeat(3,minmax(0,1fr)); margin:22px 0 0; }
  .chiffres--clairs .chiffre{ padding:0 4px; }
  .chiffres--clairs .chiffre__nombre{ font-size:clamp(22px,6.6vw,28px); }
  .chiffres--clairs .chiffre__texte{ font-size:13.5px; line-height:1.3; }
  .chiffres--clairs .chiffre__texte br{ display:none; }

  .bandeau-photo .conteneur{ padding-top:46px; padding-bottom:50px; }
  .bandeau-photo h2{ font-size:clamp(25px,7.2vw,30px); }
  .bandeau-photo h2 br{ display:none; }
  .bandeau-photo .btn{ margin-top:24px; }

  .photo-biais{ margin:24px -20px 0 0; clip-path:polygon(9% 0, 100% 0, 100% 100%, 0 100%); }
  .mission-duo .btn{ width:auto; }

  .cartes-criteres{ gap:12px; margin-top:26px; }
  .carte-critere{ grid-template-rows:62px auto; min-height:0; padding:18px 12px 18px; font-size:15px; }
  .carte-critere img{ max-height:58px; }
  .carte-critere br{ display:none; }

  .carte-subv{ grid-template-columns:1fr; }
  .carte-subv__photo{ order:-1; aspect-ratio:16/9; }
  .carte-subv__texte{ padding:18px 18px 20px; }
  .carte-subv .liste-check{ margin-top:16px; gap:12px; }
  .carte-subv .liste-check li{ min-height:0; font-size:15px; line-height:1.35; }
  .carte-subv .liste-check li br,.carte-subv__age br{ display:none; }

  .etapes-num{ grid-template-columns:1fr; gap:0; padding:8px 18px; }
  .etape-num{ display:grid; grid-template-columns:52px 1fr; column-gap:16px; align-items:center; text-align:left;
    padding:12px 0; font-size:15.5px; line-height:1.4; }
  .etape-num + .etape-num{ border-top:1px solid #E1E2E8; }
  .etape-num::before{ width:52px; height:52px; margin:0; font-size:22px; }
  .etape-num br{ display:none; }

  .faq--simple .faq__question{ min-height:54px; padding:12px 18px 12px 20px; font-size:16.5px; }
  .faq--simple .faq__item{ border-radius:24px; }
  .faq--simple .faq__reponse p{ padding:0 20px 18px; }
  .encart{ grid-template-columns:1fr; gap:14px; padding:22px 18px; }
  .encart > .btn{ grid-column:auto; justify-self:start; width:auto; }
  .encart__ico{ max-height:70px; }
  .encart h2{ font-size:23px; }
  .encart p br{ display:none; }
  .encart--colonne .btn{ margin-top:22px; }
  .valais__etiquette{ display:none; }                 /* carte trop petite : la legende suffit */
  .pilier br{ display:none; }
  .pilier{ text-wrap:balance; }
  .valais__legende{ margin-top:30px; font-size:13.5px; }

  /* pied : meme organisation que sur tablette, en plus petit */
  .pied--sombre{ border-top:0; }
  .pied--sombre .pied__grille{ gap:14px; }
  .pied--sombre .pied__grille > .logo img{ width:84px; }
  .pied__marque .titre-marque{ --marque-taille:44px; --trait-ecart:9px; }
  .pied--sombre .pied__marque p{ margin-top:7px; font-size:12px; line-height:1.45; color:rgba(255,255,255,.72); text-wrap:balance; }
  .pied--sombre .pied__social{ border-top-color:rgba(255,255,255,.14); }
  .pied--sombre .pied__social a{ background:rgba(255,255,255,.1); }
}

/* petits telephones : la baseline du pied ne tient plus sur deux lignes, elle se repartit */
@media (max-width:379px){ .pied--sombre .pied__marque p br{ display:none; } }