/* ─── BOBETTE — global.css ─────────────────────────────────────
   Chargé sur toutes les pages du site.
   Ne pas modifier les valeurs ici sans répercuter dans bobette-source-verite-produit.md.
   ─────────────────────────────────────────────────────────────── */

/* FONTS — chargées via <link> dans chaque page HTML (plus performant que @import) */

/* TOKENS */
:root {
  --bg:        #F5EDE3;
  --bg-lt:     #FBF8F4;
  --coral:     #FF6F61;
  --coral-dk:  #E55A4C;
  --coral-lt:  #FFF0EE;
  --coral-mid: #FFDDD9;
  --coral-text:#BE3D2D;
  --brown:     #7A4A2E;
  --dark:      #1E1714;
  --text:      #1E1714;
  --muted:     #6B5744;
  --mid:       #6B5744;
  --border:    #E2D4C3;
  --white:     #FFFFFF;
  --serif:     'DM Serif Display', Georgia, serif;
  --logo-font: 'Merriweather', Georgia, serif;
  --sans:      'Manrope', system-ui, sans-serif;
  --max:       1160px;
  --r:         12px;
}

/* RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--text);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;padding-top:64px}
a{color:inherit;text-decoration:none}
button{font-family:var(--sans);cursor:pointer;border:none;background:none}
img{display:block;max-width:100%}
/* Garde-fous overflow mobile — sûrs, n'altèrent pas le desktop */
video,iframe,table{max-width:100%}
body{overflow-wrap:break-word}
/* CTA inline d'article : le texte doit pouvoir wrapper en mobile (sinon
   white-space:nowrap déborde sur petits écrans, ex. 320px). Couvre toutes
   les pages .art-cta-inline quel que soit leur format CSS inline. */
@media(max-width:600px){.art-cta-inline a{white-space:normal!important;text-align:center;flex-shrink:1!important;max-width:100%}}

/* LOGO DOT — ne jamais supprimer, protège le SVG cœur dans le logo */
.logo-dot{display:inline-block;width:0.62em;height:0.62em;vertical-align:-0.12em;margin-left:1px;flex-shrink:0;transform:rotate(25deg)}

/* SKIP LINK */
.skip{position:absolute;top:-999px;left:16px;padding:8px 16px;background:var(--dark);color:#fff;font-weight:600;border-radius:0 0 8px 8px;z-index:9999;font-size:14px}
.skip:focus{top:0}

/* NAV */
.nav{background:var(--bg);border-bottom:1px solid var(--border);padding:0 32px;position:fixed;top:0;left:0;right:0;z-index:100}
.nav-inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-family:var(--logo-font);font-weight:700;font-size:22px;color:var(--text);letter-spacing:0}
.logo span{color:var(--coral)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-link{font-size:14px;font-weight:500;color:var(--muted);padding:8px 12px;border-radius:8px;transition:color .15s}
.nav-link:hover{color:var(--coral)}
.nav-sep{width:1px;height:18px;background:var(--border);margin:0 4px}
.nav-signin{font-size:14px;font-weight:500;color:var(--text);padding:8px 12px;border-radius:8px;transition:background .15s}
.nav-signin:hover{background:var(--border)}
.nav-cta{background:var(--coral);color:#fff;font-size:14px;font-weight:700;padding:10px 18px;border-radius:8px;transition:background .15s,transform .1s}
.nav-cta:hover{background:var(--coral-dk);transform:translateY(-1px)}

/* HAMBURGER MENU MOBILE */
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:8px;border-radius:8px;background:none;border:none;cursor:pointer;transition:background .15s;flex-shrink:0}
.hamburger:hover{background:var(--coral-lt)}
.hamburger:focus-visible{outline:2px solid var(--coral);border-radius:8px}
.hamburger span{display:block;height:2px;background:var(--text);border-radius:2px;transition:transform .25s,opacity .2s;transform-origin:center}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;position:fixed;top:64px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--border);padding:12px 24px 20px;z-index:999}
.mobile-menu.open{display:flex;flex-direction:column;gap:2px}
.mobile-menu .nav-link{font-size:16px;padding:12px 14px;border-radius:10px;color:var(--text)}
.mobile-menu-divider{height:1px;background:var(--border);margin:8px 0}
.mobile-menu .nav-cta{display:block;text-align:center;margin-top:6px;padding:14px;font-size:16px;border-radius:10px}
@media(max-width:960px){.hamburger{display:flex}.nav-links,.nav-sep,.nav-signin{display:none}}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--coral);color:#fff;font-size:16px;font-weight:700;padding:14px 24px 14px 30px;border-radius:8px;transition:background .15s;letter-spacing:-.1px;cursor:pointer;font-family:var(--sans);border:none}
.btn:hover{background:var(--coral-dk)}
.btn-lg{font-size:17px;padding:16px 28px 16px 34px}

/* BREADCRUMB */
.bc-wrap{padding:0 32px}
.bc{max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);padding:14px 0}
.bc a{color:var(--muted);transition:color .15s}
.bc a:hover{color:var(--coral)}
.bc-sep{opacity:.4}

/* FOOTER */
footer{background:var(--dark);padding:52px 32px 36px}
.f-inner{max-width:var(--max);margin:0 auto}
.f-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.f-logo{font-family:var(--logo-font);font-size:20px;font-weight:700;color:var(--bg);margin-bottom:8px}
.f-logo span{color:var(--coral)}
.f-tag{font-family:var(--serif);font-size:13px;font-style:italic;color:rgba(245,237,227,.55);margin-bottom:12px;line-height:1.5}
.f-desc{font-size:12px;color:rgba(245,237,227,.65);line-height:1.65;max-width:260px}
.f-col-title{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(245,237,227,.65);margin-bottom:14px}
.f-col-links{display:flex;flex-direction:column;gap:10px}
.f-col-links a{font-size:13px;color:rgba(245,237,227,.80);transition:color .15s;text-decoration:none}
.f-col-links a:hover{color:rgba(245,237,227,.98)}
.f-bottom{border-top:1px solid rgba(245,237,227,.12);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.f-links{display:flex;gap:20px;flex-wrap:wrap}
.f-links a{font-size:11px;color:rgba(245,237,227,.50);transition:color .15s;text-decoration:none}
.f-links a:hover{color:rgba(245,237,227,.75)}
.f-copy{font-size:11px;color:rgba(245,237,227,.45)}
@media(max-width:768px){.f-top{grid-template-columns:1fr;gap:28px}.f-bottom{flex-direction:column;align-items:flex-start}}

/* BOUTON REMONTER EN HAUT — injecté par global.js, partagé sur tout le site */
.to-top{position:fixed;bottom:24px;right:20px;width:46px;height:46px;border-radius:50%;background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(30,23,20,.22);border:none;cursor:pointer;z-index:300;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .22s ease,transform .22s ease,visibility .22s ease,background .15s}
.to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{background:var(--coral-dk)}
.to-top:focus-visible{outline:2px solid var(--dark);outline-offset:2px}
/* Sur mobile, remonte au-dessus de la barre CTA fixe pour ne pas la masquer */
@media(max-width:768px){.to-top{bottom:84px;right:16px;width:44px;height:44px}}

/* STICKY CTA MOBILE — partagé sur toutes les LP */
.sticky-cta{display:none}
@media(max-width:768px){
  .sticky-cta{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:200;background:var(--dark);padding:14px 20px;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 -2px 16px rgba(0,0,0,.18);transform:translateY(100%);transition:transform .3s ease}
  .sticky-cta.visible{transform:translateY(0)}
  .sticky-cta-label{font-size:13px;color:rgba(245,237,227,.65);line-height:1.35;flex:1}
  .sticky-cta-label strong{display:block;color:var(--bg);font-size:14px}
  .sticky-cta .btn{flex-shrink:0;font-size:15px;padding:13px 18px 13px 22px;white-space:nowrap}
}

/* ─── COMPOSANTS PARTAGÉS — canon homepage (ajouté 2026-06-19) ───
   Source de vérité : index.html. Sur les pages qui ont encore leur
   copie inline, l'inline gagne (chargé après ce fichier) : ces règles
   sont donc dormantes jusqu'à suppression de l'inline page par page. */

/* SECTION */
.section{padding:80px 32px}
.section-inner{max-width:var(--max);margin:0 auto}
@media(max-width:767px){.section{padding:52px 20px}}

/* EYEBROW + TITRES DE SECTION */
.eyebrow{font-size:13px;font-weight:700;color:var(--brown);letter-spacing:1.2px;text-transform:uppercase;margin-bottom:14px}
.eyebrow-coral{color:var(--coral-text)}
.section-h{font-family:var(--serif);font-size:clamp(30px,3.8vw,44px);font-weight:700;color:var(--text);line-height:1.15;margin-bottom:28px}
.section-h em{font-style:italic;color:var(--coral)}

/* TITRES SERIF — gras de marque (faux-gras DM Serif voulu).
   Les règles inline de ces titres n'ont pas de font-weight : cette règle
   globale le fixe donc sans rien écraser. Garder partout, homepage incluse. */
.section-h,.cta-bottom-h,.contrast-h,.moment-h,.why-h,.dark-h,.cagnotte-h,.editorial-h{font-weight:700}
.section-sub{font-size:16px;color:var(--muted);line-height:1.65}

/* FAQ (accordéon) */
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:first-child{border-top:1px solid var(--border)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;padding:20px 0;font-size:16px;font-weight:600;color:var(--text);background:none;border:none;cursor:pointer;text-align:left;font-family:var(--sans);gap:16px;transition:color .15s}
.faq-q:hover{color:var(--coral)}
.faq-chevron{flex-shrink:0;color:var(--muted);transition:transform .25s}
.faq-item.open .faq-chevron{transform:rotate(180deg)}
.faq-a{display:none;padding:0 0 20px;font-size:15px;color:var(--muted);line-height:1.7;max-width:600px}
.faq-item.open .faq-a{display:block;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* COMPARATIF Sans/Avec — canon homepage (copié exact). Réutilisable sur les landing. */
.t-center{text-align:center}
.compare-wrap{max-width:820px;margin:0 auto;background:var(--white);border-radius:16px;overflow:hidden;border:1px solid var(--border)}
.compare-head{display:grid;grid-template-columns:1fr 1fr}
.compare-col-head{padding:16px 28px;font-size:16px;font-weight:700}
.compare-col-head.sans{color:#C0392B;background:#FEF2F2;border-right:1px solid var(--border)}
.compare-col-head.avec{color:#16A34A;background:#F0FDF4}
.compare-row{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border)}
.compare-cell{padding:14px 28px;font-size:16px;display:flex;align-items:flex-start;gap:10px}
.compare-cell.sans-cell{color:var(--muted);border-right:1px solid var(--border)}
.compare-cell.avec-cell{color:var(--text);font-weight:500}
.cell-x{color:#C0392B;font-weight:700;font-size:13px;flex-shrink:0;margin-top:1px}
.cell-check{color:#16A34A;font-weight:700;font-size:14px;flex-shrink:0;margin-top:1px}
@media(max-width:500px){.compare-head{grid-template-columns:1fr}.compare-col-head.sans{display:none}.compare-row{grid-template-columns:1fr}.compare-cell.sans-cell{display:none}}

/* UTILITAIRES + SECTION TARIFS — canon homepage (pour les landing) */
.btn-full{width:100%;justify-content:center}
.link-coral{color:var(--coral);font-weight:600}
.em-coral{font-style:italic;color:var(--coral)}
.check{color:#16A34A;font-weight:700;flex-shrink:0}
.price-unit{font-size:16px}
.prob-intro{font-size:16px;color:var(--muted);line-height:1.7;max-width:580px;margin-bottom:40px}
.tarif-section{background:var(--bg-lt);border-top:1px solid var(--border)}
.tarif-intro{text-align:center;margin:12px auto 48px;max-width:520px}
.tarif-flex-center{display:flex;justify-content:center}
.tarif-card-inner{background:var(--white);border:1.5px solid var(--border);border-radius:20px;padding:40px 48px;max-width:480px;width:100%}
.tarif-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}
.tarif-price-cell{text-align:center;padding:16px 8px;border-radius:12px;border:1.5px solid var(--border)}
.tarif-price-label{font-family:var(--serif);font-size:32px;font-weight:700;color:var(--text);line-height:1;letter-spacing:-1px;margin:0 0 6px}
.tarif-cell-note{font-size:11px;color:var(--muted)}
.tarif-duration-note{font-size:12px;color:var(--muted);text-align:center;margin-bottom:28px}
.tarif-features-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.tarif-feature-item{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--text)}
.tarif-feature-item-top{display:flex;align-items:flex-start;gap:10px;font-size:16px;color:var(--text)}
.tarif-guarantee{background:var(--coral-lt);border:1px solid var(--coral-mid);border-radius:10px;padding:14px 16px;margin-bottom:24px;font-size:13px;color:var(--text);line-height:1.6}
.tarif-guarantee-label{color:var(--coral-text);display:block;margin-bottom:4px}
.tarif-cta-note{font-size:12px;color:var(--muted);text-align:center;margin-top:12px}
.tarif-more{text-align:center;margin-top:24px;font-size:13px;color:var(--muted)}
@media(max-width:600px){.tarif-card-inner{padding:28px 20px}.tarif-price-label{font-size:26px}}

/* CITATION sombre réutilisable (ex-lp-hook déplacé) */
.lp-quote{background:var(--dark);padding:64px 32px;text-align:center}
.lp-quote p{font-family:var(--serif);font-size:clamp(22px,3.2vw,36px);color:var(--bg);font-style:italic;font-weight:700;max-width:640px;margin:0 auto;line-height:1.4}
@media(max-width:767px){.lp-quote{padding:48px 20px}}

/* SECTION "POURQUOI UNE BOBETTE" — canon homepage */
.why-section{background:var(--bg);padding:80px 32px;border-top:1px solid var(--border)}
.why-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.why-h{font-family:var(--serif);font-size:clamp(30px,4.5vw,54px);font-weight:700;color:var(--text);line-height:1.12;margin-bottom:20px;max-width:680px}
.why-intro{font-size:16px;color:var(--muted);line-height:1.7;max-width:620px;margin-bottom:28px}
.why-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;max-width:460px}
.why-tag{background:var(--bg);color:var(--coral);font-size:14px;font-weight:500;padding:6px 16px;border-radius:20px;border:1px solid var(--coral)}
.why-tag-etc{color:var(--coral);font-size:14px;font-style:italic;padding:0 8px;margin-top:8px}
@media(max-width:767px){.why-section{padding:56px 20px}.why-inner{grid-template-columns:1fr}.why-visual{display:none}.why-tags{max-width:none}}
.why-h em{font-style:italic;color:var(--coral)}
.hero-note{font-size:13px;color:var(--muted);display:block;margin-top:8px}

/* NAV MOBILE — SOURCE DE VÉRITÉ UNIQUE (2026-06-25)
   Specificité .nav-inner + !important : neutralise les copies inline des
   pages qui dupliquaient ce bloc avec des breakpoints incohérents (480 /
   700 / 960px). Symptôme corrigé : burger + liens desktop affichés ensemble.
   Scopé à .nav-inner pour NE PAS toucher le CTA du menu déroulant mobile. */
@media(max-width:960px){
  .nav{padding:0 20px!important}
  .nav-inner .nav-links,
  .nav-inner .nav-sep,
  .nav-inner .nav-signin,
  .nav-inner .nav-cta-long{display:none!important}
  .nav-inner .hamburger{display:flex!important;order:-1;margin-right:6px}
  .nav-inner .nav-actions{display:contents}
  .nav-inner .logo{margin-right:auto}
  /* CTA "Créer →" conservé en haut à droite sur mobile (conversion).
     Force l'affichage sur les ~13 pages qui le masquaient en mobile. */
  .nav-inner .nav-cta{display:inline-flex!important;align-items:center;padding:9px 16px;font-size:14px}
}

/* ═══ COMPOSANTS CENTRALISÉS 2026-07-14 ═══════════════════════════
   Copiés verbatim depuis leur page d'origine (indiquée par bloc),
   puis les copies inline strictement identiques ont été supprimées
   des pages. Les valeurs divergentes conservées inline (overrides
   volontaires) sont listées dans docs/07-css-overrides-restants.md.
   Catalogue visuel : /storybook/index.html et /design-system.html.
   ═════════════════════════════════════════════════════════════════ */

/* TRUST BAR — canon : index.html */
.trust-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--white);padding:0}
.trust-item{display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 20px;gap:8px;border-right:1px solid var(--border)}
.trust-item:last-child{border-right:none}
.trust-icon{width:28px;height:28px;color:var(--coral);flex-shrink:0}
.trust-item strong{font-size:13px;font-weight:700;color:var(--dark);letter-spacing:-.1px}
.trust-item span{font-size:12px;color:var(--muted);line-height:1.4}
@media(max-width:700px){.trust-bar{grid-template-columns:repeat(2,1fr)}.trust-item:nth-child(2){border-right:none}.trust-item:nth-child(3){border-top:1px solid var(--border)}.trust-item:nth-child(4){border-top:1px solid var(--border);border-right:none}}

/* PAIN BULLETS — canon : index.html */
.pain-bullets{list-style: none;display: flex;flex-direction: column;gap: 10px;max-width: 640px}
.pain-bullet{display: flex;align-items: center;gap: 16px;background: var(--white);border: 1px solid var(--border);border-radius: var(--r);padding: 18px 24px;font-size: 17px;font-weight: 500;color: var(--text);letter-spacing: -.1px}
.pb-x{width: 22px;height: 22px;border-radius: 50%;background: #FEE2E2;color: #C0392B;font-size: 11px;font-weight: 800;display: flex;align-items: center;justify-content: center;flex-shrink: 0}

/* CARTES BÉNÉFICE (why-card) — canon : index.html */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.why-card{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:28px 24px;display:flex;flex-direction:column;gap:10px}
.why-card-icon{width:44px;height:44px;border-radius:50%;background:var(--coral);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--bg)}
.why-card-title{font-size:17px;font-weight:700;color:var(--text)}
.why-card-desc{font-size:15px;color:var(--muted);line-height:1.6}
@media(max-width:767px){.why-grid{grid-template-columns:1fr}}

/* CARTES OCCASION — canon : index.html */
.occasions{background: var(--white);padding: 80px 32px;border-top: 1px solid var(--border)}
.occasions-grid{display: grid;grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));gap: 12px}
.occ-card{border-radius: 16px;background: var(--coral-lt);border: 1px solid var(--coral-mid);padding: 22px 12px 18px;display: flex;flex-direction: column;align-items: center;gap: 8px;text-decoration: none;transition: border-color .18s, background .18s}
.occ-text-swap{position: relative;width: 100%;min-height: 2.8em}
.occ-sub{position: absolute;inset: 0;display: flex;align-items: center;justify-content: center;text-align: center;font-size: 12px;color: var(--muted);line-height: 1.45;opacity: 1;padding: 0 4px;transition: opacity .2s}
.occ-hover{position: absolute;inset: 0;display: flex;align-items: center;justify-content: center;text-align: center;font-size: 12px;color: var(--coral);line-height: 1.45;font-style: italic;opacity: 0;padding: 0 4px;transition: opacity .2s}
.occ-card:hover{border-color: var(--coral);background: var(--coral-mid)}
.occ-card:hover .occ-sub{opacity: 0}
.occ-card:hover .occ-hover{opacity: 1}
.occ-card:hover .occ-cta{background: var(--coral);color: white;border-color: var(--coral)}
.occ-icon-wrap{width: 52px;height: 52px;border-radius: 50%;background: var(--white);display: flex;align-items: center;justify-content: center;flex-shrink: 0}
.occ-icon-wrap svg{width: 24px;height: 24px}
.occ-title{font-size: 15px;font-weight: 600;color: var(--dark);text-align: center;line-height: 1.25;margin-top: 4px}
.occ-cta{display: inline-flex;align-items: center;justify-content: center;width: 26px;height: 26px;border-radius: 50%;border: 1.5px solid var(--coral);color: var(--coral);font-size: 17px;font-weight: 400;line-height: 1;margin-top: auto;padding-top: 0;transition: background .15s, color .15s}
.occ-expand-btn{display: none;margin: 20px auto 0;align-items: center;gap: 6px;background: transparent;border: 1.5px solid var(--border);border-radius: 24px;padding: 11px 20px;font-size: 14px;font-weight: 600;color: var(--text);cursor: pointer;font-family: var(--sans);transition: border-color .15s, background .15s}
.occ-expand-btn:hover{border-color: var(--coral);background: var(--coral-lt);color: var(--coral)}
.occ-expand-btn:focus-visible{outline: 2px solid var(--coral-text);outline-offset: 2px}
@media(max-width: 600px){.occasions-grid{grid-template-columns: repeat(2,1fr)}}
@media(max-width: 767px){.occ-card[data-secondary]{display: none}.occ-card[data-secondary].occ-visible{display: flex}.occ-text-swap{position: static;min-height: 0}.occ-sub{position: static;opacity: 1}.occ-hover{display: none}.occ-expand-btn{display: flex}.occ-expand-btn{min-height: 44px}.occ-cta{min-width: 44px;min-height: 44px}}

/* CARTES TÉMOIGNAGE — canon : index.html */
.testimonials{background: var(--bg);padding: 80px 32px;border-top: 1px solid var(--border)}
.testi-grid{display: grid;grid-template-columns: repeat(3,1fr);gap: 20px}
.testi-card{background: var(--white);border-radius: 16px;padding: 28px 24px;border: 1px solid var(--border);display: flex;flex-direction: column;gap: 16px}
.testi-stars{display: flex;gap: 2px}
.testi-star{color: var(--coral);font-size: 14px}
.testi-quote{font-size: 16px;color: var(--text);line-height: 1.65;flex: 1}
.testi-quote em{font-style: italic;color: var(--muted)}
.testi-av{width: 36px;height: 36px;border-radius: 50%;font-size: 13px;font-weight: 700;color: #fff;display: flex;align-items: center;justify-content: center;flex-shrink: 0}
.testi-name{font-size: 14px;font-weight: 600;color: var(--text)}
.testi-meta{font-size:13px;color:var(--muted)}
.testi-item{display:flex;align-items:center;gap:10px}
.testi-item:nth-child(1) .testi-av{background:#FF6F61}
.testi-item:nth-child(2) .testi-av{background:#1E1714}
.testi-item:nth-child(3) .testi-av{background:#8B5CF6}
@media(max-width: 960px){.testi-grid{grid-template-columns: 1fr 1fr}}
@media(max-width: 600px){.testi-grid{grid-template-columns: 1fr}}

/* ONGLETS QUESTIONS (qt) — canon : index.html */
.qt-section{background: var(--bg);padding: 80px 32px;border-top: 1px solid var(--border)}
.qt-inner{max-width: 760px;margin: 0 auto}
.qt-pills{display: flex;gap: 8px;margin-bottom: 32px;flex-wrap: wrap}
.qt-pill{padding: 8px 18px;border-radius: 100px;border: 1.5px solid var(--border);background: var(--white);font-size: 14px;font-weight: 500;color: var(--muted);cursor: pointer;transition: all .18s;font-family: var(--sans)}
.qt-pill.active{background: var(--coral);border-color: var(--coral);color: #fff}
.qt-pill:hover:not(.active){border-color: var(--coral);color: var(--coral)}
.qt-card{background: var(--white);border: 1px solid var(--border);border-radius: 16px;padding: 28px;display: none}
.qt-card.visible{display: block}
.qt-card-label{font-size: 13px;font-weight: 700;letter-spacing: 1.2px;text-transform: uppercase;color: var(--dark);margin-bottom: 16px}
.qt-questions{display: flex;flex-direction: column;gap: 12px}
.qt-q{display: flex;align-items: flex-start;gap: 12px;padding: 14px 16px;background: var(--bg-lt);border-radius: 10px}
.qt-num{width: 22px;height: 22px;border-radius: 50%;background: var(--coral);color: #fff;font-size: 11px;font-weight: 700;display: flex;align-items: center;justify-content: center;flex-shrink: 0;margin-top: 1px}
.qt-text{font-size: 16px;color: var(--text);line-height: 1.65}
.qt-note{margin-top: 16px;text-align: center;font-style: italic;font-size: 13px;color: var(--muted)}
.qt-section .section-h{margin-bottom: 20px}
@media(max-width: 767px){.qt-section{padding: 60px 20px}.qt-pill{min-height: 44px;display: inline-flex;align-items: center;justify-content: center}}

/* CARTES GUIDE — canon : index.html */
.guides{padding: 80px 32px;background: var(--bg-lt);border-top: 1px solid var(--border)}
.guides-inner{max-width: var(--max);margin: 0 auto}
.guides-head{display: flex;flex-direction: column;gap: 10px;margin-bottom: 40px}
.guides-head h2{font-family: var(--serif);font-size: clamp(30px, 3.8vw, 44px);font-weight: 700;color: var(--text);line-height: 1.15}
.guides-sub{color: var(--muted);font-size: .95rem}
.guides-grid{display: grid;grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));gap: 16px}
.guide-card{background: var(--coral-lt);border: 1.5px solid var(--coral-mid);border-radius: var(--r);padding: 24px;text-decoration: none;transition: border-color .18s, background .18s;display: flex;flex-direction: column;gap: 10px}
.guide-card:hover{border-color: var(--coral);background: var(--coral-mid)}
.guide-card:focus-visible{outline: 2px solid var(--coral-text);border-radius: var(--r)}
.guide-tag{display: inline-block;font-size: .7rem;font-weight: 700;letter-spacing: .07em;text-transform: uppercase;padding: 3px 10px;border-radius: 20px;background: var(--white);color: var(--brown);border: 1px solid var(--border);width: fit-content}
.guide-title{font-weight: 700;font-size: .95rem;color: var(--text);line-height: 1.4}
.guide-desc{font-size: .85rem;color: var(--muted);line-height: 1.55;flex: 1}
.guide-arrow{font-size: .85rem;color: var(--coral);font-weight: 600;align-self: flex-start;margin-top: 4px}

/* HERO LANDING PAGE (lp-hero) — canon : cadeau/cadeau-anniversaire-original.html */
.lp-hero{background:var(--bg);padding:56px 32px 72px}
.lp-hero-inner{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.lp-h1{font-family:var(--serif);font-size:clamp(36px,5vw,60px);color:var(--text);line-height:1.08;letter-spacing:-.5px;margin-bottom:20px}
.lp-hook{font-family:var(--serif);font-size:clamp(17px,2.2vw,22px);font-style:italic;color:var(--coral);line-height:1.4;margin-bottom:24px}
.lp-sub{font-size:18px;color:var(--muted);line-height:1.65;margin-bottom:36px;max-width:520px}
@media(max-width:960px){.lp-hero-inner{grid-template-columns:1fr;gap:40px}.lp-hero-visual{order:-1;max-width:480px;margin:0 auto}}
@media(max-width:600px){.lp-hero{padding:44px 20px 56px}}

/* PROOF BAR — canon : cadeau/cadeau-anniversaire-original.html */
.proof-bar{background:var(--dark);padding:28px 32px;text-align:center}
.proof-inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap}
.proof-stat{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:rgba(245,237,227,.9)}
.proof-sep{color:rgba(245,237,227,.2);font-size:20px}
.proof-stat svg{vertical-align:-3px;stroke:var(--coral)}
@media(max-width:600px){.proof-inner{gap:12px}.proof-sep{display:none}}

/* SECTION MOMENT — canon : cadeau/cadeau-anniversaire-original.html */
.moment{background:var(--dark);padding:80px 32px;text-align:center}
.moment-inner{max-width:640px;margin:0 auto}
.moment-h{font-family:var(--serif);font-size:clamp(26px,3.8vw,44px);color:var(--bg);line-height:1.15;margin-bottom:32px}
.moment-h em{font-style:italic;color:var(--coral)}
.moment-lines{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.moment-line{font-size:17px;color:rgba(245,237,227,.82);font-weight:500}
.moment-punch{font-family:var(--serif);font-size:19px;font-style:italic;color:var(--coral);margin-top:16px}
@media(max-width:600px){.moment{padding:52px 20px}}

/* CELLULES DE PRIX (price-cell) — canon : tarifs/index.html */
.price-grid-hero{display: grid;grid-template-columns: repeat(3,1fr);gap: 12px;margin-bottom: 28px;width: 100%;max-width: 480px;align-items: end}
.price-cell:not(.featured){margin-top: 14px}
.price-cell{text-align: center;padding: 20px 12px;border-radius: 14px;border: 1.5px solid var(--border);background: var(--white)}
.price-cell.featured{border: 2px solid var(--coral);background: var(--coral-lt);position: relative}
.price-cell-badge{position: absolute;top: -12px;left: 50%;transform: translateX(-50%);background: var(--coral);color: #fff;font-size: 11px;font-weight: 700;padding: 3px 10px;border-radius: 20px;white-space: nowrap}
.price-cell-amount{font-family: var(--serif);font-size: 38px;font-weight: 700;color: var(--text);line-height: 1;letter-spacing: -1px;margin-bottom: 6px}
.price-cell-amount span{font-size: 18px}
.price-cell-label{font-size: 11px;font-weight: 700;color: var(--coral);letter-spacing: .6px;text-transform: uppercase;line-height: 1.2}
.price-cell.featured .price-cell-label{color: var(--coral-text)}
@media(max-width: 480px){.price-grid-hero{max-width: 100%}}
@media(max-width: 400px){.price-cell-amount{font-size: 28px}}