/* ==========================================================================
   design-system.css — système de design du site ALT Domicile
   Source unique : design.md (§2 polices, §3 tokens, §4 CSS de base, §5 composants).
   Au rebranding, seules les valeurs des tokens changent (design.md §3.9).
   ========================================================================== */

/* ============ POLICES (auto-hébergées, design.md §2, context.md §11.6) ============ */
/* Newsreader figée en optical size 72 (design.md §2), graisses 300 à 500. */
@font-face{ font-family:'Newsreader'; font-style:normal; font-weight:300 500; font-display:swap;
  src:url(../fonts/newsreader-roman.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Newsreader'; font-style:italic; font-weight:300 400; font-display:swap;
  src:url(../fonts/newsreader-italique.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:100 700; font-display:swap;
  src:url(../fonts/ibm-plex-sans.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url(../fonts/ibm-plex-mono-400.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* Imbue réduite aux chiffres : elle ne sert qu'aux numéros (01, 001…). */
@font-face{ font-family:'Imbue'; font-style:normal; font-weight:300 400; font-display:swap;
  src:url(../fonts/imbue-chiffres.woff2) format('woff2'); unicode-range:U+0020,U+0030-0039; }

/* ============ TOKENS (design.md §4) ============ */
:root{
  /* Action */
  /*
  --c-primary:#FF6106; 
  --c-primary-hover:#FB4902; 
  --c-primary-dark:#D74D00;
  --c-primary-light:#FEE3DA; --c-primary-tint:#FFF4EE;
  --c-bg:#F8F7F5; --c-bg-alt:#F8F7F6; --c-white:#FFFFFF; --c-gray:#F3F3F3; --c-gray-hover:#ECECEC;
  --c-gray-200:#EEEEEE; --c-gray-100:#F9FAFB; --c-cream:#F4F4ED; --c-cream-2:#FAF8F0;
  --c-cream-3:#FEFEF1; --c-cream-3-hover:#EEEEE1;
  --c-ink:#14201E; --c-ink-2:#090A0B; --c-ink-80:rgba(20,32,30,.8); --c-ink-70:rgba(20,32,30,.7);
  --c-ink-60:rgba(20,32,30,.6); --c-muted:#777777; --c-muted-2:#908985; --c-muted-3:#58616C;
  --c-border:rgba(20,32,30,.10); --c-border-2:#E1E2E1; --c-border-3:#D1D5DB; --c-disabled:#919EAB;
  --c-green:#15502E; --c-green-dark:#012B24; --c-green-darker:#001A16; --c-green-panel:#001F1A;
  --c-green-tab-active:#083428; --c-green-tab:#002B24; --c-green-card:rgba(26,64,57,.8);
  --c-brown:#341500; --c-brown-card:#562301; --c-brown-img:#401A00; --c-brown-2:#612700;
  --c-brown-3:#502000; --c-brown-ink:#491E01; --c-brown-title:#F9E6DA; --c-brown-mono:#D9C1B2;
  --c-yellow:#FFE782; --c-yellow-strong:#F7D545; --c-yellow-article:#FFD94F;
  --c-purple:#F4BEFF; --c-purple-2:#F1AAFF; --c-pink:#FFBCFC; --c-magenta:#AD05A6; --c-plum:#7F0057;
  --c-blue:#AAD8F9; --c-blue-ink:#0049D1; --c-cyan:#00B8D9; --c-amber:#D17A01; --c-peach:#FECAB9;
  --c-mint:#A7F3D0; --c-mint-ink:#065E49; --c-lime:#E0FBB6; */

  --c-primary:#397169; 
  --c-primary-hover:#20413c; 
  --c-primary-dark:#02c7ad;
  --c-primary-light:#dafef0; --c-primary-tint:#eefffb;
  --c-bg:#f5f8f7; --c-bg-alt:#f6f8f7; --c-white:#ffffff; --c-gray:#F3F3F3; --c-gray-hover:#ECECEC;
  --c-gray-200:#EEEEEE; --c-gray-100:#F9FAFB; --c-cream:#F4F4ED; --c-cream-2:#FAF8F0;
  --c-cream-3:#FEFEF1; --c-cream-3-hover:#EEEEE1;
  --c-ink:#14201E; --c-ink-2:#090A0B; --c-ink-80:rgba(20,32,30,.8); --c-ink-70:rgba(20,32,30,.7);
  --c-ink-60:rgba(20,32,30,.6); --c-muted:#777777; --c-muted-2:#908985; --c-muted-3:#58616C;
  --c-border:rgba(20,32,30,.10); --c-border-2:#E1E2E1; --c-border-3:#D1D5DB; --c-disabled:#919EAB;
  --c-green:#15502E; --c-green-dark:#012B24; --c-green-darker:#001A16; --c-green-panel:#001F1A;
  --c-green-tab-active:#083428; --c-green-tab:#002B24; --c-green-card:rgba(26,64,57,.8);
  --c-brown:#341500; --c-brown-card:#562301; --c-brown-img:#401A00; --c-brown-2:#612700;
  --c-brown-3:#502000; --c-brown-ink:#491E01; --c-brown-title:#F9E6DA; --c-brown-mono:#D9C1B2;
  --c-yellow:#FFE782; --c-yellow-strong:#F7D545; --c-yellow-article:#FFD94F;
  --c-purple:#F4BEFF; --c-purple-2:#F1AAFF; --c-pink:#FFBCFC; --c-magenta:#AD05A6; --c-plum:#7F0057;
  --c-blue:#AAD8F9; --c-blue-ink:#0049D1; --c-cyan:#00B8D9; --c-amber:#D17A01; --c-peach:#FECAB9;
  --c-mint:#A7F3D0; --c-mint-ink:#065E49; --c-lime:#E0FBB6

  /* Polices */
  --font-heading:'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --font-number:'Imbue', 'Newsreader', serif;

  /* Rayons */
  --r-xs:4px; --r-btn:6px; --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:20px; --r-2xl:24px;
  --r-hero:40px; --r-quote:48px; --r-sig:60px; --r-panel:100px; --r-pill:9999px;

  /* Ombres */
  --sh-2:0 2px 4px rgba(145,158,171,.16);
  --sh-8:0 8px 16px rgba(145,158,171,.16);
  --sh-12:0 12px 24px rgba(145,158,171,.16);
  --sh-sm:0 1px 2px rgba(0,0,0,.05);
  --sh-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);

  /* Mouvement */
  --t-base:300ms ease-out; --t-fast:200ms ease-in-out; --t-spring:500ms cubic-bezier(.34,1.56,.64,1);

  /* Layout */
  --container:1280px; --gutter:12px; --section-y:60px; --header-h:60px;

  /* Valeurs données dans le texte de design.md mais absentes de la liste §4 (ajoutées comme tokens) */
  --c-cool-gray:#F0F2F4;               /* §3.1 fond de la page À propos */
  --c-border-card:#EAEAEA;             /* §5.8j, §5.18 bordure des cartes tarif et du tableau */
  --c-border-row:rgba(20,32,30,.08);   /* §5.18 lignes du tableau */
  --c-gray-text:#637381;               /* §5.19 stepper, §5.20 fil d'Ariane */
  --c-text-about:#4B5563;              /* §7.4 paragraphes de la page À propos */
  --c-error:#B71D18;                   /* §3.1 états : erreur */
  --c-success:#118D57;                 /* §3.1 états : succès */
  --r-form:16px;                       /* §5.19 carte formulaire */
}
@media (min-width:1024px){ :root{ --gutter:36px; --section-y:100px; --header-h:80px; } }

/* ============ BASE (design.md §4) ============ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; font-family:var(--font-body); font-size:16px; line-height:1.5; color:var(--c-ink);
  background:var(--c-bg); -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-heading); font-weight:400; color:inherit; }
p{ margin:0; }
:focus-visible{ outline:2px solid var(--c-primary); outline-offset:2px; }
[id]{ scroll-margin-top:96px; } /* ancres sous le header sticky */
ul,ol{ margin:0; padding:0; list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
[hidden]{ display:none !important; }

::selection {
  background-color: #397169;
  color: #ffffff;
}

.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; }
.skip-link{ position:absolute; left:12px; top:-100px; z-index:100; padding:12px 16px; border-radius:var(--r-btn);
  background:var(--c-ink); color:#fff; font-weight:500; }
.skip-link:focus{ top:12px; }

/* ============ LAYOUT (design.md §4) ============ */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
/* overflow:clip découpe les éclats comme overflow:hidden, sans bloquer les colonnes collantes (FAQ §5.12) */
.section{ width:100%; overflow:hidden; overflow:clip; padding-block:var(--section-y); position:relative; }
.section--bg{ background:var(--c-bg); }
.section--alt{ background:var(--c-bg-alt); }
.section--white{ background:var(--c-white); }
.section--gray{ background:var(--c-gray); }
.section--cool{ background:var(--c-cool-gray); }
.section--yellow{ background:var(--c-yellow); }
.section--green{ background:var(--c-green-dark); color:#fff; }
.section--green-2{ background:var(--c-green-darker); color:#fff; }
.section--brown{ background:var(--c-brown); color:#fff; }

.section-header{ display:flex; flex-direction:column; gap:28px; margin-bottom:44px; }
.section-header--split{ flex-direction:column; gap:32px; }
.section-header--center{ align-items:center; text-align:center; }
.section-header--center > p{ max-width:600px; }
@media (min-width:1024px){
  .section-header--split{ flex-direction:row; justify-content:space-between; align-items:flex-end; }
  .section-header--split > .section-header__aside{ max-width:545px; }
}
.section-header__main{ display:flex; flex-direction:column; gap:28px; }
.grid-12{ display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:1024px){
  .grid-12{ grid-template-columns:repeat(12,1fr); }
  .span-4{ grid-column:span 4; } .span-5{ grid-column:span 5; }
  .span-7{ grid-column:span 7; } .span-8{ grid-column:span 8; }
}

/* ============ TYPO (design.md §3.2 et §4) ============ */
.h-hero{ font-family:var(--font-heading); font-weight:400; font-size:32px; line-height:1.1;
  letter-spacing:-1.24px; max-width:480px; text-wrap:balance; }
@media (min-width:1024px){ .h-hero{ font-size:52px; } }
@media (min-width:1280px){ .h-hero{ font-size:62px; } }

.h-page{ font-family:var(--font-heading); font-weight:400; font-size:32px; line-height:1.2;
  letter-spacing:-0.02em; text-wrap:balance; }
@media (min-width:1024px){ .h-page{ font-size:40px; } }
.h-page-xl{ font-family:var(--font-heading); font-weight:400; font-size:40px; line-height:1.08;
  letter-spacing:-0.025em; text-wrap:balance; }
@media (min-width:1024px){ .h-page-xl{ font-size:56px; } }
@media (min-width:1280px){ .h-page-xl{ font-size:64px; } }

.h-section{ font-family:var(--font-heading); font-weight:400; font-size:40px; line-height:1.1;
  letter-spacing:-0.025em; text-wrap:balance; }
@media (min-width:1024px){ .h-section{ font-size:56px; } }
@media (max-width:430px){ .h-section{ font-size:36px; } }
.h-section--xl{ } @media (min-width:1024px){ .h-section--xl{ font-size:64px; } }

.h-card-lg{ font-family:var(--font-heading); font-size:28px; line-height:1.15; letter-spacing:-0.025em; }
@media (min-width:1024px){ .h-card-lg{ font-size:36px; } }
.h-card-md{ font-family:var(--font-heading); font-size:24px; line-height:1.1; letter-spacing:-0.025em; }
@media (min-width:1024px){ .h-card-md{ font-size:28px; } }
.h-card{ font-family:var(--font-heading); font-size:22px; line-height:1.2; letter-spacing:-0.02em; }
@media (min-width:1024px){ .h-card{ font-size:24px; } }

.lead{ font-size:16px; line-height:1.4; letter-spacing:-0.36px; opacity:.8; max-width:470px; }
@media (min-width:1024px){ .lead{ font-size:18px; } }
.prose{ font-size:16px; line-height:26px; letter-spacing:-0.4px; }
.small{ font-size:14px; line-height:20px; letter-spacing:-0.28px; }
.card-desc{ font-size:14px; line-height:1.625; letter-spacing:-0.35px; }
.mono-label{ font-family:var(--font-mono); font-size:14px; line-height:20px; letter-spacing:.35px;
  text-transform:uppercase; color:var(--c-muted); }
.number{ font-family:var(--font-number); font-weight:400; font-size:24px; line-height:1.3;
  letter-spacing:-0.05em; color:var(--c-primary); font-variant-numeric:tabular-nums; }
.italic-accent{ font-style:italic; font-weight:300; }
.accent{ color:var(--c-primary); }
.title-dot{ display:inline-block; width:8px; height:8px; margin-left:4px; border-radius:2px;
  background:var(--c-primary); vertical-align:baseline; }

.link{ color:var(--c-primary); }
.link:hover{ text-decoration:underline; }
.link-underline{ text-decoration:underline; text-underline-offset:4px; }

/* ============ BOUTONS (design.md §5.1) ============ */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:12px; height:48px;
  padding:8px 16px; border:0; border-radius:var(--r-btn); font:500 16px/24px var(--font-body);
  white-space:nowrap; cursor:pointer; opacity:.9; transition:opacity var(--t-base), background var(--t-base), color var(--t-base); }
.btn:hover,.btn:active{ opacity:1; }
.btn:disabled{ opacity:.5; pointer-events:none; }
.btn--primary{ background:var(--c-primary); color:#fff; padding-right:8px; }
.btn--sm{ height:40px; padding:8px 16px; }
.btn__icon{ display:flex; align-items:center; justify-content:center; width:32px; height:32px; flex:none;
  border-radius:var(--r-btn); background:var(--c-green); color:var(--c-purple); }
.btn__icon svg{ transition:transform var(--t-base); }
.btn:hover .btn__icon svg{ transform:rotate(45deg); }
.btn--soft{ background:var(--c-primary-light); color:var(--c-primary); }
.btn--green{ background:var(--c-green); color:#fff; border-radius:var(--r-md); opacity:1; }
.btn--green .btn__icon{ background:var(--c-purple); color:var(--c-green); }
.btn--outline{ background:#fff; color:var(--c-green); border:1px solid var(--c-green); border-radius:var(--r-md); opacity:1; }
.btn--outline:hover{ background:var(--c-green); color:#fff; }
.btn--white{ background:#fff; color:var(--c-ink); border:1px solid rgba(145,158,171,.2); border-radius:var(--r-sm); opacity:1; }
.btn--block{ width:100%; }
.btn-link{ display:inline-flex; align-items:center; gap:6px; height:48px; padding:0 8px; font-weight:500;
  color:var(--c-ink-70); transition:color var(--t-base); }
.btn-link:hover{ color:var(--c-ink); }
.btn-link svg{ transition:transform var(--t-base); } .btn-link:hover svg{ transform:translateX(2px); }
.btn-tag{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; font-size:14px; line-height:21px; letter-spacing:-0.28px; }
.btn-tag svg{ transition:transform var(--t-base); } .btn-tag:hover svg{ transform:translateX(2px); }
.btn-tag--purple{ background:var(--c-purple); color:var(--c-plum); }
.btn-tag--yellow{ background:var(--c-yellow); color:var(--c-brown); }
.actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; }

/* ============ ANNONCE (design.md §5.2) ============ */
.announce{ display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; font-size:14px; line-height:1.45; margin-bottom:24px; }
.announce__k{ color:var(--c-primary); font-weight:500; white-space:nowrap; }
.announce__t{ color:var(--c-muted-3); transition:color var(--t-base); }

/* ============ ÉTIQUETTES, PUCES, BADGES (design.md §5.3) ============ */
/* Majuscule initiale écrite dans le texte : « capitalize » mettrait une majuscule à chaque mot en français. */
.eyebrow{ display:flex; align-items:flex-start; }
.section-header--center .eyebrow{ justify-content:center; }
.eyebrow__dot{ width:4px; height:4px; background:var(--c-primary); flex:none; }
.eyebrow__label{ padding:4px 8px; font-size:14px; line-height:20px; text-transform:none; }
.eyebrow--blue{ background:var(--c-blue); color:var(--c-blue-ink); }
.eyebrow--pink{ background:var(--c-pink); color:var(--c-magenta); }
.eyebrow--purple{ background:var(--c-purple); color:var(--c-blue-ink); }
.eyebrow--orange{ background:var(--c-primary-light); color:var(--c-primary); }
.eyebrow--forest{ background:#0D4800; color:var(--c-lime); }
.chip{ display:inline-flex; align-items:center; border:1px solid #000; border-radius:var(--r-pill);
  padding:4px 12px; font:400 14px/20px var(--font-mono); text-transform:uppercase; }
.section--green .chip,.section--brown .chip{ border-color:#fff; }
.badge{ display:inline-flex; align-items:center; padding:2px 8px; border-radius:var(--r-pill);
  background:var(--c-primary-light); color:var(--c-primary); font-size:12px; line-height:18px; font-weight:500; }

/* ============ CARTE « INFO » (design.md §5.8a) ============ */
.card-info{ display:flex; flex-direction:column; gap:24px; padding:28px; background:#fff; border-radius:var(--r-sm);
  color:var(--c-ink); transition:all var(--t-base); }
.card-info:hover{ background:var(--c-green); border-bottom-right-radius:var(--r-sig); color:#fff; }
.card-info:hover .mono-label,.card-info:hover .card-info__meta,.card-info:hover .number{ color:#fff; }
.card-info__top{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.card-info__kpi{ font-size:14px; line-height:21px; font-weight:500; color:var(--c-primary); }
.card-info:hover .card-info__kpi{ color:#fff; }
.card-info__meta{ font-size:14px; color:var(--c-muted); display:flex; gap:6px; align-items:center; }
.grid-4{ display:grid; gap:8px; grid-template-columns:1fr; }
@media (min-width:640px){ .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .grid-4{ grid-template-columns:repeat(4,1fr); } }

/* ============ CARTE BICOLORE (design.md §5.8b) ============ */
.card-product{ display:flex; flex-direction:column; border-radius:var(--r-sm); overflow:hidden; height:100%; }
.card-product__media{ position:relative; height:220px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.card-product__body{ flex:1; display:flex; flex-direction:column; gap:20px; padding:36px; color:var(--c-ink-2); }
.card-product--yellow .card-product__media{ background:var(--c-yellow); } .card-product--yellow .card-product__body{ background:var(--c-yellow-strong); }
.card-product--purple .card-product__media{ background:var(--c-purple); } .card-product--purple .card-product__body{ background:var(--c-purple-2); }
.card-product--brown .card-product__media{ background:var(--c-brown-2); } .card-product--brown .card-product__body{ background:var(--c-brown-3); color:#fff; }
.grid-3{ display:grid; gap:8px; grid-template-columns:1fr; } @media (min-width:1024px){ .grid-3{ grid-template-columns:repeat(3,1fr); } }
.grid-2{ display:grid; gap:8px; grid-template-columns:1fr; } @media (min-width:768px){ .grid-2{ grid-template-columns:repeat(2,1fr); } }

/* ============ CARTE SOMBRE (design.md §5.8c) ============ */
.card-dark{ position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; gap:48px;
  padding:36px; min-height:348px; border-radius:var(--r-xs); background:var(--c-green-card); color:#fff; transition:transform var(--t-base); }
.card-dark .card-desc{ color:rgba(255,255,255,.8); }
.card-dark__head{ display:flex; flex-direction:column; gap:20px; }
.card-dark__icon{ width:56px; height:56px; color:rgba(255,255,255,.8); }
.ribbon{ position:absolute; left:9px; top:0; width:11px; height:23px; background:var(--ribbon,#FFE782);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 75%,0 100%); }
.dogear{ position:absolute; right:0; top:0; width:53px; height:53px; opacity:0; transition:opacity var(--t-base);
  background:linear-gradient(225deg, var(--c-green-dark) 50%, rgba(255,255,255,.12) 50%); }
.card-dark:hover .dogear,.card-dark.is-folded .dogear{ opacity:1; }
.tilt-l{ transform:rotate(-2.5deg); } .tilt-r{ transform:rotate(1.9deg); }
.tilt-l:hover,.tilt-r:hover,.tilt-l:focus-within,.tilt-r:focus-within{ transform:rotate(0); }
.grid-features-1,.grid-features-2{ display:grid; gap:24px; grid-template-columns:1fr; }
.grid-features-2{ margin-top:24px; }
@media (min-width:768px){ .grid-features-1{ grid-template-columns:repeat(3,1fr); } .grid-features-2{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .grid-features-1{ grid-template-columns:1fr 2fr 1fr; } .grid-features-2{ grid-template-columns:repeat(4,1fr); } }

/* ============ TÉMOIGNAGES (design.md §5.8d) ============ */
.quotes{ display:grid; gap:20px; grid-template-columns:1fr; } @media (min-width:768px){ .quotes{ grid-template-columns:1fr 1fr; } }
.quote{ display:flex; flex-direction:column; overflow:hidden; transition:border-radius var(--t-base); color:var(--c-brown-ink); }
@media (min-width:1024px){ .quote{ min-height:340px; } }
.quote--tr{ border-top-right-radius:var(--r-quote); } .quote--bl{ border-bottom-left-radius:var(--r-quote); }
.quote:hover{ border-radius:0; }
.quote__body{ flex:1; display:flex; flex-direction:column; gap:20px; padding:32px; }
.quote__icon{ width:32px; height:32px; }
.quote__text{ font-size:16px; line-height:26px; }
.quote__author{ margin-top:auto; font-size:14px; font-weight:500; }
.quote__meta{ font-size:14px; font-weight:300; }
.quote--purple{ background:var(--c-purple); } .quote--blue{ background:var(--c-blue); }
.quote--green{ background:var(--c-green); color:#fff; } .quote--brown{ background:var(--c-brown-2); color:#fff; }
@media (min-width:768px){ .quotes > .quote:last-child:nth-child(odd){ grid-column:1 / -1; } }

/* ============ PETITE CARTE À ICÔNE (design.md §5.8f) ============ */
.card-mini{ display:flex; flex-direction:column; gap:16px; padding:24px; background:#fff; border-radius:var(--r-sm);
  box-shadow:var(--sh-sm); transition:all var(--t-base); }
.card-mini:hover{ border-bottom-right-radius:var(--r-sig); box-shadow:var(--sh-md); }
.card-mini__icon{ width:32px; height:32px; color:var(--c-primary); }
.card-mini__title{ font-family:var(--font-heading); font-size:20px; line-height:1.2; letter-spacing:-0.02em; }
.card-mini__text{ font-size:14px; line-height:20px; color:var(--c-muted); }
.card-mini__more{ display:inline-flex; align-items:center; gap:6px; color:var(--c-primary); font-size:14px; font-weight:500; margin-top:auto; }

/* ============ CARTE TARIF (design.md §5.8j) ============ */
.price-card{ display:flex; flex-direction:column; gap:20px; padding:24px; background:#fff; border:1px solid var(--c-border-card);
  border-radius:var(--r-lg); }
.price-card__name{ font-size:16px; line-height:24px; font-weight:500; }
.price-card__price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; }
.price-card__amount{ font-size:36px; line-height:44px; font-weight:600; letter-spacing:-0.02em; }
.price-card__unit{ font-size:14px; color:var(--c-muted); }
.price-card__credit{ font-size:16px; line-height:24px; }
.price-card__credit strong{ font-weight:600; }
.price-card__list-title{ font-size:14px; line-height:20px; font-weight:600; }
.price-card__note{ font-size:12px; line-height:16px; color:var(--c-muted); text-align:center; }

/* Liste à puces orange (design.md §5.19) */
.checklist{ display:flex; flex-direction:column; gap:10px; }
.checklist li{ position:relative; padding-left:28px; font-size:14px; line-height:1.45; }
.checklist li::before{ content:""; position:absolute; left:0; top:0; width:18px; height:18px; border-radius:50%; background:var(--c-primary); }
.checklist li::after{ content:""; position:absolute; left:4px; top:4px; width:10px; height:10px; background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; }
.checklist--lg li{ font-size:16px; line-height:24px; }
.checklist--lg li::before{ top:3px; } .checklist--lg li::after{ top:7px; }

/* ============ ÉTAPES (design.md §5.10) ============ */
.steps{ display:flex; flex-direction:column; gap:8px; padding:8px; background:#fff; border-radius:var(--r-lg); }
.step{ border-radius:var(--r-sm); background:rgba(248,247,246,.8); transition:background var(--t-base); }
.step:hover{ background:rgba(255,255,255,.8); }
.step.is-open{ background:var(--c-bg-alt); box-shadow:var(--sh-sm); }
.step__h{ margin:0; }
.step__head{ width:100%; display:flex; justify-content:space-between; align-items:flex-start; gap:8px; padding:16px 20px;
  border:0; background:none; text-align:left; cursor:pointer; }
.step__label{ display:flex; align-items:baseline; gap:12px; }
.step__title{ font-family:var(--font-heading); font-size:24px; line-height:1.2; color:var(--c-ink); transition:color var(--t-base); }
.step.is-open .step__title{ color:var(--c-primary); }
.step__chev{ flex:none; margin-top:4px; color:var(--c-ink); transition:transform var(--t-base), color var(--t-base); }
.step.is-open .step__chev{ transform:rotate(90deg); color:var(--c-primary); }
.step__body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--t-base); }
.step.is-open .step__body,html:not(.js) .step__body{ grid-template-rows:1fr; }
.step__body > div{ overflow:hidden; } .step__body p{ padding:0 20px 16px; font-size:14px; line-height:1.625; color:var(--c-ink-60); }
/* Contenu replié retiré des lecteurs d'écran une fois l'animation terminée */
.js .step:not(.is-open) .step__body > div{ visibility:hidden; transition:visibility 0s linear 300ms; }

/* ============ SÉLECTEUR « PILULE » (design.md §5.11B) ============ */
.pills{ display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; border:1px solid rgba(145,158,171,.08);
  border-radius:var(--r-pill); background:var(--c-gray-200); }
.pills__option{ position:relative; }
.pills__option input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.pills__option span{ display:block; padding:4px 18px; border-radius:var(--r-pill); font-size:18px; line-height:28px; font-weight:500;
  transition:background var(--t-base), box-shadow var(--t-base); }
.pills__option input:checked + span{ background:#fff; box-shadow:var(--sh-sm); }
.pills__option input:focus-visible + span{ outline:2px solid var(--c-primary); outline-offset:2px; }
@media (min-width:1024px){ .pills__option span{ padding:4px 28px; font-size:20px; } }

/* ============ FAQ (design.md §5.12, en <details>/<summary>) ============ */
.faq{ display:flex; flex-direction:column; gap:40px; }
.faq__aside{ display:flex; flex-direction:column; gap:28px; }
.faq__aside .actions{ margin-top:4px; }
.faq__list{ flex:1; display:flex; flex-direction:column; gap:12px; }
@media (min-width:1024px){ .faq{ flex-direction:row; align-items:flex-start; justify-content:space-between; gap:80px; }
  .faq__aside{ position:sticky; top:128px; width:400px; flex:none; } }
.faq__item{ background:var(--c-bg-alt); border-radius:var(--r-xl); padding:20px; overflow:hidden; }
.faq__q{ width:100%; display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none; }
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::marker{ content:""; }
.faq__qtext{ flex:1; font-family:var(--font-heading); font-size:20px; line-height:28px; letter-spacing:-0.04em; color:var(--c-ink-2); }
@media (min-width:1024px){ .faq__qtext{ font-size:24px; line-height:32px; } }
.faq__toggle{ width:32px; height:32px; flex:none; border-radius:var(--r-pill); display:flex; align-items:center; justify-content:center;
  border:1px solid var(--c-border-3); color:var(--c-muted); transition:all var(--t-base); }
.faq__toggle svg{ transition:transform var(--t-base); }
.faq__item[open] .faq__toggle{ background:var(--c-primary); border-color:var(--c-primary); color:#fff; }
.faq__item[open] .faq__toggle svg{ transform:rotate(45deg); }
.faq__a p{ padding-top:16px; font-size:16px; line-height:24px; color:var(--c-ink-80); }
.faq__a a{ color:var(--c-primary); text-decoration:underline; }
@supports (interpolate-size:allow-keywords){
  :root{ interpolate-size:allow-keywords; }
  .faq__item::details-content{ block-size:0; overflow:hidden;
    transition:block-size var(--t-base), content-visibility var(--t-base) allow-discrete; }
  .faq__item[open]::details-content{ block-size:auto; }
}

/* ============ BANNIÈRE D'APPEL FINALE (design.md §5.15) ============ */
.cta-banner{ position:relative; overflow:hidden; background:var(--c-green); border-radius:var(--r-xl); padding:60px 20px;
  text-align:center; color:#fff; }
.cta-banner > *{ position:relative; z-index:1; }
.cta-banner__title{ font-family:var(--font-heading); font-size:28px; line-height:1.15; letter-spacing:-0.025em; text-wrap:balance; }
@media (min-width:1024px){ .cta-banner__title{ font-size:40px; } }
.cta-banner__text{ margin-top:16px; font-size:16px; line-height:24px; }
.cta-banner__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:28px; }
.cta-banner .shard{ z-index:0; }
.cta-banner .shard--bl{ bottom:0; left:0; width:min(260px,40vw); }
.cta-banner .shard--r{ right:0; bottom:0; width:min(300px,40vw); }

/* ============ LISTE DE POINTS SUR FOND SOMBRE (design.md §5.16) ============ */
.points{ display:flex; flex-direction:column; gap:8px; }
.points li{ display:flex; gap:12px; padding:16px; border-radius:var(--r-xs); background:rgba(255,255,255,.06);
  font-size:14px; line-height:1.6; color:rgba(255,255,255,.8); }
.points .number{ flex:none; color:var(--c-blue); font-size:20px; line-height:1.2; }
.points a{ color:var(--c-primary); text-decoration:underline; }

/* ============ BANDEAU DE CONFIANCE (design.md §5.17) ============ */
.trust{ display:flex; flex-direction:column; gap:24px; padding:24px; background:#fff; border:1px solid var(--c-border);
  border-radius:var(--r-sm); }
@media (min-width:1024px){ .trust{ flex-direction:row; justify-content:space-between; align-items:center; padding:32px; } }
.trust__main{ display:flex; flex-direction:column; gap:16px; max-width:760px; }
.trust__title{ font-family:var(--font-heading); font-size:28px; line-height:1.15; letter-spacing:-0.025em; }
.trust__text{ font-size:14px; line-height:22px; }

/* ============ TABLEAU COMPARATIF (design.md §5.18) ============ */
.compare{ width:100%; border-collapse:separate; border-spacing:0; font-size:14px; line-height:20px; }
.compare th,.compare td{ padding:12px 8px; border-bottom:1px solid var(--c-border-row); vertical-align:top; }
.compare thead th{ font-weight:500; color:var(--c-muted); text-align:left; }
.compare tbody th{ font-weight:400; text-align:left; color:var(--c-ink); }
.compare td{ color:var(--c-muted); }
.compare .compare__num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.compare tr.is-highlight th,.compare tr.is-highlight td{ background:var(--c-primary-tint); color:var(--c-ink); font-weight:600; }
.compare tr.is-highlight > :first-child{ border-radius:var(--r-sm) 0 0 var(--r-sm); }
.compare tr.is-highlight > :last-child{ border-radius:0 var(--r-sm) var(--r-sm) 0; }

/* ============ FORMULAIRES (design.md §5.19) ============ */
.form-card{ background:#fff; border-radius:var(--r-form); padding:20px; } @media (min-width:768px){ .form-card{ padding:40px; } }
.stepper{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:32px; }
.stepper__row{ display:flex; align-items:center; }
.stepper__dot{ width:28px; height:28px; border-radius:var(--r-pill); display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:500; border:1px solid rgba(145,158,171,.4); color:var(--c-gray-text); transition:all var(--t-base); }
.stepper__dot.is-active,.stepper__dot.is-done{ background:var(--c-primary); border-color:var(--c-primary); color:#fff; }
.stepper__line{ width:40px; height:2px; margin:0 8px; border-radius:2px; background:rgba(145,158,171,.3); }
.stepper__label{ font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--c-muted); }
.form-step{ border:0; margin:0; padding:0; min-width:0; display:flex; flex-direction:column; gap:20px; }
.form-step + .form-step{ margin-top:40px; }
.form-step__title{ padding:0; margin-bottom:4px; font-family:var(--font-heading); font-size:24px; line-height:1.2; text-wrap:balance; }
.form-row{ display:grid; gap:20px; grid-template-columns:1fr; } @media (min-width:768px){ .form-row{ grid-template-columns:1fr 1fr; } }
.field{ display:flex; flex-direction:column; gap:8px; border:0; margin:0; padding:0; min-width:0; }
.field > label,.field > legend,.field__label{ font-size:14px; font-weight:500; padding:0; }
.field > .consent{ font-weight:400; }
.field .req{ color:var(--c-primary); }
.field__hint{ font-size:12px; line-height:16px; color:var(--c-muted); }
.input{ height:48px; width:100%; border:0; border-radius:var(--r-lg); background:var(--c-bg); padding:0 16px; font:16px var(--font-body); color:var(--c-ink); }
textarea.input{ height:auto; min-height:120px; padding:14px 16px; resize:vertical; }
.input:focus{ outline:2px solid var(--c-primary); outline-offset:0; }
.input::placeholder{ color:var(--c-muted); }
.input[aria-invalid="true"]{ outline:2px solid var(--c-error); outline-offset:0; }
.options{ display:flex; flex-direction:column; gap:10px; }
.options--row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); }
.option{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:var(--r-lg); background:var(--c-bg); cursor:pointer; transition:background var(--t-base); font-size:16px; line-height:20px; }
.option:has(input:checked){ background:var(--c-primary-light); } .option input{ accent-color:var(--c-primary); margin:0; width:18px; height:18px; flex:none; }
.option:has(input:focus-visible){ outline:2px solid var(--c-primary); outline-offset:2px; }
.consent{ display:flex; gap:12px; align-items:flex-start; font-size:14px; line-height:20px; cursor:pointer; }
.consent input{ accent-color:var(--c-primary); width:18px; height:18px; margin:1px 0 0; flex:none; }
.consent a{ color:var(--c-primary); text-decoration:underline; }
.field__error{ font-size:14px; line-height:20px; color:var(--c-error); }
.form-actions{ display:flex; flex-direction:column-reverse; gap:12px; margin-top:32px; }
@media (min-width:768px){ .form-actions{ flex-direction:row; justify-content:space-between; align-items:center; } }
.form-actions .btn--white{ border-radius:var(--r-btn); }
.form-alert{ margin-top:20px; padding:14px 16px; border-radius:var(--r-lg); background:var(--c-primary-light); color:var(--c-error); font-size:14px; line-height:20px; }
.form-alert a{ text-decoration:underline; }
.form-note{ margin-top:20px; font-size:14px; line-height:20px; color:var(--c-muted); }
.honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ============ FIL D'ARIANE ET SOMMAIRE (design.md §5.20) ============ */
.breadcrumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:14px; line-height:20px; }
.breadcrumb li{ display:flex; align-items:center; gap:8px; color:var(--c-gray-text); }
.breadcrumb li + li::before{ content:"›"; color:var(--c-muted); }
.breadcrumb a{ color:var(--c-primary); } .breadcrumb a:hover{ text-decoration:underline; }
.toc__title{ margin-bottom:12px; font-size:11px; line-height:16px; text-transform:uppercase; letter-spacing:.05em; color:var(--c-muted); }
.toc li a{ display:block; padding:4px 0 4px 12px; border-left:2px solid transparent; font-size:12px; line-height:1.375; color:var(--c-muted-3);
  transition:color var(--t-base), border-color var(--t-base); }
.toc li a:hover,.toc li a.is-active{ border-left-color:var(--c-primary); color:var(--c-ink); font-weight:500; }

/* ============ FOOTER (design.md §5.21) ============ */
.site-footer{ position:relative; overflow:hidden; background:var(--c-green-dark); padding:60px 0 36px; }
@media (min-width:1024px){ .site-footer{ padding-top:100px; } }
.site-footer > .container{ position:relative; z-index:1; }
.footer-card{ background:var(--c-bg); color:#000; border-radius:var(--r-xl); padding:20px; display:flex; flex-direction:column; gap:48px; }
@media (min-width:640px){ .footer-card{ padding:28px; } } @media (min-width:1024px){ .footer-card{ padding:40px; } }
.footer-nav{ display:grid; grid-template-columns:repeat(2,1fr); gap:32px; }
@media (min-width:640px){ .footer-nav{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:768px){ .footer-nav{ gap:48px; } }
.footer-nav h2{ font:500 14px/21px var(--font-body); text-transform:uppercase; letter-spacing:-0.04em; color:var(--c-primary); margin-bottom:8px; }
.footer-nav a,.footer-nav li > span{ display:block; font-size:14px; line-height:21px; color:var(--c-muted); padding:4px 0; transition:color var(--t-base); }
.footer-nav a:hover{ color:#000; }
.footer-bottom{ display:flex; flex-direction:column; gap:12px; font-size:12px; line-height:18px; color:var(--c-muted); }
@media (min-width:1024px){ .footer-bottom{ flex-direction:row; justify-content:space-between; align-items:flex-end; } }

/* ============ DÉCORS (design.md §5.22) ============ */
.shard{ position:absolute; pointer-events:none; z-index:0; height:auto; }
.shard--tr{ top:0; right:0; width:min(640px,60vw); }
.shard--bl{ bottom:0; left:0; width:min(260px,30vw); }
.section > .container{ position:relative; z-index:1; }
.s-blue{ fill:var(--c-blue); } .s-yellow{ fill:var(--c-yellow); } .s-amber{ fill:var(--c-amber); }
.s-orange{ fill:var(--c-primary); } .s-peach{ fill:var(--c-peach); }
.shard--soft .s-blue{ opacity:.5; }

/* ============ ACCESSIBILITÉ : MOUVEMENT RÉDUIT (design.md §3.6) ============ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none!important; transition:none!important; }
}