/* ── blocks/hero.css ── */
/* hero.css — repris de la mono-page (main.css:190-247), échelle d'espacement
   et breakpoints adaptés. */

.hero{padding-block:var(--sp-8) var(--sp-9);position:relative}
.hero-grid{display:grid;gap:var(--sp-7);align-items:center}
.hero-txt .h-xl{margin:var(--sp-4) 0 var(--sp-5);max-width:18ch}

/* Chaque mot animé EST l'em dégradé : animer un descendant d'un
   background-clip:text rend le texte transparent pendant la transition.
   L'em reste INLINE : en inline-block, sa boîte réserverait la largeur de sa
   plus longue ligne — seule l'opacité s'anime ici. */
.hero-swap{transition:opacity var(--dur-1) var(--ease)}
.hero-swap.out{opacity:0}
.hero-sub{max-width:52ch}
.hero-met{
  appearance:none;-webkit-appearance:none;display:inline-block;
  font-family:var(--font-body);font-size:max(16px,.92em);font-weight:700;
  color:var(--accent-deep);background:var(--light);border:1.5px solid var(--light-line);
  border-radius:var(--pill);padding:.28em 2.1em .34em .8em;margin:0 .1em;cursor:pointer;
  vertical-align:baseline;max-width:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235646d6' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7em center;background-size:.85em;
  transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);
}
.hero-met:hover{border-color:var(--accent)}
.hero-met:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

.hero-cta{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-6)}
.hero-chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-6);margin-top:var(--sp-5)}
.hero-chips .chip{background:none;border:0;padding:0;border-radius:0;font-weight:700;color:var(--ink-soft)}
.hero-chips .chip .ic{color:var(--success)}

/* -- vitrine de démo -- */
.hero-stage{position:relative}
.stage-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.stage-devs{display:inline-flex;gap:3px;background:#fff;border:1px solid var(--light-line);border-radius:var(--pill);padding:3px}
.stage-dev{display:inline-flex;align-items:center;gap:6px;min-height:34px;font-family:var(--font-body);font-size:.75rem;font-weight:700;color:var(--muted);background:none;border:0;border-radius:var(--pill);padding:.5em .8em;cursor:pointer;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.stage-dev .ic{width:14px;height:14px}
.stage-dev.is-on{background:var(--ink);color:#fff}
.stage-link{display:inline-flex;align-items:center;gap:7px;min-height:34px;font-size:.84rem;font-weight:700;color:var(--accent-deep);text-decoration:none;white-space:nowrap}
.stage-link:hover{text-decoration:underline;text-underline-offset:3px}

.stage-frames{transition:opacity .22s var(--ease)}
.stage-frames.fade{opacity:0}

.stage-laptop{position:relative}
.stage-screen{background:linear-gradient(180deg,#262b35,#151920);border-radius:16px 16px 0 0;padding:10px 10px 12px;box-shadow:var(--shadow-pop)}
.stage-bar{display:flex;align-items:center;gap:6px;padding:2px 4px 10px}
.stage-bar i{width:8px;height:8px;border-radius:50%;background:#48505e;flex:none}
.stage-url{flex:1;margin-left:6px;font-family:ui-monospace,'SF Mono',Consolas,monospace;font-size:11px;color:#98a2b3;background:#0e1218;border-radius:6px;padding:4px 9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage-view{aspect-ratio:16/10;overflow:hidden;border-radius:6px;background:#fff}
.stage-view img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.stage-base{height:12px;background:linear-gradient(180deg,#cdd2da,#98a0ab);border-radius:0 0 12px 12px;position:relative;box-shadow:0 22px 36px -20px rgba(10,37,64,.4)}
.stage-base::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:16%;height:5px;background:#7d8590;border-radius:0 0 8px 8px}

.stage-phone{position:relative;width:min(262px,64%);margin:0 auto;background:linear-gradient(180deg,#262b35,#14181f);border-radius:42px;padding:9px;box-shadow:var(--shadow-pop)}
.ph-screen{position:relative;border-radius:34px;overflow:hidden;background:#0e1218;padding-top:24px}
.ph-screen img{display:block;width:100%;height:auto;border-radius:0 0 28px 28px}
.stage-notch{position:absolute;top:5px;left:50%;transform:translateX(-50%);width:68px;height:15px;background:#262b35;border-radius:999px;z-index:2}
.stage-home{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:88px;height:4px;border-radius:999px;background:rgba(14,18,24,.32);z-index:2}
.stage-note{margin-top:var(--sp-3);font-size:.75rem;color:var(--muted);line-height:1.5}

@media (min-width:900px){
  .hero-grid{grid-template-columns:1.02fr .98fr}
}

@media (prefers-reduced-motion:reduce){
  .hero-swap{transition:none}
  .stage-frames{transition:none}
}

/* ── blocks/hero-accueil.css ── */
/* hero-accueil.css — décor de scène du hero d'accueil (v3.1).
   Le balisage « stage » (vitrine, ordinateur/mobile) vit dans hero.css ;
   ici : fond maillé + grille fine, orbes en dérive, cartes flottantes en
   verre, marquee des métiers. Aucune image hors captures de démo. */

.hero-home{overflow:clip;isolation:isolate;padding-bottom:0}

/* Mesh pastel (signature v1) + grille fine « blueprint », masqués en radial. */
.hero-home::before{content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(52% 58% at 86% 4%, rgba(108,92,231,.17), transparent 62%),
    radial-gradient(44% 52% at 4% 88%, rgba(255,111,165,.13), transparent 60%),
    radial-gradient(32% 36% at 55% 108%, rgba(255,182,72,.14), transparent 65%);
}
.hero-home::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(108,92,231,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108,92,231,.07) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(75% 68% at 58% 32%, #000 22%, transparent 100%);
  -webkit-mask-image:radial-gradient(75% 68% at 58% 32%, #000 22%, transparent 100%);
}

.hero-orb-a{width:420px;height:420px;top:-160px;right:-120px;animation:orb-drift 14s var(--ease) infinite}
.hero-orb-b{width:300px;height:300px;bottom:-40px;left:-140px;animation:orb-drift 18s var(--ease) infinite reverse}
.hero-orb-c{width:220px;height:220px;top:34%;left:38%;animation:orb-drift 22s var(--ease) infinite}

/* Titre d'affiche : plus grand que le h1 courant, resserré, équilibré. */
.hero-title{font-family:var(--font-title);font-weight:700;font-size:var(--fs-display);line-height:1.04;letter-spacing:-.022em;color:var(--ink);max-width:15ch;text-wrap:balance;margin:var(--sp-4) 0 var(--sp-5)}

/* -- Cartes flottantes — verre dépoli, lévitation lente (transform only) --- */
.fl-card{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:.55em;
  padding:.7em 1em;font-size:.8rem;font-weight:700;color:var(--ink-soft);line-height:1.25;white-space:nowrap}
.fl-card .ic{color:var(--accent);width:1.15em;height:1.15em}
.fl-card b{color:var(--ink)}
.fl-a{top:15%;left:-34px;animation:float-y 7s var(--ease) infinite}
.fl-b{top:46%;right:-36px;flex-wrap:wrap;animation:float-y-soft 8.5s var(--ease) infinite}
.fl-c{bottom:70px;left:-40px;animation:float-y 9.5s var(--ease) infinite reverse}
.fl-stars{font-style:normal;color:#f59e0b;letter-spacing:.1em;font-size:.78rem}

/* -- Marquee des métiers — pleine largeur, en pied de hero ----------------- */
.hero-marquee{margin-top:var(--sp-8);padding-block:var(--sp-4);border-top:1px solid var(--light-line);border-bottom:1px solid var(--light-line);background:rgba(255,255,255,.6)}
.hm-item{display:inline-flex;align-items:center;gap:var(--sp-7);font-family:var(--font-display);font-weight:700;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
.hm-item::after{content:"";width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--grad-c),var(--grad-g));flex:none}
.hm-dup{display:contents}

@media (max-width:899px){
  /* Sous le passage en deux colonnes, la scène est déjà dense : les cartes
     flottantes se retirent toutes pour laisser la vitrine respirer. */
  .fl-card{display:none}
  .hero-marquee{margin-top:var(--sp-7)}
}

/* ── blocks/hero-page.css ── */
/* hero-page.css — hero des pages internes (v3.1) : copie à gauche, scène
   illustrée à droite (pictogrammes SVG, aucune image). Variante centrée
   (.hp-centre) quand la page n'a pas de scène. */

.hp{position:relative;overflow:clip;isolation:isolate;padding-block:var(--sp-8) var(--sp-9)}
.hp::before{content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(52% 58% at 88% 0%, rgba(108,92,231,.16), transparent 62%),
    radial-gradient(40% 48% at 0% 96%, rgba(255,111,165,.11), transparent 60%);
}
.hp::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(108,92,231,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108,92,231,.06) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(72% 66% at 62% 30%, #000 20%, transparent 100%);
  -webkit-mask-image:radial-gradient(72% 66% at 62% 30%, #000 20%, transparent 100%);
}
.hp-bg-a{width:360px;height:360px;top:-150px;right:-110px;animation:orb-drift 16s var(--ease) infinite}
.hp-bg-b{width:260px;height:260px;bottom:-120px;left:-120px;animation:orb-drift 20s var(--ease) infinite reverse}

.hp-grid{display:grid;gap:var(--sp-7);align-items:center;position:relative}
.hp-title{font-size:var(--fs-display);line-height:1.04;letter-spacing:-.022em;max-width:16ch;text-wrap:balance;margin:var(--sp-4) 0 var(--sp-5)}
.hp-txt .lede{max-width:52ch}

.hp-centre .hp-grid{display:block;max-width:52rem;margin-inline:auto;text-align:center}
.hp-centre .hp-title{margin-inline:auto}
.hp-centre .lede{margin-inline:auto}
.hp-centre .hero-cta,.hp-centre .hero-chips{justify-content:center}

/* -- Scène : cadre arrondi, anneau d'orbite, pictogramme flottant ---------- */
.hp-stage{position:relative;display:flex;flex-direction:column;gap:var(--sp-3)}
.hp-orb-a{width:220px;height:220px;top:-60px;right:-40px;animation:orb-drift 13s var(--ease) infinite}
.hp-orb-c{width:150px;height:150px;bottom:-40px;left:-30px;animation:orb-drift 17s var(--ease) infinite reverse}

.hp-art{position:relative;isolation:isolate;aspect-ratio:1/1;max-width:430px;margin-inline:auto;width:100%;
  display:grid;place-items:center;
  background:linear-gradient(160deg,#fff 20%,var(--accent-soft));border:1px solid var(--light-line);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-pop);overflow:hidden}
.hp-art::before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:radial-gradient(var(--dot) 1px, transparent 1.4px);background-size:20px 20px;
  mask-image:radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 100%);
  -webkit-mask-image:radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 100%);
}
.hp-art svg{width:56%;height:auto;color:var(--ink);animation:float-y-soft 8s var(--ease) infinite}
.hpa-b{color:var(--accent)}

/* Anneau d'orbite + satellites — le marqueur « high tech » des scènes.
   L'anneau tourne sur lui-même (motif pointillé) ; les satellites flottent. */
.hp-ring{position:absolute;width:78%;aspect-ratio:1;border:1px dashed rgba(108,92,231,.35);border-radius:50%;animation:hp-spin 26s linear infinite}
.hp-dot{position:absolute;width:10px;height:10px;border-radius:50%}
.hp-dot-a{background:var(--grad-p);top:10.5%;left:calc(50% - 5px)}
.hp-dot-b{background:var(--grad-g);bottom:16%;right:14%;animation:float-y 6s var(--ease) infinite}

@keyframes hp-spin{to{transform:rotate(360deg)}}

.hp-note{font-size:.75rem;color:var(--muted);line-height:1.5;text-align:center}

@media (min-width:900px){
  .hp-grid{grid-template-columns:1.05fr .95fr}
}

@media (prefers-reduced-motion:reduce){
  .hp-ring{animation:none}
}

/* ── blocks/stats-strip.css ── */
/* stats-strip.css — bandeau de chiffres clés (accueil, v3.1).
   Chiffres en condensé capitale (.num), filets fins entre les items. */

.ss-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-6) var(--sp-5);margin:0;padding:var(--sp-6) 0;border-top:1px solid var(--light-line);border-bottom:1px solid var(--light-line)}
.ss-item{display:flex;flex-direction:column-reverse;gap:var(--sp-1)}
.ss-item dt{margin:0}
.ss-item dd{margin:0}
.ss-val{display:flex;align-items:baseline;gap:.12em;color:var(--ink)}
.ss-val .num{font-size:clamp(2.4rem,4.5vw,3.4rem);line-height:1;letter-spacing:.01em}
.ss-val span{font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--accent-deep)}
.ss-label{font-size:var(--fs-sm);color:var(--muted);line-height:1.45;max-width:22ch}

@media (min-width:900px){
  .ss-grid{grid-template-columns:repeat(4,1fr);gap:var(--sp-7)}
  .ss-item{position:relative}
  .ss-item + .ss-item::before{content:"";position:absolute;left:calc(var(--sp-7) / -2);top:8%;bottom:8%;width:1px;background:linear-gradient(180deg,transparent,var(--light-line),transparent)}
}

/* ── blocks/timeline.css ── */
/* timeline.css — frise de la méthode, sur section sombre (accueil, v3.1).
   Trois cartes en verre reliées par un filet dégradé ; rail vertical sur
   mobile. Numéros géants dégradés, flottant librement derrière le titre. */

.tl{list-style:none;display:grid;gap:var(--sp-5);position:relative;margin:0;padding:0}

.tl-step{position:relative;background:rgba(255,255,255,.05);border:1px solid var(--ink-line);
  border-radius:var(--radius-lg);padding:var(--sp-6) var(--sp-5) var(--sp-5);
  transition:filter var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.tl-step:hover{border-color:rgba(140,124,255,.45)}
.tl-step p{font-size:var(--fs-sm);line-height:1.6;color:#b9c4d4}
.tl-t{color:#fff;font-size:var(--fs-xl);margin:var(--sp-3) 0 var(--sp-2)}

.tl-num{font-family:var(--font-display);font-weight:700;font-size:3.2rem;line-height:1;
  background:var(--grad-sig);-webkit-background-clip:text;background-clip:text;color:transparent;
  display:inline-block}

/* Le filet qui relie les étapes — vertical sur mobile, horizontal ensuite. */
@media (max-width:899px){
  .tl{padding-left:var(--sp-4)}
  .tl::before{content:"";position:absolute;left:-2px;top:24px;bottom:24px;width:2px;
    background:linear-gradient(180deg,var(--grad-c),var(--grad-g) 55%,var(--grad-p));border-radius:2px;opacity:.6}
}

@media (min-width:900px){
  .tl{grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
  .tl::before{content:"";position:absolute;top:-2px;left:8%;right:8%;height:2px;
    background:linear-gradient(90deg,var(--grad-c),var(--grad-g) 55%,var(--grad-p));border-radius:2px;opacity:.55}
  .tl-step{padding:var(--sp-6)}
}

/* Sortie de frise — note + lien sous les étapes, sur section sombre. */
.tl-out{margin-top:var(--sp-6);text-align:center;font-size:var(--fs-sm);color:#b9c4d4}
.tl-out a{display:inline-flex;align-items:center;gap:7px;margin-left:8px;font-weight:700;color:#c9c2ff;text-decoration:none}
.tl-out a:hover{text-decoration:underline;text-underline-offset:3px}

/* ── blocks/offre-resume.css ── */
/* offre-resume.css — récapitulatif d'offre de l'accueil (v3.1).
   Deux colonnes : la carte de prix à bord dégradé, puis le détail (compris,
   options, CTA). Tous les montants viennent du catalogue — zéro dur ici. */

.or-grid{display:grid;gap:var(--sp-6)}

.or-price{padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-4)}
.or-pack{font-family:var(--font-display);font-weight:700;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep)}
.or-lines{display:grid;gap:var(--sp-3)}
.or-line{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);padding-bottom:var(--sp-3);border-bottom:1px dashed var(--light-line)}
.or-k{font-size:var(--fs-sm);font-weight:700;color:var(--muted)}
.or-v{display:flex;align-items:baseline;gap:.5em}
.or-v .num{font-size:2.5rem;line-height:1;color:var(--ink)}
.or-v small{font-size:var(--fs-sm);color:var(--muted)}
.or-v s{color:var(--muted);font-size:1.1rem}
.or-launch{display:flex;gap:.5em;align-items:flex-start;font-size:var(--fs-sm);color:var(--accent-deep);background:var(--accent-soft);border-radius:var(--radius);padding:.7em .9em;font-weight:700}
.or-launch .ic{flex:none;margin-top:.15em}
.or-gar{list-style:none;display:grid;gap:var(--sp-2);margin:0;padding:0}
.or-gar li{display:flex;gap:.55em;align-items:flex-start;font-size:var(--fs-sm);color:var(--ink-soft)}
.or-gar .ic{color:var(--success);flex:none;margin-top:.2em}
.or-tva{font-size:.75rem;color:var(--muted)}

.or-detail{display:flex;flex-direction:column;gap:var(--sp-4)}
.or-inc-t{font-family:var(--font-display);font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.or-inc{list-style:none;display:grid;gap:var(--sp-2);margin:0;padding:0}
.or-inc li{display:flex;gap:.55em;align-items:flex-start;font-size:var(--fs-md);color:var(--ink-soft)}
.or-inc .ic{color:var(--success);flex:none;margin-top:.25em}

.or-opts{display:grid;gap:var(--sp-3)}
.or-opt{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  background:var(--light);border:1px solid var(--light-line);border-radius:var(--radius);padding:var(--sp-4)}
.or-opt-t{display:flex;flex-direction:column;gap:2px}
.or-opt-t b{color:var(--ink);font-size:var(--fs-md)}
.or-opt-t span{font-size:var(--fs-sm);color:var(--muted)}
.or-opt-p{flex:none;text-align:right;font-weight:700;color:var(--ink);font-size:var(--fs-md)}
.or-opt-p i{display:block;font-style:normal;font-weight:400;font-size:var(--fs-xs);color:var(--muted)}
.or-opt.is-soon{opacity:.75}
.or-soon{position:absolute;top:-9px;right:14px;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8a5a00;background:#fff3d6;border:1px solid #f2dc9c;border-radius:var(--pill);padding:.2em .7em}

.or-ctas{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-2)}

@media (min-width:900px){
  .or-grid{grid-template-columns:5fr 7fr;gap:var(--sp-8);align-items:start}
}

/* ── blocks/qui.css ── */
/* qui.css — « qui fait le travail » (v3.1) : photo de Yoann cadrée dans une
   lueur de charte, texte à côté. La photo est la seule image d'illustration
   du site (avec les captures de démo). */

.qui-grid{display:grid;gap:var(--sp-7);align-items:center}

.qui-photo{position:relative;max-width:400px;margin-inline:auto;width:100%}
.qui-photo img{border-radius:var(--radius-xl);position:relative;z-index:1;box-shadow:var(--shadow-pop)}
.qui-glow{position:absolute;inset:-8%;border-radius:36px;z-index:0;
  background:conic-gradient(from 140deg, var(--grad-c), var(--grad-g), var(--grad-p), var(--grad-c));
  filter:blur(38px);opacity:.5}
.qui-photo::after{content:"";position:absolute;inset:0;z-index:2;border-radius:var(--radius-xl);
  border:1px solid rgba(255,255,255,.35);pointer-events:none}

.qui-t{margin:var(--sp-3) 0 var(--sp-4);font-size:var(--fs-2xl)}
.qui-txt p + p{margin-top:var(--sp-4)}
.qui-txt .eyebrow{margin-bottom:var(--sp-1)}
.qui-sign{font-weight:700;color:var(--ink)}

@media (min-width:900px){
  .qui-grid{grid-template-columns:2fr 3fr;gap:var(--sp-8)}
}

/* ── blocks/domaines.css ── */
/* domaines.css — cartes des domaines sur-mesure (page /sur-mesure/, v3.1).
   Grille de .gcard : icône en médaillon, description, livrables à coches,
   pastille « Sur devis » alignée en bas quelle que soit la hauteur. */

.dom-grid{display:grid;gap:var(--sp-5)}

.dom-card{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-6) var(--sp-5)}
.dom-head{display:flex;align-items:center;gap:var(--sp-3)}
.dom-ic{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:44px;height:44px;border-radius:var(--radius);background:var(--accent-soft);color:var(--accent-deep)}
.dom-ic .ic{width:22px;height:22px}
.dom-t{font-size:var(--fs-xl)}
.dom-desc{font-size:var(--fs-sm);line-height:1.6;color:var(--ink-soft)}
.dom-list{list-style:none;display:grid;gap:var(--sp-2);margin:0;padding:var(--sp-3) 0 0;border-top:1px solid var(--light-line)}
.dom-list li{display:flex;gap:.55em;align-items:flex-start;font-size:var(--fs-sm);color:var(--ink-soft)}
.dom-list .ic{color:var(--success);flex:none;margin-top:.2em}
.dom-devis{margin-top:auto;align-self:flex-start}

/* Sortie de grille — note honnête + lien vers le catalogue. */
.dom-note{margin:var(--sp-6) auto 0;max-width:52rem;text-align:center;font-size:var(--fs-sm);color:var(--muted)}
.dom-note a{color:var(--accent-deep);font-weight:700;text-decoration:none}
.dom-note a:hover{text-decoration:underline;text-underline-offset:3px}

@media (min-width:600px){
  .dom-grid{grid-template-columns:repeat(2,1fr)}
}

@media (min-width:1200px){
  .dom-grid{grid-template-columns:repeat(3,1fr)}
}

/* ── blocks/processus.css ── */
/* processus.css — frise du déroulé sur-mesure (page /sur-mesure/, v3.1).
   Cinq cartes en verre sur section sombre : rail dégradé vertical sur
   mobile, grille 3 colonnes à 900, frise à 5 colonnes reliée par un filet
   horizontal à 1200. Numéros dégradés — même famille que timeline.css. */

.pr{list-style:none;display:grid;gap:var(--sp-5);position:relative;margin:0;padding:0 0 0 var(--sp-4)}
.pr::before{content:"";position:absolute;left:-2px;top:24px;bottom:24px;width:2px;
  background:linear-gradient(180deg,var(--grad-c),var(--grad-g) 55%,var(--grad-p));border-radius:2px;opacity:.6}

.pr-step{position:relative;background:rgba(255,255,255,.05);border:1px solid var(--ink-line);
  border-radius:var(--radius-lg);padding:var(--sp-5);
  transition:filter var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.pr-step:hover{border-color:rgba(140,124,255,.45)}
.pr-step p{font-size:var(--fs-sm);line-height:1.6;color:#b9c4d4}
.pr-t{color:#fff;font-size:var(--fs-lg);margin:var(--sp-2) 0}
.pr-num{font-family:var(--font-display);font-weight:700;font-size:2.6rem;line-height:1;
  background:var(--grad-sig);-webkit-background-clip:text;background-clip:text;color:transparent;
  display:inline-block}

/* Sortie de frise — note + lien sous les étapes, sur section sombre. */
.pr-out{margin-top:var(--sp-6);text-align:center;font-size:var(--fs-sm);color:#b9c4d4}
.pr-out a{display:inline-flex;align-items:center;gap:7px;min-height:44px;margin-left:8px;font-weight:700;color:#c9c2ff;text-decoration:none}
.pr-out a:hover{text-decoration:underline;text-underline-offset:3px}

@media (min-width:900px){
  .pr{grid-template-columns:repeat(3,1fr);gap:var(--sp-5);padding-left:0}
  .pr::before{content:none}
}

@media (min-width:1200px){
  .pr{grid-template-columns:repeat(5,1fr);gap:var(--sp-4)}
  .pr::before{content:"";left:6%;right:6%;top:-2px;bottom:auto;width:auto;height:2px;
    background:linear-gradient(90deg,var(--grad-c),var(--grad-g) 55%,var(--grad-p))}
}

/* ── blocks/famille-bannieres.css ── */
/* famille-bannieres.css — bannières landing des familles (hub /activites/,
   v3.1) et habillage propre aux pages famille :
     .fb-*  bannières du hub + section finale de conversion
     .fa-*  blocs des pages famille (apports en cartes, bandeau offre, CTA)
   Aucun déplacement au survol ; condensé capitale via les classes .num /
   .tag-pill existantes, jamais de font-family ajoutée ici. */

/* -- Bannières du hub ---------------------------------------------------- */

.fb-stack{display:grid;gap:var(--sp-6)}

.fb{position:relative;isolation:isolate;overflow:clip;display:grid;gap:var(--sp-6);align-items:center;
  padding:var(--sp-6) var(--sp-5);
  background:var(--light);border:1px solid var(--light-line);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm)}
/* Pointillés « blueprint » en filigrane, masqués vers le côté illustration. */
.fb::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(var(--dot) 1px, transparent 1.4px);background-size:22px 22px;
  mask-image:radial-gradient(62% 78% at 84% 18%, #000, transparent 100%);
  -webkit-mask-image:radial-gradient(62% 78% at 84% 18%, #000, transparent 100%)}

/* La famille ouverte : bord dégradé (motif .gcard) + ombre portée. */
.fb-live{border-color:transparent;box-shadow:var(--shadow-card);
  background:linear-gradient(var(--light), var(--light)) padding-box,
    linear-gradient(135deg, rgba(108,92,231,.55), rgba(255,111,165,.35) 50%, rgba(255,182,72,.4)) border-box}

.fb-meta{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.fb-idx{font-size:1.05rem;color:var(--muted);letter-spacing:.06em}
.fb-nom{font-size:var(--fs-2xl);letter-spacing:-.015em;text-wrap:balance}
.fb-hook{font-size:var(--fs-lg);line-height:1.55;color:var(--ink-soft);margin-top:var(--sp-3)}

.fb-stats{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-6);margin-top:var(--sp-5);
  padding-block:var(--sp-4);border-top:1px solid var(--light-line);border-bottom:1px solid var(--light-line)}
.fb-stat{display:grid;gap:3px}
.fb-stat b{font-size:1.45rem;line-height:1;color:var(--ink)}
.fb-stat s{font-size:.95rem;color:var(--muted)}
.fb-stat small{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.35;max-width:20ch}

.fb-preuves{list-style:none;display:grid;gap:var(--sp-3);margin-top:var(--sp-5)}
.fb-preuves li{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:.9375rem;line-height:1.55;color:var(--ink-soft)}
.fb-preuves b{color:var(--ink)}
.fb-pic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:10px;background:var(--accent-soft);color:var(--accent-deep)}
.fb-pic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.fb-chips{margin-top:var(--sp-5)}
.fb-chip-reste{color:var(--accent-deep);background:var(--accent-soft);border-color:transparent}

.fb-ctas{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}

/* Illustration : le cadre de hero-page (.hp-art), simplement resserré. */
.fb-vis{display:grid;place-items:center}
.fb-art{max-width:320px}

@media (min-width:600px){
  .fb{padding:var(--sp-7) var(--sp-6)}
}

@media (min-width:900px){
  .fb{grid-template-columns:1.08fr .92fr;gap:var(--sp-7);padding:var(--sp-7)}
  .fb-inv .fb-txt{order:2}
  .fb-inv .fb-vis{order:1}
  .fb-inv::before{mask-image:radial-gradient(62% 78% at 16% 18%, #000, transparent 100%);
    -webkit-mask-image:radial-gradient(62% 78% at 16% 18%, #000, transparent 100%)}
}

@media (min-width:1200px){
  .fb{padding:var(--sp-8) var(--sp-7)}
  .fb-art{max-width:360px}
}

/* -- Hub : section finale de conversion (sur .sec-dark) ------------------ */

.fb-final{display:grid;gap:var(--sp-5)}
.fb-door{display:grid;gap:var(--sp-3);align-content:start;justify-items:start;padding:var(--sp-6)}
.fb-door h3{font-size:var(--fs-xl)}
.fb-door p{font-size:.95rem;line-height:1.6}
.fb-door .btn{margin-top:var(--sp-2)}
.fb-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4em;color:var(--ink)}
.fb-price .num{font-size:1.7rem}
.fb-price s{color:var(--muted);font-size:1rem}
.sec-dark .fb-price{color:#fff}
.sec-dark .fb-price s{color:#93a3b8}
.fb-note{margin-top:var(--sp-6);text-align:center;font-size:var(--fs-sm)}

@media (min-width:900px){
  .fb-final{grid-template-columns:1fr 1fr;gap:var(--sp-6)}
}

/* -- Pages famille : « ce que le site apporte » en cartes ----------------- */

.fa-grid{display:grid;gap:var(--sp-4)}
.fa-card{padding:var(--sp-5)}
.fa-card h3{font-size:1.05rem;margin:var(--sp-3) 0 var(--sp-2)}
.fa-card p{font-size:.9rem;line-height:1.6;color:var(--muted)}
.fa-card > p{margin-top:var(--sp-3)}
.sec-dark .fa-card p{color:#b9c4d4}
.fa-ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:12px;background:var(--accent-soft);color:var(--accent-deep)}
.fa-ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sec-dark .fa-ic{background:rgba(108,92,231,.18);color:#c9c2ff}

@media (min-width:600px){
  .fa-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1200px){
  .fa-grid-4{grid-template-columns:repeat(4,1fr)}
  .fa-grid-3{grid-template-columns:repeat(3,1fr)}
}

/* -- Page famille riche : bandeau offre (rappel du prix, conversion) ------ */

.fa-band{display:grid;gap:var(--sp-6);padding:var(--sp-6) var(--sp-5)}
.fa-band h2{margin:var(--sp-3) 0 var(--sp-3)}
.fa-gar{list-style:none;display:grid;gap:var(--sp-2);margin-top:var(--sp-4)}
.fa-gar li{display:flex;gap:.6em;align-items:flex-start;font-size:.9rem;line-height:1.5;color:var(--ink-soft)}
.fa-gar .ic{color:var(--success);margin-top:.15em}
.fa-price{display:grid;gap:var(--sp-4);align-content:start;padding:var(--sp-5);
  background:var(--light-alt);border:1px solid var(--light-line);border-radius:var(--radius-lg)}
.fa-price-l{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3)}
.fa-price-l + .fa-price-l{padding-top:var(--sp-3);border-top:1px solid var(--light-line)}
.fa-price-k{font-size:.85rem;font-weight:700;color:var(--muted)}
.fa-price-v .num{font-size:1.9rem;color:var(--ink)}
.fa-price-v s{color:var(--muted);font-size:1.05rem;margin-left:.35em}
.fa-price-v small{font-size:.9rem;color:var(--muted)}
.fa-price .btn{width:100%}
.fa-tva{font-size:var(--fs-xs);color:var(--muted);line-height:1.5}

@media (min-width:900px){
  .fa-band{grid-template-columns:1.05fr .95fr;gap:var(--sp-7);padding:var(--sp-7)}
}

/* -- Pages famille légères : exemples centrés + carte CTA maquette -------- */

.fa-ex .gm-chips{justify-content:center;max-width:44rem;margin-inline:auto}

.fa-cta{display:grid;justify-items:center;gap:var(--sp-4);padding:var(--sp-7) var(--sp-6);text-align:center}
.fa-cta p{max-width:52ch;color:var(--ink-soft)}
.fa-cta .hero-cta{justify-content:center;margin-top:var(--sp-2)}

/* ── blocks/grille-familles.css ── */
/* grille-familles.css — cartes des 5 familles d'activité (v3.1) : filet
   dégradé en tête, index en filigrane, pastille « En ligne » pour la famille
   ouverte. Aucun déplacement au survol — ombre et filet seulement. */

.gf-grid{display:grid;gap:var(--sp-4)}
.gf-card{
  position:relative;display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-6) var(--sp-5) var(--sp-5);
  background:var(--light);border:1px solid var(--light-line);border-radius:var(--radius-lg);
  text-decoration:none;box-shadow:var(--shadow-sm);overflow:hidden;
  transition:box-shadow var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
}
.gf-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--grad-c),var(--grad-g) 55%,var(--grad-p));
  opacity:0;transition:opacity var(--dur-2) var(--ease)}
.gf-card:hover{box-shadow:var(--shadow-card);border-color:var(--accent-soft)}
.gf-card:hover::before{opacity:1}
.gf-card.gf-live{border-color:rgba(108,92,231,.35);background:linear-gradient(180deg,var(--accent-soft),var(--light) 55%)}
.gf-card.gf-live::before{opacity:1}

.gf-idx{position:absolute;top:var(--sp-3);right:var(--sp-4);font-family:var(--font-display);font-weight:700;
  font-size:1.6rem;line-height:1;color:var(--ink);opacity:.07;pointer-events:none}
.gf-badge{align-self:flex-start;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-deep);background:#fff;border:1px solid rgba(108,92,231,.35);border-radius:var(--pill);padding:.3em .8em}
.gf-nom{font-family:var(--font-title);font-weight:700;font-size:var(--fs-xl);color:var(--ink);margin-top:var(--sp-1)}
.gf-hook{font-size:var(--fs-sm);color:var(--muted);line-height:1.55;flex:1}
.gf-cta{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:var(--accent-deep);margin-top:var(--sp-2)}
.gf-cta .ic{width:.9em;height:.9em}

@media (min-width:600px){
  .gf-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1200px){
  .gf-grid{grid-template-columns:repeat(3,1fr)}
  .gf-compact{grid-template-columns:repeat(5,1fr)}
}

/* ── blocks/grille-metiers.css ── */
/* grille-metiers.css — liste des métiers d'une famille (cartes) ou noms
   d'exemples (chips, familles pas encore ouvertes). */

.gm-grid{display:grid;gap:var(--sp-2)}
.gm-card{
  display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);
  background:var(--light);border:1px solid var(--light-line);border-radius:var(--radius);
  text-decoration:none;transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease);
}
.gm-card:hover{border-color:var(--accent-soft);background:var(--light-alt)}
.gm-dot{width:10px;height:10px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--gm-a),var(--gm-b))}
.gm-nom{flex:1;font-size:.9rem;font-weight:700;color:var(--ink)}
.gm-fleche{color:var(--accent-deep)}
.gm-fleche .ic{width:.85em;height:.85em}

.gm-chips{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.gm-chip{font-size:.82rem;font-weight:700;color:var(--ink-soft);background:var(--light-alt);border:1px solid var(--light-line);border-radius:var(--pill);padding:.5em 1em}

@media (min-width:600px){
  .gm-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  .gm-grid{grid-template-columns:repeat(4,1fr)}
}

/* ── blocks/comparatif.css ── */
/* comparatif.css — repris de main.css:285-358, échelle d'espacement adaptée. */

.pb-grid{display:grid;gap:var(--sp-6);align-items:start}
.pb-screen{background:#fff;border:1px solid var(--light-line);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);overflow:hidden}
.pb-bar{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-4);border-bottom:1px solid var(--light-line);background:var(--light-alt)}
.pb-bar .ic{color:var(--muted)}
.pb-bar>span:last-of-type{font-size:.9rem;color:var(--ink);flex:1}

.pb-list{list-style:none}
.pb-hit{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4);border-bottom:1px solid var(--light-line)}
.pb-hit:last-child{border-bottom:0}
.pb-av{width:30px;height:30px;flex:none;border-radius:8px;background:var(--ink);color:#fff;font-size:.8125rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.pb-av-off{background:#fdecea;color:#c0392b;border:1px dashed #e8b4ae}
.pb-hit-txt{flex:1;min-width:0}
.pb-hit-n{font-size:.9rem;font-weight:700;color:var(--ink);line-height:1.35}
.pb-hit-m{font-size:.75rem;color:var(--muted);margin-top:3px}
.pb-hit-m b{color:#f0a500;font-weight:700}
.pb-open{color:var(--success);font-weight:700}
.pb-call{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);border:1px solid var(--light-line);border-radius:var(--pill);padding:.5em .8em}
.pb-you{background:#fdf5f4}
.pb-you .pb-hit-n{color:#c0392b}
.pb-you .pb-hit-m{color:#a4574e}

.pb-txt p{font-size:1rem;line-height:1.68;margin-bottom:var(--sp-4)}
.pb-points{list-style:none;margin:var(--sp-6) 0 var(--sp-5)}
.pb-points li{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;line-height:1.55;padding:var(--sp-2) 0;border-top:1px solid var(--light-line)}
.pb-points .ic{color:#c0392b;margin-top:2px}
.pb-note{font-size:.72rem;color:var(--muted);line-height:1.55;padding-left:14px;border-left:2px solid var(--light-line)}

.ps-kicker{display:flex;align-items:center;justify-content:center;gap:8px;margin:var(--sp-8) 0 var(--sp-6);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep)}
.ps-kicker .ic{transform:rotate(90deg)}

.vs-grid{display:grid;gap:var(--sp-4);align-items:center}
.vs-card{position:relative;background:#fff;border:1px solid var(--light-line);border-radius:var(--radius-xl);padding:var(--sp-5) var(--sp-4) var(--sp-4);box-shadow:var(--shadow-card)}
.vs-card.is-tillap{border-color:#d9d3ff}
.vs-tag{position:absolute;top:-12px;left:22px;font-size:.65rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);background:#fff;border:1px solid var(--light-line);border-radius:var(--pill);padding:5px 13px}
.vs-tag.is-tillap{color:#fff;background:var(--accent);border-color:var(--accent)}

.vs-head{display:flex;align-items:center;gap:var(--sp-3)}
.vs-av{width:38px;height:38px;flex:none;border-radius:50%;background:var(--light-alt);color:var(--muted);font-size:1rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.vs-av.is-tillap{background:var(--accent);color:#fff}
.vs-nom{font-size:1.05rem;font-weight:700;color:var(--ink)}
.vs-sub{font-size:.78rem;color:var(--muted);margin-top:1px}

.vs-stars{margin-top:var(--sp-4);font-size:.875rem;color:#f0a500;letter-spacing:1px}
.vs-stars span{color:var(--ink);font-size:.84rem;font-weight:700;letter-spacing:0;margin-left:6px}
.vs-stars-off{color:var(--light-line)}
.vs-stars-off span{color:var(--muted);font-weight:500}

.vs-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);margin-top:var(--sp-4)}
.vs-shot{aspect-ratio:4/3;border-radius:10px;background:var(--light-alt);display:flex;align-items:center;justify-content:center}
.vs-shot .ic{width:22px;height:22px;color:#c3cbd6}
.vs-shot.is-tillap{background:var(--accent-soft)}
.vs-shot.is-tillap .ic{color:var(--accent)}

.vs-list{list-style:none;margin-top:var(--sp-4)}
.vs-list li{display:flex;gap:10px;align-items:flex-start;font-size:.84rem;line-height:1.5;color:var(--muted);padding:var(--sp-2) 0}
.vs-list b{color:var(--accent-deep);font-weight:700}
.vs-list .ic{margin-top:1px}

.vs-btns{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin-top:var(--sp-4)}
.vs-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:.84rem;font-weight:700;color:var(--muted);border:1px solid var(--light-line);border-radius:var(--radius);padding:var(--sp-3)}
.vs-btn.is-primary{background:var(--accent);color:#fff;border-color:var(--accent)}

.vs-foot{margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--light-line);font-size:.78rem;color:var(--muted);line-height:1.5}

.vs-arrow{width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--light-line);display:flex;align-items:center;justify-content:center;margin-inline:auto}
.vs-arrow .ic{color:var(--accent)}

.vs-note{margin-top:var(--sp-7);text-align:center;font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.vs-cta{margin-top:var(--sp-7);text-align:center}

@media (min-width:900px){
  .pb-grid{grid-template-columns:1.05fr .95fr}
  .vs-grid{grid-template-columns:1fr auto 1fr}
  .vs-arrow{transform:rotate(0)}
}
@media (max-width:899px){
  .vs-arrow{transform:rotate(90deg)}
}

/* ── blocks/preuves.css ── */
/* preuves.css — 4 arguments centrés. Repris de main.css:388-393 (.cmp-props). */

.pv-grid{display:grid;gap:var(--sp-6)}
.pv-card{text-align:center}
.pv-ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--accent-soft);stroke:var(--accent-deep);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;padding:12px;margin-bottom:var(--sp-3)}
.pv-t{font-size:.97rem;font-weight:700;color:var(--ink);margin-bottom:var(--sp-2)}
.pv-card p{font-size:.84rem;line-height:1.55;color:var(--muted)}

@media (min-width:600px){
  .pv-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1200px){
  .pv-grid{grid-template-columns:repeat(4,1fr)}
}

/* ── blocks/bloc-contact.css ── */
/* bloc-contact.css — repris de main.css:600-627. */

.ct-grid{display:grid;gap:var(--sp-6);align-items:start}
.ct-t{margin:var(--sp-4) 0 var(--sp-3)}
.ct-facts{list-style:none;margin:var(--sp-5) 0 var(--sp-4);border-top:1px solid var(--light-line)}
.ct-facts li{display:flex;align-items:center;gap:11px;font-size:.9rem;color:var(--ink-soft);padding:var(--sp-3) 0;border-bottom:1px solid var(--light-line);min-height:44px}
.ct-facts li>span{flex:1;min-width:0}
.ct-facts .ic{color:var(--accent)}
.ct-facts a{display:inline-flex;align-items:center;min-height:34px;color:var(--accent-deep);font-weight:700;text-decoration:none}
.ct-facts a:hover{text-decoration:underline;text-underline-offset:3px}
.ct-nophone{font-size:.78rem;color:var(--muted);line-height:1.55;padding-left:14px;border-left:2px solid var(--light-line)}

.ct-form{background:#fff;border:1px solid var(--light-line);border-radius:var(--radius-xl);padding:var(--sp-6);box-shadow:var(--shadow-card)}
.ct-row{margin-bottom:var(--sp-3)}
.ct-row-2{display:grid;grid-template-columns:1fr;gap:var(--sp-3)}
.ct-field{display:block;min-width:0}
.ct-field>span{display:block;font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ct-field i{color:var(--accent);font-style:normal}
.ct-field input,.ct-field select,.ct-field textarea{width:100%;font-family:var(--font-body);font-size:1rem;color:var(--ink);background:var(--light-alt);border:1px solid var(--light-line);border-radius:var(--radius);padding:.75em .875em;transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
.ct-field textarea{resize:vertical;min-height:104px;line-height:1.55}
.ct-field select{
  cursor:pointer;appearance:none;min-width:0;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:15px;padding-right:34px;
}
.ct-field input:focus,.ct-field select:focus,.ct-field textarea:focus{background:#fff;border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}

.ct-bot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-form .btn{margin-top:6px}
.ct-legal{margin-top:var(--sp-3);font-size:.72rem;color:var(--muted);line-height:1.55}
.ct-legal i{color:var(--accent);font-style:normal}
.ct-legal a{color:var(--accent-deep);font-weight:700}

@media (min-width:600px){
  .ct-row-2{grid-template-columns:1fr 1fr}
}
@media (min-width:900px){
  .ct-grid{grid-template-columns:.85fr 1.15fr}
}

/* ── blocks/selecteur-metiers.css ── */
/* selecteur-metiers.css — accordéon des métiers d'une famille (page famille
   riche). Même langage visuel que faq-liste.css (chevron qui tourne sur
   [open], pas de classe JS) : ici il fallait juste des colonnes en plus une
   fois ouvert. .mp-liste/.mp-douleurs/.mp-preuves viennent de landing.css
   (ex page métier, réutilisées telles quelles) : recentrées ici, elles ne
   sont plus seules dans une colonne. */

.sm-list{border-top:1px solid var(--light-line)}
.sm-item{border-bottom:1px solid var(--light-line)}
.sm-sum{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-4) 4px;cursor:pointer;list-style:none;min-height:44px;
  transition:background var(--dur-1) var(--ease);
}
.sm-sum::-webkit-details-marker{display:none}
.sm-sum:hover{background:var(--light-alt)}
.sm-dot{width:12px;height:12px;border-radius:50%;flex:none}
.sm-nom{font-size:1rem;font-weight:700;color:var(--ink);white-space:nowrap}
.sm-hook{display:none;flex:1;min-width:0;font-size:.85rem;color:var(--muted)}
.sm-chev{color:var(--muted);flex:none;transform:rotate(90deg);transition:transform var(--dur-2) var(--ease)}
.sm-item[open] .sm-chev{transform:rotate(-90deg)}

.sm-body{padding:0 4px var(--sp-6)}
.sm-cols{display:grid;gap:var(--sp-5);margin-bottom:var(--sp-5)}
.sm-cols .mp-liste{max-width:none;margin-inline:0}
.sm-col-t{font-size:.65rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-2)}

.sm-faq{display:grid;gap:var(--sp-3);margin-bottom:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--light-line)}
.sm-faq dt{font-size:.875rem;font-weight:700;color:var(--ink)}
.sm-faq dd{margin:2px 0 0;font-size:.84rem;line-height:1.55;color:var(--muted)}

.sm-cta{display:flex;gap:var(--sp-3);flex-wrap:wrap}

@media (min-width:600px){
  .sm-hook{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (min-width:900px){
  .sm-cols{grid-template-columns:1fr 1fr}
  .sm-faq{grid-template-columns:1fr 1fr}
}

/* ── blocks/comparatif-options.css ── */
/* comparatif-options.css — tableau « pourquoi Tillap ». Repris de
   www/main.css:372-386 (mono-page figée), jetons et espacements adaptés à
   v3. Pas de breakpoint dédié : .cmp-wrap scrolle horizontalement en
   dessous de 720px (min-width de la table), déjà mobile-friendly tel quel. */

.cmp-wrap{overflow-x:auto;border:1px solid var(--light-line);border-radius:var(--radius-lg);background:#fff}
.cmp{width:100%;min-width:720px;border-collapse:collapse;text-align:left;table-layout:fixed}
.cmp-col-crit{width:22%}
.cmp thead th{font-family:var(--font-body);font-size:.68rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);padding:var(--sp-4) var(--sp-4);vertical-align:bottom}
.cmp thead th.cmp-mine{color:var(--success);position:relative}
.cmp-badge{display:block;width:max-content;margin-top:8px;font-size:.6rem;font-weight:800;letter-spacing:.09em;background:var(--success);color:#fff;border-radius:var(--pill);padding:4px 10px}
.cmp tbody th{font-size:.9rem;font-weight:700;color:var(--ink);padding:var(--sp-4);border-top:1px solid var(--light-line);white-space:normal}
.cmp td{font-size:.875rem;color:var(--muted);padding:var(--sp-4);border-top:1px solid var(--light-line);line-height:1.5;word-break:break-word}
.cmp thead td,.cmp thead th{border-top:0}
.cmp .cmp-mine{background:#f0faf5;color:var(--ink);font-weight:550}
.cmp tbody tr:hover td:not(.cmp-mine){background:var(--light-alt)}

.cmp-note{margin-top:var(--sp-4);font-size:.72rem;color:var(--muted);line-height:1.55}
.cmp-cta{margin-top:var(--sp-7);text-align:center}
.cmp-props-wrap{margin-top:var(--sp-8);padding-top:var(--sp-7);border-top:1px solid var(--light-line)}

/* ── pages/landing.css ── */
/* landing.css — styles propres à une seule page, pas assez réutilisés pour
   mériter leur propre fichier de blocks/. */

/* -- méthode : sortie de section -- */
.mt-out{margin-top:var(--sp-7);text-align:center;font-size:.9rem;color:var(--ink-soft)}
.mt-out a{display:inline-flex;align-items:center;gap:7px;margin-left:8px;font-weight:700;color:var(--accent-deep);text-decoration:none}
.mt-out a:hover{text-decoration:underline;text-underline-offset:3px}

/* -- méthode : « qui fait le travail » -- */
.qu-sec{background:var(--ink);color:#b9c6d8}
.qu-sec .eyebrow{color:#9d8bff}
.qu-sec .h-lg{color:#fff}
.qu-head{text-align:center;max-width:40rem;margin:0 auto var(--sp-7)}
.qu-grid{display:grid;gap:var(--sp-7);align-items:center}
.qu-photo{position:relative}
.qu-photo::before{content:"";position:absolute;right:-16px;bottom:-16px;width:58%;height:58%;border-radius:var(--radius-xl);background:linear-gradient(135deg,var(--grad-c),var(--grad-g) 55%,var(--grad-p));opacity:.45;filter:blur(2px);z-index:0}
.qu-photo img{position:relative;z-index:1;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius-xl);box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}
.qu-txt p{font-size:.9375rem;line-height:1.7;margin-top:var(--sp-4);max-width:56ch}
.qu-sign{font-family:var(--font-title);font-weight:700;font-size:1.1rem;margin-top:var(--sp-4);color:#fff}

@media (min-width:900px){
  .qu-grid{grid-template-columns:.9fr 1.1fr}
}

/* -- sur-mesure -- */
.sm-grid{display:grid;gap:var(--sp-4);margin-top:var(--sp-6)}
.sm-card{padding:var(--sp-5);background:var(--light);border:1px solid var(--light-line);border-radius:var(--radius-lg)}
.sm-card h3{font-size:1.02rem;margin-bottom:var(--sp-2)}
.sm-card p{font-size:.85rem;line-height:1.55;color:var(--muted)}
.sm-note{margin-top:var(--sp-6);font-size:.82rem;color:var(--muted);line-height:1.6;text-align:center}

@media (min-width:600px){
  .sm-grid{grid-template-columns:repeat(2,1fr)}
}

/* -- page famille -- */
.fp-preuves{list-style:none;max-width:52rem;margin-inline:auto;display:grid;gap:var(--sp-3)}
.fp-preuves li{position:relative;padding-left:1.6em;font-size:.9375rem;line-height:1.6;color:var(--ink-soft)}
.fp-preuves li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.fp-cta{margin-top:var(--sp-7);text-align:center}

/* -- sélecteur de métier (page famille riche) : douleurs (rouge) / preuves
   (accent), même structure. Utilisées par selecteur-metiers.css. -- */
.mp-liste{list-style:none;max-width:52rem;margin-inline:auto;display:grid;gap:var(--sp-3)}
.mp-liste li{position:relative;padding-left:1.6em;font-size:.9375rem;line-height:1.6;color:var(--ink-soft)}
.mp-liste li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%}
.mp-douleurs li::before{background:#c0392b}
.mp-preuves li::before{background:var(--success)}