/* Styles propres a techniques.html.
   Sorti du <style> interne pour que la version anglaise partage
   exactement la meme feuille : un correctif ne se fait qu'une fois.
   Charge APRES jade.css, comme l'etait le bloc interne, donc
   l'ordre de cascade est inchange.
   Les url() portent ../ : dans une feuille CSS elles sont
   resolues depuis ce fichier, pas depuis la page. */
/* ---------- page Services ---------- */
/* l'en-tête prend la couleur du hero de la page, pas l'or de l'accueil */
.header{background:#BE1C74;color:#fff}

/* CTA : pastille blanche avec flèche, et bouton fantôme à côté */
.btn-blanc{background:#fff;color:var(--navy);box-shadow:0 8px 20px rgba(17,46,64,.14);padding:16px 28px}
.btn-blanc:hover{background:#fff;box-shadow:0 12px 26px rgba(17,46,64,.2)}
.btn .fleche{width:18px;height:18px;flex:none;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.btn-blanc:hover .fleche{transform:translateX(4px)}
.btn-fantome:hover .fleche{transform:translate(3px,-3px)}
.btn-fantome{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.55);color:var(--ink,var(--navy));padding:16px 28px;box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.btn-fantome:hover{background:rgba(255,255,255,.38);border-color:rgba(255,255,255,.8)}
.page-hero{background:var(--mauve);color:#fff;padding-block:clamp(54px,7vw,92px)}
.page-hero .eyebrow{color:currentColor;opacity:.75}
.page-hero h1 .mot{display:inline-block;white-space:nowrap;color:#fff;will-change:transform,opacity;transition:color .45s cubic-bezier(.2,.7,.3,1),opacity .25s cubic-bezier(.2,.7,.3,1),transform .25s cubic-bezier(.2,.7,.3,1)}
.page-hero h1 .mot.out{opacity:.4;transform:translateY(8px)}
.page-hero .media::before{background:var(--navy)}
.hero-grille{display:grid;align-items:stretch}
.hero-grille .texte{display:flex;align-items:center;flex-direction:column;justify-content:center;
  padding-block:clamp(54px,7vw,92px);
  padding-left:max(clamp(16px,4vw,40px), calc(50vw - var(--wrap)/2));
  padding-right:clamp(24px,3.4vw,56px)}
.hero-grille .texte > div{width:100%}
@media (max-width:1100px){.hero-grille .texte{padding-inline:clamp(16px,4vw,40px);padding-block:clamp(40px,6vw,70px)}}
/* hero studio : la photo EST le fond, la section reprend la couleur du plateau */
.page-hero.studio{--plateau:#BE1C74;--plateau-figure:url("../images/figures/st-magenta-v4.webp");--plateau-img:url("../images/hero-studio-magenta-v4.webp");background:var(--plateau);color:var(--navy);padding:0;
  background-image:var(--plateau-img);background-repeat:no-repeat;background-position:right center;background-size:cover}
.page-hero.studio .hero-grille{grid-template-columns:minmax(0,1fr);min-height:clamp(460px,46vw,620px)}
.page-hero.studio .hero-grille .media{display:none}
.page-hero.studio .scene{display:none}
.page-hero.studio .hero-grille .texte{max-width:none;padding-right:0;align-items:flex-start}
.page-hero.studio .hero-grille .texte > div{max-width:620px}
.page-hero.studio .eyebrow{color:#fff;opacity:.75}
.page-hero.studio h1{color:#fff}
.page-hero.studio h1 .mot{color:var(--navy);--pastille:var(--lemon)}
.page-hero.studio p{color:#fff;opacity:.85}
.page-hero.studio .btn-blanc{background:#fff;color:var(--navy)}
.page-hero.studio .btn-fantome{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.18)}
.page-hero.studio .btn-fantome:hover{background:rgba(255,255,255,.45);border-color:var(--navy)}
@media (max-width:1100px){
  .page-hero.studio{background-image:var(--plateau-figure);background-size:64% auto;background-position:right bottom;padding-bottom:48vw}
  .page-hero.studio .hero-grille .texte > div{max-width:none}
}
@media (max-width:640px){
  /* Deux boutons empiles de largeurs differentes, ca se voit tout de suite.
     Chaque groupe devient une colonne a la largeur du plus large, et toutes
     les rangees prennent la hauteur de la plus haute : meme reglage que
     l'en-tete de l'accueil, applique partout. */
  .ctas,.hero-ctas,.page-hero.studio .ctas,.service .ctas,.bande-fin .ctas{
    display:grid;grid-template-columns:minmax(0,max-content);grid-auto-rows:1fr;
    gap:12px;justify-content:start}
  .ctas .btn,.hero-ctas .btn,.page-hero.studio .ctas .btn,
  .service .ctas .btn,.bande-fin .ctas .btn{width:100%;justify-content:center}

  /* L'ordre demande au telephone : titre, photo, texte, bouton. La scene n'est
     plus un fond pose derriere la colonne de texte — a 375 px rien ne tient a
     cote de rien — elle prend sa propre bande entre le titre et le chapeau.
     Detouree, elle se pose sur l'aplat sans montrer son cadre, et la page
     retrouve la scene entiere, avec tout le monde dessus. */
  .page-hero.studio{padding-bottom:0;background-image:none}
  .page-hero.studio .hero-grille{min-height:0}
  .page-hero.studio .scene{display:block;width:100%;margin:26px 0 4px;
    aspect-ratio:1.18;
    background:var(--plateau-figure) center bottom/contain no-repeat}
  .page-hero.studio p:not(.eyebrow):not(.pastille){max-width:none}
}
.page-hero h1{font-size:var(--t2);font-weight:900}
.page-hero p{font-size:18px;max-width:48ch;margin-top:20px}
.page-hero .ctas{display:flex;flex-wrap:wrap;gap:16px;margin-top:26px}
.page-hero .btn-line{border-color:var(--navy);color:var(--navy)}
.page-hero .btn-line:hover{background:var(--navy);color:var(--teal)}
@media (max-width:900px){.page-hero .wrap{grid-template-columns:1fr;gap:24px;align-items:start}}

section[id]{scroll-margin-top:92px}
.service{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.service.inverse .visuel{order:2}
.service .visuel{position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden}
.service .visuel img{width:100%;height:100%;object-fit:cover}
.service h2{font-size:var(--t3);font-weight:900}
.service .sur{font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--navy);margin-bottom:12px}
.service p{color:var(--text);margin-top:16px;max-width:52ch}
.service .liste{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.service .liste li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start;font-weight:500}
.service .liste li::before{content:"";box-sizing:border-box;width:20px;height:20px;border-radius:50%;background:var(--c,var(--teal));margin-top:3px;padding:5px;background-clip:content-box}
.service .ctas{display:flex;flex-wrap:wrap;gap:16px;margin-top:30px}
@media (max-width:900px){.service{grid-template-columns:1fr}.service.inverse .visuel{order:0}}

.sous-titre{font-size:clamp(26px,2.6vw,34px);font-weight:900;margin-bottom:26px}
.bande-prog{background:var(--navy);color:#fff;padding-block:clamp(52px,6vw,84px)}
.bande-prog .centre{text-align:center;max-width:56ch;margin:0 auto 34px}
.bande-prog .centre h2{font-size:var(--t4);font-weight:900}
.bande-prog .centre p{margin-top:12px;font-size:15px;color:rgba(255,255,255,.72)}
.bande-prog .moment{border-top:3px solid var(--c,var(--teal));padding-top:16px;gap:8px}
.bande-prog .moment p{color:rgba(255,255,255,.72)}
.bande-prog .steps::before{background:rgba(255,255,255,.3)}
.bande-prog .steps > li::before{background:var(--navy);border-color:rgba(255,255,255,.55)}
.bande-prog .steps > li:hover::before{background:var(--hc,var(--teal));border-color:var(--hc,var(--teal))}
.bande-prog .steps > li::after{color:rgba(255,255,255,.6)}
.bande-prog .steps p{color:rgba(255,255,255,.72)}
.bande-prog .cta-centre{display:flex;justify-content:center;margin-top:34px}
.moments{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.moment{border-top:4px solid var(--c,var(--teal));padding-top:18px;display:grid;gap:8px;align-content:start}
.moment h3{font-size:clamp(19px,1.6vw,22px);font-weight:800}
.moment p{font-size:14px;line-height:1.5;color:var(--text)}
@media (max-width:900px){.moments{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}}
@media (max-width:560px){.moments{grid-template-columns:1fr}}
.bloc-plus{margin-top:clamp(38px,4.5vw,58px)}
/* Trois colonnes seulement quand il y a la place : sans la borne, cette regle
   battait celle de la feuille commune — plus specifique qu'un simple .steps —
   et les trois etapes restaient en colonnes jusque sur le telephone, ou les
   titres se chevauchaient. Sous 901 px, la feuille commune les empile le long
   de son filet vertical. */
@media (min-width:901px){
  .steps.trois{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Hors de la borne : entre 641 et 900 px la feuille commune remet nowrap sur
   les titres, et « Vos employés commandent » depasse sa colonne. */
.steps.trois h3{white-space:normal;line-height:var(--lh-titre)}


/* ---------- page Produits ---------- */
.page-hero h1 .mot{display:inline-block;white-space:nowrap;color:#fff;will-change:transform,opacity;
  transition:opacity .25s cubic-bezier(.2,.7,.3,1),transform .25s cubic-bezier(.2,.7,.3,1)}
.page-hero h1 .mot.out{opacity:.4;transform:translateY(8px)}
.page-hero .media img{transition:opacity .45s cubic-bezier(.2,.7,.3,1),transform .45s cubic-bezier(.2,.7,.3,1)}
.page-hero .media img.out{opacity:0;transform:translateY(16px) scale(.985)}
/* grille asymétrique : une grande fiche et quatre petites */
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 20px}
.ptile{display:grid;gap:12px;align-content:start;text-decoration:none;color:inherit}
.ptile.grande{grid-column:span 2;grid-row:span 2;grid-template-rows:minmax(0,1fr) auto}
.ptile .panneau{background:var(--off);border-radius:20px;overflow:hidden;aspect-ratio:1;display:grid;place-items:center}
.ptile.grande .panneau{aspect-ratio:auto;height:100%;min-height:360px}
.ptile .panneau img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.ptile:hover .panneau img{transform:scale(1.03)}
.ptile .marque{font:700 12px/1 var(--body);letter-spacing:1.6px;text-transform:uppercase;color:var(--navy)}
.ptile h3{font-size:clamp(19px,1.7vw,24px);font-weight:800}
.ptile.grande h3{font-size:clamp(24px,2.4vw,34px)}
@media (max-width:900px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.ptile.grande{grid-row:span 1}.ptile.grande .panneau{aspect-ratio:1;height:auto;min-height:0}}
@media (max-width:560px){.pgrid{grid-template-columns:1fr}.ptile.grande{grid-column:span 1}}

/* en-tête de bloc : surtitre, titre à gauche, lien à droite */
.bloc-tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:28px}
.bloc-tete .sur{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text)}
.bloc-tete h2{font-size:var(--t4);font-weight:900;margin-top:8px}

/* catégories */
.cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.cat{position:relative;display:flex;align-items:flex-end;aspect-ratio:3/2;border-radius:20px;overflow:hidden;padding:20px;text-decoration:none;color:#fff}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.cat::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(17,46,64,.82),rgba(17,46,64,.05) 66%)}
.cat::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--c);z-index:2;transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.cat:hover::before{transform:scaleX(1)}
.cat:hover img{transform:scale(1.05)}
.cat b{position:relative;z-index:1;font:800 22px/.95 var(--display);text-transform:uppercase}
.cat b em{display:block;font:700 12px/1 var(--body);letter-spacing:1.4px;margin-top:8px;font-style:normal;color:var(--lemon)}
@media (max-width:900px){.cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cats{grid-template-columns:1fr}}

/* comment choisir : carte à étapes */
.choix{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border:2px solid var(--line);border-radius:var(--radius);overflow:hidden}
.choix .liste-etapes{display:grid;align-content:start}
.choix .etape{padding:24px 30px;border-bottom:1px solid var(--line);border-left:4px solid transparent;transition:border-color .25s cubic-bezier(.2,.7,.3,1),background-color .25s cubic-bezier(.2,.7,.3,1)}
.choix .etape:last-child{border-bottom:0}
.choix .etape:hover,.choix .etape.actif{border-left-color:var(--c,var(--teal));background:var(--off)}
.choix .etape{cursor:default;outline-offset:-3px}
.choix .visuel img{transition:opacity .25s cubic-bezier(.2,.7,.3,1)}
.choix .visuel img.out{opacity:0}
.choix .etape small{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text)}
.choix .etape h3{font-size:22px;font-weight:800;margin-top:6px}
.choix .etape p{margin-top:8px;font-size:14.5px;color:var(--text);max-width:46ch}
.choix .visuel{position:relative;min-height:320px}
.choix .visuel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.choix{grid-template-columns:1fr}.choix .visuel{order:-1;min-height:240px}}

/* clôture centrée + mosaïque */
.centre-bloc{text-align:center;max-width:56ch;margin:0 auto 34px}
.centre-bloc h2{font-size:var(--t3);font-weight:900}
.centre-bloc p{margin-top:14px;color:var(--text)}
.centre-bloc .btn{margin-top:24px}
.mosaique{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.mosaique figure{margin:0;border-radius:20px;overflow:hidden;aspect-ratio:4/3}
.mosaique img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.mosaique figure:hover img{transform:scale(1.04)}
@media (max-width:760px){.mosaique{grid-template-columns:1fr 1fr}.mosaique figure:last-child{display:none}}


/* ---------- page Techniques ---------- */
.page-hero .media::before{background:var(--navy)}
.page-hero .btn-fantome{color:#fff;border-color:rgba(255,255,255,.6)}
.page-hero .eyebrow{color:rgba(255,255,255,.8)}

/* une technique */
.tech{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4.5vw,64px);align-items:center}
.tech.inverse .visuel{order:2}
.tech .visuel{position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden}
.tech .visuel img{width:100%;height:100%;object-fit:cover}
.tech .sur{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--navy);margin-bottom:10px}
.tech h2{font-size:var(--t4);font-weight:900}
.tech p{color:var(--text);margin-top:14px;max-width:52ch}
.tech .points{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.tech .points li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;font-weight:500;font-size:15px}
.tech .points li::before{content:"";box-sizing:border-box;width:18px;height:18px;border-radius:50%;background:var(--c,var(--teal));margin-top:3px;padding:5px;background-clip:content-box}
@media (max-width:900px){.tech{grid-template-columns:1fr}.tech.inverse .visuel{order:0}}

/* bande de chiffres */
.chiffres{background:var(--navy);color:#fff}
.chiffres .ligne{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 20px;position:relative}
.chiffres .ligne::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:rgba(255,255,255,.3)}
.chiffres .item{position:relative;padding-top:34px;display:grid;gap:8px;align-content:start;cursor:default}
.chiffres .item::before{content:"";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:var(--navy);border:3px solid rgba(255,255,255,.55);transition:background-color .25s cubic-bezier(.2,.7,.3,1),border-color .25s cubic-bezier(.2,.7,.3,1),transform .25s cubic-bezier(.2,.7,.3,1)}
.chiffres .item:hover::before{background:var(--c,var(--teal));border-color:var(--c,var(--teal));transform:scale(1.15)}
.chiffres b{display:block;font:900 clamp(26px,2.6vw,36px)/.9 var(--display);transition:color .25s cubic-bezier(.2,.7,.3,1)}
.chiffres .item:hover b{color:var(--c,var(--teal))}
.chiffres span{display:block;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.7);max-width:22ch}
@media (max-width:1060px){.chiffres .ligne{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px}.chiffres .ligne::before{display:none}}


/* bande sombre : n'importe quelle section peut la porter.
   Toutes les inversions de couleur sont réglées ici, une fois. */
.bande-sombre{background:var(--navy);color:#fff}
.bande-sombre h2,.bande-sombre h3,.bande-sombre h4{color:#fff}
.bande-sombre p,.bande-sombre li,.bande-sombre address{color:rgba(255,255,255,.78)}
.bande-sombre .sur,.bande-sombre .region,.bande-sombre .lieu,.bande-sombre .marque,
.bande-sombre .eyebrow{color:var(--lemon)}
.bande-sombre .sec-head.solo > div{border-bottom:0;padding-bottom:0}
.bande-sombre .btn-line{border-color:#fff;color:#fff}
.bande-sombre .btn-line:hover{background:#fff;color:var(--navy)}
.bande-sombre a:not(.btn){color:var(--lemon)}
.bande-sombre .succ li{border-top-color:var(--c,var(--teal))}
.bande-sombre .steps::before{background:rgba(255,255,255,.3)}
.bande-sombre .steps > li::before{background:var(--navy);border-color:rgba(255,255,255,.55)}
.bande-sombre .steps > li:hover::before{background:var(--hc,var(--teal));border-color:var(--hc,var(--teal))}
.bande-sombre .steps > li::after{color:rgba(255,255,255,.6)}
/* dans une bande sombre, les cartes claires gardent leur encre d'origine */
.bande-sombre .face.avant h3{color:var(--navy)}
.bande-sombre .face.avant .n{color:var(--navy)}
.bande-sombre .face.avant .tags span{color:var(--text)}
.bande-sombre .carte-cv,.bande-sombre .carte-cv h3{color:var(--navy)}
.bande-sombre .carte-cv p,.bande-sombre .carte-cv label{color:var(--navy)}
/* les textes imbriqués doivent battre les règles de la page */
.bande-sombre .steps p,.bande-sombre .moment p,.bande-sombre .service p,
.bande-sombre .sec-head p,.bande-sombre .succ address{color:rgba(255,255,255,.78)}
.bande-sombre .steps h3,.bande-sombre .moment h3{color:#fff}

/* les sept techniques en grille : même contenu, trois fois moins de hauteur */
.grille-tech{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,2.6vw,40px)}
.fiche{display:grid;align-content:start;scroll-margin-top:110px}
.fiche .visuel{aspect-ratio:4/3;border-radius:var(--r-m);overflow:hidden;background:#fff;margin-bottom:18px}
.fiche .visuel img{width:100%;height:100%;object-fit:cover;display:block}
.fiche .sur{font-size:12px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--navy);
  padding-top:13px;border-top:4px solid var(--c,var(--teal));margin-bottom:8px}
.fiche h3{font-size:clamp(21px,1.9vw,25px);font-weight:900;line-height:1.08}
.fiche .corps{margin-top:11px;font-size:15px;line-height:1.55;color:var(--text)}
.fiche .points{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.fiche .points li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:8px;align-items:start;
  font-size:13.5px;line-height:1.4;color:var(--text)}
.fiche .points li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c,var(--teal));margin-top:7px}
@media (max-width:1000px){.grille-tech{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.grille-tech{grid-template-columns:1fr;gap:36px}}
.chiffres h2{font-size:var(--t4)}
.chiffres .sec-head{margin-bottom:34px}

/* fiche courte : photo, nom, titre. Le détail s'ouvre dans un volet.
   Grille de 12 colonnes : trois grandes en haut, quatre plus petites en bas.
   Sept tuiles, aucune rangée bancale, et une hiérarchie au lieu de sept égales. */
.grille-tech{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,2.3vw,36px)}
.fiche{grid-column:span 3;display:grid;align-content:start;text-align:left;background:none;border:0;
  padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;scroll-margin-top:110px}
.fiche:nth-child(-n+3){grid-column:span 4}
.fiche .visuel{display:block;aspect-ratio:4/3;border-radius:var(--r-m);overflow:hidden;background:var(--off)}
.fiche:nth-child(-n+3) .visuel{aspect-ratio:3/2}
.fiche .visuel img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.fiche:hover .visuel img,.fiche:focus-visible .visuel img{transform:scale(1.04)}
/* la ligne de couleur porte l'étiquette et le signe : tout sur la même base */
.fiche .sur{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:16px;padding-top:12px;border-top:4px solid var(--c,var(--teal));
  font:700 11.5px/1.3 var(--body);letter-spacing:1.7px;text-transform:uppercase;color:var(--navy)}
.fiche .plus{flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);
  color:var(--c,var(--teal));display:grid;place-items:center;font:700 16px/1 var(--body);
  transition:background-color .25s cubic-bezier(.2,.7,.3,1),border-color .25s cubic-bezier(.2,.7,.3,1),color .25s cubic-bezier(.2,.7,.3,1)}
.fiche:hover .plus,.fiche:focus-visible .plus{background:var(--c,var(--teal));border-color:var(--c,var(--teal));color:#fff}
.fiche .titre{display:block;margin-top:9px;font:900 clamp(17px,1.4vw,20px)/1.1 var(--display);
  color:var(--navy);min-height:2.2em}
.fiche:nth-child(-n+3) .titre{font-size:clamp(20px,1.8vw,26px);min-height:2.2em}
.fiche:focus{outline:none}
.fiche:focus-visible{outline:3px solid var(--navy);outline-offset:6px;border-radius:var(--r-m)}
@media (max-width:1100px){.fiche,.fiche:nth-child(-n+3){grid-column:span 6}
  .fiche:nth-child(-n+3) .visuel{aspect-ratio:4/3}
  /* sept tuiles sur deux colonnes laissent la dernière seule : elle prend la largeur */
  .fiche:last-child{grid-column:span 12}
  .fiche:last-child .visuel{aspect-ratio:16/6}}
@media (max-width:560px){.fiche,.fiche:nth-child(-n+3){grid-column:span 12}
  /* La derniere fiche prend toute la largeur entre 561 et 1100 px, parce que
     sept tuiles sur deux colonnes laissent un trou : sa photo passe alors en
     bandeau. En dessous, tout le monde est deja sur une colonne, le bandeau
     n'a plus de raison d'etre et la photo revenait deux fois plus basse que
     les six autres. */
  .fiche:last-child .visuel{aspect-ratio:4/3}}


/* les chiffres en version claire : même composition, encre inversée */
.chiffres.clair{background:var(--off);color:var(--navy)}
.chiffres.clair h2{color:var(--navy)}
.chiffres.clair .sur{color:var(--navy)}
.chiffres.clair .sec-head p{color:var(--text)}
.chiffres.clair .ligne::before{background:var(--line)}
.chiffres.clair .item::before{background:var(--off);border-color:var(--line)}
/* Sans cette ligne, la regle du dessus battait le survol a specificite egale
   en etant ecrite plus bas : la pastille grossissait mais ne prenait jamais
   sa couleur. Le chiffre virait, le rond restait blanc. */
.chiffres.clair .item:hover::before{background:var(--c,var(--teal));border-color:var(--c,var(--teal))}
.chiffres.clair span{color:var(--text)}
/* Sous 1060 px le rail horizontal disparait et les pastilles restaient
   seules : six ronds vides qui ne portaient plus rien. Elles deviennent le
   petit point de couleur qu'on retrouve partout ailleurs sur le site. */
/* Sous 1060 px il n'y a plus de survol a attendre : la couleur de chaque
   chiffre, qui ne vivait que la, passe dans la pastille. Le filet gris reste
   pour que la forme tienne : le citron sur fond clair, c'est 1,23 de
   contraste, un disque plein serait invisible. */
@media (max-width:1060px){
  .chiffres .item::before,.chiffres.clair .item::before{
    background:var(--c,var(--teal));border-color:var(--line)}
  .chiffres .item:hover::before{transform:none}
}
@media (min-width:621px) and (max-width:1060px){
  .chiffres .item{padding-top:26px}
}
/* Au telephone le rail se redresse : la meme idee qu'en grand, pivotee d'un
   quart de tour. Les six chiffres descendent en file, chacun avec sa pastille
   posee sur le fil, et le libelle passe a droite du nombre au lieu de dessous.
   Six lignes courtes au lieu de six blocs : la bande perd un tiers de sa
   hauteur et se lit d'un coup d'oeil. Meme geometrie que les etapes de
   Services, rail a 7 px, pastille a -34. */
@media (max-width:620px){
  .chiffres .ligne{grid-template-columns:1fr;gap:0;padding-left:34px}
  .chiffres .ligne::before{display:block;left:7px;right:auto;top:12px;bottom:12px;
    width:2px;height:auto}
  .chiffres .item{padding:13px 0;grid-template-columns:auto minmax(0,1fr);
    align-items:baseline;column-gap:16px}
  .chiffres .item::before{left:-34px;top:50%;margin-top:-8px}
  .chiffres b{font-size:30px}
  .chiffres span{max-width:none}
}