/* ===========================================================================
   regard. | feuille de style commune
   Charte : rouge #E8001D, rouge foncé #8B0000, encre #0A0A0A, papier #F0EEEA
   Typo   : Outfit (titres et texte), DM Mono (surtitres, chiffres, libellés)
   Partis pris DA : typographie dominante, rouge en accent jamais en fond,
   photo sport en noir et blanc, animations minimales.
   =========================================================================== */

:root{
  --red:#E8001D;
  --red-dark:#8B0000;
  --red-text:#C9001A;
  --red-sombre:#F5324A;   /* le rouge, éclairci pour rester lisible sur l'encre */
  --ink:#0A0A0A;
  --paper:#F0EEEA;
  --white:#FFFFFF;
  --grey:#5C5854;
  --grey-light:#8A8580;
  --line:#DDD9D3;
  --line-dark:#262321;

  --sans:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'DM Mono','SFMono-Regular',Consolas,monospace;

  --page:1280px;
  --gut:clamp(1.25rem,4vw,4rem);
  --ease:cubic-bezier(.16,1,.3,1);

  /* Système de formes. Pour revenir aux angles nets, passer ces trois valeurs
     à 0 : tout le site suit. */
  --radius:14px;           /* cartes, encadrés, images */
  --radius-sm:10px;        /* champs de saisie, petits blocs */
  --radius-pill:999px;     /* boutons et pastilles */
  --radius-lg:28px;        /* grands blocs posés dans la page */

  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:100px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--paper);color:var(--grey);
  font-family:var(--sans);font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0}
h1,h2,h3,h4{font-family:var(--sans);color:var(--ink);margin:0;line-height:1.05;letter-spacing:-.035em;font-weight:800}

::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.wrap{max-width:var(--page);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:820px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.9rem 1.4rem;z-index:100}
.skip:focus{left:0}

/* --- Wordmark ----------------------------------------------------------- */
.wordmark{font-family:var(--sans);font-weight:800;letter-spacing:-.045em;color:var(--ink);line-height:1;display:inline-block}
.wordmark .dot{color:var(--red)}
.wordmark--light{color:var(--white)}

/* Logo regard pro : fichiers officiels vectorises du kit de marque, jamais
   recomposes en texte. Empilee par defaut, horizontale quand la place manque.
   Zone de protection : une marge egale a la hauteur du PRO, soit 0,145 fois la
   largeur de l'empilee et 0,057 fois celle de l'horizontale. */
.prologo{display:block;height:auto}
.prologo--stack{width:clamp(190px,20vw,260px);padding:0}      /* minimum tolere : 34px */

/* --- Header -------------------------------------------------------------- */
.header{
  position:sticky;top:0;z-index:60;background:rgba(240,238,234,.88);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease);
}
.header.is-stuck{border-bottom-color:var(--line)}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:72px}
.header .wordmark{font-size:1.7rem}
.nav{display:none;align-items:center;gap:2.4rem}
@media (min-width:960px){.nav{display:flex}}
.nav a{font-size:.94rem;font-weight:500;color:var(--ink);position:relative;padding:.4rem 0;display:inline-flex;align-items:center}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease)}
.nav a:hover::after,.nav a:focus-visible::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav a[aria-current="page"]{color:var(--red-text)}

/* --- Boutons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:44px;padding:.8rem 1.6rem;font-weight:600;font-size:.95rem;
  letter-spacing:-.01em;white-space:nowrap;text-align:center;
  background:var(--red);color:var(--white);border:1.5px solid var(--red);border-radius:var(--radius-pill);
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .12s var(--ease);
}
.btn:hover{background:var(--red-dark);border-color:var(--red-dark)}
.btn:active{transform:translateY(1px)}
.btn .arw{transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
.btn--onink{background:transparent;color:var(--white);border-color:rgba(255,255,255,.3)}
.btn--onink:hover{background:var(--white);border-color:var(--white);color:var(--ink)}
.btn--onred{background:var(--white);color:var(--ink);border-color:var(--white)}
.btn--onred:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
.btn--sm{min-height:44px;padding:.6rem 1.15rem;font-size:.88rem}
.peek__more{display:flex;flex-wrap:wrap;gap:.7rem}
.header .btn{display:none}
@media (min-width:600px){.header .btn{display:inline-flex}}

/* --- Menu mobile plein écran -------------------------------------------- */
.burger{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px}
@media (min-width:960px){.burger{display:none}}
.burger span{display:block;width:22px;height:1.8px;background:var(--ink);transition:transform .3s var(--ease),opacity .3s var(--ease)}
body.menu-open .burger span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}
.mnav{
  position:fixed;inset:72px 0 0;z-index:55;background:var(--paper);
  padding:1.5rem var(--gut) 3rem;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
body.menu-open .mnav{opacity:1;visibility:visible;transform:none}
@media (min-width:960px){.mnav{display:none}}
.mnav a{display:flex;align-items:center;padding-block:1.15rem;border-bottom:1px solid var(--line);font-weight:700;font-size:1.55rem;color:var(--ink);letter-spacing:-.03em}
.mnav .btn{margin-top:2rem;width:100%}

/* --- Rythme et titres ---------------------------------------------------- */
.sect{padding-block:clamp(4.5rem,10vw,8rem)}
.sect--white{background:var(--white)}
.sect + .sect--white,.sect--white + .sect{border-top:1px solid var(--line)}

.eyebrow{font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--red-text)}
.eyebrow--light{color:var(--red-sombre)}
.h1{font-size:clamp(2.4rem,1.2rem + 4vw,4.4rem);font-weight:800;letter-spacing:-.045em;line-height:1;max-width:17ch}
.h2{font-size:clamp(2rem,1.3rem + 3vw,3.4rem);font-weight:800;max-width:20ch;color:var(--ink)}
.lead{margin-top:1.5rem;max-width:60ch;font-size:clamp(1.05rem,1rem + .35vw,1.22rem);line-height:1.6}

/* --- Hero de page intérieure -------------------------------------------- */
.pagehead{padding-block:clamp(3rem,6vw,5rem) clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--line)}
.pagehead .h1{margin-top:1.4rem}
.pagehead .lead{margin-top:1.75rem}

/* --- Bloc de respiration : une phrase, très grande ----------------------- */
.statement{padding-block:clamp(5rem,12vw,10rem);background:var(--white);border-block:1px solid var(--line)}
.statement p,.statement h2{
  font-family:var(--sans);font-weight:800;color:var(--ink);letter-spacing:-.04em;line-height:1.06;
  font-size:clamp(1.9rem,1.1rem + 4.2vw,4rem);max-width:19ch;
}
.statement .accent{color:var(--red)}
.statement .sub{margin-top:2rem;font-size:1.08rem;font-weight:400;letter-spacing:0;line-height:1.6;color:var(--grey);max-width:52ch}

/* --- Cartes -------------------------------------------------------------- */
.cards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.cards--3{grid-template-columns:1fr}
@media (min-width:940px){.cards--3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--white);padding:clamp(1.6rem,3vw,2.4rem);display:flex;flex-direction:column;transition:background .3s var(--ease),border-color .3s var(--ease)}
a.card:hover{background:var(--paper)}
.card h2,.card h3{font-size:1.35rem;font-weight:700;letter-spacing:-.025em;max-width:none}
.card p{margin-top:.85rem;font-size:.96rem;flex:1}
.card__go{margin-top:1.5rem;display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.9rem;color:var(--red-text)}
a.card:hover .card__go .arw{transform:translateX(5px)}
.card__go .arw{transition:transform .3s var(--ease)}

/* --- Bloc chiffre -------------------------------------------------------- */

/* --- Liste à filet ------------------------------------------------------- */
.rows{border-top:1px solid var(--line)}
.rows li{padding-block:1.35rem;border-bottom:1px solid var(--line)}
.rows b{display:block;font-weight:700;color:var(--ink);font-size:1.05rem;letter-spacing:-.02em}
.rows span{display:block;margin-top:.35rem;font-size:.95rem}

/* --- FAQ ----------------------------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding-block:1.4rem;min-height:44px;
  display:flex;align-items:flex-start;gap:1.25rem;font-weight:700;color:var(--ink);
  font-size:clamp(1rem,.97rem + .35vw,1.22rem);letter-spacing:-.02em;line-height:1.35;
  transition:color .25s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--red-text)}
.faq summary .q{flex:1}
.faq summary .ico{flex:none;width:1.3rem;height:1.3rem;position:relative;margin-top:.28rem}
.faq summary .ico::before,.faq summary .ico::after{content:"";position:absolute;left:50%;top:50%;background:var(--red);transition:transform .3s var(--ease)}
.faq summary .ico::before{width:13px;height:1.5px;transform:translate(-50%,-50%)}
.faq summary .ico::after{width:1.5px;height:13px;transform:translate(-50%,-50%)}
.faq details[open] summary .ico::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__a{padding-bottom:1.6rem;padding-left:2.55rem;max-width:66ch;font-size:.97rem}

/* --- Bandeau CTA de fin de page ----------------------------------------- */
.ctaband{background:var(--red);color:var(--white);padding-block:clamp(3.5rem,7vw,5.5rem)}
.ctaband h2{color:var(--white);font-size:clamp(1.9rem,1.3rem + 2.6vw,3.2rem);font-weight:800;letter-spacing:-.04em;max-width:18ch}
.ctaband p{margin-top:1.25rem;max-width:46ch;color:rgba(255,255,255,.9)}
.ctaband .btn{margin-top:2.25rem}

/* --- Footer -------------------------------------------------------------- */
.footer{background:var(--ink);color:#B5B1AC;padding-block:clamp(3rem,6vw,4.5rem)}
.footer__top{display:grid;gap:2.5rem}
@media (min-width:820px){.footer__top{grid-template-columns:1.5fr 1fr 1fr;gap:3rem}}
.footer .wordmark{font-size:2rem}
.footer__tag{margin-top:1rem;font-size:.95rem;max-width:30ch}
.footer__h{font-family:var(--mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--white);font-weight:500;margin:0}
.footer__links{margin-top:1.2rem;display:grid;gap:.75rem}
.footer__links a{font-size:.94rem;transition:color .25s var(--ease)}
.footer__links a:hover{color:var(--white)}
.footer__legal{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.5rem;border-top:1px solid var(--line-dark);
  font-family:var(--mono);font-size:.74rem;letter-spacing:.03em;
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:center;
}
.footer__legal a{color:var(--red-sombre)}
.footer__legal a:hover{color:var(--white)}

/* --- Apparition au scroll (discrète) ------------------------------------ */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* --- Photos : traitement noir et blanc uniforme ------------------------- */
.photo{position:relative;display:block;margin:0}
.photo img{width:100%;object-fit:cover;filter:grayscale(1) contrast(1.06)}
.photo--tall img{aspect-ratio:4/5}
@media (max-width:700px){}
/* Le filet rouge se cale sous l'image. Quand il y a une legende, il la precede
   plutot que de mordre dessus. */
.photo:not(:has(.photo__caption))::after{content:"";position:absolute;left:0;bottom:0;width:36%;height:6px;background:var(--red)}
.photo__caption{margin-top:0;font-family:var(--mono);font-size:.72rem;color:var(--grey)}
.photo__caption::before{content:"";display:block;width:36%;height:6px;background:var(--red);margin-bottom:.85rem}

/* --- Emplacement d'image à fournir -------------------------------------- */

/* --- Formulaires --------------------------------------------------------- */
.form{display:grid;gap:1.5rem}
.field{display:grid;gap:.5rem}
.field label{font-weight:600;color:var(--ink);font-size:.95rem}
.field .help{font-size:.85rem;color:var(--grey)}
.field input[type=text],.field input[type=email],.field select,.field textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--white);
  border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:.8rem 1rem;min-height:48px;
  transition:border-color .2s var(--ease);
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);outline:none}
.field input::placeholder,.field textarea::placeholder{color:var(--grey-light)}
.field .err{font-size:.85rem;color:var(--red-text);font-weight:600}

.choice{display:flex;flex-wrap:wrap;gap:.75rem}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice label{
  display:inline-flex;align-items:center;min-height:44px;padding:.7rem 1.2rem;
  border:1.5px solid var(--line);background:var(--white);cursor:pointer;font-weight:600;font-size:.94rem;color:var(--ink);
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease);
}
.choice label:hover{border-color:var(--ink)}
.choice input:checked + label{background:var(--red);border-color:var(--red);color:var(--white)}
.choice input:focus-visible + label{outline:2px solid var(--red);outline-offset:3px}

.consent{display:flex;gap:.75rem;align-items:flex-start;font-size:.92rem;cursor:pointer}
.consent input{margin-top:.3rem;width:18px;height:18px;accent-color:var(--red);flex:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.formstatus{padding:1rem 1.25rem;border-left:3px solid var(--red);background:var(--white);font-size:.95rem;color:var(--ink)}
.formstatus[hidden]{display:none}
.formstatus.is-error{border-left-color:var(--ink)}

/* --- Page légale : texte seul, largeur de lecture réduite --------------- */
.legal{padding-block:clamp(3rem,6vw,5rem) clamp(4rem,8vw,6rem)}
.legal h2{font-size:1.5rem;margin-top:2.5rem;letter-spacing:-.02em}
.legal h2:first-of-type{margin-top:2rem}
.legal p,.legal li{margin-top:1rem;font-size:1rem;max-width:70ch}
.legal ul{margin-top:.5rem}
.legal li{position:relative;padding-left:1.35rem}
.legal li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1.5px;background:var(--red)}
.legal .todo{background:var(--white);border-left:3px solid var(--red);padding:1rem 1.25rem;margin-top:1.5rem;font-size:.94rem}

/* --- Catalogue : les pôles s'enchaînent en pleine largeur ---------------- */

/* --- Bloc de pôle -------------------------------------------------------- */
.pole{scroll-margin-top:150px}
.pole + .pole{margin-top:clamp(3rem,6vw,4.5rem)}
.pole__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.1rem;padding-bottom:.9rem;position:relative}
.pole__head::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ink);
  transform-origin:0 50%;
}
.js .pole__head::after{transform:scaleX(0);transition:transform .9s var(--ease-io)}
.js .pole.in .pole__head::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.js .pole__head::after{transform:scaleX(1);transition:none}}
.pole__n{font-family:var(--mono);font-size:.78rem;color:var(--red-text)}
.pole__head h2{font-size:clamp(1.35rem,1.15rem + 1vw,1.9rem);font-weight:700;letter-spacing:-.03em;flex:1;max-width:none}
.pole__count{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.pole__intro{margin-top:1.1rem;max-width:62ch;font-size:.97rem}
.pole[hidden]{display:none}

/* --- Une prestation par vignette ----------------------------------------- */
.vignettes{
  margin-top:1.6rem;display:grid;gap:.7rem;
  grid-template-columns:1fr;
}
/* Base de 12 colonnes — commun multiple de 2 et 3 — plutôt que 2, 3 ou 4.
   Les pôles comptent 5, 11, 5, 3 et 2 prestations : aucun ne remplissait sa
   dernière rangée, et le bloc s'arrêtait chaque fois avant le bord droit. Les
   vignettes restantes se partagent donc les colonnes libres. Ce sont des
   « questions de quantité » : elles s'adaptent si une prestation est ajoutée.

   Les intervalles sont EXCLUSIFS. Sans borne haute, les règles d'un palier
   continuent de s'appliquer au-dessus et se mêlent aux suivantes : c'est ce qui
   faisait rendre trois colonnes là où quatre étaient déclarées. */
@media (min-width:560px){
  .vignettes{grid-template-columns:repeat(12,1fr)}
}
@media (min-width:560px) and (max-width:899.98px){
  .vignettes > .vignette{grid-column:span 6}              /* deux par rangée */
  .vignettes > .vignette:last-child:nth-child(odd){grid-column:span 12}
}
@media (min-width:900px){
  .vignettes > .vignette{grid-column:span 4}              /* trois par rangée */
  .vignettes > .vignette:last-child:nth-child(3n+1){grid-column:span 12}
  .vignettes > .vignette:nth-child(3n+1):nth-last-child(2),
  .vignettes > .vignette:nth-child(3n+1):nth-last-child(2) ~ .vignette{grid-column:span 6}
}

.vignette{display:block}
.vignette[hidden]{display:none}
.vignette a{
  position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;
  padding:1.05rem 1.15rem .95rem;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
/* Un liseré se trace en haut de la vignette au survol */
.vignette a::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease);
}
@media (hover:hover){
  .vignette a:hover,.vignette a:focus-visible{
    border-color:var(--red);transform:translateY(-3px);
    box-shadow:0 10px 24px rgba(10,10,10,.07);
  }
  .vignette a:hover::before,.vignette a:focus-visible::before{transform:scaleX(1)}
}

.vignette__n{
  font-weight:600;color:var(--ink);font-size:.92rem;letter-spacing:-.02em;line-height:1.3;
}
.vignette__tag{
  display:inline-block;margin-left:.4rem;font-family:var(--mono);font-size:.55rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--red-text);border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:.08rem .38rem;vertical-align:2px;
}
.vignette__d{margin-top:.45rem;font-size:.82rem;color:var(--grey);line-height:1.45;flex:1}

/* Le pied bascule du délai vers l'action : deux informations, une seule place. */
.vignette__pied{
  /* Les deux libelles occupent la MEME cellule de grille : ils se superposent
     au pixel pres, et la hauteur vient du plus grand des deux. Une hauteur
     fixe rognait le texte des que la police changeait de corps. */
  margin-top:.85rem;padding-top:.7rem;border-top:1px solid var(--line);
  display:grid;overflow:hidden;
}
.vignette__m,.vignette__a{
  grid-area:1/1;display:flex;align-items:center;gap:.35rem;
  transition:transform .32s var(--ease),opacity .32s var(--ease);
}
.vignette__m{font-family:var(--mono);font-size:.66rem;color:var(--grey);white-space:nowrap}
.vignette__a{font-size:.76rem;font-weight:600;color:var(--red);transform:translateY(120%);opacity:0}
@media (hover:hover){
  .vignette a:hover .vignette__m,.vignette a:focus-visible .vignette__m{transform:translateY(-120%);opacity:0}
  .vignette a:hover .vignette__a,.vignette a:focus-visible .vignette__a{transform:none;opacity:1}
}
/* Sans survol possible, l'action reste lisible en permanence. */
@media (hover:none){
  .vignette__pied{overflow:visible;display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline}
  .vignette__m,.vignette__a{transform:none;opacity:1}
}
.vignette__a span{transition:transform .3s var(--ease)}
.vignette a:hover .vignette__a span{transform:translateX(3px)}

/* Arrivée en cascade des vignettes d'un pôle */
.js .pole .vignette{opacity:0;transform:translateY(8px) scale(.99)}
.js .pole.in .vignette{
  opacity:1;transform:none;
  transition:opacity .45s var(--ease-out),transform .45s var(--ease-out);
  transition-delay:calc(var(--i,0) * 35ms);
}
@media (prefers-reduced-motion:reduce){
  .js .pole .vignette{opacity:1;transform:none;transition:none}
  .vignette a::before,.vignette__m,.vignette__a{transition:none}
  .vignette__pied{overflow:visible;display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline}
  .vignette__m,.vignette__a{transform:none;opacity:1}
}

/* Bloc sponsoring réservé à la vue entreprise */
.brandblock{background:var(--ink);color:#B5B1AC;padding:clamp(2rem,4vw,3rem);margin-top:clamp(2.5rem,5vw,4rem)}
.brandblock h2{color:var(--white);font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem);max-width:22ch}
.brandblock p{margin-top:1.25rem;max-width:60ch}
.brandblock ul{margin-top:1.5rem;display:grid;gap:.7rem}
.brandblock li{position:relative;padding-left:1.35rem;font-size:.96rem}
.brandblock li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1.5px;background:var(--red)}
.brandblock .btn{margin-top:1.75rem}
.badge .pt{width:7px;height:7px;background:var(--red);flex:none}
@media (min-width:720px){}
@media (min-width:1080px){}

.plans{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(2rem,4vw,3rem)}
@media (min-width:860px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{background:var(--white);padding:clamp(1.6rem,3vw,2.2rem);display:flex;flex-direction:column}
.plan h3{font-size:1.3rem;font-weight:700;letter-spacing:-.025em}
.plan .for{margin-top:.55rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red-text)}
.plan p{margin-top:1rem;font-size:.95rem;flex:1}
.plan ul{margin-top:1.25rem;display:grid;gap:.6rem}
.plan li{position:relative;padding-left:1.35rem;font-size:.92rem}
.plan li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1.5px;background:var(--red)}
.plan .price{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--line);font-family:var(--mono);font-size:.8rem;color:var(--grey)}
@media (min-width:700px){}

/* ===========================================================================
   Page contact : formulaire principal + colonne latérale pauvre
   =========================================================================== */
.contactgrid{display:grid;gap:clamp(2.5rem,5vw,4.5rem)}
@media (min-width:940px){.contactgrid{grid-template-columns:1.25fr .75fr;align-items:start}}
.aside h2{font-family:var(--mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink);font-weight:500;margin-top:2rem;letter-spacing:.15em}
.aside h2:first-child{margin-top:0}
.aside p,.aside a{display:block;margin-top:.7rem;font-size:.95rem}
.aside a:hover{color:var(--red-text)}
.aside .mail{font-size:.88rem;color:var(--grey)}

/* ===========================================================================
   Aperçu d'interface regard.pro
   Ce n'est pas une capture d'écran maquillée : c'est un aperçu cliquable de
   l'outil en construction, avec des données d'exemple annoncées comme telles.
   =========================================================================== */

@media (min-width:640px){}

/* Cycle de vie du partenaire */
.lifecycle{margin-top:clamp(2rem,4vw,3rem);display:grid;border-top:1px solid var(--line);border-left:1px solid var(--line)}
@media (min-width:640px){.lifecycle{grid-template-columns:repeat(3,1fr)}}
.lifecycle li{background:var(--white);padding:1.3rem 1.5rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.lifecycle .n{font-family:var(--mono);font-size:.72rem;color:var(--red-text);letter-spacing:.1em}
.lifecycle b{display:block;margin-top:.5rem;font-weight:700;color:var(--ink);font-size:1.02rem;letter-spacing:-.02em}
.lifecycle span{display:block;margin-top:.4rem;font-size:.9rem}

/* Tableau comparatif des formules */
.compare{width:100%;border-collapse:collapse;margin-top:clamp(2rem,4vw,3rem);font-size:.92rem;background:var(--white);border:1px solid var(--line)}
.compare th,.compare td{padding:.85rem 1rem;border-bottom:1px solid var(--line);text-align:left}
.compare thead th{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);
  font-weight:400;background:var(--paper);vertical-align:bottom;
}
.compare thead th b{display:block;font-family:var(--sans);font-size:1rem;letter-spacing:-.02em;color:var(--ink);margin-bottom:.2rem;text-transform:none}
.compare td:not(:first-child),.compare th:not(:first-child){text-align:center;width:7.5rem}
.compare td:first-child{color:var(--ink)}
.compare .yes{color:var(--red);font-weight:700}
.compare .no{color:var(--grey)}   /* --grey-light tombait sous le seuil AA */
.compare tbody tr:last-child td{border-bottom:0}
.compare .group td{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);
  background:var(--paper);padding-block:.55rem;
}
.compare-wrap{overflow-x:auto}
@media (max-width:620px){.compare{font-size:.84rem}.compare td:not(:first-child),.compare th:not(:first-child){width:5rem}}

/* ===========================================================================
   Demande de devis
   Deux colonnes : le formulaire avance a gauche, un panneau de suivi rappelle
   a droite ce qui est deja renseigne. Sans JavaScript, les trois etapes
   s'affichent a la suite et le formulaire reste utilisable de bout en bout.
   =========================================================================== */

.devis{background:var(--white);border:1px solid var(--line);margin-top:clamp(2rem,4vw,3rem)}
.devis__layout{display:grid}
@media (min-width:1000px){.devis__layout{grid-template-columns:minmax(0,1fr) 21rem}}

/* --- Colonne principale -------------------------------------------------- */
.devis__main{min-width:0}
.devis__step{border:0;padding:clamp(1.5rem,3vw,2.5rem);margin:0}
.js .devis__step:not([data-current]){display:none}
.devis__step > legend{
  padding:0;font-family:var(--sans);font-weight:800;color:var(--ink);
  font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem);letter-spacing:-.03em;
}
.devis__rank{
  display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red-text);margin-bottom:.6rem;
}
.devis__hint{margin-top:.7rem;font-size:.94rem;color:var(--grey);max-width:58ch}

/* --- Familles de besoins ------------------------------------------------- */
/* Six intentions en langage courant. Les noms du catalogue restent dans le
   repli : on ne les impose qu'a qui veut preciser. */
.besoins{margin-top:1.8rem;display:grid;gap:.7rem}

.besoin{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--white);
  overflow:hidden;transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.besoin:hover{border-color:var(--grey-light)}
.besoin[data-choisi="true"]{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}

.besoin > summary{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;
  gap:.35rem 1rem;padding:1.05rem 1.25rem;min-height:56px;cursor:pointer;
  list-style:none;
}
.besoin > summary::-webkit-details-marker{display:none}
.besoin > summary:focus-visible{outline:2px solid var(--red);outline-offset:-3px}

.besoin__t{grid-column:1;font-size:1.02rem;font-weight:600;color:var(--ink);line-height:1.3}
.besoin__d{grid-column:1;grid-row:2;font-size:.9rem;color:var(--grey);line-height:1.4}

/* Pastille du nombre choisi : vide, elle ne prend pas de place. */
.besoin__n{grid-column:2;grid-row:1/3;justify-self:end;font-family:var(--mono);font-size:.72rem}
.besoin__n:not(:empty){
  display:grid;place-items:center;width:24px;height:24px;border-radius:var(--radius-pill);
  background:var(--red);color:var(--white);font-weight:500;
}

/* Le chevron tourne a l'ouverture : le seul mouvement du bloc. */
.besoin > summary::after{
  content:"";grid-column:3;grid-row:1/3;width:11px;height:11px;
  border-right:1.8px solid var(--grey);border-bottom:1.8px solid var(--grey);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .3s var(--ease),border-color .3s var(--ease);
}
.besoin[open] > summary::after{transform:rotate(-135deg) translate(-3px,-3px);border-color:var(--red)}

.picks{display:grid;border-top:1px solid var(--line)}
@media (min-width:560px){.picks{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.picks{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1180px){.picks{grid-template-columns:repeat(3,1fr)}}

.pick{position:relative;display:block}
.pick[hidden]{display:none}
.pick input{position:absolute;opacity:0;width:0;height:0}
.pick span{
  display:flex;align-items:center;gap:.8rem;min-height:52px;cursor:pointer;
  padding:.7rem 1rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:.92rem;font-weight:500;color:var(--ink);line-height:1.3;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.pick span::before{
  content:"";flex:none;width:17px;height:17px;border:1px solid #C4BFB9;background:var(--white);
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.pick:hover span{background:var(--paper)}
.pick input:checked + span{font-weight:600;background:var(--paper)}
.pick input:checked + span::before{
  border-color:var(--red);background:var(--red);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3L12.5 5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:13px;background-repeat:no-repeat;background-position:center;
}
.pick input:focus-visible + span{outline:2px solid var(--red);outline-offset:-2px}

/* Sous-groupe de champs a l'interieur d'une etape (« Pour quand ? »). */
.souschamp{border:0;padding:0;margin:2rem 0 0}
.souschamp > legend{
  font-weight:600;color:var(--ink);font-size:.95rem;padding:0;margin-bottom:.75rem;
}

/* --- Barre d'action ------------------------------------------------------ */
.devis__nav{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
  margin-top:1.75rem;padding-top:1.4rem;border-top:1px solid var(--line);
}
.devis__nav .btn{margin-left:auto}
.devis__nav .btn--next{display:none}
.js .devis__nav .btn--next{display:inline-flex}
.linkback{
  min-height:44px;display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:600;
  color:var(--grey);
}
.linkback::before{content:"";width:7px;height:7px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.linkback:hover{color:var(--ink)}

/* --- Panneau de suivi ---------------------------------------------------- */
.devis__side{
  background:var(--paper);border-top:1px solid var(--line);
  padding:clamp(1.4rem,3vw,1.8rem);
}
@media (min-width:1000px){
  .devis__side{border-top:0;border-left:1px solid var(--line);align-self:start;position:sticky;top:150px}
}

.devis__steps{display:flex;gap:1rem}
@media (min-width:1000px){.devis__steps{display:block}}
.devis__steps li{display:flex;align-items:flex-start;gap:.7rem;position:relative;min-width:0}
@media (min-width:1000px){.devis__steps li{padding-bottom:1.1rem}
  .devis__steps li:not(:last-child)::after{
    content:"";position:absolute;left:11px;top:26px;bottom:2px;width:1px;background:var(--line);
  }
  .devis__steps li[data-done="true"]:not(:last-child)::after{background:var(--red)}
}
.devis__steps .n{
  flex:none;width:23px;height:23px;display:grid;place-items:center;position:relative;z-index:1;
  font-family:var(--mono);font-size:.7rem;border:1px solid #C4BFB9;color:var(--grey);background:var(--white);
}
.devis__steps .t{font-size:.88rem;color:var(--grey);line-height:1.45;padding-top:.15rem}
@media (max-width:999px){.devis__steps .t{display:none}}
.devis__steps li[aria-current="step"] .n{border-color:var(--red);background:var(--red);color:#fff}
.devis__steps li[aria-current="step"] .t{color:var(--ink);font-weight:600}
@media (max-width:999px){.devis__steps li[aria-current="step"] .t{display:block}}
.devis__steps li[data-done="true"] .n{border-color:var(--red);color:var(--red-text);background:var(--white)}

.devis__recap{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line)}
@media (max-width:999px){.devis__recap{display:none}}
.devis__recap h3{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);font-weight:400;
}
.devis__recap ul{margin-top:.8rem;display:grid;gap:.45rem}
.devis__recap li{
  font-size:.85rem;color:var(--ink);line-height:1.35;padding-left:.9rem;position:relative;
}
.devis__recap li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:1.5px;background:var(--red)}
.devis__recap .vide{margin-top:.8rem;font-size:.85rem;color:var(--grey);line-height:1.5}
.devis__recap dl{margin:1.1rem 0 0;display:grid;gap:.5rem;padding-top:1rem;border-top:1px solid var(--line)}
.devis__recap dl[hidden]{display:none}
.devis__recap dl div{display:flex;gap:.6rem;font-size:.82rem}
.devis__recap dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);flex:none;min-width:4.6rem;padding-top:.15rem}
.devis__recap dd{margin:0;color:var(--ink);font-weight:600}
.devis__reassure{
  margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--grey);line-height:1.5;
}
@media (max-width:999px){.devis__reassure{display:none}}

/* Recapitulatif replie de l'etape finale, pour les petits ecrans */
.recap{border:1px solid var(--line);background:var(--paper);padding:1rem 1.15rem;margin-bottom:1.6rem}
@media (min-width:1000px){}

/* Message d'erreur au niveau du champ */
.field .err[hidden]{display:none}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--red)}
html:not(.js) .devis__steps{display:none}

/* ===========================================================================
   Impression
   Les pages legales et le catalogue sont imprimes ou enregistres en PDF :
   on retire la navigation, on revele les URL et on evite les coupures.
   =========================================================================== */
@media print{
  :root{--paper:#fff;--bg:#fff}
  body{background:#fff;color:#000;font-size:11pt;line-height:1.45}
  .header,.mnav,.burger,.skip,.ctaband,.devis,.form,
  .footer__links,.photo,.devis__side{display:none}
  main{padding:0}
  .sect,.pagehead,.legal{padding-block:0 1.2rem;border:0}
  .wrap{max-width:none;padding-inline:0}
  h1,h2,h3{color:#000;page-break-after:avoid;break-after:avoid}
  h1{font-size:22pt}
  h2,.h2{font-size:15pt}
  h3{font-size:12pt}
  p,li,tr,.presta,.card,.step,.module{page-break-inside:avoid;break-inside:avoid}
  .presta,.card,.module,.plan{border:1px solid #ccc;padding:.5rem .7rem}
  .pole__grid,.cards,.modules,.plans,.steps,.poles,.picks{display:block}
  a{color:#000;text-decoration:underline}
  /* Une URL imprimee ne sert que si elle est lisible hors du site */
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
  .faq details{border-bottom:1px solid #ccc}
  .faq__a{padding-left:0}
  .footer{background:#fff;color:#000;border-top:1px solid #000;padding-block:1rem}
  .footer__legal{border:0;padding:0;margin:0}
}

/* Mise en avant d'une prestation : le texte porte l'argument, la colonne de
   droite liste ce qui est reellement livre. */
.feature{display:grid;gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:940px){.feature{grid-template-columns:1.1fr .9fr;align-items:start}}
.feature__text .btn{display:inline-flex}
.feature__list{border:1px solid var(--line);background:var(--paper);padding:clamp(1.5rem,3vw,2rem)}
.feature__t{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);padding-bottom:.8rem;border-bottom:1px solid var(--line)}
.feature__list ul{margin-top:1.1rem;display:grid;gap:.8rem}
.feature__list li{position:relative;padding-left:1.4rem;font-size:.95rem;line-height:1.5}
.feature__list li::before{content:"";position:absolute;left:0;top:.7em;width:7px;height:1.5px;background:var(--red)}

/* ===========================================================================
   Formes arrondies et présence du rouge
   Les blocs qui portaient des angles nets prennent le rayon commun ; le rouge
   sort de son rôle d'accent pour teinter des fonds et porter les chiffres.
   Pour revenir en arrière : passer --radius, --radius-sm et --radius-pill à 0
   et retirer ce bloc.
   =========================================================================== */

/* --- Blocs et encadrés ---------------------------------------------------- */
.card,.polecard,.module,.plan,
.brandblock,.pole__grid,.picks,.pick span,.checkgroup,
.toc a,.formstatus,.legal .todo{border-radius:var(--radius);overflow:hidden}
.photo img,.hero__frame img,.biz__media img,.proof__media img{border-radius:var(--radius)}

.module .v1,
.field input[type=text],.field input[type=email],.field select,.field textarea,
.choice label{border-radius:var(--radius-sm)}
.choice label{border-radius:var(--radius-pill)}

/* Les cases à cocher gardent un carré adouci, jamais un rond : un rond se lit
   comme un choix unique. */
.pick span::before{border-radius:5px}

/* --- Le rouge prend de la place ------------------------------------------ */

/* Un quatrième fond, teinté, pour alterner sans casser la palette */
.sect--creme{background:var(--paper)}
.sect--creme .card,.sect--creme .polecard{background:var(--white)}

/* Filets d'ouverture de section teintés */
.sect::before{background:var(--line)}

/* Cartes : le survol appelle le rouge au lieu du gris */
a.card,.polecard{border:1px solid transparent}
a.card:hover,.polecard:hover{background:var(--paper);border-color:var(--red)}
.card__go{color:var(--red)}
.pole__head::after{background:var(--red)}

/* Filtre de cible : l'onglet actif s'appuie sur un aplat teinté */

/* Listes : les repères passent au rouge */
.rows li::before,.timeline .done .state{color:var(--red)}

/* Devis : l'étape franchie se marque en rouge plein */
.devis__steps li[data-done="true"] .n{background:var(--white);border-color:var(--red);color:var(--red)}
.devis__side{background:var(--paper)}

/* Aperçu regard pro : l'onglet actif souligné en rouge, déjà le cas, plus les
   pastilles d'état qui gagnent en présence */

/* Pied de page : un filet rouge marque la coupure */
.footer{border-top:3px solid var(--red)}

/* ===========================================================================
   Grands blocs arrondis
   Les sections en aplat cessent de courir d'un bord à l'autre : elles
   deviennent des blocs posés dans la page, avec le fond visible autour.
   =========================================================================== */

.ctaband,.teaser,.pledge{background:transparent;padding-block:clamp(2rem,4vw,3rem)}
.ctaband > .wrap,.teaser > .wrap,.pledge > .wrap{
  border-radius:var(--radius-lg);
  padding-block:clamp(3rem,6vw,4.5rem);
  padding-inline:clamp(1.75rem,5vw,4rem);
  max-width:calc(var(--page) - 2 * var(--gut));
}
.ctaband > .wrap{background:var(--red)}
.teaser > .wrap,.pledge > .wrap{background:var(--ink)}

/* La grille interne du teaser garde sa mise en page. On ne remet à zéro que
   l'axe VERTICAL : un « margin:0 » écrase aussi le « margin-inline:auto » de
   .wrap, et le bloc se colle alors au bord gauche de la page. */
.teaser__grid{margin-block:0}

/* Le bloc réservé aux marques suit la même logique */
.brandblock{border-radius:var(--radius-lg);padding:clamp(2rem,4vw,3rem)}

/* Bloc de citation : un aplat clair posé, plutôt qu'une bande */
.statement{background:transparent;border:0;padding-block:clamp(3rem,6vw,5rem)}
.statement > .wrap{
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(2.5rem,6vw,4.5rem) clamp(1.75rem,5vw,4rem);
  max-width:calc(var(--page) - 2 * var(--gut));
}

.faq details{border-radius:var(--radius)}
.faq summary{padding-inline:.9rem;border-radius:var(--radius)}
.faq summary:hover{background:var(--paper)}
.faq__a{padding-inline:.9rem}
.mnav a{border-radius:var(--radius);padding-inline:.8rem;margin-inline:-.8rem}

/* ===========================================================================
   Respiration
   Les blocs cessent d'être collés bord à bord : ils se détachent, prennent
   plus de marge intérieure et laissent le fond de page circuler entre eux.
   Les sections s'espacent, le texte respire.
   =========================================================================== */

/* --- Sections plus espacées ---------------------------------------------- */
.sect{padding-block:clamp(5.5rem,12vw,10rem)}
.pagehead{padding-block:clamp(3.5rem,7vw,6rem) clamp(3rem,6vw,5rem)}

/* Le texte courant gagne un peu d'interligne */
body{line-height:1.7}
.lead{line-height:1.65}

/* --- Cartes détachées ---------------------------------------------------- */
/* Les grilles ne s'appuient plus sur un fond gris vu à travers un interstice :
   chaque carte porte sa propre bordure et l'espace les sépare. */
.cards,.modules,.plans,.poles,.pole__grid{
  background:transparent;border:0;gap:clamp(1rem,1.6vw,1.5rem);
}
.card,.module,.plan,.polecard{
  border:1px solid var(--line);
  padding:clamp(1.9rem,3.4vw,2.8rem);
}
.polecard{padding:1.9rem 3rem 1.9rem 1.9rem}
.modules,.plans,.poles,.cards{overflow:visible}
.rows li{padding-block:1.7rem}
.faq summary{padding-block:1.75rem}
.faq__a{padding-bottom:2rem}

/* --- Marges internes des blocs ------------------------------------------- */
.feature__list,.brandblock,.demo__panel,.devis__step,.devis__side{
  padding:clamp(1.9rem,3.4vw,2.6rem);
}
.pole + .pole{margin-top:clamp(4rem,8vw,6rem)}
.pole__intro{margin-top:1.4rem}

/* --- Espace autour des titres -------------------------------------------- */
.lead{margin-top:1.9rem}

/* --- Le pied de page respire aussi --------------------------------------- */
.footer{padding-block:clamp(4rem,8vw,6rem)}
.footer__top{gap:3.5rem}

/* ===========================================================================
   Page produit : un module, une démonstration
   Chaque fonction est montrée avec sa propre maquette plutôt qu'expliquée.
   Les maquettes portent des données d'exemple, annoncées comme telles.
   =========================================================================== */

.secnum{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);padding-bottom:.9rem;border-bottom:1px solid var(--line);margin-bottom:clamp(2rem,4vw,3rem);
  display:flex;gap:.9rem;align-items:baseline;
}
.secnum b{color:var(--red-text);font-weight:500}

.module-bloc{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media (min-width:960px){
  .module-bloc{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .module-bloc--inverse .module-bloc__texte{order:2}
}
.module-bloc + .module-bloc{margin-top:clamp(4rem,8vw,7rem)}
.module-bloc__n{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red-text)}
.module-bloc h3{margin-top:.9rem;font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem);font-weight:800;letter-spacing:-.035em;line-height:1.1}
.module-bloc__quoi{
  margin-top:.9rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);
}
.module-bloc p.t{margin-top:1.3rem;font-size:1rem;line-height:1.65;max-width:46ch}
.module-bloc ul{margin-top:1.5rem;display:grid;gap:.75rem}
.module-bloc li{position:relative;padding-left:1.4rem;font-size:.94rem;line-height:1.5}
.module-bloc li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1.5px;background:var(--red)}

/* ===========================================================================
   PAGE AGENCE
   Le rythme de la page tient à l'alternance des fonds : clair, blanc, sombre,
   blanc, clair. Le bloc sombre des pôles est la seule rupture, et c'est elle
   qui sépare le constat de la méthode.
   =========================================================================== */

/* --- Les cinq pôles, sur fond sombre ------------------------------------- */
.polesect{background:var(--ink);color:#B5B1AC}
.polesect .h2{color:var(--white)}

.plist{margin-top:clamp(2.5rem,5vw,3.5rem);list-style:none;padding:0;counter-reset:none}
.plist__i{border-top:1px solid var(--line-dark)}
.plist__i:last-child{border-bottom:1px solid var(--line-dark)}

.plist__i a{
  display:grid;grid-template-columns:auto 1fr auto;align-items:start;
  gap:.4rem 1.4rem;padding:1.5rem .25rem;
  transition:padding-left .35s var(--ease),background .35s var(--ease);
}
.plist__n{
  font-family:var(--mono);font-size:.78rem;color:var(--grey-light);
  padding-top:.35rem;transition:color .35s var(--ease);
}
.plist__t{
  display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;
  font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:600;color:var(--white);
  line-height:1.25;letter-spacing:-.01em;
}
.plist__tag{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--red-sombre);border:1px solid var(--red-sombre);border-radius:var(--radius-pill);
  padding:.2rem .6rem;
}
.plist__d{
  display:block;margin-top:.55rem;font-size:.95rem;line-height:1.55;
  color:#8F8A85;max-width:62ch;
}
.plist__go{
  color:var(--red-sombre);font-size:1.1rem;padding-top:.2rem;
  transform:translateX(-6px);opacity:0;
  transition:transform .35s var(--ease),opacity .35s var(--ease);
}

@media (hover:hover){
  .plist__i a:hover{background:rgba(255,255,255,.03);padding-left:1.1rem}
  .plist__i a:hover .plist__n{color:var(--red)}
  .plist__i a:hover .plist__go{transform:none;opacity:1}
}
.plist__i a:focus-visible{outline:2px solid var(--red);outline-offset:-3px}
.plist__i a:focus-visible .plist__go{transform:none;opacity:1}

.polesect__note{margin-top:clamp(2rem,4vw,2.75rem);font-size:.95rem;color:#8F8A85}
.polesect__note a{color:var(--white);border-bottom:1px solid var(--red);padding-bottom:1px}
.polesect__note a:hover{color:var(--red)}

/* --- Les trois principes ------------------------------------------------- */
.principes{
  margin-top:clamp(2.5rem,5vw,3.5rem);display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;
}
@media (min-width:820px){.principes{grid-template-columns:repeat(3,1fr)}}
.principe{background:var(--white);padding:clamp(1.6rem,3vw,2.1rem)}
.principe__n{
  font-family:var(--mono);font-size:.72rem;color:var(--red);
  letter-spacing:.1em;
}
.principe h3{margin-top:.9rem;font-size:1.05rem;font-weight:600;line-height:1.3}
.principe p{margin-top:.6rem;font-size:.94rem;color:var(--grey);line-height:1.55}

/* ===========================================================================
   SCHÉMAS — regard pro
   Le produit n'existe pas encore : on n'en montre aucune interface. Ces blocs
   expliquent le mécanisme, ce qui reste vrai quelle que soit l'allure finale
   de l'écran. Construits en HTML plutôt qu'en SVG : ils se réorganisent sur
   mobile et leur texte reste sélectionnable et indexable.
   =========================================================================== */
.schema{margin:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);
  padding:clamp(1.4rem,3vw,2rem)}
.schema__t{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);padding-bottom:.9rem;margin-bottom:1.4rem;border-bottom:1px solid var(--line);
}

/* La disposition dépend de la largeur du BLOC, pas de l'écran : le même schéma
   sert dans une colonne étroite de hero et en pleine largeur. */
.schema{container-type:inline-size}
@container (min-width:420px){}
@container (min-width:820px){
}
/* Repli pour les navigateurs sans requêtes de conteneur. */
@supports not (container-type:inline-size){
  @media (min-width:640px){}
}
@media (min-width:560px){}

/* --- Bascule : deux états face à face, et ce qui les sépare -------------- */
.schema__face{display:grid;gap:1rem;align-items:stretch}
@media (min-width:720px){}
@media (min-width:720px){}

/* --- Frise : le temps, et l'alerte qui arrive avant l'échéance ----------- */
.schema__frise{position:relative;margin-top:.6rem;padding-top:2.4rem}
@media (min-width:640px){}

/* --- Confrontation : la question, puis les deux réponses ----------------- */
/* La valeur du produit ne se voit qu'en regard de ce qui se passe sans lui. */
.schema__conf{display:grid;gap:0}
@media (min-width:660px){
}
@media (min-width:660px){
}

/* --- Anatomie : une ligne, et les champs qui la rendent inoubliable ------ */
.schema__objet{
  display:inline-block;padding:.6rem 1rem;border:1.5px solid var(--red);border-radius:var(--radius-sm);
  background:var(--paper);font-weight:600;font-size:.98rem;
}
@media (min-width:620px){}
@container (min-width:440px){}
.schema__calcul{
  margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line);
  font-size:.92rem;line-height:1.55;color:var(--grey);
}
.schema__calcul b{color:var(--ink);font-weight:600}

/* ===========================================================================
   DIAGRAMMES DESSINÉS — regard pro
   De vrais schémas : des blocs, des liens, un sens de lecture. Le SVG porte
   la géométrie, le CSS porte les couleurs — ainsi la charte reste au même
   endroit et un diagramme ne fige aucune valeur en dur.
   =========================================================================== */
.schema--dessin{padding-bottom:clamp(1.2rem,2.4vw,1.6rem)}
.dg{display:block;width:100%;height:auto;overflow:visible}

/* Blocs */
.dg__b rect{fill:var(--white);stroke:var(--line);stroke-width:1.5}
.dg__b--cle rect{stroke:var(--red);stroke-width:1.5}
.dg__b--fort rect{fill:var(--red);stroke:var(--red)}

/* Textes : la police du site, jamais une police système par défaut. */
.dg text{font-family:var(--sans);text-anchor:middle;fill:var(--ink)}
.dg .dg__t{font-size:19px;font-weight:600;letter-spacing:-.01em}
.dg .dg__t--fort{fill:var(--white)}
.dg .dg__s{font-size:14px;fill:var(--grey)}
.dg .dg__s--fort{fill:rgba(255,255,255,.82)}

/* Liens */
.dg__lien path{stroke:var(--line-dark);stroke-width:1.5;opacity:.45;fill:none}
.dg__tete{fill:var(--line-dark);opacity:.45}
.dg .dg__t--mini{font-size:17px}
.dg .dg__pied{font-family:var(--mono);font-size:11.5px;fill:var(--grey);letter-spacing:.03em}
.dg .dg__lab{font-family:var(--mono);font-size:11px;fill:var(--grey);letter-spacing:.1em}
.dg .dg__lab--gauche{text-anchor:start}
.dg .dg__lab--droite{text-anchor:end}

/* Le diagramme du hero est posé sur fond sombre : la carte reste blanche,
   rien à inverser. Sous 380 px de conteneur, on desserre les corps de texte. */
@container (max-width:380px){
  .dg .dg__t{font-size:22px}
  .dg .dg__s{font-size:16px}
}
.dg .dg__pied--rouge{fill:var(--red)}
.dg .doc__regle{stroke:var(--line-dark);stroke-width:1;opacity:.3}
.dg .doc__sep{stroke:var(--line);stroke-width:1}

/* --- Le hub : une base unique et ses domaines ---------------------------- */
.dg .hub__tronc{stroke:var(--red);stroke-width:1.5;opacity:.35}
.dg .hub__branche{stroke:var(--red);stroke-width:1.5;opacity:.35}
.dg .hub__b rect{fill:var(--white);stroke:var(--line);stroke-width:1.5}
.dg .hub__t{font-size:15.5px;font-weight:600;fill:var(--ink);text-anchor:start;letter-spacing:-.01em}
.dg .hub__s{font-size:12.5px;fill:var(--grey);text-anchor:start}

/* Statuts : un parcours en serpentin, et la boucle du renouvellement. */
.dg .dg__et rect{fill:var(--white);stroke:var(--line);stroke-width:1.5}
.dg .dg__et text{font-size:14.5px;font-weight:500;fill:var(--ink)}
.dg .dg__et--fort rect{fill:var(--red);stroke:var(--red)}
.dg .dg__et--fort text{fill:var(--white);font-weight:600}
.dg .dg__et--alerte rect{stroke:var(--red)}
.dg .dg__retour{stroke:var(--red);stroke-width:1.5;opacity:.55;fill:none}

/* Cases d'état d'un engagement : fait, ou reste à faire. */
.dg .dg__coche rect{fill:var(--paper);stroke:var(--line);stroke-width:1}
.dg .dg__coche text{font-family:var(--mono);font-size:11px;fill:var(--red-text);letter-spacing:.06em}
.dg .dg__coche--att{fill:var(--white);stroke-dasharray:3 3}
.dg .dg__att{fill:var(--grey)}

/* File des échéances : la longueur de la barre dit le temps qui reste. */
.dg .file__q{font-family:var(--mono);font-size:12px;fill:var(--grey);text-anchor:start;letter-spacing:.04em}
.dg .file__b{fill:var(--line)}
.dg .file__b--urgent{fill:var(--red)}
.dg .file__e{font-size:13px;fill:var(--grey);text-anchor:end}
.dg .file__e--urgent{fill:var(--ink);font-weight:600}

/* --- Schéma du teaser, sur fond sombre ---------------------------------- */
.teaser__schema{margin:0}
.teaser__schema figcaption{
  margin-top:1rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grey-light);text-align:center;
}
/* Sur l'encre, les blocs s'inversent : contour clair, fond transparent. */
.dg--sombre .hub__b rect{fill:transparent;stroke:var(--line-dark);stroke-width:1.5}
.dg--sombre .hub__t{font-size:14px;font-weight:500;fill:#B5B1AC;text-anchor:middle;letter-spacing:0}
.dg--sombre .hub__tronc,.dg--sombre .hub__branche{stroke:var(--red);opacity:.5}

/* Cibles de pointage du pied de page : 24 px minimum (WCAG 2.5.8). Les liens
   y sont posés en ligne et n'atteignaient que 20 à 23 px de haut. */
.footer a,.footer__legal a{display:inline-block;padding-block:.15rem}

/* ===========================================================================
   RÉALISATIONS
   Le portfolio d'une agence, pas une galerie : la marque du client domine,
   le détail des missions se déplie. Aucun composant nouveau là où un existant
   fait l'affaire — la page emprunte .secnum et .lead au reste du site.
   =========================================================================== */

/* --- Étude de cas -------------------------------------------------------- */
.cas__tete{display:grid;gap:clamp(2rem,4vw,3.5rem);margin-top:clamp(2rem,4vw,2.75rem)}
@media (min-width:940px){.cas__tete{grid-template-columns:1.15fr .85fr;align-items:start}}

/* Le monogramme tient la place du logo tant qu'il n'est pas fourni. */
/* Le logo du client garde sa couleur. Celle de TFT est illisible sur blanc
   (1,3) et excellente sur l'encre (15,1) : le cadre sombre sert le logo. */
.cas__logo{
  margin:0 0 1.4rem;display:grid;place-items:center;width:112px;height:72px;
  background:var(--ink);border-radius:var(--radius);padding:.5rem .75rem;
  /* Même précaution que .ref__logo : sans rangée fixée, un logo non carré
     prendrait sa hauteur intrinsèque et déborderait du cadre. */
  grid-template:minmax(0,1fr) / minmax(0,1fr);
}
.cas__logo img{width:100%;height:100%;object-fit:contain;display:block}
.cas__quoi{
  margin-top:.6rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);
}

/* La chaîne : deux jalons rouges disent où commence et où finit la mission. */
.cas__chaine{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.cas__chaine li{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grey);border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:.42rem .8rem;background:var(--paper);
}
.cas__chaine li.est{color:var(--red-text);border-color:var(--red);background:var(--white)}

.cas__volets{
  margin-top:clamp(2.5rem,5vw,3.5rem);display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
@media (min-width:720px){.cas__volets{grid-template-columns:1fr 1fr}}
@media (min-width:1180px){.cas__volets{grid-template-columns:repeat(4,1fr)}}
.cas__volet{background:var(--white);padding:clamp(1.5rem,2.8vw,1.9rem)}
.cas__n{font-family:var(--mono);font-size:.7rem;color:var(--red);letter-spacing:.1em}
.cas__volet h3{margin-top:.85rem;font-size:1.02rem;font-weight:600;line-height:1.3}
.cas__volet ul{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.5rem}
.cas__volet li{
  position:relative;padding-left:.95rem;font-size:.89rem;line-height:1.5;color:var(--grey);
}
.cas__volet li::before{
  content:"";position:absolute;left:0;top:.62em;width:.42rem;height:1px;background:var(--red);
}

/* --- Structures ---------------------------------------------------------- */
.refs-grille{margin-top:clamp(2rem,4vw,3rem);display:grid;gap:1.1rem}
@media (min-width:820px){.refs-grille{grid-template-columns:1fr 1fr}}

.ref{
  display:grid;gap:1.4rem;padding:clamp(1.6rem,3vw,2.1rem);
  border:1px solid var(--line);border-radius:var(--radius);background:var(--white);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
@media (min-width:560px){.ref{grid-template-columns:auto 1fr;align-items:start}}
.ref:hover{border-color:var(--grey-light);box-shadow:0 10px 30px rgba(10,10,10,.05)}
/* Les logos fournis sont clairs ou colorés — le TFT est jaune, celui de CrossFit
   blanc pur : ils appellent tous un fond sombre.

   UN SEUL gabarit, partout : cadre de 112 × 72 et retrait identique. Le format
   des logos varie (carré, portrait, 3:2) ; c'est la HAUTEUR disponible qui les
   égalise, chacun venant occuper les 56 px du cadre. Élargir un cadre pour un
   logo large, comme je l'avais fait pour Wild MMA, rompt cette égalité. */
.ref__logo{
  margin:0;display:grid;place-items:center;width:112px;height:72px;flex:none;
  border-radius:var(--radius-sm);background:var(--ink);padding:.5rem .75rem;
  /* La rangée implicite se dimensionnerait sur le contenu : l'image y prendrait
     sa hauteur intrinsèque, plus haute que le cadre, et déborderait par le bas.
     On la fixe à l'aire disponible pour donner une référence au « contain ». */
  grid-template:minmax(0,1fr) / minmax(0,1fr);
}
.ref__logo img{width:100%;height:100%;object-fit:contain;display:block}
/* Chaque cadre reprend la couleur de marque du client, relevée sur son propre
   site : le portfolio montre les identités, il ne les uniformise pas. Seule la
   couleur change — jamais la taille. */
.ref__logo--plein{background:#15311B}   /* Endurance Factory */
.ref__logo--cf{background:#B41605}      /* CrossFit Albi */
.ref h3{font-size:1.15rem;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.ref__cat{
  margin-top:.35rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grey-light);
}
.ref__cles{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.ref__cles li{
  font-size:.78rem;color:var(--grey);border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:.28rem .7rem;
}

/* --- Le dépliant commun aux deux types de cartes ------------------------- */
.ref__plus,.talent__plus{margin-top:1.1rem;border-top:1px solid var(--line);padding-top:.85rem}
.ref__plus summary,.talent__plus summary{
  display:flex;align-items:center;gap:.5rem;cursor:pointer;list-style:none;
  min-height:28px;font-size:.82rem;font-weight:600;color:var(--red-text);
}
.ref__plus summary::-webkit-details-marker,.talent__plus summary::-webkit-details-marker{display:none}
.ref__plus summary::after,.talent__plus summary::after{
  content:"";width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .3s var(--ease);
}
.ref__plus[open] summary::after,.talent__plus[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.ref__plus summary:focus-visible,.talent__plus summary:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.ref__plus > ul,.talent__plus > ul{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:.45rem}
.ref__plus > ul > li,.talent__plus > ul > li{
  position:relative;padding-left:.95rem;font-size:.87rem;line-height:1.5;color:var(--grey);
}
.ref__plus > ul > li::before,.talent__plus > ul > li::before{
  content:"";position:absolute;left:0;top:.62em;width:.42rem;height:1px;background:var(--red);
}

/* --- Talents ------------------------------------------------------------- */
.talents{margin-top:clamp(2.5rem,5vw,3.5rem);display:grid;gap:1.4rem}

/* Trois colonnes internes : la photo, l'identité, puis les antennes. */
@media (min-width:760px){
  .talent{
    display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,.85fr);
    gap:.55rem 2.2rem;align-items:start;align-content:start;
    grid-auto-rows:min-content;   /* sinon les lignes s'étirent sur la hauteur des logos */
  }
  .talent > .talent__photo{grid-column:1;grid-row:1 / span 3;margin-bottom:0}
  .talent > h3,.talent > .talent__role,.talent > .talent__cles{grid-column:2}
  .talent > .medias{grid-column:3;grid-row:1 / span 3;margin-top:0;padding-top:0;border-top:0}
  .talent > .ref__lien,.talent > .talent__plus{grid-column:2 / -1}
}

/* La photo a une largeur ET un rapport fixes : sa hauteur est donc définie, ce
   qui donne une référence au « cover ». Sans cela on retombe sur le piège du
   pourcentage sans référence, déjà rencontré sur les cadres de logos. */
.talent__photo{
  margin:0 0 1rem;width:170px;aspect-ratio:3/4;overflow:hidden;
  border-radius:var(--radius-sm);background:var(--paper);
}
.talent__photo img{
  width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block;
}
.talent{
  padding:clamp(1.5rem,2.8vw,2rem);border:1px solid var(--line);
  border-radius:var(--radius);background:var(--white);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.talent:hover{border-color:var(--grey-light);box-shadow:0 10px 30px rgba(10,10,10,.05)}
/* Un filet rouge tient lieu de signe distinctif là où était le portrait. */
.talent h3{
  position:relative;padding-top:1rem;font-size:1.18rem;font-weight:600;letter-spacing:-.02em;
}
.talent h3::before{
  content:"";position:absolute;left:0;top:0;width:2rem;height:2px;background:var(--red);
}
.talent__role{
  margin-top:.35rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--red-text);
}
/* Les mots-clés sortent du voile : ils sont désormais toujours lisibles. */
.talent__cles{
  list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;
}
.talent__cles li{
  font-size:.78rem;color:var(--grey);border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:.28rem .7rem;
}

@media (prefers-reduced-motion:reduce){
  .talent__cles,.talent__cles li{transition:none}
}

/* Antennes et événements : six marques de chaînes, chacune avec sa couleur et
   son poids propres. Elles écraseraient le nom du professionnel à cette taille.
   On les passe en gris : elles se lisent comme une référence, pas comme six
   marques en concurrence. La couleur revient au survol de la carte. */
.medias{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--line)}
.medias__t{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--grey-light);
}
.medias__l{
  list-style:none;margin:.7rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem .6rem;align-items:center;
}
.medias__l img{
  width:100%;height:auto;display:block;
  filter:grayscale(1) contrast(.85);opacity:.55;
  transition:filter .3s var(--ease),opacity .3s var(--ease);
}
@media (hover:hover){
  .talent:hover .medias__l img{filter:none;opacity:1}
}
@media (prefers-reduced-motion:reduce){.medias__l img{transition:none}}

/* Lien vers une réalisation en ligne : la preuve se vérifie en un clic. */
.voir{
  display:inline-flex;align-items:center;gap:.4rem;min-height:28px;
  font-size:.86rem;font-weight:600;color:var(--red-text);
  border-bottom:1.5px solid var(--red);padding-bottom:1px;
}
.voir:hover{color:var(--ink);border-bottom-color:var(--ink)}
.voir__ic{font-size:.9em;transition:transform .25s var(--ease)}
.voir:hover .voir__ic{transform:translate(2px,-2px)}
.ref__lien{margin-top:1rem}



.footer__maj{font-size:.78rem;color:#6A6560;line-height:1.5;margin-bottom:.9rem;max-width:62ch}
.footer__maj time{color:#8A8580}

/* --- Référence développée : un accompagnement en plusieurs volets --------- */
/* Wild MMA porte quatre domaines : la carte occupe toute la largeur pour que
   le détail respire, sans devenir une seconde étude de cas. */
@media (min-width:820px){.ref--large{grid-column:1 / -1}}
.ref__quoi{margin-top:1rem;font-size:.95rem;line-height:1.6;color:var(--grey);max-width:70ch}
.ref__deploie{margin-top:1.1rem}
.ref__deploie .cas__chaine{margin-bottom:1.6rem}

.volets{display:grid;gap:1.4rem}
@media (min-width:700px){.volets{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.volets{grid-template-columns:repeat(4,1fr);gap:1.6rem}}
.volet h4{
  font-size:.9rem;font-weight:600;color:var(--ink);padding-bottom:.6rem;
  border-bottom:1px solid var(--line);
}
.volet ul{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.45rem}
.volet li{
  position:relative;padding-left:.95rem;font-size:.87rem;line-height:1.5;color:var(--grey);
}
.volet li::before{
  content:"";position:absolute;left:0;top:.62em;width:.42rem;height:1px;background:var(--red);
}