/* Atletisport — design system
   Extrait sans modification du CSS de https://atletisport.com/DEVIS/ (relevé du 16/09/2026).
   Les valeurs sont celles de la page de référence : ne pas les réinventer. */
:root{
  /* ===== Charte Atletisport (reprise du thème atletisport.com) ===== */
  --rouge:#FF2626;        /* marque : décor, filets, icônes, fonds sombres */
  --rouge-clair:#FF4A4A;
  --rouge-texte:#C40F0F;  /* texte rouge et fonds de boutons — 5,39:1 sur le fond crème,
                             4,88:1 sur le crème foncé des sections grises */
  --rouge-fonce:#A80D0D;  /* survol des boutons rouges — 7,54:1 */
  --noir:#0E0F11;
  --noir-doux:#17191C;
  --gris-900:#26282C;
  --gris-700:#3B3C3C;
  --gris-500:#5E6269;   /* 5,38:1 sur crème, 4,87:1 sur crème foncé */
  --gris-400:#9AA0A8;
  --gris-200:#E5E4E3;
  --gris-100:#F2F3F5;
  --gris-50:#F8F9FA;
  --blanc:#FFFFFF;
  --ok:#1B9E5A;
  --ok-fonce:#177F49;   /* fond des pastilles portant du texte blanc — 5,04:1 */

  --r-sm:8px; --r:14px; --r-lg:20px; --r-xl:28px;
  --ombre:0 1px 2px rgba(14,15,17,.04), 0 8px 24px rgba(14,15,17,.06);
  --ombre-lg:0 4px 12px rgba(14,15,17,.06), 0 24px 60px rgba(14,15,17,.12);
  --max:1160px;
  --police:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;

  /* ===== Direction artistique 2026 =====
     Le petit texte passe en monospace : etiquettes, legendes, specifications,
     liens de pied. C'est la signature du style — le sans-serif reste reserve
     aux titres et au corps de texte courant. */
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --creme:#F1F0EE;        /* fond des sections claires, moins clinique que le blanc */
  --creme-fonce:#E7E5E1;
  --h-nav:58px;           /* hauteur de la pilule de navigation */
  --r-cadre:26px;         /* rayon des grands blocs encadres */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--police);
  color:var(--noir);
  background:var(--blanc);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  /* L'en-tete est detache du flux : sans cette reserve, la premiere section
     de chaque page passerait sous la pilule. Les pages dont le premier bloc
     est un hero sombre pleine largeur la neutralisent et gerent leur propre
     retrait, pour que la pilule flotte par-dessus la photo. */
  padding-top:calc(var(--h-nav) + 28px);
}
body.accueil-home,body.page-gamme{padding-top:0}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,textarea,select{font:inherit;color:inherit}
.conteneur{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================ EN-TÊTE ============================ */
/* Navigation en pilule flottante : l'en-tete lui-meme est transparent et ne
   capte pas le pointeur, seule la pilule est cliquable. Elle survole donc le
   hero sans le couper. */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:80;
  padding:14px 16px;background:transparent;pointer-events:none;
}
.site-header .conteneur{
  pointer-events:auto;
  max-width:1060px;height:var(--h-nav);
  display:flex;align-items:center;gap:18px;
  padding:0 8px 0 24px;
  background:rgba(11,11,12,.88);
  backdrop-filter:saturate(150%) blur(16px);
  -webkit-backdrop-filter:saturate(150%) blur(16px);
  border:1px solid rgba(255,255,255,.11);
  border-radius:100px;
  box-shadow:0 10px 34px rgba(0,0,0,.26);
}
.marque{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.marque img{width:138px;height:auto;display:block}
.nav-principale{display:flex;gap:2px;margin-left:auto;align-items:center}
.nav-principale a{
  color:#C8CBCF;text-decoration:none;
  font-family:var(--mono);font-size:11.5px;font-weight:400;
  letter-spacing:.08em;text-transform:uppercase;
  padding:8px 13px;border-radius:100px;transition:color .18s,background .18s;
}
.nav-principale a:hover{color:#fff;background:rgba(255,255,255,.08)}
.btn-header{
  background:var(--rouge-texte)!important;color:#fff!important;font-weight:500!important;
  padding:10px 18px!important;
}
.btn-header:hover{background:var(--rouge-fonce)!important}
/* ---- Déclencheur « Gammes » (grand écran) ---- */
.nav-gammes{
  display:inline-flex;align-items:center;gap:7px;
  color:#C8CBCF;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;
  padding:8px 13px;border-radius:100px;transition:color .18s,background .18s;
}
.nav-gammes::after{
  content:"";width:6px;height:6px;
  border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .22s ease;
}
.nav-gammes:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav-gammes[aria-expanded="true"]{color:#fff;background:rgba(255,255,255,.12)}
.nav-gammes[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-2px)}

/* ---- Bouton burger (petit écran) ---- */
.nav-burger{
  display:none;width:38px;height:38px;border-radius:50%;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:rgba(255,255,255,.10);transition:background .18s;
}
.nav-burger i{display:block;width:15px;height:1.5px;background:#fff;transition:transform .25s ease,opacity .2s ease}
.nav-burger[aria-expanded="true"] i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ---- Panneau déroulant ----
   L'en-tête ne capte pas le pointeur : le panneau doit le rétablir pour
   lui-même, sinon ses liens ne sont pas cliquables. */
.panneau-nav{
  pointer-events:auto;
  max-width:1060px;margin:10px auto 0;
  background:rgba(11,11,12,.96);
  -webkit-backdrop-filter:saturate(150%) blur(18px);backdrop-filter:saturate(150%) blur(18px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  box-shadow:0 22px 60px rgba(0,0,0,.42);
  padding:24px;
  opacity:0;transform:translateY(-10px);
  transition:opacity .22s ease,transform .22s ease;
  max-height:calc(100vh - var(--h-nav) - 44px);overflow-y:auto;
}
.panneau-nav.ouvert{opacity:1;transform:none}
.panneau-corps{display:grid;gap:22px}
.panneau-titre{
  display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:#7E848C;margin-bottom:14px;
}
.panneau-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.panneau-grille a{
  display:block;text-decoration:none;padding:13px 14px;border-radius:14px;
  border:1px solid rgba(255,255,255,.09);transition:border-color .18s,background .18s;
}
.panneau-grille a:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.06)}
.panneau-grille b{display:block;color:#fff;font-size:15px;font-weight:500;letter-spacing:-.015em;margin-bottom:5px}
.panneau-grille span{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:#9DA2A9;line-height:1.5;
}
.panneau-tout{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--rouge-clair);text-decoration:none;
}
.panneau-tout:hover{text-decoration:underline;text-underline-offset:3px}
.panneau-tout svg{width:11px;height:11px;transition:transform .2s}
.panneau-tout:hover svg{transform:translateX(3px)}
/* Sur grand écran, les liens généraux sont déjà dans la pilule. */
.panneau-bloc-liens{display:none}
.panneau-liste{display:flex;flex-direction:column;gap:2px}
.panneau-liste a{
  display:block;padding:12px 14px;border-radius:12px;text-decoration:none;
  color:#D6D8DB;font-size:15.5px;font-weight:500;
}
.panneau-liste a:hover{background:rgba(255,255,255,.07);color:#fff}

@media(max-width:900px){
  .nav-principale a:not(.btn-header){display:none}
  .nav-gammes{display:none}
  .nav-burger{display:flex}
  .site-header .conteneur{gap:10px;padding-left:18px}
  .panneau-nav{margin-inline:0;padding:20px}
  .panneau-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .panneau-bloc-liens{display:block;border-top:1px solid rgba(255,255,255,.12);padding-top:20px}
}
/* Deux colonnes tant que la place le permet : a une colonne, les huit gammes
   imposent un long defilement dans le panneau. */
@media(max-width:340px){
  .panneau-grille{grid-template-columns:1fr}
}
/* Panneau ouvert sur mobile : il occupe presque l'ecran, laisser la page
   defiler derriere est desorientant. */
@media(max-width:900px){
  body.nav-ouverte{overflow:hidden}
}
@media(max-width:520px){
  .site-header{padding:10px 10px}
  .site-header .conteneur{padding:0 6px 0 14px}
  .marque img{width:118px}
  .btn-header{font-size:10.5px!important;padding:9px 13px!important;white-space:nowrap}
}

/* ============================== HERO ============================== */
.hero{
  position:relative;
  background:
    radial-gradient(900px 420px at 78% -10%, rgba(255,38,38,.30), transparent 62%),
    radial-gradient(700px 380px at 12% 108%, rgba(255,38,38,.12), transparent 60%),
    linear-gradient(178deg,var(--noir) 0%,var(--noir-doux) 100%);
  color:#fff;
  padding:64px 0 132px;
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(700px 380px at 50% 0%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(700px 380px at 50% 0%,#000,transparent 78%);
}
.hero .conteneur{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.08fr .92fr;
  gap:clamp(30px,4.5vw,62px);align-items:center;
}
.hero-texte{max-width:600px}
.surtitre{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rouge-clair);border:1px solid rgba(255,38,38,.4);
  background:rgba(255,38,38,.09);
  border-radius:100px;padding:6px 15px;margin-bottom:22px;
}
.surtitre i{width:6px;height:6px;border-radius:50%;background:var(--rouge);display:block}
.hero h1{
  font-size:clamp(30px,5.2vw,54px);
  line-height:1.08;font-weight:700;letter-spacing:-.025em;margin-bottom:20px;
}
.hero h1 em{font-style:normal;color:var(--rouge)}
.hero .accroche{
  font-size:clamp(16px,2vw,19px);color:#B9BDC3;max-width:620px;margin:0 0 30px;
}
.reassurance{
  display:flex;flex-wrap:wrap;gap:10px 12px;
}
.reassurance span{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:500;color:#CFD2D6;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:100px;padding:7px 14px;
}
.reassurance svg{width:14px;height:14px;color:var(--rouge);flex-shrink:0}

.hero-visuel{position:relative}
.hero-visuel img{
  width:100%;height:auto;display:block;
  border-radius:var(--r-xl);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 28px 66px rgba(0,0,0,.55);
}
/* Halo rouge diffus : rattache le visuel à la charte sans surcharger. */
.hero-visuel::before{
  content:"";position:absolute;inset:10% -7% -9% 7%;z-index:-1;
  background:radial-gradient(58% 58% at 50% 50%,rgba(255,38,38,.34),transparent 72%);
  filter:blur(40px);
}

/* Sous 900 px, le visuel passe sous le texte et tout se recentre. */
@media(max-width:900px){
  .hero .conteneur{grid-template-columns:1fr;gap:30px;text-align:center;max-width:820px}
  .hero-texte{max-width:none;margin:0 auto}
  .hero .accroche{margin-left:auto;margin-right:auto}
  .reassurance{justify-content:center}
  .hero-visuel{order:-1;max-width:360px;margin:0 auto;width:100%}
}


/* ---- Barre de rappel, pour les visiteurs qui défilent sans s'arrêter ---- */
.rappel{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:rgba(14,15,17,.97);backdrop-filter:saturate(160%) blur(12px);
  border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 -8px 34px rgba(0,0,0,.34);
  transform:translateY(100%);transition:transform .32s cubic-bezier(.3,.8,.3,1);
}
.rappel.visible{transform:none}
.rappel[hidden]{display:none}
.rappel .conteneur{display:flex;align-items:center;gap:18px;padding-top:13px;padding-bottom:13px}
.rappel .texte{color:#C9CDD2;font-size:14.5px;line-height:1.4;flex:1;min-width:0}
.rappel .texte b{color:#fff;font-weight:600;display:block}
.rappel .btn{padding:11px 20px;font-size:14.5px;flex-shrink:0}
.rappel .fermer{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  color:#8D9299;font-size:20px;line-height:1;display:grid;place-items:center;
  transition:.16s;
}
.rappel .fermer:hover{background:rgba(255,255,255,.1);color:#fff}
@media(max-width:640px){
  .rappel .conteneur{gap:12px;padding-left:14px;padding-right:14px}
  .rappel .texte{font-size:13px}
  .rappel .texte span{display:none}
  .rappel .btn{padding:10px 15px;font-size:13.5px}
}

/* ------------- Bouton d'aide flottant : WhatsApp et téléphone -------------
   Aucun script tiers, aucun cookie : simples liens wa.me et tel:. */
.aide{
  position:fixed;right:20px;bottom:20px;z-index:75;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  transition:bottom .32s cubic-bezier(.3,.8,.3,1);
}
/* Quand la barre de rappel est visible, le bouton remonte au-dessus. */
body.rappel-actif .aide{bottom:92px}

.aide-options{display:flex;flex-direction:column;gap:8px}
.aide-options[hidden]{display:none}
.aide-option{
  display:flex;align-items:center;gap:11px;text-decoration:none;
  background:var(--blanc);border:1px solid var(--gris-200);border-radius:100px;
  padding:9px 18px 9px 11px;box-shadow:var(--ombre-lg);
  animation:surgit .22s cubic-bezier(.2,.8,.3,1) both;transition:.16s;
}
.aide-option:nth-child(2){animation-delay:.05s}
.aide-option:hover{border-color:var(--noir);transform:translateX(-2px)}
@keyframes surgit{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.aide-option .rond{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;color:#fff;
}
.aide-option .rond svg{width:17px;height:17px}
.aide-option.whatsapp .rond{background:#25D366}
.aide-option.appel .rond{background:var(--noir)}
.aide-option b{display:block;font-size:14px;font-weight:600;color:var(--noir);line-height:1.25}
.aide-option small{display:block;font-size:12px;color:var(--gris-500)}

.aide-bouton{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--rouge-texte);color:#fff;border-radius:100px;
  padding:13px 20px;font-size:14.5px;font-weight:600;
  box-shadow:0 6px 20px rgba(255,38,38,.4);transition:all .18s ease;
}
.aide-bouton:hover{background:var(--rouge-fonce);transform:translateY(-2px)}
.aide-bouton svg{width:19px;height:19px;flex-shrink:0}
.aide-bouton .ico-fermer{display:none}
.aide-bouton[aria-expanded="true"] .ico-ouvrir{display:none}
.aide-bouton[aria-expanded="true"] .ico-fermer{display:block}
@media(max-width:520px){
  .aide{right:14px;bottom:14px}
  body.rappel-actif .aide{bottom:86px}
  .aide-bouton{padding:13px;border-radius:50%}
  .aide-bouton span{display:none}
}


/* ====================== CONTENU ÉDITORIAL ====================== */
.section{padding:clamp(64px,8vw,104px) 0;background:var(--creme)}
.section.grise{background:var(--creme-fonce);border-top:1px solid rgba(14,15,17,.07);border-bottom:1px solid rgba(14,15,17,.07)}
.entete-section{max-width:680px;margin:0 auto 44px;text-align:center}
.entete-section .eyebrow{
  font-family:var(--mono);
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rouge-texte);display:block;margin-bottom:14px;
}
.entete-section h2{font-size:clamp(27px,4vw,42px);font-weight:500;letter-spacing:-.03em;line-height:1.12;margin-bottom:14px}
.entete-section p{color:var(--gris-500);font-size:16.5px}

.etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:22px}
.etape{position:relative;padding-top:20px;border-top:1px solid rgba(14,15,17,.16)}
.etape .num{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  color:var(--rouge-texte);margin-bottom:16px;
}
.etape h3{font-size:18px;font-weight:500;margin-bottom:9px;letter-spacing:-.022em}
.etape p{color:var(--gris-500);font-size:14px;line-height:1.7}
.section.sombre .etape{border-top-color:rgba(255,255,255,.18)}
.section.sombre .etape h3{color:#fff}
.section.sombre .etape p{color:#9DA2A9}

/* ---------- Section gammes : fond sombre, vignettes produit ---------- */
.section.sombre{
  background:var(--noir);color:#fff;
  border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);
}
/* Sur fond noir, c'est le rouge vif qui contraste (5,07:1) ; le rouge
   assombri réservé aux fonds clairs y tomberait à 3,44:1. */
.section.sombre .entete-section .eyebrow{color:var(--rouge)}
.section.sombre .entete-section h2{color:#fff}
.section.sombre .entete-section p{color:#9AA0A8}

.filtres-gammes{
  display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px;
}
/* Les filtres n'existaient que dans la section sombre de /DEVIS/ : leurs
   couleurs claires y étaient justes. Les pages de gamme les posent sur fond
   blanc, où ils tombaient à 1,70:1. Le réglage clair devient la base, la
   version sombre d'origine est conservée en variante. */
.filtre{
  padding:10px 19px;border:1px solid rgba(14,15,17,.16);border-radius:100px;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--gris-700);background:transparent;
  transition:all .16s ease;white-space:nowrap;
}
.filtre:hover{border-color:var(--noir);color:var(--noir)}
/* `:not()` indispensable : sans lui cette règle l'emporte par spécificité sur
   l'état actif et repeint le filtre sélectionné en gris clair sur rouge. */
.section.sombre .filtre:not([aria-pressed="true"]){border-color:rgba(255,255,255,.16);color:#C3C7CC}
.section.sombre .filtre:not([aria-pressed="true"]):hover{border-color:rgba(255,255,255,.45);color:#fff}
.filtre[aria-pressed="true"]{background:var(--rouge-texte);border-color:var(--rouge-texte);color:#fff}

.grille-gammes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(296px,100%),1fr));gap:22px}
.gamme{
  display:flex;flex-direction:column;text-decoration:none;
  background:#131518;border:1px solid rgba(255,255,255,.09);
  border-radius:10px;overflow:hidden;transition:all .2s ease;
}
.gamme:hover{border-color:rgba(255,255,255,.32);transform:translateY(-3px);box-shadow:0 18px 44px rgba(0,0,0,.5)}
.gamme[hidden]{display:none}

.gamme .photo{
  background:#fff;aspect-ratio:4/3;display:grid;place-items:center;padding:20px;
  flex-shrink:0;
}
.gamme .photo img{width:100%;height:100%;object-fit:contain}

.gamme .corps{padding:24px 24px 20px;display:flex;flex-direction:column;flex:1}
.gamme .surligne{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px}
.gamme .categorie{
  color:var(--rouge);font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
}
.marque-reco{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#C3C7CC;border:1px solid rgba(255,255,255,.22);
  border-radius:100px;padding:3px 9px;
}
.marque-reco svg{width:10px;height:10px;color:var(--rouge)}

.gamme .ligne-titre{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:14px}
.gamme h3{font-size:25px;font-weight:700;letter-spacing:-.015em;color:#fff;line-height:1.1}
.badge-nouveau{
  background:var(--rouge-texte);color:#fff;border-radius:4px;padding:6px 12px;
  font-size:12.5px;font-weight:600;letter-spacing:.01em;
}
.gamme p{color:#9AA0A8;font-size:14.5px;line-height:1.6;flex:1}

.gamme .pied{
  margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.gamme .tags{font-size:12.5px;color:#8A9099;letter-spacing:.01em}
.gamme .fleche{
  font-size:13px;font-weight:600;color:var(--rouge);
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
}
.gamme .fleche svg{width:13px;height:13px;transition:transform .2s}
.gamme:hover .fleche svg{transform:translateX(3px)}

.aucune-gamme{
  color:#9AA0A8;font-size:15px;padding:28px 0;text-align:center;
}

.faq{max-width:800px;margin:0 auto}
.faq details{
  border-top:1px solid rgba(14,15,17,.16);
  background:transparent;overflow:hidden;
}
.faq details:last-of-type{border-bottom:1px solid rgba(14,15,17,.16)}
.faq summary{
  padding:19px 0;font-weight:500;font-size:15.5px;cursor:pointer;
  letter-spacing:-.012em;list-style:none;display:flex;align-items:center;gap:16px;
  transition:color .18s;
}
.faq summary::-webkit-details-marker{display:none}
/* Le signe + se transforme en - a l'ouverture : la barre verticale pivote
   pour rejoindre l'horizontale. */
.faq summary::after{
  content:"";margin-left:auto;flex-shrink:0;width:12px;height:12px;
  background:
    linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat;
  transition:transform .25s ease;
}
.faq details[open] summary{color:var(--rouge-texte)}
.faq details[open] summary::after{transform:rotate(90deg);background-size:12px 1.5px,0 0}
.faq summary:hover{color:var(--rouge-texte)}
.faq .reponse{
  padding:0 0 22px;color:var(--gris-500);
  font-family:var(--mono);font-size:11.5px;line-height:1.9;letter-spacing:.03em;
}
.faq .reponse p+p{margin-top:11px}
.faq .reponse a{color:var(--rouge-texte);font-weight:500}
.faq .reponse strong{color:var(--gris-900);font-weight:500}

.cta-final{
  background:var(--noir);
  color:#fff;border-radius:var(--r-cadre);padding:clamp(44px,6vw,80px) clamp(24px,4vw,48px);
  text-align:center;position:relative;overflow:hidden;
}
.cta-final::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(600px 300px at 50% 0%,rgba(255,38,38,.22),transparent 70%);
}
.cta-final>*{position:relative}
.cta-final h2{font-size:clamp(26px,3.8vw,44px);font-weight:500;letter-spacing:-.034em;line-height:1.1;margin-bottom:16px}
.cta-final p{
  color:#B9BDC3;max-width:56ch;margin:0 auto 30px;
  font-family:var(--mono);font-size:11.5px;line-height:1.9;
  letter-spacing:.04em;text-transform:uppercase;
}
.cta-boutons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta-final .btn-secondaire{
  background:rgba(255,255,255,.09);color:#fff;border:1px solid rgba(255,255,255,.18);
}
.cta-final .btn-secondaire:hover{background:rgba(255,255,255,.16)}

/* ------------------------- Références clients ------------------------- */
.grille-references{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(272px,100%),1fr));gap:20px}
.reference{
  background:var(--blanc);border:1px solid var(--gris-200);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;transition:all .2s ease;
}
.reference:hover{border-color:var(--noir);transform:translateY(-3px);box-shadow:var(--ombre-lg)}
/* `height:auto` indispensable : sans lui, l'attribut HTML height="800" fait
   loi et `aspect-ratio` est ignoré — l'image partait en 398 × 800, soit la
   moitié de la largeur rognée. */
.reference img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--gris-100)}
.reference-texte{padding:18px 20px 20px}
.reference-type{
  display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rouge-texte);margin-bottom:6px;
}
.reference h3{font-size:17px;font-weight:700;letter-spacing:-.01em;margin-bottom:4px}
.reference p{font-size:13.5px;color:var(--gris-500);line-height:1.5}

/* ------------------------ Financement & garantie ------------------------ */
.grille-assurances{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:18px;margin-top:8px}
.assurance{
  background:var(--blanc);border:1px solid var(--gris-200);border-radius:var(--r-lg);
  padding:24px 26px;display:flex;flex-direction:column;
}
.assurance .ico{
  width:42px;height:42px;border-radius:11px;background:var(--gris-100);
  color:var(--rouge-texte);display:grid;place-items:center;margin-bottom:15px;
}
.assurance .ico svg{width:20px;height:20px}
.assurance h3{font-size:17px;font-weight:600;margin-bottom:9px;letter-spacing:-.01em}
.assurance p{font-size:14.5px;color:var(--gris-500);line-height:1.6;flex:1}
.assurance p+p{margin-top:10px}
.assurance strong{color:var(--noir);font-weight:600}

/* --------------------------- Identité légale --------------------------- */
.identite{
  margin-top:40px;border-top:1px solid rgba(255,255,255,.1);padding-top:26px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:20px;
}
.identite div b{
  display:block;font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  /* Corrigé : #6F747B donnait 4,07:1 sur le pied noir, sous le seuil AA.
     #868C93 monte à 5,65:1 en restant un libellé discret. Seule valeur
     modifiée du CSS d'origine, et pour cause d'accessibilité. */
  color:#868C93;margin-bottom:5px;
}
.identite div span{display:block;font-size:13.5px;color:#A9AEB5;line-height:1.5}
.identite a{color:#A9AEB5}
.identite a:hover{color:var(--rouge)}

/* ---------------------- Bandeau de consentement ---------------------- */
.bandeau-cookies{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:rgba(14,15,17,.98);backdrop-filter:saturate(160%) blur(12px);
  border-top:1px solid rgba(255,255,255,.14);
  box-shadow:0 -10px 40px rgba(0,0,0,.42);
  transform:translateY(100%);transition:transform .32s cubic-bezier(.3,.8,.3,1);
}
.bandeau-cookies.visible{transform:none}
.bandeau-cookies-boite{
  max-width:var(--max);margin:0 auto;padding:18px 20px;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
}
.bandeau-cookies p{color:#C9CDD2;font-size:14px;line-height:1.5;flex:1;min-width:260px;margin:0}
.bandeau-cookies-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bandeau-cookies-accepter,.bandeau-cookies-refuser{
  padding:11px 22px;border-radius:var(--r);font-size:14.5px;font-weight:600;
  transition:all .16s ease;white-space:nowrap;
}
.bandeau-cookies-accepter{background:var(--rouge-texte);color:#fff}
.bandeau-cookies-accepter:hover{background:var(--rouge-fonce);transform:translateY(-1px)}
.bandeau-cookies-refuser{
  background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.22);
}
.bandeau-cookies-refuser:hover{background:rgba(255,255,255,.18)}
.bandeau-cookies-lien{
  color:#C9CDD2;font-size:13px;text-decoration:underline;text-underline-offset:2px;
  white-space:nowrap;
}
.bandeau-cookies-lien:hover{color:#fff}
/* Le bandeau d'aide et le rappel remontent pour ne pas passer dessous. */
body:has(.bandeau-cookies.visible) .aide{bottom:112px}
body:has(.bandeau-cookies.visible) .rappel{bottom:88px}
@media(max-width:640px){
  .bandeau-cookies-boite{padding:15px 15px;gap:14px}
  .bandeau-cookies p{font-size:13px;min-width:0}
  .bandeau-cookies-actions{width:100%}
  .bandeau-cookies-accepter,.bandeau-cookies-refuser{flex:1;text-align:center;padding:11px 14px}
  .bandeau-cookies-lien{width:100%;text-align:center}
}

/* ============================ PIED ============================ */
/* Bloc sombre encadre, pose sur le fond creme : meme traitement que le hero
   de l'accueil, pour que les deux extremites de la page se repondent. */
.site-footer{background:var(--creme);padding:14px;font-size:14px}
.pied-bloc{
  background:var(--noir);color:#8D9299;
  border-radius:var(--r-cadre);
  padding:clamp(38px,5vw,64px) clamp(22px,4vw,54px) clamp(24px,3vw,34px);
}
.pied-haut{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.6fr);gap:clamp(32px,5vw,70px)}
.pied-accroche h2{
  color:#fff;font-size:clamp(28px,3.6vw,42px);font-weight:500;
  letter-spacing:-.03em;line-height:1.08;margin-bottom:16px;
}
.pied-accroche p{max-width:400px;line-height:1.7;font-size:14px;margin-bottom:24px}
.pied-accroche .btn{box-shadow:none}
.pied-direct{
  margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 26px;
  font-family:var(--mono);font-size:12.5px;
}
.pied-direct a{color:#C8CBCF;text-decoration:none}
.pied-direct a:hover{color:var(--rouge-clair)}

.pied-colonnes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.pied-colonnes h3{
  color:#fff;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;margin-bottom:16px;
}
.pied-colonnes ul{list-style:none}
.pied-colonnes li{margin-bottom:10px}
.pied-colonnes a{
  color:#8D9299;text-decoration:none;font-family:var(--mono);font-size:12px;
  transition:color .16s;
}
.pied-colonnes a:hover{color:var(--rouge-clair)}

.identite{
  margin-top:clamp(38px,5vw,62px);padding-top:26px;
  border-top:1px solid rgba(255,255,255,.1);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:22px;
}
.identite div span{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:#7E848C;margin-bottom:5px;
}
/* Corrige : #6F747B donnait 4,07:1 sur le pied noir, sous le seuil AA. */
.identite div b{display:block;font-size:14px;font-weight:500;color:#E3E5E8;line-height:1.4}
.identite div span:last-child{margin:5px 0 0;text-transform:none;letter-spacing:0;color:#868C93}
.identite a{color:inherit;text-decoration:none}
.identite a:hover{color:var(--rouge-clair)}

/* Logotype pleine largeur : le nom de la marque sert de signature graphique.
   Le clamp descend jusqu'a 34px pour qu'il tienne sur une ligne a 320px. */
.pied-logotype{
  margin-top:clamp(40px,6vw,76px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:26px;align-items:end;
}
.logotype{
  display:block;text-decoration:none;color:#fff;
  font-size:clamp(34px,8.6vw,118px);font-weight:500;
  letter-spacing:-.045em;line-height:.88;
}
.logotype:hover{color:var(--rouge-clair)}
.pied-logotype p{font-family:var(--mono);font-size:11.5px;line-height:1.8;color:#7E848C}

.footer-bas{
  margin-top:clamp(28px,4vw,44px);padding-top:20px;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  font-family:var(--mono);font-size:11.5px;color:#7E848C;
}
.footer-bas nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px 20px}
.footer-bas a{color:#7E848C;text-decoration:none}
.footer-bas a:hover{color:var(--rouge-clair)}

@media(max-width:860px){
  .pied-haut{grid-template-columns:1fr}
  .pied-logotype{grid-template-columns:1fr}
}
@media(max-width:520px){
  .pied-colonnes{grid-template-columns:1fr 1fr}
}

/* ============ COMPOSANTS PARTAGES ============
   Deplaces depuis le bloc configurateur : la carte produit, sa grille et le
   bloc de chiffres cles servent aussi aux pages de gamme et aux fiches.
   Aucune valeur modifiee. */
.stats-pack{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(130px,100%),1fr));
  gap:12px;margin-top:22px;
}
.stat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);border-radius:var(--r);padding:14px 16px}
.stat b{display:block;font-size:23px;font-weight:700;color:var(--rouge-clair);line-height:1.15}
.stat span{display:block;font-size:12px;color:#A8ADB4;margin-top:3px;letter-spacing:.02em}
.groupe-titre{
  display:flex;align-items:center;gap:11px;margin:26px 0 14px;
  font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-500);
}
.groupe-titre::after{content:"";flex:1;height:1px;background:var(--gris-200)}
.groupe-titre em{font-style:normal;color:var(--rouge-texte)}
.grille-produits{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(232px,100%),1fr));gap:16px}
.carte-produit{
  border:1px solid var(--gris-200);border-radius:var(--r-lg);overflow:hidden;
  background:var(--blanc);display:flex;flex-direction:column;
  transition:all .2s ease;
}
/* Indispensable : `display:flex` ci-dessus l'emporte sur la regle `[hidden]`
   du navigateur, et l'attribut n'a alors plus aucun effet visuel. Sans cette
   ligne, les filtres par groupe musculaire et par gamme masquent les cartes
   dans le DOM sans rien changer a l'ecran. Meme correctif que `.gamme[hidden]`. */
.carte-produit[hidden]{display:none}
.carte-produit:hover{border-color:var(--noir);transform:translateY(-3px);box-shadow:var(--ombre-lg)}
.carte-produit.retiree{opacity:.42}
.carte-produit.retiree:hover{opacity:.7}
.carte-lien{display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit}
.carte-lien.sans-lien{cursor:default}
.visuel-absent{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  color:var(--gris-400);text-align:center;padding:14px;
}
.visuel-absent span{color:var(--gris-500)}
.visuel-absent svg{width:34px;height:34px}
.visuel-absent span{font-size:11.5px;font-weight:500;letter-spacing:.03em}
.vignette-absente{
  width:52px;height:52px;flex-shrink:0;border-radius:8px;background:var(--gris-100);
  display:grid;place-items:center;color:var(--gris-400);
}
.vignette-absente svg{width:20px;height:20px}
.carte-produit .visuel{
  aspect-ratio:1/1;background:var(--gris-100);position:relative;overflow:hidden;
  display:grid;place-items:center;padding:12px;
}
.carte-produit .visuel img{
  width:100%;height:100%;object-fit:contain;transition:transform .3s ease;
}
.carte-produit:hover .visuel img{transform:scale(1.05)}
.etiquette-gamme{
  position:absolute;top:10px;left:10px;
  background:var(--noir);color:#fff;font-size:10.5px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;padding:4px 9px;border-radius:100px;
}
.carte-produit .infos{padding:14px 15px 16px;flex:1;display:flex;flex-direction:column}
.carte-produit .poste{
  display:block;font-size:10.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--rouge-texte);margin-bottom:5px;
}
.carte-produit h3{font-size:14.5px;font-weight:600;line-height:1.32;margin-bottom:6px}
.carte-produit .desc{
  font-size:12.5px;color:var(--gris-500);line-height:1.45;flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.carte-produit .meta{
  display:flex;flex-wrap:wrap;gap:5px;margin-top:11px;
  font-size:11px;color:var(--gris-500);
}
.carte-produit .meta span{background:var(--gris-100);border-radius:5px;padding:3px 7px}
.carte-produit .lien{
  margin-top:12px;font-size:13px;font-weight:600;color:var(--rouge-texte);
  display:flex;align-items:center;gap:5px;
}
.carte-produit .lien svg{width:13px;height:13px;transition:transform .2s}
.carte-produit:hover .lien svg{transform:translateX(3px)}


/* ---- Boutons ----
   Composant de base : deplace depuis le bloc configurateur, ou il etait
   defini a l'origine. Aucune valeur modifiee. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border-radius:100px;font-size:15px;font-weight:600;
  transition:all .16s ease;text-decoration:none;white-space:nowrap;
}
/* Variante editoriale : plus petite, en monospace capitales. Reservee aux
   blocs de contenu — le configurateur garde les boutons standards, dont les
   libelles sont trop longs pour tenir en capitales. */
.btn-pilule{
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;padding:13px 22px;
}
.btn svg{width:16px;height:16px}
.btn-principal{background:var(--rouge-texte);color:#fff;box-shadow:0 2px 10px rgba(255,38,38,.28)}
.btn-principal:hover{background:var(--rouge-fonce);transform:translateY(-1px);box-shadow:0 6px 18px rgba(255,38,38,.34)}
.btn-principal:disabled{background:var(--gris-200);color:var(--gris-400);box-shadow:none;transform:none;cursor:not-allowed}
.btn-sombre{background:var(--noir);color:#fff}
.btn-sombre:hover{background:var(--gris-900);transform:translateY(-1px)}
.btn-fantome{
  background:transparent;color:var(--gris-500);border:1.5px solid var(--gris-200);
  padding:11px 17px;font-size:13.5px;font-weight:500;
}
.btn-fantome:hover{color:var(--noir);border-color:var(--gris-400)}
.btn-fantome.danger{color:var(--rouge-texte);border-color:rgba(255,38,38,.35)}


/* ============ AJOUTS AU DESIGN SYSTEM ============
   Seules regles ecrites pour la refonte : tout le reste vient sans
   modification du CSS de /DEVIS/. Chaque ajout reprend des valeurs deja
   presentes dans la charte. */

/* Bouton secondaire sur fond sombre. Memes valeurs que .cta-final
   .btn-secondaire, portees au hero : .btn-fantome y tombe a 3,0:1, sous le
   seuil AA, parce qu'il est concu pour les fonds clairs. */
.hero .btn-secondaire{
  background:rgba(255,255,255,.09);color:#fff;border:1px solid rgba(255,255,255,.18);
}
.hero .btn-secondaire:hover{background:rgba(255,255,255,.16)}

/* Le hero des pages de gamme porte des boutons, pas celui de l'accueil. */
.hero .cta-boutons{margin-top:26px}

/* Ancres sous l'en-tete collant. Sans cette marge, #configurateur et #machines
   arrivent masques par le header (67 px de haut). Le defaut existe aussi sur
   /DEVIS/ : il devient genant ici, ou le lien d'ancre est le CTA principal
   des pages de gamme. */
[id]{scroll-margin-top:84px}

/* Reference sans photo : la carte garde sa forme, le texte prend toute la
   hauteur. Utilisee tant que le visuel de l'installation manque. */
.reference.sans-photo .reference-texte{padding-top:22px}

/* ---- Arguments illustres (pages de gamme) ----
   Un visuel par argument, en alternance gauche/droite. Remplace les trois
   cartes a icone, trop maigres pour porter une gamme. */
.args-illustres{display:flex;flex-direction:column;gap:64px;margin-top:8px}
.arg-illustre{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:48px;align-items:center;
}
.arg-illustre:nth-child(even) .arg-visuel{order:2}
.arg-visuel img{
  width:100%;height:auto;border-radius:var(--r-lg);
  background:var(--blanc);box-shadow:var(--ombre);
}
.arg-texte .arg-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--rouge-texte);color:#fff;
  font-size:14px;font-weight:700;margin-bottom:16px;
}
.arg-texte h3{font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:12px}
.arg-texte p{color:var(--gris-500);font-size:16px;line-height:1.65}

/* ---- Apparition au defilement ----
   La photo monte, le texte suit 120 ms plus tard : le decalage est ce qui
   donne la sensation de fluidite, une apparition simultanee parait plate.
   Le mouvement est vertical et non lateral : un translateX depasse le
   conteneur sur les petites largeurs et declenche une barre de defilement
   horizontale. */
html.js .arg-illustre .arg-visuel,
html.js .arg-illustre .arg-texte{
  opacity:0;transform:translateY(26px);
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),
             transform .75s cubic-bezier(.22,.61,.36,1);
}
html.js .arg-illustre .arg-texte{transition-delay:.12s}
html.js .arg-illustre.revele .arg-visuel,
html.js .arg-illustre.revele .arg-texte{opacity:1;transform:none}

/* Certains utilisateurs desactivent les animations au niveau du systeme :
   l'effet disparait entierement, il n'est pas seulement raccourci. */
@media(prefers-reduced-motion:reduce){
  html.js .arg-illustre .arg-visuel,
  html.js .arg-illustre .arg-texte{opacity:1;transform:none;transition:none}
}

@media(max-width:820px){
  .args-illustres{gap:44px}
  .arg-illustre{grid-template-columns:1fr;gap:22px}
  .arg-illustre:nth-child(even) .arg-visuel{order:0}
  .arg-visuel img{max-width:420px;margin:0 auto}
  .arg-texte h3{font-size:20px}
}

/* Ligne de contact direct : utilisée par le configurateur et par les fiches
   produit. Déplacée depuis le bloc configurateur, valeurs inchangées. */
.contact-direct{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:14px;color:var(--gris-500);margin:-14px 0 22px;
}
.contact-direct svg{width:15px;height:15px;color:var(--rouge);flex-shrink:0}
.contact-direct a{color:var(--rouge-texte);font-weight:600;text-decoration:none;white-space:nowrap}
.contact-direct a:hover{text-decoration:underline}

/* En-tete de section sur deux colonnes : titre a gauche, mise en contexte a
   droite. Utilise quand le bloc qui suit est lui-meme en deux colonnes. */
.entete-large{
  max-width:none;text-align:left;margin-bottom:clamp(30px,4vw,48px);
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(18px,4vw,56px);align-items:end;
}
.entete-large>p{
  font-family:var(--mono);font-size:11.5px;line-height:1.9;
  letter-spacing:.04em;text-transform:uppercase;color:var(--gris-500);
}
@media(max-width:860px){.entete-large{grid-template-columns:1fr}}

/* ============================ FORMULAIRES ============================ */
/* Composant partage : page SAV et page contact. Les champs du configurateur
   ont leur propre feuille et ne sont pas concernes. */
.formulaire{
  background:var(--blanc);border:1px solid rgba(14,15,17,.09);
  border-radius:var(--r-cadre);padding:clamp(24px,4vw,44px);
}
/* Piege a robots : hors de l'ecran et hors du parcours au clavier. Il doit
   rester dans le flux du document — un champ en display:none est ignore par
   une partie des robots, ce qui lui ferait rater sa cible. */
.pot-de-miel{position:absolute!important;left:-9999px!important;opacity:0;height:0;overflow:hidden}
.form-erreur{
  margin-bottom:20px;padding:13px 16px;border-radius:var(--r);
  border:1px solid rgba(197,20,24,.35);background:rgba(197,20,24,.06);
  color:var(--rouge-texte);font-size:14px;line-height:1.55;
}
.form-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.form-champ{display:flex;flex-direction:column;gap:7px}
.form-champ.pleine{grid-column:1/-1}
.form-champ label{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris-700);
}
.form-champ label .requis{color:var(--rouge-texte)}
.form-champ input,
.form-champ select,
.form-champ textarea{
  width:100%;padding:13px 15px;font-size:15px;
  background:var(--creme);color:var(--noir);
  border:1px solid rgba(14,15,17,.16);border-radius:12px;
  transition:border-color .16s,box-shadow .16s;
}
.form-champ textarea{min-height:150px;resize:vertical;line-height:1.6}
.form-champ input:focus,
.form-champ select:focus,
.form-champ textarea:focus{
  outline:0;border-color:var(--rouge-texte);
  box-shadow:0 0 0 3px rgba(196,15,15,.13);
}
.form-champ input::placeholder,
.form-champ textarea::placeholder{color:var(--gris-400)}
.form-aide{
  font-family:var(--mono);font-size:10.5px;line-height:1.7;
  letter-spacing:.04em;color:var(--gris-500);
}
.form-consentement{
  grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;
  font-size:13.5px;line-height:1.6;color:var(--gris-500);
}
.form-consentement input{width:18px;height:18px;flex-shrink:0;margin-top:2px;accent-color:var(--rouge-texte)}
.form-consentement a{color:var(--rouge-texte)}
.form-pied{
  grid-column:1/-1;display:flex;flex-wrap:wrap;gap:16px 24px;
  align-items:center;margin-top:4px;
}
.form-mention{
  font-family:var(--mono);font-size:10px;line-height:1.8;
  letter-spacing:.04em;text-transform:uppercase;color:var(--gris-500);
  max-width:46ch;
}
@media(max-width:700px){.form-grille{grid-template-columns:1fr}}