/* ============================================================================
 * charte.css — CHARTE GRAPHIQUE CREAWEBMADA (septembre 2026)
 * ----------------------------------------------------------------------------
 * Portée de `new_templte_sept.html`, validée par le client le 2026-09-04.
 * C'EST LA CHARTE DE RÉFÉRENCE DE TOUT LE SITE : toute page créée ensuite doit
 * s'y conformer, et n'a rien à charger de plus.
 *
 * Chargée par partials/head.php APRÈS app.css, sur toutes les pages publiques.
 *
 * ── POURQUOI UNE SURCOUCHE ET PAS UN REMPLACEMENT DE app.css ────────────────
 * `app.css` porte ~300 classes utilisées par 27 pages publiques : l'estimateur,
 * les wizards, les tableaux de tarifs, les articles, les pages légales. Le
 * réécrire en une passe casserait des pages sans rapport avec la demande.
 * Ici on redéfinit les JETONS (`:root`) et les composants de base, donc toutes
 * les pages existantes adoptent la charte sans être touchées, et on ajoute les
 * sections propres au nouveau gabarit.
 *
 * ── CONVENTION DE NOMMAGE : PRÉFIXE `cw-` ──────────────────────────────────
 * Les sections du nouveau gabarit sont préfixées `cw-` (`.cw-hero`,
 * `.cw-services`…). Le gabarit d'origine utilisait `.hero`, `.container`,
 * `.services-grid`, `.why`, `.step-card` — des noms DÉJÀ PRIS dans app.css
 * avec une autre sémantique. Le préfixe évite les collisions, et se repère
 * d'un coup d'œil comme « charte septembre ».
 *
 * ── LA PALETTE ─────────────────────────────────────────────────────────────
 *   --primary   #1e3a8a  bleu marine — titres de section, boutons de nav
 *   --secondary #3b82f6  bleu vif    — accent, appels à l'action, chiffres
 *   --dark      #0f172a  encre       — fonds sombres, texte
 *   --accent    #f59e0b  ambre       — halos et lueurs seulement
 * ⚠️ Le gabarit n'utilise AUCUN rouge : le rôle « appel à l'action » (jeton
 *    `--red` dans app.css) est donc porté par le bleu vif. Le nom du jeton
 *    reste `--red` parce qu'il désigne un RÔLE, pas une teinte — le renommer
 *    demanderait de reprendre les 813 lignes d'app.css.
 *
 * ── TYPOGRAPHIE ────────────────────────────────────────────────────────────
 * Montserrat, chargée depuis Google Fonts par head.php. Le gabarit demandait
 * 6 graisses (400→900) ; on en charge 4 (400, 600, 800, 900) pour économiser
 * deux fichiers — le site argumente sur le poids des pages. La pile de repli
 * garantit un rendu correct si la police ne charge pas.
 * ============================================================================ */

/* ── 1. Jetons ────────────────────────────────────────────────────────────── */
:root {
  /* Palette du gabarit */
  --primary:        #1e3a8a;
  --secondary:      #3b82f6;
  --accent:         #f59e0b;
  --accent-strong:  #f97316;
  --glow-blue:      rgba(59, 130, 246, .22);
  --glow-orange:    rgba(245, 158, 11, .20);

  /* ★ `--dark` — AJOUTÉ le 2026-09-06, et ce n'était pas un détail.
     La palette est documentée sous ce nom (CLAUDE.md §17) mais le jeton n'existait
     pas : seul `--navy-900` portait la valeur. Les règles écrites depuis utilisaient
     donc `var(--dark, #0f172a)` avec un repli — ce qui marche, et masque le problème.
     ⚠ CE QUI ARRIVE SANS REPLI : un `var()` non résolu rend la déclaration
       « invalide au calcul », et la propriété reprend sa valeur INITIALE. Un
       `background: linear-gradient(..., var(--dark), ...)` ne dégrade donc pas : il
       disparaît complètement (`background-image: none`). C'est exactement ce qui est
       arrivé au hero des pages de service : fond blanc, titre blanc, titre invisible.
     Déclarer le jeton une fois vaut mieux que de se souvenir d'un repli à chaque appel. */
  --dark:           #0f172a;

  /* Remappage des rôles d'app.css sur la nouvelle palette */
  --navy-900: #0f172a;   /* --dark    */
  --navy-800: #1e3a8a;   /* --primary */
  --navy-700: #1e40af;
  --blue-600: #2563eb;
  --blue-500: #3b82f6;   /* --secondary */
  --blue-100: #eff6ff;

  /* Appel à l'action = bleu vif (le gabarit n'a pas de rouge) */
  --red:       #3b82f6;
  --red-700:   #1e3a8a;
  --green:     #12a45a;   /* conservé : WhatsApp et validations */
  --green-700: #0d8149;
  --gold:      #f59e0b;   /* accent ambre */

  /* Neutres du gabarit */
  --ink:         #0f172a;
  --slate:       #64748b;   /* --gray */
  --muted:       #94a3b8;
  --line:        #e2e8f0;
  --line-strong: #cbd5e1;
  --bg:          #ffffff;
  --bg-soft:     #f8fafc;   /* --light-gray */
  --bg-softer:   #f1f5f9;
  --white:       #ffffff;

  /* Angles droits : c'est le marqueur le plus visible du gabarit */
  --radius:      0px;
  --radius-lg:   0px;
  --radius-pill: 0px;

  /* Ombres portées, teintées encre */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 2px 8px rgba(15, 23, 42, .04);
  --shadow-md: 0 12px 35px rgba(15, 23, 42, .06);
  --shadow-lg: 0 25px 70px rgba(15, 23, 42, .18);

  --grad-navy:      linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  --grad-navy-deep: linear-gradient(135deg, var(--primary) 0%, var(--dark, #0f172a) 72%);

  /* Le gabarit tient sur 1600 px ; on retient 1280 px, au-delà les colonnes de
     texte des articles et des pages légales deviennent illisibles. */
  --container: 1280px;

  --sans: "Montserrat", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

/* ── 2. Base et typographie ──────────────────────────────────────────────── */
body { font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--ink); }

h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.02em; }

/* Titres en capitales serrées : la signature du gabarit. */
.h-hero {
  font-size: clamp(2.2rem, 5.4vw, 5rem);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.04em;
}
.section-title {
  font-size: clamp(2rem, 3.6vw, 3.5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.035em;
  line-height: 1.02;
}
.page-hero h1 { font-weight: 900; letter-spacing: -.035em; }

/* L'eyebrow d'app.css prend l'allure du `section-tag` du gabarit :
   capitales très espacées, sans le tiret décoratif. */
.eyebrow {
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--secondary);
}
.eyebrow::before { display: none; }
.section--navy .eyebrow { color: var(--secondary); }

.section-lead { color: var(--slate); }
.text-gold { color: var(--secondary); }

/* ── 3. Boutons : rectangles nets, capitales ─────────────────────────────── */
.btn {
  border-radius: 0;
  font-weight: 800;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 1.05rem 2rem;
  transition: transform .3s, box-shadow .3s, background .3s, color .3s;
}
.btn:hover { transform: translateY(-3px); }
.btn--sm { padding: .7rem 1.25rem; font-size: .78rem; }

/* Appel à l'action principal : bleu vif, texte encre (contraste 6,6:1). */
.btn--red { background: var(--secondary); color: var(--dark, #0f172a); box-shadow: 0 10px 30px rgba(59, 130, 246, .22); }
.btn--red:hover { background: var(--primary); color: #fff; box-shadow: 0 16px 38px rgba(30, 58, 138, .28); }

.btn--navy { background: var(--primary); color: #fff; }
.btn--navy:hover { background: var(--dark, #0f172a); }

.btn--green { background: var(--green); color: #fff; box-shadow: 0 10px 30px rgba(18, 164, 90, .22); }

.btn--white { background: #fff; color: var(--primary); box-shadow: 0 10px 30px rgba(15, 23, 42, .18); }

.btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.btn--ghost:hover { background: rgba(255, 255, 255, .12); }

.btn--outline { box-shadow: inset 0 0 0 2px var(--line-strong); color: var(--primary); }
.btn--outline:hover { box-shadow: inset 0 0 0 2px var(--secondary); color: var(--secondary); }

/* Pastilles : rectangles en capitales. */
.pill {
  border-radius: 0;
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .55rem 1rem;
}
.pill--red   { background: var(--secondary); color: var(--dark, #0f172a); }
.pill--soft  { background: transparent; color: #cbd5e1; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.pill--gold  { background: var(--accent); color: var(--dark, #0f172a); }
.pill--green { background: rgba(18, 164, 90, .14); color: var(--green-700); }

/* ── 4. Barre haute, en-tête, navigation ─────────────────────────────────── */
.topbar { background: var(--dark, #0f172a); color: #cbd5e1; }
.topbar .cw-ic { color: var(--secondary); }

.header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 30px rgba(15, 23, 42, .07);
}
.nav { min-height: 84px; }

/* ⚠️ `img { max-width: 100% }` (app.css) dans un `.brand` en flex auto-dimensionné
   crée une dépendance circulaire : la largeur disponible dépend du contenu, qui
   dépend de la largeur → le logo se rendait à 0 px. `max-width: none` + `flex: none`
   la cassent. Mesuré avant correction : 0×52 px. Ne pas retirer. */
.brand__logo { max-width: none; flex: none; border-radius: 0; height: 44px; width: auto; }
.header .brand__logo { height: 48px; }
.footer .brand__logo { height: 52px; }

/* La marque prend l'allure du logo textuel du gabarit. */
.brand__name {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--dark, #0f172a);
}
.brand__slogan { font-style: normal; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }

/* 7 entrées de menu : gouttière et corps réduits par rapport au gabarit
   (qui n'en comptait que 5) pour tenir sur une ligne jusqu'à 1200 px. */
.nav-links { gap: .25rem; }
.nav-links a {
  border-radius: 0;
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dark, #0f172a);
  padding: .75rem .7rem;
}
.nav-links a:hover { background: transparent; color: var(--primary); }
.nav-links a.is-active { color: var(--secondary); box-shadow: inset 0 -3px 0 0 var(--secondary); }
/*
 * ★ BOUTON D'ACTION DE L'EN-TÊTE EN ROUGE (demande client du 2026-09-04).
 *
 * Le gabarit de la charte n'utilise aucun rouge : son appel à l'action est le bleu vif.
 * Le mettre en rouge est néanmoins le bon choix ici, pour trois raisons :
 *   1. l'en-tête est bleu sur blanc et le hero est bleu : un bouton bleu s'y fond. Le
 *      rouge est le seul ton de la palette qui ressorte à coup sûr ;
 *   2. ce n'est PAS un rouge d'alerte mais le rouge du logotype (#e14b52, le « MADA ») —
 *      il se lit comme une couleur de marque, pas comme une erreur ;
 *   3. il reste UNIQUE sur la page. C'est ce qui en fait un repère.
 *
 * ⚠️ NE PAS étendre ce rouge à tous les `.btn--red` : si tous les boutons deviennent
 *    rouges, plus aucun ne ressort et on perd le bénéfice. La règle est volontairement
 *    limitée à `.nav-cta` et au menu mobile.
 */
.nav-cta .btn--red,
.mobile-menu .btn--red {
  background: #e14b52;
  color: #fff;
  box-shadow: 0 10px 30px rgba(225, 75, 82, .28);
}
.nav-cta .btn--red:hover,
.mobile-menu .btn--red:hover {
  background: #c3383f;
  color: #fff;
  box-shadow: 0 16px 38px rgba(225, 75, 82, .34);
}

.nav-toggle { border-radius: 0; background: var(--bg-soft); }
.mobile-menu a { font-weight: 700; text-transform: uppercase; font-size: .82rem; letter-spacing: .05em; }

/* ── 5. Sections génériques ──────────────────────────────────────────────── */
.section { padding-block: clamp(3.5rem, 7vw, 8rem); }
.section--soft  { background: var(--bg-soft); }
.section--navy  { background: var(--grad-navy-deep); color: #e2e8f0; }
.section--navy .section-lead { color: #cbd5e1; }
.page-hero { background: var(--grad-navy-deep); }

/* Cartes : filet net, angles droits, survol relevé — comme le gabarit. */
.svc, .step, .feature, .price-card, .faq details, .tarif-list, .estimator, .simulator, .info-card, .aside-card, .post-card {
  border-radius: 0;
  border: 1px solid var(--line);
  box-shadow: 0 12px 35px rgba(15, 23, 42, .06);
}
.svc:hover, .feature:hover, .post-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(30, 58, 138, .12);
  border-color: rgba(59, 130, 246, .45);
}
.svc__ic, .feature__ic, .why__ic { border-radius: 0; }
.svc__ic, .feature__ic { background: var(--blue-100); color: var(--primary); }
.svc.is-featured .svc__ic { background: var(--secondary); color: var(--dark, #0f172a); }
.step__n { border-radius: 50%; background: var(--primary); color: #fff; width: 64px; height: 64px; font-size: 1.6rem; }
.svc h3, .step h3, .feature h3, .price-card h3 { text-transform: uppercase; letter-spacing: -.02em; }

.cta-band { background: var(--grad-navy); border-radius: 0; }
.cta-band h2 { font-weight: 900; letter-spacing: -.03em; }
.cta-band p { color: #dbeafe; }

.est-card, .est-check, .sim-opt span, .sim-check, .est-total, .sim-result,
.est-reco, .est-reco-badge, .est-tick, .tarif-nav a, .pricing-note { border-radius: 0; }
.est-reco-badge { background: var(--grad-navy); }
.est-card.is-on, .est-check.is-on { border-color: var(--secondary); background: var(--blue-100); box-shadow: inset 3px 0 0 0 var(--secondary); }
.est-reco { background: var(--secondary); color: var(--dark, #0f172a); text-transform: uppercase; letter-spacing: .06em; }
.price-card.pop { border-color: var(--secondary); box-shadow: 0 20px 45px rgba(59, 130, 246, .18); }
.faq summary::after { color: var(--secondary); }

/* ── 6. Pied de page ─────────────────────────────────────────────────────── */
.footer { background: var(--dark, #0f172a); color: rgba(255, 255, 255, .72); padding-block: 5rem 2rem; }
.footer h4 { font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: #fff; margin-bottom: 1.6rem; }
.footer a { color: rgba(255, 255, 255, .72); }
.footer a:hover { color: var(--secondary); }
.footer .brand__name { color: #fff; }
.footer .brand__slogan { color: var(--secondary); }
.footer-values .cw-ic { color: var(--secondary); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); opacity: .6; }
.info-item .cw-ic { color: var(--secondary); }

/* ============================================================================
 * 7. SECTIONS DU GABARIT « SEPTEMBRE » — préfixe `cw-`
 *    Utilisées par l'accueil ; réutilisables telles quelles sur toute page.
 * ========================================================================= */

/* ── Hero ────────────────────────────────────────────────────────────────── */
.cw-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding-block: clamp(3.5rem, 7vw, 8rem);
  background:
    radial-gradient(circle at 85% 20%, var(--glow-blue), transparent 28%),
    radial-gradient(circle at 15% 90%, var(--glow-orange), transparent 25%),
    linear-gradient(135deg, var(--primary) 0%, var(--dark, #0f172a) 72%);
}
.cw-hero::after {
  content: ""; position: absolute; width: 420px; height: 420px;
  right: -180px; top: -180px; border: 1px solid rgba(59, 130, 246, .28);
  border-radius: 50%; box-shadow: 0 0 90px rgba(59, 130, 246, .16);
  pointer-events: none;
}
.cw-hero > .container { position: relative; }
.cw-hero__badge {
  display: inline-block; background: var(--secondary); color: var(--dark, #0f172a);
  padding: .7rem 1.4rem; font-weight: 800; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .15em; margin-bottom: 1.8rem;
}
.cw-hero h1 { margin-bottom: 1.6rem; }
.cw-hero h1 span { color: var(--secondary); }
.cw-hero__sub { font-size: clamp(1.05rem, 1.8vw, 1.5rem); font-weight: 500; max-width: 60ch; margin-bottom: 2.4rem; color: #dbeafe; }
.cw-hero__stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
  margin: 3rem 0; padding: 2.4rem 0;
  border-top: 1px solid rgba(255, 255, 255, .2);
  border-bottom: 1px solid rgba(255, 255, 255, .2);
}
.cw-hero__stats .n { font-size: clamp(2rem, 4vw, 4rem); font-weight: 900; color: var(--secondary); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cw-hero__stats .l { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; margin-top: .6rem; color: #cbd5e1; }
.cw-hero__actions { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.cw-hero__trust { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 2.4rem; }
.cw-hero__trust span { display: inline-flex; align-items: center; gap: .5rem; font-size: .86rem; color: #cbd5e1; }
.cw-hero__trust .cw-ic { color: var(--secondary); }

/* ── Bloc de prix mis en avant ───────────────────────────────────────────── */
.cw-pricing { padding-block: clamp(3rem, 6vw, 6rem); background: #fff; }
.cw-pricing__box {
  background: var(--dark, #0f172a); color: #fff; padding: clamp(1.8rem, 4vw, 4rem);
  border: 1px solid rgba(59, 130, 246, .25); box-shadow: 0 25px 70px rgba(15, 23, 42, .18);
}
.cw-pricing__head { display: grid; grid-template-columns: 2fr 1fr; gap: 2.5rem; align-items: center; margin-bottom: 2.4rem; }
.cw-pricing__title { font-size: clamp(1.5rem, 2.6vw, 2.5rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.03em; }
.cw-pricing__note { font-size: 1rem; color: #cbd5e1; margin-top: .5rem; }
.cw-pricing__price { font-size: clamp(2.2rem, 4.4vw, 4rem); font-weight: 900; color: var(--secondary); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cw-pricing__price span { display: block; font-size: 1rem; font-weight: 500; color: var(--slate); margin-top: .4rem; }
.cw-pricing__feats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.cw-pricing__feats li { padding: 1rem; background: rgba(255, 255, 255, .05); font-weight: 600; font-size: .95rem; display: flex; gap: .7rem; align-items: flex-start; }
.cw-pricing__feats li::before { content: "✓"; color: var(--secondary); font-weight: 900; flex: none; }
.cw-pricing__foot { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* ── En-tête de section ──────────────────────────────────────────────────── */
.cw-head { margin-bottom: clamp(2.2rem, 4vw, 5rem); max-width: 900px; }
.cw-head--center { margin-inline: auto; text-align: center; }
.cw-tag { display: block; color: var(--secondary); font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .2em; margin-bottom: .9rem; }
.cw-head p { color: var(--slate); font-size: 1.05rem; margin-top: 1.1rem; max-width: 65ch; }
.cw-head--center p { margin-inline: auto; }

/* ── Cartes « approche » ─────────────────────────────────────────────────── */
.cw-audience { padding-block: clamp(3.5rem, 7vw, 8rem); background: #fff; }
.cw-audience__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.cw-card {
  background: var(--bg-soft); padding: clamp(1.6rem, 3vw, 3rem); text-align: center;
  border: 1px solid var(--line); box-shadow: 0 12px 35px rgba(15, 23, 42, .06);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.cw-card:hover { transform: translateY(-6px); box-shadow: 0 20px 45px rgba(30, 58, 138, .12); border-color: rgba(59, 130, 246, .45); }
.cw-card h3 { font-size: clamp(1.3rem, 2vw, 2rem); font-weight: 800; text-transform: uppercase; margin-bottom: 1.4rem; letter-spacing: -.02em; }
.cw-card__stat { margin: 1.4rem 0; }
.cw-card__stat .n { display: block; font-size: clamp(2rem, 3.4vw, 3.5rem); font-weight: 900; color: var(--secondary); line-height: 1; letter-spacing: -.03em; }
.cw-card__stat .l { font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: var(--slate); }
.cw-card p { color: var(--slate); margin-top: 1.4rem; font-size: .96rem; }

/* ── Services sur fond sombre ────────────────────────────────────────────── */
.cw-services { padding-block: clamp(3.5rem, 7vw, 8rem); background: var(--dark, #0f172a); color: #fff; }
.cw-services .cw-tag { color: var(--secondary); }
.cw-services .section-title { color: #fff; }
.cw-services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.6rem; }
.cw-svc {
  background: rgba(255, 255, 255, .05); padding: clamp(1.6rem, 3vw, 3rem);
  border: 1px solid rgba(255, 255, 255, .1); transition: background .3s, transform .3s;
  display: block; color: inherit;
}
.cw-svc:hover { background: rgba(255, 255, 255, .1); transform: translateY(-5px); }
.cw-svc__ic { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid rgba(59, 130, 246, .45); color: var(--secondary); margin-bottom: 1.3rem; }
.cw-svc__ic .cw-ic { width: 26px; height: 26px; }
.cw-svc h3 { font-size: 1.25rem; font-weight: 800; text-transform: uppercase; margin-bottom: .8rem; letter-spacing: -.02em; }
.cw-svc p { font-size: .96rem; line-height: 1.75; color: #cbd5e1; }
.cw-svc__more { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.1rem; font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--secondary); }

/* ── « Pourquoi nous » : cartes à filet gauche ───────────────────────────── */
.cw-why { padding-block: clamp(3.5rem, 7vw, 8rem); background: #fff; }
.cw-why__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.cw-why__card {
  padding: clamp(1.6rem, 3vw, 3rem); background: var(--bg-soft);
  border: 1px solid var(--line); border-left: 4px solid var(--primary);
  box-shadow: 0 12px 35px rgba(15, 23, 42, .06);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.cw-why__card:hover { transform: translateY(-6px); box-shadow: 0 20px 45px rgba(30, 58, 138, .12); border-left-color: var(--secondary); }
.cw-why__card h3 { font-size: clamp(1.2rem, 1.8vw, 1.75rem); font-weight: 800; text-transform: uppercase; margin-bottom: 1.1rem; letter-spacing: -.02em; }
.cw-why__card p { font-size: 1.02rem; line-height: 1.8; color: var(--slate); }
.cw-why__card p + p { margin-top: .8rem; }

/* ── Process ─────────────────────────────────────────────────────────────── */
.cw-process { padding-block: clamp(3.5rem, 7vw, 8rem); background: var(--bg-soft); }
.cw-process__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.cw-step {
  background: #fff; padding: clamp(1.6rem, 3vw, 3rem) 1.6rem; text-align: center;
  border: 1px solid var(--line); box-shadow: 0 12px 35px rgba(15, 23, 42, .06);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.cw-step:hover { transform: translateY(-6px); box-shadow: 0 20px 45px rgba(30, 58, 138, .12); border-color: rgba(59, 130, 246, .45); }
.cw-step__n {
  width: 72px; height: 72px; background: var(--primary); color: #fff; border-radius: 50%;
  display: grid; place-items: center; font-size: 2rem; font-weight: 900; margin: 0 auto 1.5rem;
}
.cw-step h3 { font-size: 1.2rem; font-weight: 800; text-transform: uppercase; margin-bottom: .8rem; letter-spacing: -.02em; }
.cw-step p { font-size: .93rem; line-height: 1.7; color: var(--slate); }

/* ── Blog : derniers articles (alimenté par la table `articles`) ─────────── */
.cw-blog { padding-block: clamp(3.5rem, 7vw, 8rem); background: #fff; }
.cw-blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.cw-post {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); box-shadow: 0 12px 35px rgba(15, 23, 42, .06);
  transition: transform .3s, box-shadow .3s, border-color .3s; color: inherit;
}
.cw-post:hover { transform: translateY(-6px); box-shadow: 0 20px 45px rgba(30, 58, 138, .12); border-color: rgba(59, 130, 246, .45); }
.cw-post__img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-softer); }
.cw-post__img img { width: 100%; height: 100%; object-fit: cover; }
.cw-post__body { padding: 1.6rem; display: flex; flex-direction: column; gap: .8rem; flex: 1; }
.cw-post__cat { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--secondary); }
.cw-post h3 { font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.cw-post p { font-size: .93rem; color: var(--slate); flex: 1; }
.cw-post__meta { font-size: .78rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }
.cw-blog__empty {
  border: 1px dashed var(--line-strong); background: var(--bg-soft);
  padding: clamp(1.6rem, 4vw, 3rem); text-align: center; color: var(--slate);
}
.cw-blog__empty b { color: var(--ink); display: block; font-size: 1.1rem; margin-bottom: .5rem; text-transform: uppercase; letter-spacing: -.02em; }

/* ── Secteurs : 2 colonnes x 3 lignes, maquettes au survol ───────────────── */
.cw-secteurs { padding-block: clamp(3.5rem, 7vw, 8rem); background: var(--bg-soft); }
.cw-secteurs__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.cw-secteur {
  display: flex; flex-direction: column; background: #fff; color: inherit;
  border: 1px solid var(--line); box-shadow: 0 12px 35px rgba(15, 23, 42, .06);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.cw-secteur:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 55px rgba(30, 58, 138, .16);
  border-color: rgba(59, 130, 246, .5);
}
/* La maquette : léger zoom, voile marine et libellé qui monte. Tout est en
   transform/opacity — donc composé par le GPU, sans recalcul de mise en page. */
.cw-secteur__img { position: relative; display: block; overflow: hidden; background: var(--bg-softer); aspect-ratio: 16 / 9; }
.cw-secteur__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.cw-secteur:hover .cw-secteur__img img { transform: scale(1.06); }
.cw-secteur__img::after {
  content: ""; position: absolute; inset: 0; background: var(--primary);
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.cw-secteur:hover .cw-secteur__img::after { opacity: .5; }
.cw-secteur__voir {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% + 14px));
  display: inline-flex; align-items: center; gap: .5rem; z-index: 1;
  background: var(--secondary); color: var(--dark, #0f172a);
  padding: .7rem 1.3rem; font-weight: 800; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .1em; white-space: nowrap;
  opacity: 0; transition: opacity .35s ease, transform .35s ease;
}
.cw-secteur:hover .cw-secteur__voir { opacity: 1; transform: translate(-50%, -50%); }
.cw-secteur__body { padding: 1.7rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.cw-secteur__body h3 { font-size: 1.3rem; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; }
.cw-secteur__body p { font-size: .96rem; color: var(--slate); }
.cw-secteurs__note { margin-top: 2.4rem; text-align: center; color: var(--slate); font-size: .98rem; }
.cw-secteurs__note a { color: var(--primary); font-weight: 700; text-decoration: underline; }

/* Pas de zoom ni de glissement si le visiteur a demandé moins d'animations :
   seul le voile et le libellé apparaissent. */
@media (prefers-reduced-motion: reduce) {
  .cw-secteur, .cw-secteur__img img, .cw-secteur__voir { transition: opacity .2s ease; }
  .cw-secteur:hover { transform: none; }
  .cw-secteur:hover .cw-secteur__img img { transform: none; }
  .cw-secteur:hover .cw-secteur__voir { transform: translate(-50%, -50%); }
}
/* Sur écran tactile, il n'y a pas de survol : on montre le libellé en permanence,
   sinon l'appel à l'action resterait invisible pour la moitié des visiteurs. */
@media (hover: none) {
  .cw-secteur__voir { opacity: 1; transform: translate(-50%, -50%); }
  .cw-secteur__img::after { opacity: .32; }
}

/* ── Bandeau d'appel final ───────────────────────────────────────────────── */
.cw-cta {
  padding-block: clamp(3.5rem, 7vw, 8rem); color: #fff; text-align: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .12), transparent 25%),
    linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}
.cw-cta h2 { font-size: clamp(2rem, 3.6vw, 3.5rem); font-weight: 900; text-transform: uppercase; letter-spacing: -.035em; margin-bottom: 1.1rem; }
.cw-cta p { font-size: clamp(1.02rem, 1.7vw, 1.5rem); font-weight: 500; margin-bottom: 2.2rem; max-width: 60ch; margin-inline: auto; color: #e0ecff; }
.cw-cta__actions { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; }

/* ── 8. Adaptations écran ────────────────────────────────────────────────── */

/*
 * En-tête — seuils CALIBRÉS SUR MESURE, pas au jugé.
 *
 * Largeurs relevées dans le navigateur avec le menu à 5 entrées :
 *   logotype complet 384 px · menu 450 px · bouton d'action 260 px = 1094 px
 *   marque seule (sans texte) 48 px          → 758 px avec le menu et le bouton
 * Le conteneur retire 40 px de marge intérieure au viewport.
 *
 * ⚠️ Ces seuils valaient 1300 et 1200 px quand le menu comptait 7 entrées. Depuis
 *    le retrait de « Création de site » et « Boutique en ligne » (2026-09-04), le
 *    menu s'est raccourci de 185 px : garder 1300 px masquait le logotype à 1270 px
 *    alors qu'il restait 161 px de marge. Recalculer si le menu change encore.
 */
/*
 * ★ SEUILS DE L'EN-TETE — RECALCULES LE 2026-09-06 (menu passe a 3 entrees).
 *
 * Ils ne sont PAS decoratifs : ils dependent de la largeur reelle du menu, donc
 * ils doivent etre remesures a chaque fois qu'une entree est ajoutee ou retiree.
 * Mesures relevees dans une vraie fenetre (Opera, viewport 1600 px) :
 *
 *     logotype complet (marque + nom + slogan) .... 264 px
 *     marque seule ................................  48 px
 *     menu, 3 entrees .............................. 238 px
 *     bouton « Demarrer mon projet » ............... 303 px
 *     marge interne du conteneur ...................  40 px
 *     ------------------------------------------------------
 *     total AVEC logotype ......................... 845 px
 *     total marque seule .......................... 629 px
 *
 * D'ou 880 px et 780 px, chacun avec une marge de securite.
 *
 * ⚠ HISTORIQUE, POUR NE PAS REFAIRE L'ERREUR : ces seuils valaient 1300/1200 px
 *   avec 7 entrees, puis 1160/1000 px avec 5. Apres le retrait de « Outils
 *   gratuits », l'ancien seuil de 1160 px masquait le logotype des 1159 px alors
 *   qu'il restait plus de 300 px de place libre — c'est visible a l'oeil, et le
 *   client l'avait signale la premiere fois que le cas s'est produit.
 */
@media (max-width: 880px) {            /* 845 + marge */
  .header .brand__txt { display: none; }
  .nav-links a { font-size: .75rem; padding: .75rem .55rem; }
  .nav-cta .btn { padding: .9rem 1.4rem; font-size: .8rem; }
}
/*
 * ★ CHARTE.CSS REPREND LA MAIN SUR LES SEUILS DE L'EN-TETE.
 *
 * `app.css` (ligne 168) porte encore sa propre regle `@media (max-width:1000px)`
 * qui masque le menu et affiche le burger. Tant que le seuil de la charte valait
 * lui aussi 1000 px, les deux coincidaient et personne ne pouvait s'en apercevoir.
 * En abaissant le seuil a 780 px, la regle heritee est devenue DOMINANTE entre
 * 780 et 1000 px : le menu restait masque alors qu'il y avait la place.
 *
 * On declare donc explicitement l'etat « bureau » au-dessus du seuil. `charte.css`
 * etant chargee APRES `app.css`, cette regle l'emporte a specificite egale.
 * ⚠ Ne pas supprimer en croyant a une redondance : sans elle, le seuil reel de
 *   l'en-tete redevient celui d'app.css, quoi qu'on ecrive plus bas.
 */
@media (min-width: 781px) {
  .nav-links { display: flex; }
  .nav-cta .btn { display: inline-flex; }
  .nav-toggle { display: none; }
}
@media (max-width: 780px) {            /* 629 + marge confortable */
  .nav-links, .nav-cta .btn { display: none; }
  .nav-toggle { display: inline-flex; }
}

@media (max-width: 1200px) {
  .cw-hero__stats { grid-template-columns: repeat(2, 1fr); }
  .cw-audience__grid { grid-template-columns: 1fr; }
  .cw-process__steps { grid-template-columns: repeat(2, 1fr); }
  .cw-blog__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .cw-why__grid { grid-template-columns: 1fr; }
  .cw-pricing__head { grid-template-columns: 1fr; gap: 1.2rem; }
  .cw-pricing__feats { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .cw-secteurs__grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .cw-blog__grid { grid-template-columns: 1fr; }
  .cw-process__steps { grid-template-columns: 1fr; }
  .cw-hero__actions .btn, .cw-cta__actions .btn { width: 100%; justify-content: center; }
}

/* ============================================================================
 * ASSISTANT DE CADRAGE (partials/assistant.php)
 * Panneau flottant en bas à droite, plein écran sur téléphone.
 * ⚠️ Il partage le coin bas-droit avec le bouton WhatsApp flottant : quand
 *    l'assistant est ouvert, `body.cw-asst-on` masque ce dernier, sinon les deux
 *    se superposent sur un écran de téléphone.
 * ========================================================================= */
.cw-asst {
  position: fixed; right: 20px; bottom: 20px; z-index: 1200;
  width: 380px; max-width: calc(100vw - 40px);
  height: 560px; max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line-strong);
  box-shadow: 0 25px 70px rgba(15, 23, 42, .28);
}
/*
 * ★ CORRECTIF DU 2026-09-06 — SANS CETTE LIGNE LA FENÊTRE NE SE FERME JAMAIS.
 *
 * `display: flex` ci-dessus écrase la règle `[hidden] { display: none }` de la feuille
 * de style du navigateur : une déclaration `display` d'auteur gagne toujours contre
 * elle. Conséquence observée par le client : le panneau restait affiché sur **toutes**
 * les pages, vide, et la croix de fermeture — qui pose `box.hidden = true` — n'avait
 * aucun effet visible.
 *
 * ⚠ RÈGLE GÉNÉRALE À RETENIR : dès qu'un élément piloté par l'attribut `hidden` reçoit
 *   un `display` dans le CSS, il lui faut sa propre règle `[hidden]`. La spécificité
 *   suffit ici (`.cw-asst[hidden]` = classe + attribut), aucun `!important` nécessaire.
 */
.cw-asst[hidden] { display: none; }
body.cw-asst-on .wa-float,
body.cw-asst-on .wa-bar { display: none; }

.cw-asst__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.1rem; background: var(--dark, #0f172a); color: #fff;
}
.cw-asst__head strong { display: block; font-size: .98rem; letter-spacing: -.01em; }
.cw-asst__head small { display: block; font-size: .76rem; color: #94a3b8; margin-top: .2rem; }
.cw-asst__head button {
  font-size: 1.6rem; line-height: 1; color: #94a3b8; padding: 0 .2rem; flex: none;
}
.cw-asst__head button:hover { color: #fff; }

.cw-asst__body { flex: 1; overflow-y: auto; padding: 1.1rem; display: flex; flex-direction: column; gap: .7rem; }
.cw-asst__msg { max-width: 88%; padding: .7rem .9rem; font-size: .9rem; line-height: 1.5; }
.cw-asst__msg--bot { background: var(--bg-soft); border-left: 3px solid var(--secondary); align-self: flex-start; }
.cw-asst__msg--moi { background: var(--primary); color: #fff; align-self: flex-end; }
.cw-asst__msg a { color: var(--primary); font-weight: 700; text-decoration: underline; }
.cw-asst__msg--moi a { color: #fff; }
.cw-asst__typing { color: var(--muted); font-style: italic; }

.cw-asst__sug { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1.1rem; }
.cw-asst__sug button {
  font-size: .76rem; font-weight: 700; padding: .45rem .7rem;
  border: 1px solid var(--line-strong); color: var(--primary); background: #fff;
}
.cw-asst__sug button:hover { border-color: var(--secondary); color: var(--secondary); }

.cw-asst__form { display: flex; gap: .5rem; padding: .9rem 1.1rem .5rem; }
.cw-asst__form input {
  flex: 1; min-width: 0; padding: .7rem .8rem; font: inherit; font-size: .9rem;
  border: 1px solid var(--line-strong); background: #fff; color: var(--ink);
}
.cw-asst__form input:focus { outline: 2px solid var(--secondary); outline-offset: -2px; }
.cw-asst__form button {
  flex: none; width: 44px; display: grid; place-items: center;
  background: var(--secondary); color: var(--dark, #0f172a);
}
.cw-asst__form button svg { width: 20px; height: 20px; }
.cw-asst__foot { padding: 0 1.1rem 1rem; font-size: .74rem; color: var(--muted); }
.cw-asst__foot a { color: var(--primary); font-weight: 600; text-decoration: underline; }

@media (max-width: 560px) {
  .cw-asst {
    right: 0; bottom: 0; width: 100%; max-width: 100%;
    height: 100%; max-height: 100%; border: 0;
  }
}

/* ── 9. Apparition au défilement (app.js pose la classe `.in`) ──────────── */
/*
 * ⚠️ FILET DE SÉCURITÉ. app.css pose `.reveal { opacity: 0 }` : sans JavaScript pour
 *    ajouter `.in`, le contenu reste invisible POUR TOUJOURS. On ne masque donc que
 *    si le marqueur `html.cw-js` est présent (posé par head.php avant le rendu).
 *    Pas de JS ⇒ tout est visible immédiatement, sans animation. Ne jamais revenir
 *    à un `.reveal { opacity: 0 }` inconditionnel.
 */
.reveal { opacity: 1; transform: none; }
html.cw-js .reveal { opacity: 0; transform: translateY(30px); }
html.cw-js .reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }

/* ============================================================================
 * ★ PAGES DE SERVICE — SECTIONS DE MISE EN AVANT (ajoutées le 2026-09-06)
 *
 * Demande du client : « plus de texte et d'image, une page avec effet wahou ».
 * Ce qui produit cet effet ici, et pourquoi ces choix-là :
 *   - `.cw-svchero` — un hero en dégradé encre → bleu marine avec l'illustration en
 *     grand à droite. C'est le premier écran : c'est là que « wahou » se gagne ou se
 *     perd. L'illustration déborde légèrement vers le bas, ce qui donne la profondeur
 *     qu'un bloc sagement aligné n'a jamais ;
 *   - `.cw-show` — texte et illustration en alternance gauche/droite. C'est le format
 *     qui permet d'écrire beaucoup sans faire un mur de texte : chaque bloc porte une
 *     idée, et l'œil se repose sur l'image entre deux ;
 *   - `.cw-figures` — une bande de chiffres. ⚠ Aucun chiffre inventé : délais, nombre
 *     de pages, langues. Le site s'interdit les statistiques non vérifiables (§12) ;
 *   - `.cw-inout` — deux colonnes « compris / pas compris ». C'est le bloc le plus utile
 *     commercialement : dire ce qu'on ne fait pas rassure plus qu'une promesse de plus ;
 *   - `.cw-mark` — une phrase forte en grand. ⚠ JAMAIS un témoignage : le site n'en
 *     publie aucun (§12). Une affirmation de méthode, dont nous répondons.
 *
 * ⚠ Préfixe `cw-` obligatoire (CLAUDE.md §7) : `.show`, `.figures`, `.hero` sont
 *   déjà pris ou trop génériques dans app.css.
 * ⚠ Toutes les animations sont en `transform`/`opacity` uniquement, donc composées par
 *   le GPU, et `prefers-reduced-motion` les coupe — un effet ne doit jamais être un
 *   problème d'accessibilité.
 * ========================================================================= */

/* ---- Hero de page de service ------------------------------------------- */
.cw-svchero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--dark) 0%, var(--primary) 62%, #24499f 100%);
  color: #fff;
  padding: 54px 0 0;
}
.cw-svchero::after {          /* halo ambré, la seule licence décorative de la charte */
  content: '';
  position: absolute; right: -140px; top: -160px;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, .30), transparent 62%);
  pointer-events: none;
}
.cw-svchero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 46px; align-items: end;
}
.cw-svchero__txt { padding-bottom: 58px; }
.cw-svchero .breadcrumb,
.cw-svchero .breadcrumb a { color: #b7c6e8; }
.cw-svchero .breadcrumb a:hover { color: #fff; }
.cw-svchero h1 {
  font-size: clamp(1.9rem, 4vw, 3.05rem); line-height: 1.08;
  letter-spacing: -.02em; color: #fff; margin: 12px 0 16px;
}
.cw-svchero h1 em { font-style: normal; color: #93b4fb; }
.cw-svchero__lead { font-size: 1.06rem; line-height: 1.75; color: #d5deef; max-width: 56ch; }
.cw-svchero__tag {
  display: inline-block; font-size: .74rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); border: 1px solid rgba(245, 158, 11, .5);
  padding: .38rem .7rem;
}
.cw-svchero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.cw-svchero__pts {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 26px;
  font-size: .87rem; color: #b7c6e8;
}
.cw-svchero__pts span { display: inline-flex; align-items: center; gap: 8px; }
.cw-svchero__pts .cw-ic { width: 16px; height: 16px; color: var(--accent); }
/* L'illustration déborde volontairement de 26px : elle « sort » du hero et crée la
   profondeur. `margin-bottom: -26px` plutôt qu'une translation, pour que le bloc
   suivant ne passe pas dessous. */
.cw-svchero__illus { margin-bottom: -26px; }
.cw-svchero__illus img {
  display: block; width: 100%; height: auto; max-width: none;
  filter: drop-shadow(0 26px 46px rgba(2, 8, 23, .42));
}

/* ---- Bandes de texte + illustration en alternance ---------------------- */
.cw-show { padding: 74px 0; }
.cw-show--soft { background: var(--bg-soft); }
.cw-show__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.cw-show--flip .cw-show__grid > .cw-show__txt { order: 2; }
.cw-show__txt h2 {
  font-size: clamp(1.4rem, 2.5vw, 2.05rem); line-height: 1.16;
  letter-spacing: -.02em; margin: 10px 0 16px;
}
.cw-show__txt p { line-height: 1.85; margin-bottom: 1rem; }
.cw-show__txt p:last-child { margin-bottom: 0; }
.cw-show__list { list-style: none; margin: 18px 0 0; padding: 0; }
.cw-show__list li {
  display: flex; gap: 11px; align-items: flex-start;
  padding: .5rem 0; line-height: 1.7; font-size: .95rem;
}
.cw-show__list .cw-ic { width: 17px; height: 17px; flex: none; margin-top: 4px; color: var(--secondary); }
.cw-show__illus {
  background: var(--bg-soft); border: 1px solid var(--line);
  padding: 22px; position: relative;
}
.cw-show--soft .cw-show__illus { background: #fff; }
.cw-show__illus img { display: block; width: 100%; height: auto; max-width: none; }

/* ---- Bande de chiffres ------------------------------------------------- */
.cw-figures { background: var(--dark); color: #fff; padding: 46px 0; }
.cw-figures__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.cw-figures__it { text-align: center; }
.cw-figures__n {
  display: block; font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 900;
  letter-spacing: -.03em; color: var(--secondary); line-height: 1;
}
.cw-figures__l {
  display: block; margin-top: 9px; font-size: .82rem; font-weight: 600;
  color: #94a3b8; line-height: 1.5;
}

/* ---- Compris / pas compris --------------------------------------------- */
.cw-inout__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.cw-inout__col { border: 1px solid var(--line); padding: 30px 28px; background: #fff; }
.cw-inout__col--no { background: var(--bg-soft); }
.cw-inout__col h3 {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.06rem; margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.cw-inout__col--yes h3 .cw-ic { color: var(--secondary); }
.cw-inout__col--no  h3 .cw-ic { color: #b4bdcb; }
.cw-inout__col ul { list-style: none; margin: 0; padding: 0; }
.cw-inout__col li {
  display: flex; gap: 11px; align-items: flex-start;
  padding: .55rem 0; font-size: .93rem; line-height: 1.7;
}
.cw-inout__col li::before {
  content: ''; flex: none; width: 7px; height: 7px; margin-top: 9px;
  background: var(--secondary);
}
.cw-inout__col--no li::before { background: #c3cbd8; }
.cw-inout__col--no li { color: var(--muted); }

/* ---- Phrase forte ------------------------------------------------------ */
.cw-mark { padding: 66px 0; background: var(--bg-soft); }
.cw-mark__in {
  max-width: 900px; margin-inline: auto; text-align: center;
  border-top: 3px solid var(--secondary); padding-top: 34px;
}
.cw-mark p {
  font-size: clamp(1.15rem, 2.3vw, 1.62rem); font-weight: 600; line-height: 1.5;
  letter-spacing: -.015em; color: var(--dark);
}
.cw-mark span {
  display: block; margin-top: 18px; font-size: .8rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}

/* ---- Adaptation aux petits écrans -------------------------------------- */
@media (max-width: 980px) {
  .cw-svchero__grid { grid-template-columns: 1fr; gap: 8px; }
  .cw-svchero__txt  { padding-bottom: 30px; }
  .cw-svchero__illus { max-width: 560px; margin-inline: auto; }
  .cw-show__grid { grid-template-columns: 1fr; gap: 30px; }
  /* ⚠ Sur une colonne, l'alternance gauche/droite n'a plus de sens : on remet le
     texte AVANT l'illustration partout, sinon une image ouvre la section sans qu'on
     sache de quoi elle parle. */
  .cw-show--flip .cw-show__grid > .cw-show__txt { order: 0; }
  .cw-figures__grid { grid-template-columns: repeat(2, 1fr); gap: 30px 18px; }
  .cw-inout__grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  /* ★ CORRECTIF DU 2026-09-06 — DÉBORDEMENT HORIZONTAL SUR TÉLÉPHONE.
     `app.css` pose `.btn { white-space: nowrap }`. Un libellé long ne se coupe donc
     jamais : le bouton « Les tarifs, prestation par prestation » mesurait 453 px et
     élargissait le DOCUMENT à 473 px pour un écran de 375. Conséquence trompeuse :
     tout le reste débordait à son tour — barre WhatsApp, bandeau cookies — et on
     cherchait le problème dans ces éléments-là.
     ⚠ On n'autorise le retour à la ligne QUE sous 520 px : au-dessus, `nowrap` garde
       les boutons sur une ligne, ce qui est le rendu voulu. */
  .btn { white-space: normal; text-align: center; }

  .cw-show { padding: 50px 0; }
  .cw-svchero__pts { gap: 8px 16px; font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cw-show__illus, .cw-svchero__illus { transition: none !important; }
}