/* ELECMAN — direction A « Bleu de confiance ». Tokens : DESIGN.md §2/§3.
   Palette mesurée sur le logo client : bleu #023983, jaune #F5B614. */
:root{
  --blue-900:#02264F; --blue-700:#043A80; --blue-100:#E8F0FA;
  --yellow-500:#F5B614; --yellow-100:#FFF4D6;
  --bg:#F7F8FA; --white:#fff; --ink:#0E1A2B; --muted:#55627A; --on-dark:#F4F8FF;
  --line:#E1E7F0;
  --fs-display:clamp(38px,5.6vw,84px);
  --maxw:1200px; --ease:cubic-bezier(.2,0,0,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:Figtree,system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,.wm{font-family:Archivo,system-ui,sans-serif;font-feature-settings:'tnum';
  text-wrap:balance;margin:0;letter-spacing:-.02em;line-height:1.14;color:var(--blue-900)}
p{margin:0;text-wrap:pretty}
/* height:auto est OBLIGATOIRE : sans lui, les attributs HTML width/height sont mappés
   en hauteur fixe (900px) et neutralisent tous les aspect-ratio (.stagger, .svc-photo). */
img{max-width:100%;height:auto;display:block}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--blue-700)}
.wrap{width:min(100% - 40px,var(--maxw));margin-inline:auto}
@media(max-width:640px){.wrap{width:min(100% - 32px,var(--maxw))}}
.eyebrow{font-family:Archivo;font-weight:600;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}
.lead{font-size:clamp(17px,1.35vw,19.5px);line-height:1.62}
/* « Bouc-Bel-Air » ne doit jamais casser sur ses traits d'union en gros corps */
.nb{white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:#fff;padding:10px 16px;border-radius:8px}
/* le jaune ne fait que 1,81:1 sur blanc (minimum WCAG 3:1) : bleu sur fond clair,
   blanc sur les surfaces sombres */
:focus-visible{outline:3px solid var(--blue-700);outline-offset:3px}
.hero :focus-visible,.cta-band :focus-visible,.ftr :focus-visible{outline-color:#fff}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;
  padding:0 26px;border-radius:10px;text-decoration:none;font-family:Archivo;font-weight:600;
  font-size:16.5px;border:0;cursor:pointer;
  transition:transform .16s var(--ease),background-color .18s var(--ease)}
.btn:active{transform:scale(.96)}
.btn-y{background:var(--yellow-500);color:var(--ink);
  box-shadow:0 1px 2px rgba(14,26,43,.18),0 8px 20px -8px rgba(245,182,20,.8)}
.btn-y:hover{background:#FFC42B}
.btn-gd{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.btn-gd:hover{background:rgba(255,255,255,.2)}
.btn-gl{background:transparent;color:var(--blue-700);box-shadow:inset 0 0 0 1.5px rgba(4,58,128,.35)}
.btn-gl:hover{background:var(--blue-100)}
.btn-sm{min-height:46px;padding:0 20px;font-size:15.5px}

/* ---------- header ---------- */
.hdr{position:absolute;top:0;left:0;right:0;z-index:40;padding:18px 0;color:#fff}
.hdr.solid{position:sticky;background:var(--white);color:var(--ink);
  border-bottom:1px solid var(--line)}
.hdr .bar{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit}
.brand img{width:52px;height:52px;flex:none}
.wm{font-weight:700;font-size:25px;line-height:1;color:inherit}
.wm small{display:block;font-family:Figtree;font-weight:500;font-size:10.5px;letter-spacing:.17em;
  text-transform:uppercase;opacity:.85;margin-top:4px}
.nav{display:flex;align-items:center;gap:26px}
.nav-links{display:flex;gap:24px;align-items:center;font-weight:500;font-size:15.5px}
.nav-links a{color:inherit;text-decoration:none;padding:6px 0;transition:opacity .16s var(--ease)}
.nav-links a:hover{opacity:.72}
.drop{position:relative}
.drop>button{background:none;border:0;color:inherit;font:inherit;font-weight:500;cursor:pointer;
  display:flex;align-items:center;gap:7px;padding:6px 0}
.drop>button::after{content:"";width:7px;height:7px;border-right:1.8px solid currentColor;
  border-bottom:1.8px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.65;
  transition:transform .18s var(--ease)}
.drop[data-open="true"]>button::after{transform:translateY(1px) rotate(225deg)}
.drop-menu{position:absolute;top:calc(100% + 12px);left:-16px;min-width:266px;background:#fff;
  border-radius:12px;padding:8px;display:none;
  box-shadow:0 1px 2px rgba(2,38,79,.16),0 18px 40px -14px rgba(2,38,79,.45)}
.drop[data-open="true"] .drop-menu{display:block}
.drop-menu a{display:block;padding:10px 14px;border-radius:8px;color:var(--ink);font-size:15.5px;
  transition:background-color .16s var(--ease)}
.drop-menu a:hover{background:var(--blue-100)}
.burger{display:none;width:46px;height:46px;border:0;background:transparent;color:inherit;
  cursor:pointer;padding:11px;margin-right:-8px}
.burger span{display:block;height:2px;background:currentColor;border-radius:2px;margin:4px 0;
  transition:transform .2s var(--ease),opacity .2s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:900px){
  /* le bouton doit rester AU-DESSUS du panneau, sinon la croix de fermeture
     disparaît sous le blanc et le menu n'a plus de bouton de fermeture visible. */
  .burger{display:block;position:relative;z-index:60}
  .burger[aria-expanded="true"]{color:var(--blue-900)}
  .nav{position:fixed;inset:0 0 0 auto;width:min(84vw,340px);background:#fff;color:var(--ink);
    flex-direction:column;align-items:stretch;gap:0;padding:88px 20px 28px;
    transform:translateX(100%);transition:transform .24s var(--ease);
    box-shadow:-20px 0 50px -20px rgba(2,38,79,.5);overflow-y:auto}
  .nav[data-open="true"]{transform:translateX(0)}
  .nav-links{flex-direction:column;align-items:stretch;gap:0;font-size:17px}
  .nav-links>li{border-bottom:1px solid var(--line)}
  /* display:block est OBLIGATOIRE : en inline, le padding vertical ne pousse pas la
     ligne -> les zones tactiles d'« Accueil », « À propos » et « Contact » se
     chevauchaient (50 px de haut pour 28 px de rang) et ne faisaient que la largeur
     du mot au lieu de toute la largeur du panneau. */
  .nav-links a,.drop>button{display:block;padding:15px 4px;width:100%}
  .drop>button{display:flex}
  .drop-menu{position:static;display:block;box-shadow:none;padding:0 0 10px 14px;min-width:0}
  .drop>button::after{margin-left:auto}
  .nav .btn{margin-top:20px}
}
.scrim{position:fixed;inset:0;background:rgba(2,38,79,.45);opacity:0;visibility:hidden;z-index:39;
  transition:opacity .24s var(--ease),visibility .24s var(--ease)}
.scrim[data-open="true"]{opacity:1;visibility:visible}

/* ---------- hero accueil (direction A) ---------- */
.hero{position:relative;min-height:min(92vh,780px);display:flex;flex-direction:column;
  isolation:isolate;overflow:hidden;background:var(--blue-900)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(2,38,79,.93) 0%,rgba(2,38,79,.82) 44%,rgba(2,38,79,.42) 100%)}
/* Motif XXL (DESIGN.md §4) : sous le voile (.93 à gauche) il était strictement
   invisible — un motif qu'on ne voit pas n'est pas un motif. Il passe donc AU-DESSUS
   du voile, et son ancrage en calc() le cale dans la gouttière gauche :
   il n'entre dans l'écran que quand la gouttière est assez large pour l'accueillir,
   et glisse hors cadre en dessous plutôt que de croiser le H1 ou le lead. */
.hero .medal{position:absolute;left:calc(50% - 1020px);bottom:-120px;width:380px;height:380px;z-index:0}
.hero-body{position:relative;z-index:1;flex:1;display:flex;align-items:flex-end;padding:120px 0 60px}
/* ⚠️ pas de width:100% ici : .hero-grid est posé SUR .wrap et écraserait sa gouttière
   (même spécificité, règle plus tardive) -> le hero collerait aux deux bords de l'écran. */
.hero-grid{display:grid;grid-template-columns:minmax(0,55%) minmax(0,1fr);gap:40px;align-items:end}
.hero .eyebrow{color:var(--yellow-500)}
.hero h1{color:#fff;font-size:var(--fs-display);line-height:1.03;margin:16px 0 20px;
  text-shadow:0 2px 24px rgba(0,0,0,.45)}
.hero .lead{color:var(--on-dark);max-width:56ch;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.card-tel{background:#fff;border-radius:16px;padding:24px 26px;max-width:330px;justify-self:end;
  box-shadow:0 1px 2px rgba(2,38,79,.22),0 24px 50px -22px rgba(2,38,79,.7)}
.card-tel .t{font-family:Archivo;font-weight:700;font-size:19px;line-height:1.25;color:var(--blue-900)}
.card-tel p{color:var(--muted);font-size:15px;margin-top:7px}
/* CTA n°1 du site : la zone tactile doit faire au moins 44 px de haut.
   En display:block simple elle tombait à 39 px, sous le seuil WCAG 2.2 (2.5.8). */
.card-tel .tel{display:flex;align-items:center;min-height:44px;margin-top:16px;
  font-family:Archivo;font-weight:700;font-size:25px;
  color:var(--blue-700);text-decoration:none}
@media(max-width:880px){
  .hero-grid{grid-template-columns:1fr;gap:26px;align-items:start}
  .card-tel{justify-self:stretch;max-width:none}
  .hero-body{padding:104px 0 44px}
}

/* ---------- hero pages intérieures ---------- */
.hero-in{background:var(--white);border-bottom:1px solid var(--line);padding:44px 0 40px}
.hero-in .eyebrow{color:var(--blue-700)}
.hero-in h1{font-size:clamp(31px,4.6vw,58px);line-height:1.06;margin:12px 0 16px;max-width:20ch}
.hero-in .lead{color:var(--muted);max-width:62ch}
.hero-in .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}

/* ---------- bande jaune ---------- */
.band{background:var(--yellow-500);color:var(--ink)}
.band ul{padding:15px 0;display:flex;flex-wrap:wrap;gap:10px 34px;font-weight:600;font-size:15.5px}
/* align-items:center recentrait la puce entre les deux lignes d'un item qui passe à
   la ligne (visible dès 320px) : elle doit rester sur la PREMIÈRE ligne. */
.band li{display:flex;align-items:flex-start;gap:10px}
.band li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--blue-900);
  flex:none;margin-top:.45em}

/* ---------- sections ---------- */
.sec{padding:72px 0 80px}
.sec-w{background:var(--white)}
.sec-h{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:26px;flex-wrap:wrap}
.sec-h .eyebrow{color:var(--blue-700)}
.sec-h h2{font-size:clamp(26px,3vw,40px);margin-top:8px}
.sec-h p{color:var(--muted);margin-top:8px;max-width:62ch}

/* index prestations : liste-tableau (section cassée de l'accueil) */
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding:22px 0;
  border-top:1px solid var(--line);text-decoration:none;color:inherit;transition:transform .2s var(--ease)}
.row:last-of-type{border-bottom:1px solid var(--line)}
.row:hover{transform:translateX(4px)}
.row h3{font-size:clamp(21px,2.3vw,31px);line-height:1.15}
.row p{color:var(--muted);font-size:15.5px;margin-top:6px;max-width:64ch}
.row .go{width:13px;height:13px;border-radius:50%;background:var(--yellow-500);flex:none;
  transition:transform .2s var(--ease)}
.row:hover .go{transform:scale(1.35)}

/* carte de zone (reprise de la direction B) */
/* align-items:start et pas center : la carte fait 150 px de plus que sa colonne de
   texte, le centrage descendait donc le titre de section 75 px sous le haut de la
   carte -> 228 px de blanc entre la dernière ligne des prestations et « Notre
   secteur », lu comme un trou. Les deux colonnes partent de la même ligne (c'est
   déjà ce qu'exigeait .zone.top sur contact). */
.zone{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:48px;align-items:start}
.zone .mapcard{background:var(--blue-100);border-radius:18px;padding:20px 22px 12px}
.zone .cap{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:13.5px;color:var(--blue-700);font-weight:600}
.zone .cap b{font-family:Archivo;font-size:21px;color:var(--blue-900)}
.zone svg{max-width:100%;height:auto}
.communes{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.communes li{background:var(--white);border:1px solid var(--line);border-radius:999px;
  padding:6px 14px;font-size:14.5px;color:var(--blue-900);font-weight:500}
@media(max-width:900px){.zone{grid-template-columns:1fr;gap:30px}}

/* split asymétrique 62/38 */
.split{display:grid;grid-template-columns:minmax(0,62%) minmax(0,38%);gap:48px;align-items:start}
.split ol{counter-reset:none}
.split .step{padding:20px 0;border-top:1px solid var(--line);display:grid;
  grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start}
.split .step .dot{width:11px;height:11px;border-radius:50%;background:var(--yellow-500);margin-top:.55em}
.split .step h3{font-size:19.5px}
.split .step p{color:var(--muted);font-size:15.5px;margin-top:5px}
.split .aside{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:26px}
.split .aside .big{font-family:Archivo;font-weight:700;font-size:44px;line-height:1;color:var(--blue-700)}
.split .aside p{color:var(--muted);font-size:15.5px;margin-top:8px}
.split .aside hr{border:0;border-top:1px solid var(--line);margin:20px 0}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:28px}}

/* tableau de faits (section cassée des pages service) */
.facts{width:100%;border-collapse:collapse;background:var(--white);border-radius:14px;overflow:hidden;
  box-shadow:0 1px 2px rgba(2,38,79,.08),0 10px 30px -18px rgba(2,38,79,.4)}
.facts caption{text-align:left;color:var(--muted);font-size:15px;padding-bottom:12px}
.facts th,.facts td{text-align:left;padding:16px 20px;border-bottom:1px solid var(--line);
  font-size:15.5px;vertical-align:top}
.facts thead th{background:var(--blue-100);font-family:Archivo;font-size:14px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--blue-700)}
.facts tbody th{font-family:Archivo;font-weight:600;color:var(--blue-900);width:42%}
.facts td{color:var(--muted)}
.facts tr:last-child th,.facts tr:last-child td{border-bottom:0}
@media(max-width:640px){
  .facts thead{position:absolute;left:-9999px}
  .facts tbody th,.facts td{display:block;width:auto;padding:14px 18px 0}
  .facts td{padding-bottom:16px}
}

/* séquence photo en escalier — remplace le trio « 3 avantages » (DESIGN.md §5) */
.stagger{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start}
.stagger figure{margin:0}
.stagger figure:nth-child(2){margin-top:46px}
.stagger figure:nth-child(3){margin-top:-14px}
.stagger img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;
  outline:1px solid rgba(14,26,43,.09);outline-offset:-1px}
.stagger figcaption{color:var(--muted);font-size:14.5px;margin-top:10px}
@media(max-width:800px){
  .stagger{grid-template-columns:1fr;gap:18px}
  .stagger figure{margin-top:0 !important}
}
.svc-photo{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;
  outline:1px solid rgba(14,26,43,.09);outline-offset:-1px}

/* cross-sell */
.cross{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5px;background:var(--line);
  border-radius:14px;overflow:hidden}
.cross a{background:var(--white);padding:24px;text-decoration:none;color:inherit;
  transition:background-color .18s var(--ease)}
.cross a:hover{background:var(--yellow-100)}
.cross h3{font-size:19px;display:flex;align-items:center;gap:11px}
.cross h3::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--yellow-500);flex:none}
.cross p{color:var(--muted);font-size:15px;margin-top:8px}
@media(max-width:700px){.cross{grid-template-columns:1fr}}

/* bande CTA + séparateur en arc (motif du logo) */
.arcsep{display:block;width:100%;height:54px;margin-bottom:-1px;color:var(--blue-900)}
.cta-band{background:var(--blue-900);color:var(--on-dark);padding:56px 0 62px;position:relative;overflow:hidden}
.cta-band .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* voile plus dense à GAUCHE : c'est là que se pose le texte, et là que le béton de la
   photo est uni (recommandation issue du tri d'images) */
.cta-band .veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(2,38,79,.95) 0%,rgba(2,38,79,.9) 54%,rgba(2,38,79,.74) 100%)}
/* le motif doit se LIRE comme un arc voulu (DESIGN.md §4), pas comme une salissure kaki */
.cta-band .medal{position:absolute;right:-160px;top:-180px;width:460px;height:460px;opacity:.8;z-index:2}
/* Sous 900px la bande n'a plus de marge à droite : l'arc traversait le titre ET le
   paragraphe, et le jaune sous voile bleu y devient un kaki qui se lit comme une
   tache sur le texte. Il redescend dans le coin bas-droit, seule zone libre une fois
   les boutons empilés à gauche. */
@media(max-width:900px){
  .cta-band .medal{top:auto;right:-210px;bottom:-170px;width:340px;height:340px;opacity:.75}
}
.cta-band .in{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.cta-band h2,.cta-band p{text-shadow:0 1px 14px rgba(0,0,0,.45)}
.cta-band h2{color:#fff;font-size:clamp(25px,3vw,38px);max-width:19ch}
.cta-band p{margin-top:10px;max-width:52ch;color:var(--on-dark)}
.cta-band .cta{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- formulaire ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-weight:600;font-size:14.5px;color:var(--blue-900)}
.field label .req{color:#B3261E}
.field input,.field textarea,.field select{font:inherit;font-size:16px;padding:13px 15px;border-radius:10px;
  border:1.5px solid var(--line);background:var(--white);color:var(--ink);width:100%;
  transition:border-color .16s var(--ease)}
/* on renforce la bordure au focus, mais on ne supprime JAMAIS l'anneau de focus
   au clavier (outline:none retirait toute indication) */
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--blue-700)}
.field textarea{min-height:130px;resize:vertical}
.hp{position:absolute;left:-9999px}
.form-note{color:var(--muted);font-size:14px;margin-top:14px}
@media(max-width:700px){.form-grid{grid-template-columns:1fr}}

/* ---------- pied de page ---------- */
.ftr{background:var(--blue-900);color:var(--on-dark);padding:60px 0 28px}
.ftr-grid{display:grid;grid-template-columns:minmax(0,320px) repeat(2,minmax(0,1fr));gap:40px}
/* le médaillon est repris EN GRAND ici (doctrine logo-client §3) sur une pastille claire,
   parce que son anneau bleu disparaît sur le bleu marine */
.ftr .logo-xl{background:var(--white);border-radius:22px;padding:20px;width:280px;height:280px;
  display:flex;align-items:center;justify-content:center}
.ftr .logo-xl img{width:100%;height:auto}
.ftr h2{color:#fff;font-size:19px;margin-bottom:14px}
.ftr a{color:var(--on-dark);text-decoration:none}
.ftr a:hover{text-decoration:underline}
.ftr li{margin-bottom:9px;font-size:15.5px}
.ftr .nap{margin-top:18px;font-size:15.5px;line-height:1.75}
.ftr .nap b{font-family:Archivo;font-size:22px;color:#fff;display:block;margin-top:4px}
.ftr .bot{border-top:1px solid rgba(255,255,255,.18);margin-top:40px;padding-top:20px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;opacity:.85}
/* Une seule colonne dès 900px laissait un pied de page en bande étroite avec la moitié
   droite vide sur toute sa hauteur. On garde deux colonnes tant qu'il y a la place. */
@media(max-width:900px){
  .ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 40px}
  /* le bloc marque prend toute la ligne et se met à l'horizontale : sinon les deux
     colonnes de liens s'empilent à gauche et la moitié droite du pied reste vide */
  .ftr-grid>:first-child{grid-column:1/-1;display:flex;align-items:center;gap:30px;flex-wrap:wrap}
  .ftr .nap{margin-top:0}
  .ftr .logo-xl{width:224px;height:224px;padding:16px}
}
@media(max-width:560px){.ftr-grid{grid-template-columns:1fr}.ftr .logo-xl{width:196px;height:196px}}

/* ---------- prose (mentions légales) ---------- */
.prose{max-width:76ch}
.prose h2{font-size:22px;margin:34px 0 10px}
.prose p,.prose li{color:var(--muted);margin-bottom:10px}
.prose li{margin-left:20px;list-style:disc}
.prose strong{color:var(--ink)}

/* ---------- Prestations : tuiles photo plein cadre (variante B) ----------
   Remplace l'index typographique en lignes, écarté : il réduisait les photos
   à des vignettes. Ici la photo porte la tuile, le titre passe dessus. */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:720px){.tiles{grid-template-columns:1fr}}
.tile{position:relative;display:block;border-radius:18px;overflow:hidden;aspect-ratio:4/3;
  text-decoration:none;isolation:isolate;
  outline:1px solid rgba(2,38,79,.1);outline-offset:-1px}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .35s var(--ease)}
/* voile : indispensable pour que le texte blanc reste lisible quelle que soit la photo */
.tile::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(2,38,79,.93) 0%,rgba(2,38,79,.58) 45%,rgba(2,38,79,.14) 100%)}
.tile:hover img{transform:scale(1.04)}
.tile-lab{position:absolute;inset:auto 0 0 0;padding:22px 22px 20px;display:block}
.tile-lab h3{color:#fff;font-size:clamp(19px,2vw,25px);text-shadow:0 2px 14px rgba(0,0,0,.5)}
.tile-lab p{color:#DCE7F5;font-size:14.5px;margin-top:5px;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.tile-go{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;
  background:var(--yellow-500);display:grid;place-items:center;
  transform:translateY(-6px);opacity:0;
  transition:opacity .25s var(--ease),transform .25s var(--ease)}
.tile:hover .tile-go,.tile:focus-visible .tile-go{opacity:1;transform:none}
@media(max-width:520px){
  .tile{aspect-ratio:3/2}
  .tile-lab{padding:18px}
}
/* la flèche apparaît au survol : au clavier et sans pointeur, elle reste visible */
@media(hover:none){.tile-go{opacity:1;transform:none}}

/* ---------- animations (liste fermée, DESIGN.md §8) ---------- */
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rise{animation:rise .28s var(--ease) both}
.rise:nth-child(2){animation-delay:.08s}
.rise:nth-child(3){animation-delay:.16s}
.rise:nth-child(4){animation-delay:.24s}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}