:root{
  --rouge:#e72727;
  --rouge-vif:#f50000;
  --noir:#0e0e11;
  --noir-2:#15151a;
  --clair:#f4f4f6;
  --texte:#17171c;
  --gris:#6b6b75;
  --gris-clair:#b4b4be;
  /* les quatre univers du menu de l'application : chaque bloc du site
     reprend la couleur de la rubrique qu'il annonce */
  --bleu:#2b4ad6;        /* identification */
  --bleu-vif:#4a6cff;    /* le même, lisible sur fond sombre */
  --bleu-sourd:#1d2b4a;
  --jaune:#ffa300;       /* bénévoles */
  --jaune-texte:#b86e00; /* le même, lisible sur fond blanc */
  --vert:#29ac8a;        /* navigation, annuaire, presse */
  --vert-texte:#1d8a6d;
  --police:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --large:1180px;
  --gouttiere:24px;
  --hero-h:620px;
}
/* grands écrans : on laisse la page respirer au lieu de la coincer au milieu */
@media(min-width:1500px){ :root{ --large:1340px; --gouttiere:32px; --hero-h:700px } }
@media(min-width:1900px){ :root{ --large:1520px; --gouttiere:40px; --hero-h:780px } }
@media(min-width:2400px){ :root{ --large:1720px; --hero-h:860px } }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--police);background:var(--clair);color:var(--texte);-webkit-font-smoothing:antialiased;line-height:1.5}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--large);margin:0 auto;padding:0 var(--gouttiere)}

h1,h2,h3{margin:0;letter-spacing:-.9px;font-weight:800;line-height:1.08}
h2{font-size:clamp(28px,2.6vw,46px)}
h3{font-size:clamp(18px,1.2vw,22px);letter-spacing:-.3px}
p{margin:0}

.sur-titre{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rouge);margin-bottom:14px;
  display:flex;align-items:center;gap:9px}
/* le pictogramme du module, repris de l'application, prend la couleur de
   l'univers puisqu'il suit celle du texte */
.picto{height:17px;width:auto;flex:0 0 auto;display:block;color:inherit}
/* les vecteurs de l'application n'ont pas tous le même format : on cale la
   hauteur de chacun pour qu'ils pèsent la même chose à l'oeil */
.picto-jumelles{height:12px}
.picto-guides{height:19px}
.picto-associations{height:15px}
.sur-titre .picto{margin-top:-1px}
h1 .picto{height:1em;width:auto;display:inline-block;vertical-align:-.1em;margin-right:.36em}
.bandeau h1{display:flex;align-items:center;gap:.4em;flex-wrap:wrap}
.bandeau h1 .picto{height:.9em;margin-right:0}
@media(max-width:560px){
  .picto{height:15px}
  .picto-jumelles{height:11px}
  .picto-guides{height:17px}
  .picto-associations{height:13px}
}
.intro{color:var(--gris);font-size:clamp(16px,1.05vw,19px);line-height:1.7;max-width:660px;margin-top:16px}

.btn{display:inline-block;text-decoration:none;font-weight:700;font-size:15px;padding:15px 26px;border-radius:8px;transition:transform .15s ease,background .15s ease,border-color .15s ease}
.btn:active{transform:translateY(1px)}
/* un bouton qui existe aussi dans l'application porte le même symbole */
.btn-picto{display:inline-flex;align-items:center;gap:10px}
.btn-picto .picto{height:20px}
/* les tracés pleins et denses ont besoin d'un peu plus de place pour peser
   autant que les tracés ouverts */
.btn-picto .picto-benevole,.btn-picto .picto-associations{height:22px}
.btn-picto .picto-jumelles{height:15px}
.btn-rouge{background:var(--rouge);color:#fff}
.btn-rouge:hover{background:#cf1f1f}
.btn-ligne{border:1px solid rgba(255,255,255,.26);color:#fff}
.btn-ligne:hover{background:rgba(255,255,255,.08)}
.btn-sombre{border:1px solid #d9d9e0;color:var(--texte);background:#fff}
.btn-sombre:hover{border-color:#b6b6c0}

.avis{background:#17171c;color:#cfcfd6;font-size:13px;padding:11px 24px;text-align:center}
.avis b{color:#fff}

/* ============ ouverture animée ============ */
/* Classe « ouverture » et non « intro » : « intro » sert déjà aux paragraphes
   d'introduction, dont le max-width écrasait la largeur du plein écran. */
.ouverture{
  position:fixed;inset:0;z-index:999;background:#000;
  display:none;transition:opacity .6s ease;overflow:hidden;
}
.ouverture.active{display:block}
.ouverture.partie{opacity:0;pointer-events:none}
.ouverture-scene{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  height:var(--ouverture-hauteur,200vh);
  aspect-ratio:1080/1920;
  overflow:visible;
}
.ouverture-scene svg{width:100%!important;height:100%!important;display:block;overflow:visible}
html.ouverture-active,html.ouverture-active body{overflow:hidden}

/* ============ navigation ============ */
.nav{position:sticky;top:0;z-index:50;background:#000;border-bottom:2px solid var(--aura,var(--rouge));transition:border-color .8s ease}
.nav .dedans{display:flex;align-items:center;gap:8px;max-width:var(--large);margin:0 auto;padding:13px var(--gouttiere)}
.nav .marque{flex:0 0 auto;display:flex;align-items:center;padding:0;margin-right:26px}
.nav .marque:hover{background:none}
/* flex:0 0 auto, sinon la barre comprime l'image avant de replier les liens */
.nav img{height:38px;width:auto;flex:0 0 auto;object-fit:contain}
.nav a{color:#d2d2d8;text-decoration:none;font-size:14.5px;padding:8px 11px;border-radius:6px;white-space:nowrap}
.nav a:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav .droite{margin-left:auto;display:flex;align-items:center;gap:10px}
.nav .cta{background:var(--rouge);color:#fff;font-weight:700;padding:11px 18px}
.nav .cta:hover{background:#cf1f1f}
/* le burger : trois barres qui se plient en croix */
.burger{display:none;background:none;border:0;cursor:pointer;padding:0;
  width:42px;height:42px;position:relative;flex:0 0 auto}
.burger span{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:#fff;
  transition:transform .32s cubic-bezier(.3,.8,.3,1),opacity .18s ease}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:20px}
.burger span:nth-child(3){top:26px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.4)}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(max-width:1180px){
  .nav .dedans{flex-wrap:wrap;position:relative;padding-right:calc(var(--gouttiere) + 54px)}
  .nav .marque{margin-right:auto}
  .nav .droite{margin-left:0}
  /* le burger sort du flux : sinon il se retrouve au milieu de la dernière
     ligne du panneau, entre le lien et le bouton rouge */
  .burger{display:block;position:absolute;right:var(--gouttiere);top:50%;transform:translateY(-50%)}
  .nav .lien,.nav .menu-deroulant{display:none;width:100%;padding:13px 4px;
    border-top:1px solid rgba(255,255,255,.08)}
  .nav.ouvert .lien,.nav.ouvert .menu-deroulant{display:block;
    animation:entre-lien .42s cubic-bezier(.2,.75,.2,1) backwards}
  .nav.ouvert .lien:nth-of-type(2){animation-delay:.04s}
  .nav.ouvert .lien:nth-of-type(3){animation-delay:.08s}
  .nav.ouvert .lien:nth-of-type(4){animation-delay:.12s}
  .nav.ouvert .lien:nth-of-type(5){animation-delay:.16s}
  .nav.ouvert .lien:nth-of-type(6){animation-delay:.2s}
  .nav.ouvert .menu-deroulant{animation-delay:.24s}
  /* le panneau couvre l'écran plutôt que de pousser la page */
  .nav.ouvert{position:fixed;left:0;right:0;top:0;bottom:0;overflow-y:auto;
    background:#0a0a0d;border-bottom:0;animation:entre-panneau .3s ease}
  .nav.ouvert .dedans{align-content:flex-start;min-height:100%;padding-bottom:30px}
  .nav.ouvert .burger{top:26px;transform:none}
  .nav.ouvert .droite{width:100%;order:98;flex-direction:column;align-items:stretch;gap:0}
  .nav.ouvert .cta{width:100%;text-align:center;justify-content:center;margin-top:20px;padding:16px 18px;
    animation:entre-lien .42s cubic-bezier(.2,.75,.2,1) .28s backwards}
}
@keyframes entre-lien{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes entre-panneau{from{opacity:0}to{opacity:1}}

/* ============ bannière ============ */
.hero{display:grid;grid-template-columns:1.04fr .96fr;background:var(--noir);color:#fff;min-height:var(--hero-h);
  border-radius:0 0 var(--arrondi) var(--arrondi);overflow:hidden}
.hero .texte{
  padding:76px 56px;display:flex;flex-direction:column;justify-content:center;
  padding-left:max(56px, calc((100vw - var(--large))/2 + var(--gouttiere)));
}
.hero .dedans{max-width:620px}
.slogan{font-size:clamp(38px,3.6vw,68px);line-height:1.03;letter-spacing:-2px;font-weight:800}
.slogan span{display:block}
.slogan .accent{color:var(--rouge-vif)}
.hero .sous{font-size:clamp(16px,1.1vw,20px);line-height:1.62;color:var(--gris-clair);margin:22px 0 34px;max-width:520px}
.hero .sous b{color:#fff;font-weight:600}

.recherche{display:flex;gap:10px;flex-wrap:wrap;background:#fff;border-radius:10px;padding:8px;max-width:560px}
.recherche .champ{flex:1 1 172px;min-width:0;position:relative}
.recherche select,.recherche input{width:100%;border:0;background:#fff;font:inherit;font-size:15px;color:var(--texte);padding:14px 12px;border-radius:7px;appearance:none;outline:none;cursor:pointer}
.recherche input{cursor:text}
.recherche .champ+.champ::before{content:"";position:absolute;left:-5px;top:9px;bottom:9px;width:1px;background:#e3e3e8}
.recherche button{border:0;background:var(--rouge);color:#fff;font:inherit;font-weight:700;font-size:15px;padding:14px 26px;border-radius:7px;cursor:pointer}
.recherche button:hover{background:#cf1f1f}

.etiquette-ia{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  margin-bottom:20px;padding:8px 15px 8px 13px;border-radius:999px;
  background:rgba(231,39,39,.12);border:1px solid rgba(231,39,39,.42);
  font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#ff6a6a;
}
.preuve{display:flex;align-items:center;gap:13px;margin-top:34px;flex-wrap:wrap}
.preuve .btn-store{padding:13px 22px 13px 18px}
.preuve .btn-store span{font-size:17px}
.pouls-compteur{
  width:8px;height:8px;border-radius:50%;background:var(--rouge-vif);flex:0 0 auto;
  align-self:center;box-shadow:0 0 0 0 rgba(245,0,0,.6);
  animation:pouls 2.4s ease-out infinite;
}
@keyframes pouls{
  0%{box-shadow:0 0 0 0 rgba(245,0,0,.55)}
  70%{box-shadow:0 0 0 12px rgba(245,0,0,0)}
  100%{box-shadow:0 0 0 0 rgba(245,0,0,0)}
}


.scene{position:relative;overflow:hidden;background:#000}
.scene .sujet{position:absolute;inset:0}
.scene .sujet img{width:100%;height:100%;object-fit:cover;object-position:var(--cadrage,50% 50%);opacity:0;transition:opacity 1s ease}
.scene .sujet.actif img{opacity:1}
.scene::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--noir) 0%,rgba(14,14,17,.5) 24%,rgba(14,14,17,0) 58%)}
.grille{position:absolute;inset:0;pointer-events:none;opacity:.2;
  background-image:linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(circle at 58% 50%,#000 0%,transparent 72%);
  mask-image:radial-gradient(circle at 58% 50%,#000 0%,transparent 72%)}
/* l'analyse : une maille rouge qui ne se pose que sur le sujet, découpée sur
   sa silhouette, révélée derrière la ligne, puis repassée par une bande
   lumineuse comme un second balayage */
.analyse{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  -webkit-mask-image:var(--sil);mask-image:var(--sil);
  -webkit-mask-size:cover;mask-size:cover;
  -webkit-mask-position:var(--cadrage,50% 50%);mask-position:var(--cadrage,50% 50%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  clip-path:inset(0 0 100% 0);
}
/* l'animation tourne sur tous les sujets, donc toujours en phase avec la ligne :
   si on la démarrait au moment où le sujet devient actif, elle repartait
   350 ms trop tôt et le quadrillage précédait le balayage */
.scene .sujet .analyse{
  visibility:hidden;
  animation:analyse-decoupe 6s cubic-bezier(.62,.03,.36,1) infinite,
            analyse-parait 6s linear infinite;
}
.scene .sujet.actif .analyse{visibility:visible}
.analyse .maille,.analyse .repasse{position:absolute;inset:0;display:block}
.analyse .maille{
  background:
    linear-gradient(rgba(255,60,60,.40) 1px,transparent 1px) 0 0/100% 19px,
    linear-gradient(90deg,rgba(255,60,60,.40) 1px,transparent 1px) 0 0/19px 100%,
    rgba(231,39,39,.08);
}
.analyse .repasse{
  mix-blend-mode:screen;
  background:
    linear-gradient(rgba(255,214,214,.98) 1px,transparent 1px) 0 0/100% 19px,
    linear-gradient(90deg,rgba(255,214,214,.98) 1px,transparent 1px) 0 0/19px 100%,
    linear-gradient(180deg,rgba(255,40,40,.28),rgba(255,40,40,.28));
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 34%,#000 50%,rgba(0,0,0,.35) 66%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 34%,#000 50%,rgba(0,0,0,.35) 66%,transparent 100%);
  -webkit-mask-size:100% 24%;mask-size:100% 24%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:repasse 6s cubic-bezier(.62,.03,.36,1) infinite;
}
/* la ligne descend de -140px à hero-h + 120px, son bord vif est 120px plus bas */
/* mêmes bornes et même durée que balaye : la zone découverte s'arrête
   exactement sur le bord vif de la ligne, qui va de -20px à la hauteur + 250px */
@keyframes analyse-decoupe{
  0%{clip-path:inset(0 0 calc(100% + 36px) 0)}
  58%,100%{clip-path:inset(0 0 -234px 0)}
}
@keyframes analyse-parait{
  0%,3%{opacity:0}
  9%{opacity:1}
  88%{opacity:1}
  97%,100%{opacity:0}
}
/* calé sur balaye au pixel près : le centre de la bande claire suit le bord vif
   de la grande ligne, qui va de -20px à la hauteur de la scène + 250px */
@keyframes repasse{
  0%{-webkit-mask-position:0 calc(-36px - var(--scan-h, 620px) * .12);
     mask-position:0 calc(-36px - var(--scan-h, 620px) * .12)}
  58%,100%{-webkit-mask-position:0 calc(var(--scan-h, 620px) * .88 + 234px);
           mask-position:0 calc(var(--scan-h, 620px) * .88 + 234px)}
}
@media(prefers-reduced-motion:reduce){
  .scene .sujet .analyse{animation:none;opacity:1;clip-path:none}
  .analyse .repasse{animation:none;opacity:.5}
}
.ligne{position:absolute;left:0;right:0;height:120px;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,rgba(231,39,39,0) 0%,rgba(231,39,39,.16) 55%,rgba(255,80,80,.9) 96%,rgba(255,255,255,.85) 100%);
  box-shadow:0 0 34px 6px rgba(231,39,39,.4);
  animation:balaye 6s cubic-bezier(.62,.03,.36,1) infinite}
/* --scan-h est la hauteur réelle de la scène, posée par le script : sans elle
   la ligne s'arrêtait à la hauteur théorique du bandeau et restait visible en bas */
@keyframes balaye{
  0%{transform:translateY(-140px);opacity:0}
  7%{opacity:1}
  54%{opacity:1}
  58%{transform:translateY(calc(var(--scan-h, var(--hero-h)) + 130px));opacity:0}
  100%{transform:translateY(calc(var(--scan-h, var(--hero-h)) + 130px));opacity:0}
}
.reticule{position:absolute;z-index:3;left:27%;top:17%;width:46%;height:56%;opacity:0;animation:vise 6s ease infinite}
.reticule i{position:absolute;width:26px;height:26px;border:2px solid rgba(255,255,255,.85)}
.reticule i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}
.reticule i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.reticule i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}
.reticule i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
@keyframes vise{
  0%,17%{opacity:0;transform:scale(1.13)}
  27%{opacity:.9;transform:scale(1)}
  58%{opacity:.9;transform:scale(1)}
  66%{opacity:1;transform:scale(.965)}
  90%{opacity:1;transform:scale(.965)}
  100%{opacity:0;transform:scale(.965)}
}
.point{position:absolute;width:8px;height:8px;border-radius:50%;z-index:3;border:2px solid rgba(255,255,255,.95);background:rgba(231,39,39,.85);opacity:0;animation:pose 6s ease infinite}
@keyframes pose{
  0%,18%{opacity:0;transform:scale(.4)}
  27%{opacity:1;transform:scale(1)}
  66%{opacity:1;transform:scale(1)}
  78%,100%{opacity:0;transform:scale(1.4)}
}
/* le résultat de l'analyse : il se pose une fois le balayage passé */
.verdict{
  position:absolute;z-index:5;left:24px;right:24px;bottom:24px;
  display:flex;align-items:center;gap:14px;
  padding:13px 16px 13px 13px;border-radius:13px;
  background:rgba(10,10,13,.72);border:1px solid rgba(255,86,86,.55);
  box-shadow:0 14px 40px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  opacity:0;transform:translateY(14px) scale(.97);
  transition:opacity .42s ease,transform .42s cubic-bezier(.2,.8,.3,1);
}
.scene.resolu .verdict{opacity:1;transform:none}
.verdict .vig{flex:0 0 auto;width:46px;height:46px;border-radius:9px;overflow:hidden;background:#000}
.verdict .vig img{width:100%;height:100%;object-fit:cover}
.verdict .dit{flex:1 1 auto;min-width:0}
.verdict b{display:block;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#ff6a6a}
.verdict p{font-size:14px;color:#fff;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.verdict p span{color:#a5a5b0}
.verdict .jauge{height:3px;border-radius:2px;background:rgba(255,255,255,.14);margin-top:8px;overflow:hidden}
.verdict .jauge i{display:block;height:100%;width:0;background:var(--rouge-vif);border-radius:2px;transition:width 1.1s cubic-bezier(.2,.7,.3,1) .15s}
.scene.resolu .verdict .jauge i{width:var(--part,96%)}
.verdict .taux{flex:0 0 auto;font-size:19px;font-weight:800;letter-spacing:-.5px;color:#fff;font-variant-numeric:tabular-nums}
.verdict.sans-taux .taux,.verdict.sans-taux .jauge{display:none}
@media(max-width:940px){
  .verdict{left:16px;right:16px;bottom:16px;padding:11px 13px 11px 11px;gap:11px}
  .verdict .vig{width:40px;height:40px}
  .verdict p{font-size:13px}
  .verdict .taux{font-size:17px}
}
.etat{position:absolute;z-index:4;left:28px;top:26px;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.88)}
.etat span{display:block;transition:opacity .45s ease}
.etat .cherche{position:relative}
.etat .trouve{position:absolute;left:0;top:0;opacity:0;color:#fff}
.etat .pastille{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--rouge-vif);margin-right:9px;vertical-align:1.5px;animation:bat 1.5s ease-in-out infinite}
.etat .trouve .pastille{background:#fff;animation:none}
.scene.resolu .cherche{opacity:0}
.scene.resolu .trouve{opacity:1}
@keyframes bat{0%,100%{opacity:.3}50%{opacity:1}}
.scene.humain .point{display:none}
.scene.humain .reticule{left:19%;top:8%;width:64%;height:82%}

@media(max-width:940px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero .texte{order:2;padding:42px 24px 52px}
  .scene{order:1;height:360px}
  .scene::after{background:linear-gradient(0deg,var(--noir) 0%,rgba(14,14,17,0) 62%)}
  .recherche{max-width:none}
  .recherche button{flex:1 1 100%}
  .recherche .champ+.champ::before{display:none}
}

/* ============ boutons de téléchargement ============ */
/* dessinés en vectoriel : nets à toutes les tailles, contrairement aux badges
   d'origine qui sortaient flous dès qu'on les agrandissait */
.btn-store{
  display:inline-flex;align-items:center;gap:11px;
  padding:11px 18px 11px 15px;border-radius:12px;
  background:#000;color:#fff;text-decoration:none;
  border:1px solid rgba(255,255,255,.16);
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.btn-store:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.4)}
.btn-store .marque{width:23px;height:23px;flex:0 0 auto;fill:#fff}
.btn-store .marque-play{width:21px;height:21px;fill:none}
.btn-store span{display:flex;flex-direction:column;line-height:1.15;font-size:16px;font-weight:600;letter-spacing:-.2px}
.btn-store small{font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:2px}
/* sur fond clair, le bouton reste noir : c'est la convention des stores */
.btn-store.clair{background:#fff;color:var(--texte);border-color:#d9d9e0}
.btn-store.clair .marque{fill:var(--texte)}
.btn-store.clair small{color:var(--gris)}
.btn-store.clair:hover{border-color:#a8a8b4}
@media(max-width:560px){
  .btn-store{padding:10px 15px 10px 13px;gap:9px}
  .btn-store span{font-size:15px}
}

/* les blocs situés loin sous la ligne de flottaison ne sont ni mis en page ni
   peints tant qu'ils n'approchent pas : c'est le premier rendu qui y gagne.
   contain-intrinsic-size donne une hauteur estimée pour que la barre de
   défilement ne saute pas. */
#parcours,#communaute,#associations,#sos,#temoignages,.presse,#telecharger,.pied{
  content-visibility:auto;
  contain-intrinsic-size:auto 700px;
}

/* ============ le rythme de la page ============ */
/* les sections ne sont plus des bandes collées bord à bord : les fonds sombres
   et blancs deviennent des blocs arrondis posés sur la page, avec de l'air
   entre eux. Plus aucune ligne droite entre deux aplats de couleur. */
:root{ --souffle:clamp(46px,4.4vw,88px); --arrondi:clamp(22px,1.9vw,34px) }
.pose{
  max-width:calc(var(--large) + 2 * var(--gouttiere));
  margin-left:auto;margin-right:auto;
  margin-top:var(--souffle);margin-bottom:var(--souffle);
  border-radius:var(--arrondi);
  overflow:hidden;
  box-shadow:0 30px 70px -34px rgba(10,10,20,.42);
}
.communaute.pose,.presse.pose{box-shadow:0 22px 50px -30px rgba(16,16,24,.22)}
/* le bloc de fin descend jusqu'au pied de page, donc arrondi en haut seulement */
.pose-bas{
  max-width:none;margin:var(--souffle) 0 0;
  border-radius:var(--arrondi) var(--arrondi) 0 0;overflow:hidden;
}
@media(max-width:820px){
  :root{ --arrondi:20px }
  .pose{margin-left:14px;margin-right:14px}
}

/* ============ sections ============ */
.section{padding:clamp(72px,6vw,126px) 0}
.tete{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:38px}
.tete .lien{color:var(--rouge);text-decoration:none;font-weight:700;font-size:15px;white-space:nowrap}
.tete .lien:hover{text-decoration:underline}

.fiches{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,1.6vw,28px)}
.fiche{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 12px rgba(16,16,24,.07);text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease}
.fiche:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(16,16,24,.14)}
.fiche .photo{position:relative;aspect-ratio:4/3;overflow:hidden;background:#dedee4}
.fiche .photo img{width:100%;height:100%;object-fit:cover}
.fiche .urgence{position:absolute;left:12px;top:12px;background:var(--rouge);color:#fff;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:5px}
.fiche .corps{padding:20px 22px 24px}
.fiche .meta{font-size:13.5px;color:var(--gris);margin-top:7px}
.fiche .lieu{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--gris);margin-top:14px;line-height:1.45}
.pastille-rouge{width:7px;height:7px;border-radius:50%;background:var(--rouge);flex:0 0 auto;margin-top:6px}

.categories{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,1.6vw,28px)}
.categorie{position:relative;border-radius:14px;overflow:hidden;min-height:clamp(240px,22vw,340px);display:flex;align-items:flex-end;text-decoration:none;color:#fff}
.categorie img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.categorie:hover img{transform:scale(1.04)}
.categorie::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,8,11,.9) 0%,rgba(8,8,11,.12) 62%)}
/* le symbole de la catégorie, le même que dans l'application, posé nu sur la
   photo : l'ombre suffit à le détacher, pas besoin de pastille */
.categorie .picto{position:absolute;z-index:2;left:clamp(20px,2vw,30px);top:clamp(18px,1.8vw,26px);
  height:clamp(26px,2.3vw,34px);color:#fff;filter:drop-shadow(0 2px 7px rgba(0,0,0,.6))}
.categorie .txt{position:relative;z-index:2;padding:28px 30px}
.categorie .nb{font-size:clamp(28px,2.2vw,38px);font-weight:800;letter-spacing:-.8px;line-height:1.1}
.categorie .quoi{font-size:15px;color:rgba(255,255,255,.82);margin-top:5px}

/* ============ identification par l'image ============ */
.ia{
  position:relative;color:#fff;padding:clamp(64px,6vw,120px) 0;
  /* le halo bleu démarre sous la jonction : au ras du bord, il éclaircissait
     le haut du bloc et la mosaïque unie ne raccordait plus */
  background:
    radial-gradient(120% 82% at 78% 26%, rgba(61,125,255,.16), transparent 58%),
    linear-gradient(180deg,#0c0d13 0%,#0c0d13 9%,var(--noir) 46%,#120e12 100%);
}
.ia .sur-titre{color:#7fa8ff}
.ia .etape .num{border-color:rgba(125,168,255,.5);color:#bcd2ff}
.moteur{border-color:rgba(125,168,255,.22)}
.ia .grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,4vw,80px);align-items:center}
.ia .grid>*{min-width:0}
.ia h2{color:#fff}
.ia .intro{color:var(--gris-clair)}
.etapes{margin-top:36px;display:flex;flex-direction:column;gap:22px}
.etape{display:flex;gap:16px;align-items:flex-start}
.etape .num{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.28);display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff}
.etape b{display:block;font-size:16px;margin-bottom:4px}
.etape p{color:#9a9aa6;font-size:15px;line-height:1.6}

.moteur{background:var(--noir-2);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:clamp(20px,1.6vw,28px)}
.moteur .haut{display:flex;gap:18px;align-items:center}
.requete{position:relative;flex:0 0 auto;width:clamp(124px,9vw,164px);aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#000}
.requete img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.requete .balai{position:absolute;left:0;right:0;top:0;height:46px;
  background:linear-gradient(180deg,rgba(231,39,39,0),rgba(255,90,90,.85),rgba(255,255,255,.9));
  box-shadow:0 0 22px 4px rgba(231,39,39,.5);animation:balai 2.4s ease-in-out infinite}
@keyframes balai{0%{transform:translateY(-50px);opacity:0}12%{opacity:1}80%{transform:translateY(calc(var(--scan-h, 150px) + 8px));opacity:1}92%,100%{opacity:0}}
/* la même analyse, à l'échelle de la vignette et sur le rythme du balai */
.analyse-vignette{
  z-index:2;
  --sil:url(assets/silhouette-ia-labrador.webp);
  -webkit-mask-position:50% 38%;mask-position:50% 38%;
  opacity:1;
  animation:analyse-decoupe-vignette 2.4s ease-in-out infinite,
            analyse-parait-vignette 2.4s linear infinite;
}
.analyse-vignette .maille,.analyse-vignette .repasse{background-size:auto 13px,13px auto,auto}
.analyse-vignette .repasse{
  animation:repasse-vignette 2.4s ease-in-out infinite;
}
/* bornes exprimées en fonction de la hauteur réelle de la vignette : en pixels
   fixes, l'animation dépassait le cadre dès que la vignette changeait de taille */
@keyframes repasse-vignette{
  0%{-webkit-mask-position:0 calc(-10px - var(--scan-h, 150px) * .12);
     mask-position:0 calc(-10px - var(--scan-h, 150px) * .12)}
  80%,100%{-webkit-mask-position:0 calc(var(--scan-h, 150px) * .88 + 26px);
           mask-position:0 calc(var(--scan-h, 150px) * .88 + 26px)}
}
@keyframes analyse-decoupe-vignette{
  0%{clip-path:inset(0 0 calc(100% + 10px) 0)}
  80%,100%{clip-path:inset(0 0 -24px 0)}
}
@keyframes analyse-parait-vignette{0%,5%{opacity:0}15%{opacity:1}84%{opacity:1}94%,100%{opacity:0}}
.requete .coins i{position:absolute;width:18px;height:18px;border:2px solid rgba(255,255,255,.7)}
.requete .coins i:nth-child(1){left:9px;top:9px;border-right:0;border-bottom:0}
.requete .coins i:nth-child(2){right:9px;top:9px;border-left:0;border-bottom:0}
.requete .coins i:nth-child(3){left:9px;bottom:9px;border-right:0;border-top:0}
.requete .coins i:nth-child(4){right:9px;bottom:9px;border-left:0;border-top:0}
.moteur .haut .quoi b{display:block;font-size:16px;margin-bottom:6px}
.moteur .haut .quoi p{color:#8f8f9b;font-size:14px;line-height:1.6}
.moteur .haut .quoi .angles{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.moteur .haut .quoi .angles span{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  border:1px solid rgba(255,255,255,.18);color:#c9c9d2;border-radius:5px;padding:4px 8px;transition:all .3s ease}
.moteur .haut .quoi .angles span.on{border-color:var(--rouge-vif);background:rgba(231,39,39,.18);color:#fff}

.moteur .separateur{display:flex;align-items:center;gap:12px;margin:22px 0 18px;color:#7a7a86;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.moteur .separateur::before,.moteur .separateur::after{content:"";height:1px;background:rgba(255,255,255,.12);flex:1}

.candidats{display:flex;flex-direction:column;gap:10px}
.candidat{display:flex;align-items:center;gap:14px;padding:10px;border-radius:11px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);transition:border-color .35s ease,background .35s ease,transform .35s ease}
.candidat .vig{flex:0 0 auto;width:52px;height:52px;border-radius:9px;overflow:hidden;background:#000}
.candidat .vig img{width:100%;height:100%;object-fit:cover}
.candidat .info{flex:1 1 auto;min-width:0}
.candidat .nom{font-size:14.5px;font-weight:600;color:#e7e7ee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.candidat .jauge{height:4px;border-radius:2px;background:rgba(255,255,255,.1);margin-top:9px;overflow:hidden}
.candidat .jauge i{display:block;height:100%;width:0;background:#6f6f7d;border-radius:2px;transition:width .9s cubic-bezier(.2,.7,.3,1),background .4s ease}
.candidat .score{flex:0 0 auto;width:52px;text-align:right;font-size:14px;font-weight:700;color:#9a9aa6;font-variant-numeric:tabular-nums}
.candidat.gagnant{border-color:var(--rouge-vif);background:rgba(231,39,39,.09);transform:translateX(3px)}
.candidat.gagnant .jauge i{background:var(--rouge-vif)}
.candidat.gagnant .score{color:#fff}
.candidat.gagnant .nom::after{content:"Correspondance";display:inline-block;margin-left:9px;font-size:10px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:#fff;background:var(--rouge);border-radius:4px;padding:2px 7px;vertical-align:1px}

@media(max-width:940px){
  .ia .grid{grid-template-columns:1fr;gap:38px}
  .fiches{grid-template-columns:1fr}
  .categories{grid-template-columns:1fr}
  .moteur .haut{flex-direction:column;align-items:flex-start}
  .requete{width:100%;aspect-ratio:16/10}
}

/* rappel des stores, répété au fil des sections */
.mini-stores{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px}
.mini-stores img{height:42px;width:auto}
.mini-stores .mot{font-size:13px;color:#8f8f9b;margin-right:4px}
.communaute .mini-stores,.telecharger .mini-stores{justify-content:center}
.communaute .mini-stores .mot{color:var(--gris)}

/* ============ comment ça marche ============ */

/* ============ alerte de proximité ============ */
.alerte{position:relative;min-height:clamp(420px,34vw,560px);display:flex;align-items:center;color:#fff;overflow:hidden;background:#000}
.alerte>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 46%}
.alerte::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,6,9,.97) 0%,rgba(6,6,9,.86) 38%,rgba(6,6,9,.35) 64%,rgba(6,6,9,.05) 92%)}
.alerte .pings{position:absolute;inset:0;z-index:1;pointer-events:none}
.alerte .pings b{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--rouge-vif);
  box-shadow:0 0 14px 3px rgba(245,0,0,.65);transform:translate(-50%,-50%)}
.alerte .pings b::before,.alerte .pings b::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;
  margin:-5.5px 0 0 -5.5px;border-radius:50%;border:1px solid rgba(245,0,0,.75);animation:onde 3.6s ease-out infinite}
.alerte .pings b::after{animation-delay:1.8s}
@keyframes onde{0%{transform:scale(1);opacity:.85}100%{transform:scale(11);opacity:0}}
.alerte .dedans{position:relative;z-index:2;max-width:var(--large);margin:0 auto;padding:64px var(--gouttiere);width:100%}
.alerte h2{color:#fff;max-width:620px}
.alerte p{color:var(--gris-clair);max-width:520px;margin-top:18px;font-size:clamp(16px,1.05vw,19px);line-height:1.7}
/* le sur-titre est un <p> : sans cette ligne il hérite du gris du bloc */
.alerte .sur-titre{color:var(--rouge);font-size:12px;margin-top:0;max-width:none}
.alerte .btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* ============ communauté ============ */
.communaute{position:relative;background:#fff;overflow:hidden}
.communaute .fond{position:absolute;left:-90px;top:50%;transform:translateY(-50%);width:clamp(420px,36vw,680px);opacity:.09;filter:grayscale(1);pointer-events:none}
.communaute .dedans{position:relative;z-index:2;max-width:880px;margin:0 auto;text-align:center;padding:clamp(66px,5.6vw,112px) var(--gouttiere)}
.illustration-benevoles{width:min(680px,100%);margin:0 auto 6px}
.illustration-benevoles img{width:100%;height:auto;display:block}
.communaute .roles{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:28px 0 8px}
/* le compteur de l'espace bénévole, comme dans l'application : le nombre, ce
   qu'il compte, et le point qui bat pour dire que la donnée est en direct */
.compte-benevoles{display:flex;align-items:center;justify-content:center;gap:16px;margin:30px 0 4px;text-align:left}
.compte-benevoles .nb{font-size:clamp(40px,3.6vw,58px);font-weight:800;letter-spacing:-2px;line-height:1;color:var(--jaune)}
.compte-benevoles .dit{font-size:15px;color:var(--gris);line-height:1.5}
.compte-benevoles .dit b{display:flex;align-items:center;gap:10px;color:var(--texte);font-size:17px}
.compte-benevoles .direct{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:12.5px;
  font-weight:700;letter-spacing:.04em;color:var(--jaune-texte)}
.compte-benevoles .direct .pouls-compteur{--rouge-vif:var(--jaune);background:var(--jaune);
  box-shadow:0 0 0 0 rgba(255,163,0,.6);animation:pouls-jaune 2.4s ease-out infinite}
@keyframes pouls-jaune{
  0%{box-shadow:0 0 0 0 rgba(255,163,0,.55)}
  70%{box-shadow:0 0 0 10px rgba(255,163,0,0)}
  100%{box-shadow:0 0 0 0 rgba(255,163,0,0)}
}
/* ce que l'espace bénévole réunit dans l'application, avec ses symboles */
.outils-benevoles{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:22px 0 8px}
.outils-benevoles span{display:inline-flex;align-items:center;gap:9px;background:#fff7e8;border:1px solid #f3dcb0;
  border-radius:999px;padding:9px 18px;font-size:14px;font-weight:600;color:#5a3d05}
.outils-benevoles .picto{height:17px;color:var(--jaune-texte)}
.outils-benevoles .picto-guides{height:18px}
@media(max-width:560px){
  .compte-benevoles{gap:12px}
  .compte-benevoles .dit b{flex-wrap:wrap;gap:7px}
  .outils-benevoles span{padding:8px 14px;font-size:13.5px}
}
.communaute .roles span{background:var(--clair);border:1px solid #e3e3e9;border-radius:999px;padding:9px 16px;font-size:14px;color:#3d3d46}
@media(max-width:860px){.communaute .fond{display:none}}

/* le bloc de rappel, repris de la feuille commune */
.rappel{background:#fff;border:1px solid #e4e4ea;border-radius:16px;padding:30px 32px;display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,3vw,56px);flex-wrap:wrap}
.rappel .txt{flex:1 1 320px;min-width:0;max-width:640px}
.rappel b{display:block;font-size:18px;letter-spacing:-.4px}
.rappel p{color:var(--gris);font-size:14.5px;margin-top:6px;line-height:1.6}
.rappel .liens{display:flex;gap:11px;flex-wrap:wrap}
.rappel.sombre{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#fff}
.rappel.sombre p{color:var(--gris-clair)}
@media(max-width:620px){.rappel{flex-direction:column;align-items:stretch;gap:20px}.rappel .txt{flex:0 0 auto;max-width:none}.rappel .btn{align-self:flex-start}}

/* ============ associations et refuges ============ */
.annuaire{background:var(--clair)}
.annuaire .tete{align-items:flex-start}
.annuaire .tete>div{max-width:720px}
.etablissements{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.3vw,20px)}
.etablissement{
  display:flex;flex-direction:column;gap:9px;justify-content:space-between;
  background:#fff;border:1px solid #e6e6ec;border-radius:13px;padding:22px 20px 20px;
  text-decoration:none;color:inherit;min-height:132px;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.etablissement:hover{border-color:var(--rouge);transform:translateY(-2px);box-shadow:0 10px 26px rgba(16,16,24,.09)}
.etablissement .nom{font-weight:700;font-size:15.5px;line-height:1.35}
.etablissement .ou{font-size:13.5px;color:var(--gris)}
@media(max-width:940px){.etablissements{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.etablissements{grid-template-columns:1fr}.etablissement{min-height:0}}

/* ============ SOS ============ */
.sos{background:var(--noir-2);color:#fff;padding:clamp(64px,5.4vw,110px) 0}
.sos .grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,4vw,80px);align-items:center}
.sos h2{color:#fff}
.sos ul{list-style:none;padding:0;margin:30px 0 0;display:flex;flex-direction:column;gap:14px}
.sos li{display:flex;gap:12px;align-items:flex-start;color:var(--gris-clair);font-size:16px;line-height:1.55}
.sos li b{color:#fff;font-weight:600}
.sos .puce{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--rouge);margin-top:8px}
.sos .capture{border-radius:16px;overflow:hidden}
@media(max-width:940px){.sos .grid{grid-template-columns:1fr;gap:34px}}

/* ============ parcours qui serpente ============ */
.trace{position:relative;margin-top:60px;height:430px}
.itineraire{position:absolute;left:0;top:0;width:100%;height:300px;pointer-events:none}
.jalon{position:absolute;width:clamp(230px,24%,300px)}
.jalon-1{left:0;top:0}
.jalon-2{left:31%;top:200px}
.jalon-3{left:62%;top:30px}
.repere{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--rouge);color:#fff;font-weight:800;font-size:17px;
  box-shadow:0 0 0 7px var(--clair), 0 8px 20px rgba(231,39,39,.32);margin-bottom:20px;
}
.jalon h3{margin-bottom:9px}
.jalon p{color:var(--gris);font-size:15.5px;line-height:1.65}
@media(max-width:1040px){
  .trace{height:auto;display:flex;flex-direction:column;gap:32px;padding-left:66px}
  .itineraire{display:none}
  .jalon{position:static;width:auto;min-height:46px}
  .trace::before{content:"";position:absolute;left:22px;top:14px;bottom:30px;width:2px;
    background:repeating-linear-gradient(180deg,var(--rouge) 0 3px,transparent 3px 13px)}
  .repere{position:absolute;left:0;margin-bottom:0}
}

/* ============ SOS ============ */
.sos{background:var(--noir-2);color:#fff;padding:clamp(72px,6vw,120px) 0;overflow:hidden}
.sos .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,4vw,80px);align-items:center}
.sos h2{color:#fff}
.sos-texte{max-width:588px}
.sos ul{list-style:none;padding:0;margin:30px 0 0;display:flex;flex-direction:column;gap:14px}
.sos li{display:flex;gap:12px;align-items:flex-start;color:var(--gris-clair);font-size:16px;line-height:1.55}
.sos li b{color:#fff;font-weight:600}
.sos .puce{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--rouge);margin-top:8px}

.scene-tel{position:relative;display:flex;justify-content:flex-end;align-items:center;
  min-height:clamp(430px,46vw,760px);padding-right:0}
.iphone{position:relative;z-index:2;width:min(392px,82%);aspect-ratio:1080/1920;
  filter:drop-shadow(0 42px 74px rgba(0,0,0,.72));margin-bottom:0}
.iphone .ecran{position:absolute;left:11.019%;top:2.031%;width:78.056%;height:95.937%;
  object-fit:cover;object-position:50% 0;border-radius:12.4%/6.98%}
.iphone .chassis{position:relative;z-index:2;width:100%;display:block}

.notifs{
  position:absolute;z-index:4;left:-8%;top:50%;width:min(300px,60%);
  transform:translateY(-50%) rotate(7deg);transform-origin:center;
}
/* une notification du système, en mode sombre : fond translucide très flou,
   nom de l'app et heure sur la même ligne en gris, titre en demi-gras,
   corps juste dessous. Pas de majuscules espacées, iOS n'en met pas. */
.notif{
  display:flex;gap:11px;align-items:flex-start;color:#fff;
  background:rgba(58,58,60,.58);
  -webkit-backdrop-filter:blur(34px) saturate(190%);backdrop-filter:blur(34px) saturate(190%);
  border:.5px solid rgba(255,255,255,.1);border-radius:21px;padding:11px 13px 12px;
  box-shadow:0 14px 34px rgba(0,0,0,.42);
}
.notif+.notif{margin-top:11px}
.notif:nth-child(2){opacity:.82}
.notif:nth-child(3){opacity:.6}
.notif .app{
  flex:0 0 auto;width:38px;height:38px;border-radius:9.5px;background:#0b0b0e;
  display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.14);
}
.notif .app img{width:27px;height:auto;object-fit:contain}
.notif .corps{flex:1 1 auto;min-width:0}
.notif .entete{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:12.5px;letter-spacing:0;text-transform:none;font-weight:500;
  color:rgba(235,235,245,.6);margin-bottom:1px}
.notif .entete time{font-size:12px;flex:0 0 auto}
.notif b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.2px;line-height:1.28}
.notif p{font-size:14px;line-height:1.3;color:rgba(235,235,245,.82);margin-top:1px}

@media(max-width:940px){
  .sos{padding-bottom:0}
  .sos .grid{grid-template-columns:1fr;gap:20px}
  .sos-texte{padding-bottom:0}
  /* le téléphone se décale à droite, les trois notifications arrivent par la
     gauche et n'en couvrent que la tranche : on garde l'écran lisible et les
     trois cartes visibles, comme sur grand écran. */
  /* le téléphone prend toute la scène et les notifications se posent dans son
     écran, comme sur un vrai appareil. Posées à côté, elles ne pouvaient être
     que minuscules ou déborder du bloc. */
  /* pas de notifications sur téléphone : posées à côté elles sont
     illisibles, posées dans l'écran elles le recouvrent. Le téléphone seul,
     bien présenté, dit déjà ce qu'il y a à dire. Elles restent sur grand
     écran, où la place ne manque pas. */
  .scene-tel{position:relative;display:block;min-height:0;width:min(286px,76%);
    margin:34px auto 0;padding:0;overflow:visible}
  .iphone{width:100%;margin:0;display:block;
    filter:drop-shadow(0 26px 48px rgba(0,0,0,.6))}
  .notifs{display:none}
}

/* ============ paroles ============ */
.paroles{background:var(--clair);padding:clamp(72px,6vw,126px) 0}
.paroles-grille{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,2vw,30px);margin-top:44px;align-items:stretch}
.paroles-petites{display:flex;flex-direction:column;gap:clamp(20px,2vw,30px)}
.parole-grande,.parole{
  margin:0;background:#fff;border-radius:14px;box-shadow:0 2px 14px rgba(16,16,24,.07);
  padding:clamp(28px,2.4vw,44px);display:flex;flex-direction:column;justify-content:center;
}
.parole{justify-content:space-between}
.parole-grande{position:relative;overflow:hidden}
.parole-grande::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--rouge);
}
.parole-grande blockquote{margin:0;font-size:clamp(21px,1.85vw,32px);line-height:1.38;letter-spacing:-.7px;font-weight:700;color:var(--texte)}
.parole blockquote{margin:0;font-size:16px;line-height:1.7;color:#44444e}
.parole-grande figcaption,.parole figcaption{display:flex;align-items:center;gap:14px;margin-top:30px}
.parole figcaption{margin-top:22px}
.parole-grande img,.parole img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.parole-grande figcaption span,.parole figcaption span{font-size:13.5px;color:var(--rouge);font-weight:600}
.parole-grande figcaption b,.parole figcaption b{display:block;font-size:15px;color:var(--texte);font-weight:700;margin-bottom:2px}
@media(max-width:940px){
  /* carrousel : les trois avis défilent horizontalement, avec un arrêt sur
     chacun, plutôt qu'une colonne de 900 px de haut */
  /* align-items:flex-start, sinon la carte la plus courte est étirée à la
     hauteur de la plus longue et son auteur se retrouve 200 px plus bas */
  .paroles-grille{display:flex;gap:14px;margin-top:30px;align-items:flex-start;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    margin-left:calc(-1 * var(--gouttiere));margin-right:calc(-1 * var(--gouttiere));
    padding:6px var(--gouttiere) 20px;
    scrollbar-width:none;-ms-overflow-style:none}
  .paroles-grille::-webkit-scrollbar{display:none}
  .paroles-petites{display:contents}
  .parole-grande,.parole{flex:0 0 85%;scroll-snap-align:center;margin:0}
  .parole{justify-content:flex-start}
  .parole-grande blockquote{font-size:19px}
}

/* ============ ils parlent de nous ============ */
.presse{background:#fff;padding:clamp(56px,4.4vw,92px) 0}
.presse .tete{margin-bottom:30px}
.articles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.3vw,20px)}
.article{
  display:flex;flex-direction:column;gap:10px;
  border:1px solid #e6e6ec;border-radius:13px;padding:22px 20px;
  text-decoration:none;color:inherit;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.article:hover{border-color:var(--rouge);transform:translateY(-2px);box-shadow:0 10px 26px rgba(16,16,24,.09)}
.article .media{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--rouge)}
.article .titre{font-size:15px;line-height:1.45;font-weight:600;flex:1 1 auto}
.article .quand{font-size:13px;color:var(--gris)}
@media(max-width:940px){.articles{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.articles{grid-template-columns:1fr}}

/* ============ téléchargement ============ */
.telecharger{background:var(--noir);color:#fff;padding:clamp(60px,4.6vw,96px) 0;text-align:center}
.telecharger h2{color:#fff}
.telecharger p{color:var(--gris-clair);margin:18px auto 32px;max-width:560px;font-size:17px;line-height:1.7}
.stores{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.stores .btn-store{padding:14px 24px 14px 20px;gap:13px}
.stores .btn-store .marque{width:26px;height:26px}
.stores .btn-store .marque-play{width:24px;height:24px}
.stores .btn-store span{font-size:18px}

/* ============ pied ============ */
.pied{background:#08080b;color:#8a8a95;padding:56px 0 34px;font-size:14px}
.pied .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(24px,2.6vw,48px)}
.pied h4{color:#fff;font-size:14px;margin:0 0 14px}
.pied a{color:#8a8a95;text-decoration:none;display:block;padding:5px 0}
.pied a:hover{color:#fff}
.pied img{height:44px;margin-bottom:18px}
.pied .bas{border-top:1px solid rgba(255,255,255,.08);margin-top:40px;padding-top:22px;font-size:13px}
@media(max-width:860px){.pied .cols{grid-template-columns:1fr 1fr}}

/* ?fige=1 : gèle les animations, sert aux captures */
.fige *,.fige *::before,.fige *::after{animation:none!important;transition:none!important}
.fige .point,.fige .reticule{opacity:1!important;transform:none!important}
.fige .requete .balai,.fige .ligne{display:none}
.fige .pouls-compteur{box-shadow:none}
.fige .pouls{box-shadow:none}
.fige .alerte .pings b::before,.fige .alerte .pings b::after{display:none}
@media(max-width:600px){
  body:has(.st-sticky-share-buttons) #mss-consent-banner{bottom:60px}
}

/* ============ ajustements téléphone ============ */
@media(max-width:1040px){
  /* le parcours devient une suite de cartes alignées, reliées par un trait.
     L'escalier décalé sortait du cadre à droite et le gros chiffre en
     filigrane se faisait couper. */
  .trace{height:auto;display:flex;flex-direction:column;gap:14px;padding-left:0;margin-top:40px}
  .itineraire{display:none}
  .trace::before{display:none}
  .jalon-1,.jalon-2,.jalon-3{left:auto;top:auto;margin-left:0}
  .jalon{
    position:relative;width:auto;background:#fff;border-radius:16px;
    padding:22px 22px 22px 66px;box-shadow:0 2px 14px rgba(16,16,24,.07);
  }
  .jalon::after{display:none}
  .repere{position:absolute;left:18px;top:22px;margin:0;width:34px;height:34px;font-size:14px}
  .jalon h3{margin-top:2px}
  /* le trait qui relie une carte à la suivante, dans l'axe des pastilles */
  .jalon+.jalon::before{
    content:"";position:absolute;left:34px;top:-14px;width:2px;height:14px;
    background:repeating-linear-gradient(180deg,var(--rouge) 0 3px,transparent 3px 9px);
  }
}
@media(max-width:940px){
  /* la bannière : on garde le balayage, on retire ce qui saute */
  .scene .reticule,.scene .point{display:none}
  .scene .sujet img{object-position:50% 38%!important}
  /* l'identification : le moteur respire */
  .moteur{padding:18px}
  .moteur .haut{gap:14px}
  .candidat{gap:11px;padding-left:9px;padding-right:11px}
  .candidat .score{width:46px;font-size:13px}
  .candidat .vig{width:46px;height:46px}
  .candidat .nom{font-size:13.5px;white-space:normal;overflow:visible;text-overflow:clip}
  .candidat.gagnant .nom::after{display:block;margin:7px 0 0;width:fit-content}
  /* l'alerte : les impulsions passent au-dessus, pas derrière le texte */
  .alerte .pings b:nth-child(1){left:74%;top:70%}
  .alerte .pings b:nth-child(2){left:90%;top:82%}
  .alerte .pings b:nth-child(3){left:58%;top:88%}
  .alerte .pings b:nth-child(4){left:88%;top:58%}
  .alerte .pings b:nth-child(5){display:none}
  .alerte::after{background:linear-gradient(180deg,rgba(6,6,9,.92) 0%,rgba(6,6,9,.86) 62%,rgba(6,6,9,.6) 100%)}
  /* les paroles : plus de caractère */
  .parole-grande{padding-top:56px}
  .parole-grande blockquote{font-size:21px;line-height:1.42}
  .parole-grande::after{
    content:"\201C";position:absolute;left:24px;top:-18px;font-size:120px;line-height:1;
    color:rgba(231,39,39,.16);font-weight:800;pointer-events:none;
  }
  .paroles-petites .parole:nth-child(1){margin-right:24px}
  .paroles-petites .parole:nth-child(2){margin-left:24px}
  /* SOS : le téléphone prend la place */
  .scene-tel{margin-top:44px}
  .mobile{width:min(300px,78%)}
  .notif{left:0;right:auto;bottom:26%;max-width:215px;padding:11px 15px}
  .notif b{font-size:13.5px}
  .notif div{font-size:11.5px}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .ligne,.point,.reticule,.etat .pastille,.requete .balai{animation:none!important}
  .point,.reticule{opacity:1!important;transform:none!important}
  .requete .balai{display:none}
}


/* ============ pages annexes ============ */
.bandeau{
  background:linear-gradient(135deg,#0b0b0e 0%,#1a0c0e 52%,#3a0f12 100%);
  color:#fff;padding:clamp(56px,5vw,96px) 0 clamp(48px,4.2vw,80px);position:relative;overflow:hidden;
}
.bandeau::after{
  content:"";position:absolute;right:-12%;top:-40%;width:60%;height:180%;
  background:radial-gradient(closest-side,rgba(231,39,39,.30),transparent 70%);pointer-events:none;
}
.bandeau .wrap{position:relative;z-index:2}
.bandeau h1{font-size:clamp(34px,3.4vw,60px);letter-spacing:-1.6px;max-width:16ch}
.bandeau .chapeau{color:#c9c9d2;font-size:clamp(16px,1.1vw,19px);line-height:1.68;max-width:600px;margin-top:20px}
.fil{display:flex;gap:9px;align-items:center;font-size:13px;color:#8f8f9b;margin-bottom:24px}
.fil a{color:#b9b9c4;text-decoration:none}
.fil a:hover{color:#fff}

.bloc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3.4vw,68px);align-items:center;padding:clamp(44px,3.8vw,76px) 0}
.bloc+.bloc{border-top:1px solid #e6e6ec}
.bloc.inverse .visuel{order:-1}
.bloc h2{font-size:clamp(24px,2.1vw,36px)}
.bloc .visuel img{width:100%;border-radius:16px}
.bloc .liste{margin:22px 0 0;padding:0;list-style:none}
.bloc .liste li{position:relative;padding-left:26px;margin-top:12px;color:var(--gris);line-height:1.62}
.bloc .liste li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;background:var(--rouge)}

/* rappel des stores, posé au fil des pages */
.rappel{background:#fff;border:1px solid #e4e4ea;border-radius:16px;padding:30px 32px;display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,3vw,56px);flex-wrap:wrap}
.rappel .txt{flex:1 1 320px;min-width:0;max-width:640px}
.rappel b{display:block;font-size:18px;letter-spacing:-.4px}
.rappel p{color:var(--gris);font-size:14.5px;margin-top:6px;line-height:1.6}
.rappel .liens{display:flex;gap:11px;flex-wrap:wrap}
.rappel .liens img{height:46px;width:auto}
.rappel.sombre{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#fff}
.rappel.sombre p{color:var(--gris-clair)}

@media(max-width:860px){
  .bloc{grid-template-columns:1fr;padding:38px 0}
  .bloc.inverse .visuel{order:0}
  .pied .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  /* deux colonnes de liens plutôt qu'une liste interminable */
  .pied .cols{grid-template-columns:1fr 1fr;gap:20px 18px}
  .pied .cols>div:first-child{grid-column:1 / -1}
  .pied a{padding:4px 0;font-size:13.5px}
  .pied h4{margin-bottom:8px}
  .rappel{flex-direction:column;align-items:stretch;gap:20px}
  /* en colonne, flex-basis devient une hauteur : 320 px de vide sous le texte */
  .rappel .txt{flex:0 0 auto;max-width:none}
  .rappel .btn,.rappel .liens{align-self:flex-start}
}

/* rappel des stores en ligne, repris de la page d'accueil */
.mini-stores{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px}
.mini-stores img{height:42px;width:auto}
.mini-stores .mot{font-size:13px;color:var(--gris);margin-right:4px}
.bandeau .mini-stores .mot{color:var(--gris-clair)}
.bandeau .mini-stores img{height:46px}

/* ============ boutons de téléchargement ============ */
/* dessinés en vectoriel : nets à toutes les tailles, contrairement aux badges
   d'origine qui sortaient flous dès qu'on les agrandissait */
.btn-store{
  display:inline-flex;align-items:center;gap:11px;
  padding:11px 18px 11px 15px;border-radius:12px;
  background:#000;color:#fff;text-decoration:none;
  border:1px solid rgba(255,255,255,.16);
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.btn-store:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.4)}
.btn-store .marque{width:23px;height:23px;flex:0 0 auto;fill:#fff}
.btn-store .marque-play{width:21px;height:21px;fill:none}
.btn-store span{display:flex;flex-direction:column;line-height:1.15;font-size:16px;font-weight:600;letter-spacing:-.2px}
.btn-store small{font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:2px}
/* sur fond clair, le bouton reste noir : c'est la convention des stores */
.btn-store.clair{background:#fff;color:var(--texte);border-color:#d9d9e0}
.btn-store.clair .marque{fill:var(--texte)}
.btn-store.clair small{color:var(--gris)}
.btn-store.clair:hover{border-color:#a8a8b4}
@media(max-width:560px){
  .btn-store{padding:10px 15px 10px 13px;gap:9px}
  .btn-store span{font-size:15px}
}

/* ============ contenu administrable (pages CMS) ============ */
.texte-cms{max-width:820px;font-size:17px;line-height:1.78;color:#3a3a44}
.texte-cms h1,.texte-cms h2,.texte-cms h3,.texte-cms h4{color:var(--texte);letter-spacing:-.6px;line-height:1.2;margin:38px 0 14px;font-weight:800}
.texte-cms h1{font-size:clamp(26px,2.2vw,38px)}
.texte-cms h2{font-size:clamp(22px,1.9vw,32px)}
.texte-cms h3{font-size:clamp(18px,1.4vw,23px)}
.texte-cms h1:first-child,.texte-cms h2:first-child,.texte-cms h3:first-child{margin-top:0}
.texte-cms p{margin:0 0 18px}
.texte-cms strong,.texte-cms b{color:var(--texte);font-weight:700}
.texte-cms a{color:var(--rouge);text-decoration:underline;text-underline-offset:2px}
.texte-cms a:hover{text-decoration:none}
.texte-cms ul,.texte-cms ol{margin:0 0 20px;padding-left:22px}
.texte-cms li{margin-bottom:9px}
.texte-cms img{border-radius:14px;margin:10px 0 22px}
.texte-cms hr{border:0;border-top:1px solid #e4e4ea;margin:34px 0}
.texte-cms table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15px}
.texte-cms th,.texte-cms td{border:1px solid #e4e4ea;padding:11px 13px;text-align:left}
.texte-cms th{background:#fff;font-weight:700}
.texte-cms blockquote{margin:0 0 22px;padding:18px 22px;background:#fff;border-left:3px solid var(--rouge);border-radius:0 12px 12px 0}

/* ============ ils parlent de nous ============ */
.coupures{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,1.6vw,24px)}
.coupure{display:block;background:#fff;border:1px solid #e6e6ec;border-radius:16px;padding:26px 26px 24px;text-decoration:none;color:inherit;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.coupure:hover{border-color:var(--rouge);transform:translateY(-2px);box-shadow:0 12px 30px rgba(16,16,24,.09)}
.coupure .logo-media{height:30px;width:auto;margin-bottom:14px;object-fit:contain}
.coupure .media{display:block;font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--rouge)}
.coupure h3{margin:11px 0 12px;font-size:18px;line-height:1.36}
.coupure .quand{display:block;font-size:13px;color:var(--gris)}
.pagination-refonte{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:38px;flex-wrap:wrap}
.pagination-refonte a,.pagination-refonte span{display:inline-block;padding:10px 15px;border-radius:9px;border:1px solid #e0e0e8;background:#fff;color:var(--texte);text-decoration:none;font-size:14.5px;font-weight:600}
.pagination-refonte .current span,.pagination-refonte li.active a{background:var(--rouge);border-color:var(--rouge);color:#fff}
.pagination-refonte ul{display:flex;gap:8px;list-style:none;margin:0;padding:0}
.pagination-refonte .disabled span{opacity:.4}
@media(max-width:860px){.coupures{grid-template-columns:1fr}}

/* ============ annuaire des associations ============ */
.filtre{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px}
.filtre input,.filtre select{font:inherit;font-size:15px;padding:14px 15px;border:1px solid #dcdce4;border-radius:10px;background:#fff;min-width:210px;flex:1 1 210px;max-width:320px}
.filtre button{font:inherit;font-weight:700;font-size:15px;padding:14px 28px;border:0;border-radius:10px;background:var(--rouge);color:#fff;cursor:pointer}
.filtre button:hover{background:#cf1f1f}
.liste-etab{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.4vw,22px)}
.etab{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid #e6e6ec;border-radius:16px;padding:22px 22px;text-decoration:none;color:inherit;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.etab:hover{border-color:var(--rouge);transform:translateY(-2px);box-shadow:0 12px 28px rgba(16,16,24,.08)}
.etab .puce,.etab .vignette{flex:0 0 auto;width:46px;height:46px;border-radius:12px;background:rgba(231,39,39,.1);display:grid;place-items:center;font-size:20px;overflow:hidden}
.etab .vignette img{width:100%;height:100%;object-fit:cover}
.etab h3{font-size:16.5px;margin-bottom:5px;line-height:1.35}
.etab p{color:var(--gris);font-size:14px;margin:0}
.etab .quoi{margin-top:7px;font-size:13.5px;line-height:1.55}
@media(max-width:860px){.liste-etab{grid-template-columns:1fr}.filtre input{max-width:none}}

/* ============ foire aux questions ============ */
.faq{max-width:880px}
.faq-rubrique{margin-bottom:44px}
.faq-rubrique h2{font-size:clamp(20px,1.7vw,28px);margin-bottom:18px}
.faq-item{background:#fff;border:1px solid #e6e6ec;border-radius:14px;margin-bottom:10px;overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;padding:20px 54px 20px 22px;font-weight:600;font-size:16.5px;line-height:1.45;position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .chevron{position:absolute;right:22px;top:50%;width:11px;height:11px;margin-top:-7px;border-right:2px solid var(--rouge);border-bottom:2px solid var(--rouge);transform:rotate(45deg);transition:transform .2s ease}
.faq-item[open] .chevron{transform:rotate(-135deg);margin-top:-3px}
.faq-item[open] summary{padding-bottom:8px}
.faq-item .reponse{padding:0 22px 22px;color:var(--gris);line-height:1.72;font-size:15.5px}
.faq-item .reponse p{margin:0 0 12px}
.faq-item .reponse a{color:var(--rouge)}

/* ============ détail d'une fiche ============ */
.fiche-tete{background:linear-gradient(135deg,#0b0b0e 0%,#1a0c0e 54%,#37100f 100%);color:#fff;padding:clamp(40px,3.6vw,72px) 0 clamp(36px,3.2vw,60px);border-radius:0 0 var(--arrondi) var(--arrondi)}
.fiche-tete .fil{margin-bottom:22px}
.fiche-tete h1{font-size:clamp(30px,3vw,52px);letter-spacing:-1.4px;margin:14px 0 0}
.fiche-tete .chapeau{color:#c9c9d2;margin-top:12px;font-size:16.5px}
.fiche-tete .chapeau b{color:#fff}
.fiche-tete-haut{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap}
.etiquettes{display:flex;gap:9px;flex-wrap:wrap}
.et{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;padding:7px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.28);color:#fff}
.et-rouge{border-color:rgba(231,39,39,.55);color:#ff8484;background:rgba(231,39,39,.14)}
.et-plein{background:var(--rouge);border-color:var(--rouge);color:#fff}
.fiche-actions{display:flex;gap:11px;flex-wrap:wrap}
.fiche-actions .btn{cursor:pointer;font:inherit;font-weight:700;font-size:15px}
.fiche-actions button.btn-ligne{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3)}
.fiche-actions button.btn-ligne:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55)}

.fiche-corps{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,3vw,58px);align-items:start}
.photo-principale{border-radius:18px;overflow:hidden;background:#000;aspect-ratio:4/3}
.photo-principale img{width:100%;height:100%;object-fit:cover}
.vignettes{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.vignettes .vignette{width:74px;height:74px;border-radius:11px;overflow:hidden;border:2px solid transparent;background:#000;padding:0;cursor:pointer}
.vignettes .vignette.active{border-color:var(--rouge)}
.vignettes .vignette img{width:100%;height:100%;object-fit:cover;display:block}

.bloc-info{background:#fff;border:1px solid #e6e6ec;border-radius:16px;padding:26px 26px 28px;margin-bottom:18px}
.bloc-info h2{font-size:19px;margin-bottom:16px}
.signalement{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 22px}
.signalement dt{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.signalement dd{margin:4px 0 0;font-size:16px;font-weight:600}
.recit{color:var(--gris);line-height:1.74;font-size:15.5px}

.indices{margin-top:clamp(36px,3vw,60px)}
.indices h2{font-size:clamp(20px,1.7vw,28px);margin-bottom:20px}
.liste-indices{display:flex;flex-direction:column;gap:12px;max-width:820px}
.indice{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid #e6e6ec;border-radius:14px;padding:18px 20px}
.indice .pastille-rouge{margin-top:7px}
.indice b{display:block;font-size:15.5px;margin-bottom:4px}
.indice p{color:var(--gris);font-size:14.5px;line-height:1.6;margin:0}

@media(max-width:900px){
  .fiche-corps{grid-template-columns:1fr}
  .signalement{grid-template-columns:1fr}
  .fiche-tete-haut{align-items:flex-start}
}

/* ============ animaux et objets trouvés ============ */
.bandeau-trouve::after{background:radial-gradient(closest-side,rgba(61,125,255,.20),transparent 70%)}
.trouves{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.6vw,26px)}
.trouves .trouve{display:flex;flex-direction:column;background:#fff;border:1px solid #e6e6ec;border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.trouves .trouve:hover{border-color:var(--rouge);transform:translateY(-3px);box-shadow:0 14px 34px rgba(16,16,24,.10)}
.trouves .trouve .vue{position:relative;aspect-ratio:4/3;background:#ececf2;display:grid;place-items:center;overflow:hidden}
.trouves .trouve .vue img{width:100%;height:100%;object-fit:cover}
.trouves .trouve .vue.sans-photo img{display:none}
.trouves .trouve .empreinte{font-size:38px;opacity:.35}
.badge-trouve{position:absolute;left:12px;top:12px;background:#0e0e11;color:#fff;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border-radius:6px}
.trouves .trouve .dedans{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1 1 auto}
.trouves .trouve h3{font-size:17px;line-height:1.35}
.trouves .trouve .resume{color:var(--gris);font-size:14.5px;line-height:1.6;margin-top:8px}
.bas-carte{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.bas-carte .ou{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--gris)}
.bas-carte .quand{font-size:13px;color:var(--gris-clair);color:#9a9aa6}
@media(max-width:940px){.trouves{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.trouves{grid-template-columns:1fr}}

/* ============ perdu de vue ============ */
.bandeau-pdv::after{background:radial-gradient(closest-side,rgba(255,140,90,.18),transparent 70%)}
.appels{display:flex;flex-direction:column;gap:14px;max-width:940px}
.appel{display:flex;gap:22px;align-items:flex-start;background:#fff;border:1px solid #e6e6ec;border-radius:18px;padding:24px 26px;text-decoration:none;color:inherit;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.appel:hover{border-color:var(--rouge);transform:translateY(-2px);box-shadow:0 14px 32px rgba(16,16,24,.09)}
.appel .portrait{flex:0 0 auto;width:78px;height:78px;border-radius:50%;overflow:hidden;background:#f0f0f4;display:grid;place-items:center}
.appel .portrait img{width:100%;height:100%;object-fit:cover}
.appel .initiale{font-size:28px;font-weight:800;color:var(--rouge)}
.appel h3{font-size:18px;margin-bottom:8px}
.appel .histoire p{color:var(--gris);font-size:15px;line-height:1.66;margin:0}
.appel .reperes{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:13.5px;color:var(--gris)}
.appel .reperes span{display:flex;align-items:center;gap:8px}
@media(max-width:620px){.appel{flex-direction:column;gap:16px}}

/* ============ nous contacter ============ */
.bandeau-contact::after{background:radial-gradient(closest-side,rgba(231,39,39,.22),transparent 70%)}
.contact-grille{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(26px,3vw,56px);align-items:start}
.formulaire{background:#fff;border:1px solid #e6e6ec;border-radius:20px;padding:clamp(26px,2.4vw,40px)}
.formulaire label{display:block;margin-bottom:18px}
.formulaire label span{display:block;font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gris);margin-bottom:8px}
.formulaire input,.formulaire textarea{width:100%;font:inherit;font-size:16px;padding:14px 16px;border:1px solid #dcdce4;border-radius:11px;background:#fff;color:var(--texte);resize:vertical}
.formulaire input:focus,.formulaire textarea:focus{outline:none;border-color:var(--rouge);box-shadow:0 0 0 3px rgba(231,39,39,.12)}
.formulaire .duo-champs{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.formulaire button{border:0;cursor:pointer;font:inherit;font-weight:700;font-size:15px;margin-top:6px}
.formulaire .mention{margin-top:16px;font-size:13px;color:var(--gris);line-height:1.6}
.contact-cotes{display:flex;flex-direction:column;gap:16px}
.carte-contact{background:#fff;border:1px solid #e6e6ec;border-radius:18px;padding:26px 26px 28px}
.carte-contact h2{font-size:17px;margin-bottom:10px}
.carte-contact p{font-size:16px;margin:0}
.carte-contact p a{color:var(--rouge);text-decoration:none;font-weight:600}
.carte-contact p a:hover{text-decoration:underline}
.carte-contact .petit{font-size:14.5px;color:var(--gris);line-height:1.64}
.carte-contact .btn{margin-top:16px}
@media(max-width:900px){.contact-grille{grid-template-columns:1fr}.formulaire .duo-champs{grid-template-columns:1fr}}

/* ============ pages légales ============ */
.bandeau-legal::after{background:radial-gradient(closest-side,rgba(180,180,200,.16),transparent 70%)}
.texte-legal{max-width:760px;font-size:16px}
.texte-legal h2,.texte-legal h3{scroll-margin-top:90px}

/* ============ fiche d'un refuge et adoption ============ */
.refuge-tete{position:relative;background:linear-gradient(135deg,#0b0b0e 0%,#151519 60%,#241013 100%);color:#fff;padding:clamp(38px,3.4vw,68px) 0 clamp(34px,3vw,58px);border-radius:0 0 var(--arrondi) var(--arrondi);overflow:hidden}
.refuge-tete::before{content:"";position:absolute;inset:0;background-image:var(--banniere,none);background-size:cover;background-position:center;opacity:.22}
.refuge-tete .wrap{position:relative;z-index:2}
.refuge-identite{display:flex;gap:22px;align-items:center;margin-top:18px}
.refuge-identite h1{font-size:clamp(26px,2.6vw,44px);letter-spacing:-1.2px}
.refuge-identite .chapeau{color:#c9c9d2;margin-top:8px}
.ecusson{flex:0 0 auto;width:86px;height:86px;border-radius:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;font-size:34px;overflow:hidden}
.ecusson img{width:100%;height:100%;object-fit:cover}
.refuge-corps{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,2.6vw,48px);align-items:start}
.refuge-cote{display:flex;flex-direction:column;gap:16px}
.actions-refuge{display:flex;gap:11px;flex-wrap:wrap;margin-top:18px}

.bandeau-adoption::after{background:radial-gradient(closest-side,rgba(50,189,109,.18),transparent 70%)}
.adoptions{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.5vw,24px)}
.adoption{background:#fff;border:1px solid #e6e6ec;border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.adoption .vue{position:relative;aspect-ratio:1/1;background:#ececf2;display:grid;place-items:center;overflow:hidden}
.adoption .vue img{width:100%;height:100%;object-fit:cover}
.adoption .vue.sans-photo img{display:none}
.adoption .empreinte{font-size:34px;opacity:.35}
.badge-adoption{position:absolute;left:11px;top:11px;background:#1f7a46;color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:6px}
.adoption .dedans{padding:18px 18px 20px}
.adoption h3{font-size:16px;line-height:1.35}
.adoption .resume{color:var(--gris);font-size:14px;line-height:1.55;margin-top:7px}
.adoption .ou{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--gris);margin-top:12px}
@media(max-width:1040px){.adoptions{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.refuge-corps{grid-template-columns:1fr}}
@media(max-width:560px){.adoptions{grid-template-columns:1fr}.refuge-identite{flex-direction:column;align-items:flex-start}}
.fiche-tete-trouve{background:linear-gradient(135deg,#0b0b0e 0%,#10161f 58%,#0e2233 100%)}
.photo-principale .sans-image{width:100%;height:100%;display:grid;place-items:center;background:#ececf2}
.photo-principale .sans-image .empreinte{font-size:52px;opacity:.4}

/* le logo du média avant tout : c'est lui qui se reconnaît d'un coup d'œil */
.coupure .bandeau-media{display:flex;align-items:center;justify-content:flex-start;height:62px;margin-bottom:16px}
.coupure .logo-media{height:42px;width:auto;max-width:200px;object-fit:contain;display:block}
.coupure .bandeau-media .media{display:none}
.coupure .media{display:block;margin-bottom:10px}
.coupure .bandeau-media.sans-logo{background:transparent;height:auto;margin-bottom:12px;justify-content:flex-start;padding:0}
.coupure .bandeau-media.sans-logo .logo-media{display:none}
.coupure .bandeau-media.sans-logo .media{display:block;font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--rouge)}

/* ============ boîte de connexion ============ */
.modale{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.modale[hidden]{display:none}
.modale-fond{position:absolute;inset:0;background:rgba(8,8,12,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.modale-boite{position:relative;z-index:2;background:#fff;border-radius:22px;width:min(480px,100%);max-height:90vh;overflow:auto;padding:36px 36px 30px;box-shadow:0 30px 80px rgba(8,8,14,.38)}
.modale-fermer{position:absolute;right:16px;top:14px;border:0;background:none;font-size:30px;line-height:1;color:#9a9aa6;cursor:pointer;padding:6px 10px}
.modale-fermer:hover{color:var(--texte)}
.modale-boite h2{font-size:25px;letter-spacing:-.7px}
.modale-boite h2::before{content:"";display:block;width:32px;height:3px;border-radius:2px;background:var(--rouge);margin-bottom:14px}
.modale-intro{color:var(--gris);font-size:15px;line-height:1.6;margin-top:10px}
.formulaire-modale{background:none;border:0;padding:0;margin-top:22px}
.formulaire-modale button{width:100%;text-align:center}
.lien-discret{display:inline-block;margin-top:14px;font-size:14px;color:var(--gris);text-decoration:none;border-bottom:1px solid #dcdce4}
.lien-discret:hover{color:var(--rouge);border-color:var(--rouge)}
.modale-separateur{display:flex;align-items:center;gap:14px;margin:24px 0 20px;color:var(--gris);font-size:13px}
.modale-separateur::before,.modale-separateur::after{content:"";flex:1;height:1px;background:#e6e6ec}
.modale-app p{color:var(--gris);font-size:14.5px;line-height:1.62;margin-bottom:14px}
.modale-app .mini-stores{margin-top:0}
.modale-pied{margin-top:24px;padding-top:18px;border-top:1px solid #eeeef3;font-size:14.5px;color:var(--gris)}
.modale-pied a{color:var(--rouge);font-weight:600;text-decoration:none}
.modale-pied a:hover{text-decoration:underline}
@media(max-width:520px){.modale-boite{padding:30px 24px 26px;border-radius:18px}}

/* la boîte « passez par l'application » */
.modale-app-seule{text-align:center}
.modale-app-seule h2::before{margin-left:auto;margin-right:auto}
.modale-app-seule .modale-intro{margin:12px auto 0;max-width:38ch}
.qr-bloc{margin-top:18px}
.qr-bloc img{width:232px;height:232px;display:block;margin:0 auto;border-radius:14px}
.qr-bloc p{margin-top:12px;font-size:14px;color:var(--gris);line-height:1.6}
.modale-stores{justify-content:center}
.modale-app-seule .modale-pied{border-top:1px solid #eeeef3;padding-top:18px;margin-top:22px;font-size:14px}
@media(max-width:520px){.qr-bloc img{width:196px;height:196px}}
.pied .pied-app{margin-top:10px;color:#6f6f7a;font-size:13.5px}

/* le logo du média sur la carte courte de l'accueil */
.article .bandeau-media{display:flex;align-items:center;height:46px;margin-bottom:14px}
.article .logo-media{height:34px;width:auto;max-width:150px;object-fit:contain;display:block}
.article .bandeau-media .media{display:none}
.article .bandeau-media.sans-logo{height:auto;margin-bottom:10px}
.article .bandeau-media.sans-logo .logo-media{display:none}
.article .bandeau-media.sans-logo .media{display:block}

/* ============ bandeau d'aperçu (recette seulement) ============ */
.bandeau-apercu{background:#111117;color:#e7e7ee;font-size:13.5px;line-height:1.5;border-bottom:1px solid rgba(255,255,255,.1)}
.bandeau-apercu[hidden]{display:none}
.bandeau-apercu .wrap{display:flex;align-items:center;gap:13px;padding-top:11px;padding-bottom:11px}
.bandeau-apercu p{flex:1 1 auto;margin:0;color:#a9a9b5}
.bandeau-apercu b{color:#fff;margin-right:6px}
.bandeau-apercu .pastille{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--rouge-vif);box-shadow:0 0 0 0 rgba(245,0,0,.6);animation:pouls 2.4s ease-out infinite}
.bandeau-apercu button{flex:0 0 auto;background:none;border:0;color:#8a8a95;font-size:22px;line-height:1;cursor:pointer;padding:2px 8px}
.bandeau-apercu button:hover{color:#fff}
@media(max-width:640px){.bandeau-apercu{font-size:12.5px}.bandeau-apercu .wrap{align-items:flex-start}}

/* ============ menu « À propos de nous » ============ */
.menu-deroulant{position:relative;padding:0}
.menu-titre{background:none;border:0;font:inherit;font-size:14.5px;color:#d2d2d8;cursor:pointer;padding:8px 11px;border-radius:6px;display:inline-flex;align-items:center;gap:7px}
.menu-titre:hover,.menu-titre[aria-expanded="true"]{color:#fff;background:rgba(255,255,255,.07)}
.menu-titre .fleche{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .2s ease}
.menu-titre[aria-expanded="true"] .fleche{transform:rotate(-135deg);margin-top:2px}
.menu-liste{position:absolute;left:0;top:calc(100% + 10px);min-width:230px;background:#15151a;border:1px solid rgba(255,255,255,.12);border-radius:13px;padding:8px;box-shadow:0 20px 44px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:60}
.menu-titre[aria-expanded="true"] + .menu-liste{opacity:1;visibility:visible;transform:none}
.menu-liste a{display:block;padding:10px 13px;border-radius:8px;color:#d2d2d8;text-decoration:none;font-size:14.5px}
.menu-liste a:hover{background:rgba(255,255,255,.08);color:#fff}
/* le bouton d'ajout reprend le symbole du bouton d'ajout de l'application */
.nav .cta{display:inline-flex;align-items:center;gap:8px}
.nav .cta .picto{height:17px}
@media(max-width:1180px){
  .menu-titre{width:100%;justify-content:space-between;padding:0}
  .menu-liste{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:none;padding:0 0 8px 10px;min-width:0;display:none}
  .menu-titre[aria-expanded="true"] + .menu-liste{display:block}
}
.menu-titre{white-space:nowrap}
@media(min-width:1181px) and (max-width:1250px){
  .nav .lien{padding:8px 8px;font-size:14px}
  .menu-titre{padding:8px 8px;font-size:14px}
  .nav .marque{margin-right:14px}
}

/* ============ téléphone : les boutons de téléchargement ============ */
/* empilés, ils doivent faire la même largeur, sinon l'alignement saute */
@media(max-width:560px){
  .preuve,.mini-stores,.stores,.rappel .liens,.modale-stores{width:100%}
  .preuve .btn-store,.mini-stores .btn-store,.stores .btn-store,.rappel .liens .btn-store,.modale-stores .btn-store{
    flex:1 1 100%;justify-content:center;padding:13px 18px;
  }
  .mini-stores .mot{flex:1 1 100%;margin:0 0 4px}
  .rappel .liens{display:flex;flex-wrap:wrap;gap:10px}
}

/* ============ fluidité, surtout sur téléphone ============ */
/* les sections hors écran ne sont plus calculées tant qu'on ne les atteint pas */
.section,.ia,.alerte,.communaute,.sos,.paroles,.presse,.annuaire,.telecharger,.securite,.carte-france,.rejoindre{
  content-visibility:auto;
  contain-intrinsic-size:auto 700px;
}
@media(max-width:940px){
  /* l'animation la plus coûteuse est le déplacement du masque : on la coupe
     et on garde le quadrillage posé, le balayage suffit à faire l'effet */
  .analyse .repasse{animation:none;opacity:.45}
  .scene .sujet img{will-change:auto}
  /* les flous d'arrière-plan sont chers en défilement sur mobile */
  .verdict{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,10,13,.88)}
  #mss-consent-overlay{-webkit-backdrop-filter:none;backdrop-filter:none}
  .modale-fond{-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media(prefers-reduced-motion:reduce){
  .ligne,.analyse,.analyse .repasse,.reticule,.point,.balai{animation:none!important}
}

/* ============ la page qui respire au défilement ============ */
/* Principe : refonte.js pose une variable --p (0 → 1) sur chaque élément
   [data-anime] selon sa position dans la fenêtre, et la classe .vu quand il
   entre. Tout ce qui suit s'écrit à partir de ces deux choses : rien ne tourne
   sur un minuteur, tout suit le geste. La classe .anime sur <html> n'est posée
   que si le script tourne, donc sans lui la page reste entièrement visible. */

/* l'aura : la couleur de l'univers en cours teinte le haut de la fenêtre,
   et le filet sous la barre de navigation prend la même couleur */
@property --aura{syntax:'<color>';inherits:true;initial-value:#e72727}
html{--aura:#e72727;transition:--aura .9s ease}
body::before{
  content:"";position:fixed;left:0;right:0;top:0;height:52vh;z-index:-1;pointer-events:none;
  background:radial-gradient(64% 100% at 50% 0%, color-mix(in srgb, var(--aura) 16%, transparent), transparent 72%);
}

/* apparitions : un élément seul (.revele) ou les enfants d'un conteneur en cascade */
.anime .revele{opacity:0;transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i,0) * 110ms)}
.anime .vu .revele,.anime .revele.vu{opacity:1;transform:none}
.anime [data-cascade]>*{opacity:0;transform:translateY(30px);
  transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}
.anime .vu [data-cascade]>*,.anime [data-cascade].vu>*{opacity:1;transform:none}
.anime [data-cascade]>*:nth-child(2){transition-delay:95ms}
.anime [data-cascade]>*:nth-child(3){transition-delay:190ms}
.anime [data-cascade]>*:nth-child(4){transition-delay:285ms}
.anime [data-cascade]>*:nth-child(5){transition-delay:380ms}
.anime [data-cascade]>*:nth-child(6){transition-delay:475ms}
.anime [data-cascade]>*:nth-child(7){transition-delay:570ms}
.anime [data-cascade]>*:nth-child(8){transition-delay:665ms}
.anime [data-cascade]>*:nth-child(9){transition-delay:760ms}
.anime [data-cascade]>*:nth-child(10){transition-delay:855ms}
.anime [data-cascade]>*:nth-child(11){transition-delay:950ms}
.anime [data-cascade]>*:nth-child(12){transition-delay:1045ms}
/* une fois entrés, les enfants retrouvent des transitions courtes pour le survol */
.anime .fini [data-cascade]>*,.anime [data-cascade].fini>*{transition-duration:.2s;transition-delay:0s}

/* les blocs collés à une séparation n'ont plus d'arrondi ni d'air au-dessus */
.sous-sep{margin-top:0!important;border-top-left-radius:0!important;border-top-right-radius:0!important}

/* le gabarit commun des séparations : la largeur d'un bloc, l'air d'un bloc */
.sep{position:relative;line-height:0;margin:var(--souffle) auto -1px;pointer-events:none;
  max-width:calc(var(--large) + 2 * var(--gouttiere));overflow:hidden}
.sep.pleine{max-width:none}
@media(max-width:820px){.sep{margin-left:14px;margin-right:14px}.sep.pleine{margin-left:0;margin-right:0}}

/* 1. la sortie de bannière : le bloc sombre ne s'arrête pas sur un bord net,
      il s'éteint. Le grain de bruit fractal qui servait ici a été retiré le
      17/09 : quelle que soit la taille de l'écran, les particules se fondaient
      en un aplat gris entre le noir et la page claire, et la bande se lisait
      comme une salissure au lieu d'une dissolution. */
.sep-poussiere{overflow:hidden}
.sep-poussiere i{position:absolute;inset:0;background:var(--bloc);display:block}
.sep-poussiere{height:clamp(44px,3.2vw,68px);margin:0 auto var(--souffle)}
/* le noir tient les deux tiers de la bande puis s'éteint vite : la sortie est
   franche, on n'étale pas une plage grise entre la bannière et la page */
.sep-poussiere .plein{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 46%,rgba(0,0,0,.5) 72%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 46%,rgba(0,0,0,.5) 72%,transparent 100%)}
/* le bloc qui s'éteint n'a plus de bord, donc plus d'arrondi en bas */
.hero.dissout{border-bottom-left-radius:0;border-bottom-right-radius:0}
#recherches{padding-top:clamp(10px,1.4vw,26px)}
@media(max-width:820px){.sep-poussiere{height:38px}}

/* 2. la mosaïque : le bloc ne monte pas d'un bloc, il se compose par tuiles,
      de bas en haut, comme une image qui se charge. C'est le vocabulaire de
      l'identification par l'image, et le dessin ne ressemble à aucun autre
      de la page. */
.sep-mosaique{height:clamp(78px,7.4vw,146px);margin:var(--souffle) auto -1px;z-index:1;
  display:grid;grid-template-columns:repeat(32,1fr);grid-template-rows:.78fr 1fr 1.34fr;
  border-radius:var(--arrondi) var(--arrondi) 0 0;overflow:hidden}
.sep-mosaique i{background:var(--bloc);display:block;
  opacity:clamp(0, (var(--pe,0) - var(--d,0)) * 5, 1)}
/* hors grille : placée en cellule, elle occuperait toutes les cases et
   pousserait les tuiles dans des rangées implicites de hauteur nulle */
.sep-mosaique .lueur{position:absolute;inset:0;background:radial-gradient(56% 120% at 50% 112%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 74%);
  opacity:calc(.25 + .75 * var(--pe,0))}
@media(max-width:820px){
  /* une tuile sur deux : on garde ainsi les trois rangées et leurs délais.
     Masquer les 48 premières remettait la rangée du haut en bas de grille. */
  .sep-mosaique{height:62px;grid-template-columns:repeat(16,1fr)}
  .sep-mosaique i:nth-child(2n){display:none}
}

/* 3. la levée : le bloc sombre monte derrière un voile clair qui se lève,
      la tranche du voile éclairée par la couleur de l'univers. Le voile part
      vers le haut et non vers le bas : le sombre reste ainsi collé au bloc à
      tout moment du défilement, sans jamais laisser de bande claire entre eux. */
.sep-levee{height:clamp(76px,7.4vw,140px);margin-top:calc(var(--souffle) * .4);overflow:hidden}
.sep-levee .fond{position:absolute;inset:0;background:var(--bloc);border-radius:var(--arrondi) var(--arrondi) 0 0}
.sep-levee .halo{position:absolute;left:0;right:0;height:60%;
  top:calc(var(--pe,0) * -100% + 100%);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%);
  opacity:clamp(0, 1.1 - var(--pe,0), 1)}
.sep-levee .voile{position:absolute;inset:0;background:var(--clair);display:block;
  transform:translateY(calc(var(--pe,0) * -100%))}
.sep-levee .voile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent) 16%,#fff 50%,var(--accent) 84%,transparent);
  box-shadow:0 0 18px 4px color-mix(in srgb,var(--accent) 50%,transparent);
  opacity:clamp(0, 1.12 - var(--pe,0), 1)}
@media(max-width:820px){.sep-levee{height:56px}}

/* 4. les vagues : trois nappes de la couleur de l'univers, la nappe avant
      portant la couleur du bloc ; elles glissent en sens contraires au
      défilement, à des vitesses différentes, donc le dessin change tout le temps */
.sep-vagues{height:clamp(88px,9vw,172px);background:transparent}
.sep-vagues .v{position:absolute;bottom:0;left:0;width:200%;height:100%;display:block}
.sep-vagues .v1{fill:var(--bloc);transform:translateX(calc(var(--pe,0) * -50%))}
.sep-vagues .v2{fill:color-mix(in srgb,var(--accent) 62%,transparent);transform:translate(calc(-50% + var(--pe,0) * 50%),calc((1 - var(--pe,0)) * 8px))}
.sep-vagues .v3{fill:color-mix(in srgb,var(--accent) 30%,transparent);transform:translate(calc(var(--pe,0) * -22%),calc((1 - var(--pe,0)) * 18px))}
@media(max-width:820px){.sep-vagues{height:52px}}

/* 5. la trame : un maillage de points, comme les fiches sur la carte, qu'une
      onde traverse de gauche à droite pendant le défilement. */
.sep-trame{height:clamp(96px,9vw,150px);max-width:var(--large);margin-top:calc(var(--souffle) * .3);margin-bottom:14px;overflow:visible}
.sep-trame .points,.sep-trame .onde{position:absolute;left:var(--gouttiere);right:var(--gouttiere);top:0;bottom:0;display:block;
  background:radial-gradient(circle,var(--accent) 1.3px,transparent 1.9px) 0 0/20px 20px}
.sep-trame .points{opacity:.22;
  -webkit-mask-image:radial-gradient(70% 100% at 50% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(70% 100% at 50% 50%,#000 30%,transparent 100%)}
.sep-trame .onde{background-image:radial-gradient(circle,var(--accent) 2.1px,transparent 2.7px);
  -webkit-mask-image:linear-gradient(100deg,transparent calc(var(--p,0) * 150% - 52%),#000 calc(var(--p,0) * 150% - 30%),#000 calc(var(--p,0) * 150% - 24%),transparent calc(var(--p,0) * 150%));
  mask-image:linear-gradient(100deg,transparent calc(var(--p,0) * 150% - 52%),#000 calc(var(--p,0) * 150% - 30%),#000 calc(var(--p,0) * 150% - 24%),transparent calc(var(--p,0) * 150%))}
@media(max-width:820px){.sep-trame{height:64px}}

/* 6. les filets : trois traits fins s'étirent depuis le centre vers les bords,
      à des vitesses différentes. Sobre et éditorial, pour annoncer la presse. */
.sep-filets{height:clamp(74px,7vw,132px);max-width:var(--large);margin-top:calc(var(--souffle) * .4);margin-bottom:6px;overflow:hidden}
.sep-filets::before{content:"";position:absolute;left:50%;bottom:14%;width:calc(var(--pe,0) * 70%);height:64%;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 60%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 72%)}
.sep-filets .f{position:absolute;left:50%;transform:translateX(-50%);display:block;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--accent) 12%,var(--accent) 88%,transparent)}
.sep-filets .f1{bottom:22%;height:3px;width:calc(var(--pe,0) * 94%);opacity:1}
.sep-filets .f2{bottom:46%;height:2px;width:calc(var(--pe,0) * 64%);opacity:.78}
.sep-filets .f3{bottom:70%;height:1.5px;width:calc(var(--pe,0) * 34%);opacity:.5}
@media(max-width:820px){.sep-filets{height:48px}}

/* 7. le fondu : la nuit tombe sur le dernier bloc. Pas de motif, juste un
      dégradé dont le front monte avec le défilement, et une ligne d'horizon
      qui s'allume au passage. */
.sep-fondu{height:clamp(96px,9vw,176px);margin:var(--souffle) auto -1px;overflow:hidden}
.sep-fondu .nuit{position:absolute;inset:0;display:block;
  --f:calc(100% - var(--pe,0) * 116%);
  background:linear-gradient(180deg,
    transparent calc(var(--f) - 6%),
    color-mix(in srgb,var(--bloc) 28%,transparent) calc(var(--f) + 8%),
    color-mix(in srgb,var(--bloc) 82%,transparent) calc(var(--f) + 30%),
    var(--bloc) calc(var(--f) + 56%))}
.sep-fondu .horizon{position:absolute;left:8%;right:8%;height:1.5px;border-radius:2px;
  top:calc(100% - var(--pe,0) * 116%);
  background:linear-gradient(90deg,transparent,var(--accent) 20%,#fff 50%,var(--accent) 80%,transparent);
  box-shadow:0 0 22px 5px color-mix(in srgb,var(--accent) 42%,transparent);
  opacity:min(1, calc(var(--pe,0) * 3), calc((1 - var(--pe,0)) * 4))}
@media(max-width:820px){.sep-fondu{height:78px}}

/* le raccourci « margin » des règles de forme ci-dessus écrase les marges
   latérales posées plus haut pour le téléphone : on les repose ici, en
   dernier, pour que chaque séparation garde la largeur de son bloc. */
@media(max-width:820px){
  .sep{margin-left:14px;margin-right:14px}
  .sep.pleine{margin-left:0;margin-right:0}
}

/* 6. l'ouverture : le bloc SOS s'ouvre depuis son axe, comme deux portes,
      pendant qu'il monte dans la fenêtre */
.portes{position:relative}
.anime .portes{--o:clamp(0, var(--pe,0), 1);
  clip-path:inset(0 calc((1 - var(--o)) * 50%) 0 calc((1 - var(--o)) * 50%) round var(--arrondi))}
.portes .porte{position:absolute;top:0;bottom:0;width:3px;z-index:5;background:#fff;
  box-shadow:0 0 30px 10px rgba(231,39,39,.85);opacity:clamp(0, (1 - var(--o,1)) * 2, 1)}
.portes .porte.g{left:calc((1 - var(--o,1)) * 50%)}
.portes .porte.d{right:calc((1 - var(--o,1)) * 50%)}

/* 7. le tracé du parcours se dessine au défilement, et chaque jalon
      s'allume quand le trait l'atteint. Sous 1040 px, le tracé est masqué
      et les jalons entrent en cascade. */
#parcours{--p2:clamp(0, (var(--p,0) - .12) / .62, 1)}
.itineraire .vif{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p2,1))}
.itineraire .tete-trace{filter:drop-shadow(0 0 6px rgba(231,39,39,.8))}
@media(min-width:1041px){
  .anime #parcours .jalon{--j:clamp(0, (var(--p2,1) - var(--seuil,0)) * 6, 1);
    opacity:var(--j);transform:translateY(calc((1 - var(--j)) * 22px))}
  .anime #parcours .jalon .repere{transform:scale(calc(.6 + .4 * var(--j)))}
}
@media(max-width:1040px){
  .itineraire{display:none}
  /* les cartes arrivent de la gauche en pivotant légèrement, la pastille
     grossit derrière elles, et le trait de liaison se dessine */
  .anime #parcours .jalon{opacity:0;transform:translate(-26px,18px) rotate(-1.4deg);
    transition:opacity .62s ease,transform .72s cubic-bezier(.2,.8,.25,1.02)}
  .anime #parcours.vu .jalon{opacity:1;transform:none}
  .anime #parcours .jalon .repere{transform:scale(.3);opacity:0;
    transition:transform .6s cubic-bezier(.2,1.1,.3,1.35),opacity .35s ease}
  .anime #parcours.vu .jalon .repere{transform:none;opacity:1}
  .anime #parcours .jalon+.jalon::before{transform:scaleY(0);transform-origin:top;
    transition:transform .38s cubic-bezier(.3,.8,.3,1)}
  .anime #parcours.vu .jalon+.jalon::before{transform:none}
  .anime #parcours.vu .jalon-2{transition-delay:.2s}
  .anime #parcours.vu .jalon-2 .repere{transition-delay:.34s}
  .anime #parcours.vu .jalon-2::before{transition-delay:.16s}
  .anime #parcours.vu .jalon-3{transition-delay:.4s}
  .anime #parcours.vu .jalon-3 .repere{transition-delay:.54s}
  .anime #parcours.vu .jalon-3::before{transition-delay:.36s}
}

/* ce qui se passe à l'intérieur des blocs quand ils entrent */
.anime .ia .glisse{opacity:0;transform:translateX(56px) rotate(1.2deg);transition:opacity .9s ease,transform 1s cubic-bezier(.2,.7,.2,1) .15s}
.anime .ia.vu .glisse{opacity:1;transform:none}
.anime .alerte .pings b{opacity:0;transform:translate(-50%,-50%) scale(.2);transition:opacity .5s ease,transform .7s cubic-bezier(.2,.9,.3,1.35)}
.anime .alerte.vu .pings b{opacity:1;transform:translate(-50%,-50%) scale(1)}
.anime .alerte.vu .pings b:nth-child(1){transition-delay:.5s}
.anime .alerte.vu .pings b:nth-child(2){transition-delay:.8s}
.anime .alerte.vu .pings b:nth-child(3){transition-delay:1.05s}
.anime .alerte.vu .pings b:nth-child(4){transition-delay:1.3s}
.anime .alerte.vu .pings b:nth-child(5){transition-delay:1.5s}
.anime .alerte>img{transform:scale(1.06);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.anime .alerte.vu>img{transform:none}
.anime .communaute .roles span{opacity:0;transform:scale(.7);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.9,.3,1.3)}
.anime .communaute.vu .roles span{opacity:1;transform:none}
.anime .communaute.vu .roles span:nth-child(2){transition-delay:.1s}
.anime .communaute.vu .roles span:nth-child(3){transition-delay:.2s}
.anime .communaute.vu .roles span:nth-child(4){transition-delay:.3s}
.anime .sos .iphone{opacity:0;transform:translateY(70px) rotate(-3deg);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.anime .sos.vu .iphone{opacity:1;transform:none}
.anime .sos .notif{opacity:0;transform:translateX(-52px) scale(.9);
  transition:opacity .5s ease,transform .66s cubic-bezier(.2,.9,.28,1.28)}
.anime .sos.vu .notif{transform:none;opacity:1}
.anime .sos.vu .notif:nth-child(1){transition-delay:.5s}
.anime .sos.vu .notif:nth-child(2){transition-delay:.78s;opacity:.84}
.anime .sos.vu .notif:nth-child(3){transition-delay:1.06s;opacity:.66}
.anime .paroles .parole-grande::before{transform:scaleY(0);transform-origin:top;transition:transform 1s cubic-bezier(.2,.7,.2,1) .3s}
.anime .paroles.vu .parole-grande::before{transform:none}
.anime .hero .slogan span{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.anime .hero .slogan span:nth-child(2){transition-delay:.12s}
.anime .hero .slogan span:nth-child(3){transition-delay:.24s}
.anime .hero.vu .slogan span{opacity:1;transform:none}
.anime .hero .sous,.anime .hero .recherche,.anime .hero .preuve{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.anime .hero .sous{transition-delay:.4s}
.anime .hero .recherche{transition-delay:.52s}
.anime .hero .preuve{transition-delay:.64s}
.anime .hero.vu .sous,.anime .hero.vu .recherche,.anime .hero.vu .preuve{opacity:1;transform:none}

/* ============ les univers : la couleur de la rubrique, comme dans le menu ============ */
.btn-bleu{background:var(--bleu);color:#fff}
.btn-bleu:hover{background:#2440c2}
.btn-jaune{background:var(--jaune);color:#1a1200}
.btn-jaune:hover{background:#ef9700}
.btn-vert{background:var(--vert);color:#fff}
.btn-vert:hover{background:#229676}
/* identification : bleu */
.ia .sur-titre{color:#8ea3ff}
.ia .etape .num{border-color:rgba(74,108,255,.55);color:#c3ceff;background:rgba(43,74,214,.18)}
.moteur{border-color:rgba(74,108,255,.28)}
/* bénévoles : jaune */
.communaute .sur-titre{color:var(--jaune-texte);justify-content:center}
.communaute .roles span{border-color:#f3dcb0;background:#fff7e8;color:#5a3d05}
/* annuaire et presse : vert */
.annuaire .sur-titre,.presse .sur-titre{color:var(--vert-texte)}
.annuaire .tete .lien,.presse .tete .lien{color:var(--vert-texte)}
.etablissement:hover{border-color:var(--vert)}
.article:hover{border-color:var(--vert)}
.article .media{color:var(--vert-texte)}
.rappel .btn-vert{white-space:nowrap}

@media(prefers-reduced-motion:reduce){
  body::before{display:none}
  .sep-mosaique i{opacity:1}
  .sep-levee .voile{transform:translateY(-100%)}
  .sep-levee .voile::after,.sep-levee .halo{display:none}
  .sep-vagues .v{transform:none!important}
  .sep-trame .onde{display:none}
  .sep-trame .points{opacity:.4}
}
/* ?fige=1 : tout est visible, tout est posé */
.fige .sep-levee .voile{transform:translateY(-100%)}

/* le moteur d'identification travaille en bleu, la couleur de la rubrique :
   quadrillage, balai, angles, jauge et correspondance */
.analyse-vignette .maille{
  background:
    linear-gradient(rgba(110,140,255,.42) 1px,transparent 1px) 0 0/100% 13px,
    linear-gradient(90deg,rgba(110,140,255,.42) 1px,transparent 1px) 0 0/13px 100%,
    rgba(43,74,214,.1)}
.analyse-vignette .repasse{
  background:
    linear-gradient(rgba(220,228,255,.98) 1px,transparent 1px) 0 0/100% 13px,
    linear-gradient(90deg,rgba(220,228,255,.98) 1px,transparent 1px) 0 0/13px 100%,
    linear-gradient(180deg,rgba(70,110,255,.3),rgba(70,110,255,.3))}
.requete .balai{
  background:linear-gradient(180deg,rgba(43,74,214,0),rgba(120,150,255,.85),rgba(255,255,255,.92));
  box-shadow:0 0 22px 4px rgba(74,108,255,.55)}
.requete .coins i{border-color:rgba(200,212,255,.8)}
.moteur .haut .quoi .angles span.on{border-color:var(--bleu-vif);background:rgba(43,74,214,.26);color:#fff}
.candidat.gagnant{border-color:var(--bleu-vif);background:rgba(43,74,214,.13)}
.candidat.gagnant .jauge i{background:var(--bleu-vif)}
.candidat.gagnant .nom::after{background:var(--bleu)}
.ia .etiquette-ia,.ia .pouls-compteur{--rouge-vif:var(--bleu-vif)}