/* =====================================================================
   IS Solution — système de design (mobile d'abord)
   1. Tokens   2. Thèmes clair / sombre   3. Base   4. Typographie
   5. Composants (bouton, lien-flèche, sur-titre, index, surlignage,
      en-tête de section, carte, étiquettes, liste de contact, champ)
   6. Mise en page (section, conteneur)   7. Habillage du site
      (en-tête, menu, bandeau, pied de page, barre mobile)   8. Mouvement
   Règle : aucune valeur « magique » dans sections.css / legal.css /
   blog.css quand un token existe ici.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Couleurs de marque */
  --black:#050506; --ink:#0B0B0C; --ink-2:#121214; --ink-3:#1A1A1D;
  --paper:#EFEEE8; --paper-2:#E4E3DB; --white:#FBFBF8;
  --g400:#A6E663; --g500:#8CD43E; --g700:#4F8A1C; --g800:#3B6E14; --g300:#C9F29B;
  --danger:#B3261E; --danger-txt:#8F1A12;

  /* Polices */
  --f-d:"Archivo","Helvetica Neue",Arial,sans-serif;          /* titres */
  --f-b:"Instrument Sans",system-ui,-apple-system,sans-serif;  /* texte */

  /* Échelle typographique fluide : 7 niveaux (320 → 1280 px) */
  --fs-1:clamp(2.5rem,1.83rem + 3.33vw,5.5rem);    /* 40 → 72 (1280) → 88 : H1, grands numéros */
  --fs-2:clamp(2rem,1.3rem + 3.3vw,3.75rem);       /* 32 → 60  : H2 */
  --fs-3:clamp(1.5rem,1.2rem + 1.3vw,2.25rem);     /* 24 → 36  : H3 de contenu, accroche */
  --fs-4:clamp(1.125rem,1.05rem + .4vw,1.375rem);  /* 18 → 22  : intro, H3 d'interface, contacts */
  --fs-5:1rem;                                     /* 16       : texte, boutons */
  --fs-6:.875rem;                                  /* 14       : texte secondaire, libellés */
  --fs-7:.75rem;                                   /* 12       : sur-titres (capitales) */
  --lh-tight:1.02; --lh-snug:1.15; --lh-normal:1.5; --lh-body:1.6;
  --ls-display:-.035em; --ls-title:-.025em; --ls-sub:-.015em; --ls-caps:.14em;
  --w-reg:400; --w-med:500; --w-bold:600;
  --stretch:112%; --stretch-brand:125%;

  /* Espacements (base 4 px) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
  --gut:clamp(20px,5vw,56px);                 /* marge latérale */
  --sec-y:clamp(72px,4rem + 6vw,136px);       /* padding vertical de toute section */
  --head-gap:clamp(40px,2rem + 3vw,72px);     /* en-tête de section → contenu */
  --cols-gap:clamp(32px,6vw,96px);            /* écart des mises en page à 2 colonnes */
  --card-pad:clamp(20px,1rem + 2vw,40px);     /* padding intérieur des cartes */
  --wrap:1280px; --measure:46ch;

  /* Rayons */
  --r-sm:12px;   /* champs, vignettes, pastilles */
  --r-md:20px;   /* cartes, photos */
  --r-lg:28px;   /* grands panneaux : photo du hero, carte de zone, formulaire */
  --r-pill:999px;

  /* Ombres */
  --sh-sm:0 1px 2px rgba(11,11,12,.06),0 18px 40px -26px rgba(11,11,12,.35);
  --sh-lg:0 40px 70px -40px rgba(11,11,12,.55);
  --sh-dark:0 24px 50px -18px rgba(0,0,0,.8);

  /* Mouvement */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fast:.2s; --t-base:.45s; --t-slow:.9s;

  --hdr:68px;
}
@media(min-width:960px){:root{--hdr:78px}}

/* ---------- 2. Thèmes : chaque section choisit clair ou sombre, les composants suivent ---------- */
:root,.t-dark{
  --c-bg:var(--black); --c-fg:#F4F4F2; --c-muted:#A3A3A0; --c-line:rgba(255,255,255,.12); --c-line-strong:rgba(255,255,255,.34);
  --c-accent:var(--g500); --c-surface:var(--ink-2); --c-hl:rgba(140,212,62,.38);
}
.t-light{
  --c-bg:var(--paper); --c-fg:var(--ink); --c-muted:#55554F; --c-line:rgba(11,11,12,.14); --c-line-strong:rgba(11,11,12,.4);
  --c-accent:var(--g800); --c-surface:var(--white); --c-hl:rgba(140,212,62,.6);
}
.t-dark,.t-light{background:var(--c-bg);color:var(--c-fg)}

/* ---------- 3. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--hdr)}
body{margin:0;background:var(--c-bg);color:var(--c-fg);font:var(--w-reg) var(--fs-5)/var(--lh-body) var(--f-b);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--g500);outline-offset:3px;border-radius:4px}
.t-light :focus-visible{outline-color:var(--ink)}
.skip{position:absolute;left:-999px;top:var(--sp-2);z-index:200;background:var(--g500);color:var(--black);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-sm);font-weight:var(--w-bold)}
.skip:focus{left:var(--sp-2)}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.br-d{display:none}
@media(min-width:900px){.br-d{display:inline}}

/* ---------- 4. Typographie ---------- */
h1,h2,h3{font-family:var(--f-d);font-stretch:var(--stretch);font-weight:var(--w-bold);text-wrap:balance}
h1{font-size:var(--fs-1);line-height:.98;letter-spacing:var(--ls-display)}
h2{font-size:var(--fs-2);line-height:var(--lh-tight);letter-spacing:var(--ls-title)}
h3{font-size:var(--fs-3);line-height:var(--lh-snug);letter-spacing:var(--ls-sub)}
.t-4{font-family:var(--f-d);font-stretch:var(--stretch);font-weight:var(--w-bold);font-size:var(--fs-4);line-height:1.3;letter-spacing:-.01em}
p{text-wrap:pretty}
.lead{font-size:var(--fs-4);line-height:var(--lh-normal);color:var(--c-muted);max-width:var(--measure)}
.small{font-size:var(--fs-6);line-height:var(--lh-normal);color:var(--c-muted)}

/* ---------- 5. Composants ---------- */

/* Sur-titre (eyebrow) : un seul style, point d'accent ; version « live » (point pulsé) réservée au hero */
.eyebrow{display:flex;align-items:baseline;gap:10px;font:var(--w-bold) var(--fs-7)/1.45 var(--f-b);font-stretch:100%;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--c-accent);text-wrap:balance}
.eyebrow::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:currentColor;transform:translateY(-1px)}
.eyebrow--live::before{background:var(--g500);animation:pulse 2.2s infinite}
.t-light .eyebrow--live::before{background:var(--g700)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(140,212,62,.7)}70%{box-shadow:0 0 0 10px rgba(140,212,62,0)}100%{box-shadow:0 0 0 0 rgba(140,212,62,0)}}

/* Index (numérotation) : un seul style partout, deux tailles */
.idx{font-family:var(--f-d);font-stretch:var(--stretch);font-weight:var(--w-bold);font-size:var(--fs-6);letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--c-accent)}
.idx--lg{font-size:var(--fs-1);line-height:.9;letter-spacing:-.03em}

/* Surlignage d'un mot-clé : seul traitement de mise en valeur, révélé à l'apparition (.is-in sur un parent) */
.hl{font-style:normal;color:inherit;background:linear-gradient(transparent 62%,var(--c-hl) 62%) no-repeat 0 0/100% 100%;padding-inline:.04em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.js .hl{background-size:0 100%;transition:background-size .8s var(--ease)}
.js .is-in .hl{background-size:100% 100%}
.js .is-in .hl:nth-of-type(2){transition-delay:.25s}
.js .is-in .hl:nth-of-type(3){transition-delay:.5s}

/* Boutons : 2 variantes (primaire, secondaire), 1 taille réduite pour l'en-tête */
.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:var(--r-pill);border:1.5px solid transparent;font:var(--w-bold) var(--fs-5)/1.2 var(--f-b);text-align:center;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),transform var(--t-fast)}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--g500);color:var(--black)}
.btn--primary:hover{background:var(--g400)}
.btn--secondary{background:transparent;color:var(--c-fg);border-color:var(--c-line-strong)}
.btn--secondary:hover{border-color:var(--c-fg)}
.btn--sm{min-height:44px;padding:0 20px}
.btn .ico{transition:transform var(--t-fast) var(--ease)}
.btn:hover .ico--go{transform:translateX(4px)}
.actions{display:grid;gap:var(--sp-3)}
@media(min-width:560px){.actions{display:flex;flex-wrap:wrap}}

/* Lien-flèche : lien contextuel discret */
.link{text-decoration:none;display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;font-weight:var(--w-bold);color:var(--c-accent)}
.link .ico{width:18px;height:18px;transition:transform .25s var(--ease)}
.link:hover .ico{transform:translateX(4px)}

/* En-tête de section : sur-titre + H2 + intro, mêmes marges partout */
.head{display:grid;gap:var(--sp-4);max-width:820px;margin-bottom:var(--head-gap)}
.head .eyebrow{margin-bottom:var(--sp-1)}

/* Carte : surface + filet + rayon moyen */
/* Carte : surface + filet + rayon moyen. Padding et titre proportionnés à la largeur de la carte (requêtes de conteneur) */
.card{container-type:inline-size;background:var(--c-surface);color:var(--c-fg);border:1px solid var(--c-line);border-radius:var(--r-md);overflow:hidden}
.card__body{display:grid;gap:var(--sp-3);align-content:start;padding:clamp(20px,6cqi,40px)}
.card__body>p:not(.eyebrow){color:var(--c-muted)}
.card h3,.tile h3{font-size:clamp(1.375rem,.9rem + 3cqi,2.25rem)}

/* Étiquettes */
.tags{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.tags li{font-size:var(--fs-6);line-height:1.2;padding:7px 14px;border:1px solid var(--c-line);border-radius:var(--r-pill)}

/* Liste de contact : icône + libellé + valeur, même taille pour téléphone et e-mail */
.clist{display:grid;gap:var(--sp-3)}
.clist a{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:var(--sp-4);min-height:56px}
.clist__ico{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--g500);color:var(--black)}
.clist__ico .ico{width:20px;height:20px}
.clist small{display:block;font-size:var(--fs-6);color:var(--c-muted);line-height:1.3}
.clist b{display:block;font:var(--w-bold) var(--fs-4)/1.25 var(--f-b);overflow-wrap:anywhere;transition:color var(--t-fast)}
.clist a:hover b{color:var(--c-accent)}

/* Champ de formulaire */
.field{display:grid;gap:6px;min-width:0}
.field>span,.legend{font-size:var(--fs-6);font-weight:var(--w-bold);line-height:1.3;color:var(--c-fg)}
.field>span i,.legend i{font-style:normal;font-weight:var(--w-reg);color:var(--c-muted)}
.field input,.field textarea,.field select{width:100%;min-height:52px;padding:12px 16px;background:var(--paper);border:1.5px solid var(--c-line);border-radius:var(--r-sm);font-size:var(--fs-5);color:var(--ink);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.field textarea{min-height:120px;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;padding-right:44px;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23050506' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 16px center/18px no-repeat}
.field ::placeholder{color:#6F6F68}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(140,212,62,.55)}
.field [aria-invalid=true],.field [aria-invalid=true]:focus{border-color:var(--danger)}
.field em{font-style:normal;font-size:var(--fs-6);font-weight:var(--w-bold);color:var(--danger-txt)}
.field[hidden]{display:none}

/* ---------- 6. Mise en page ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sec{position:relative;padding-block:var(--sec-y)}
.split{display:grid;gap:var(--head-gap)}
@media(min-width:900px){.split{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--cols-gap);align-items:start}}

/* ---------- 7. Habillage du site ---------- */

/* En-tête */
.hdr{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--hdr);display:flex;align-items:center;gap:var(--sp-5);padding-inline:var(--gut);padding-top:env(safe-area-inset-top);background:rgba(5,5,6,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--c-line)}
.brand{text-decoration:none;display:flex;align-items:center;gap:var(--sp-3);min-height:44px;font-family:var(--f-d);font-stretch:var(--stretch-brand);font-weight:var(--w-bold);font-size:13px;letter-spacing:.3em;color:#fff}
.brand img{height:38px;width:auto}
.hdr .brand{margin-right:auto}
.hdr__nav,.hdr__cta{display:none}
.burger{position:relative;width:48px;height:48px;border:0;background:none;cursor:pointer;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.ring{position:absolute;inset:0;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:2}
.ring__bg{stroke:rgba(255,255,255,.18)}
.ring__fg{stroke:var(--g500);stroke-linecap:round;stroke-dasharray:132;stroke-dashoffset:132}
.burger__bars{display:grid;gap:6px;width:18px}
.burger__bars i{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .3s var(--ease)}
.burger[aria-expanded="true"] .burger__bars i:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__bars i:last-child{transform:translateY(-4px) rotate(-45deg)}
@media(min-width:960px){
  .hdr__nav{display:flex;gap:var(--sp-6);margin-right:var(--sp-3);font-size:15px}
  .hdr__nav a{opacity:.75;transition:opacity var(--t-fast);padding-block:10px}
  .hdr__nav a:hover{opacity:1}
  .hdr__cta{display:inline-flex}
  .burger{display:none}
}

/* Menu plein écran (mobile) */
.menu{position:fixed;inset:0;z-index:90;padding:calc(var(--hdr) + var(--sp-5)) var(--gut) calc(var(--sp-6) + env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-6);overflow-y:auto;opacity:0;transition:opacity .3s}
.menu[hidden]{display:none}
.menu:not(.is-open){pointer-events:none}
.menu.is-open{opacity:1}
.menu__nav{display:grid}
.menu__nav a{display:flex;align-items:baseline;gap:var(--sp-4);padding:var(--sp-3) 0;border-bottom:1px solid var(--c-line);font:var(--w-bold) var(--fs-2)/1.1 var(--f-d);font-stretch:var(--stretch);letter-spacing:var(--ls-title)}
body.no-scroll{overflow:hidden}

/* Bandeau défilant */
.marquee{background:var(--g500);color:var(--black);overflow:hidden;padding-block:var(--sp-4);white-space:nowrap}
.marquee__track{display:inline-flex;align-items:center;gap:var(--sp-6);animation:mq 38s linear infinite;will-change:transform}
.marquee span{font:var(--w-bold) var(--fs-3)/1 var(--f-d);font-stretch:var(--stretch);text-transform:uppercase;letter-spacing:-.01em}
.marquee i{width:12px;height:12px;border-radius:50%;border:3px solid currentColor;flex:none}
@keyframes mq{to{transform:translateX(-50%)}}

/* Pied de page */
.foot{border-top:1px solid var(--c-line);padding-top:var(--sec-y);overflow:hidden}
.foot__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-7) var(--sp-5);padding-bottom:var(--sp-7)}
.foot__id{grid-column:1/-1;display:grid;gap:var(--sp-4);justify-items:start;align-content:start}
.foot__id p{color:var(--c-muted);max-width:34ch}
.foot__q{height:56px;width:auto;border-radius:var(--r-sm)}
.foot__h{font:var(--w-bold) var(--fs-7)/1.45 var(--f-b);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--c-muted);margin-bottom:var(--sp-2)}
.foot__nav{display:grid;align-content:start}
.foot__nav a{display:flex;align-items:center;min-height:44px;padding-block:var(--sp-1);line-height:1.3;color:#C9C9C5;transition:color var(--t-fast)}
.foot__nav a:hover{color:#fff}
.foot__nav a[href^=tel]{color:var(--g500)}
.foot__legal{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--sp-2) var(--sp-5);padding-block:var(--sp-4);border-top:1px solid var(--c-line);font-size:var(--fs-6);color:var(--c-muted)}
.foot__links{display:flex;flex-wrap:wrap;gap:0 var(--sp-5)}
.foot__links a{display:inline-flex;align-items:center;min-height:44px;color:var(--c-muted)}
.foot__links a:hover{color:#fff}
.foot__mark{display:block;width:100%;height:auto;margin:0;user-select:none;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.foot__mark text{font-family:var(--f-d);font-stretch:var(--stretch-brand);font-weight:var(--w-bold);fill:var(--ink-3)}
@media(min-width:900px){
  .foot__cols{grid-template-columns:1.4fr 1fr 1fr 1.2fr}
  .foot__id{grid-column:auto}
  .foot__mark{padding-bottom:0}
}

/* Barre d'actions mobile */
.mbar{position:fixed;inset:auto 0 0 0;z-index:80;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-3);padding:var(--sp-3) var(--gut) calc(var(--sp-3) + env(safe-area-inset-bottom));background:rgba(5,5,6,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--c-line);transform:translateY(110%);transition:transform .4s var(--ease)}
.mbar.is-on{transform:none}
.mbar .btn{padding-inline:20px}
@media(max-width:400px){.mbar__t{display:none}.mbar .btn:first-child{padding-inline:16px}}
@media(min-width:960px){.mbar{display:none}}

/* ---------- 8. Mouvement : révélation au scroll ---------- */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.js [data-reveal].is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js [data-reveal]{opacity:1;transform:none}
  .js .hl{background-size:100% 100%}
}