/* =====================================================================
   LOCWEB — feuille de style unique.

   DIRECTION (2026-09-12, apres « epure mais cheap, tout blanc »).
   Ancree sur deux fiches DESIGN.md :

   - APPLE : des tuiles pleine largeur qui ALTERNENT noir et blanc. Le
     changement de couleur est le separateur — pas un filet sur chaque
     section. L'objet est presente seul sur le noir, comme un produit.
     Une seule couleur d'action pour tout ce qui se clique.
   - MISTRAL : une bande signature en degrade qui ferme chaque page.
     Chez LocWeb : rouge vers noir, avec l'appel dedans.

   Blanc, noir, rouge. Rien d'autre. Le rouge porte les actions, le
   noir porte le prestige, le blanc porte la lecture.

   CHAQUE TUILE DECLARE SES PROPRES COULEURS (--t-*). Un composant ne
   connait jamais « clair » ou « sombre » : il lit la tuile ou il est
   pose. C'est ce qui permet a la meme carte de vivre sur le noir comme
   sur le blanc sans une seule regle d'exception.
   ===================================================================== */

@font-face { font-family: 'Clash Display'; src: url('/assets/fonts/clash-display-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap }
@font-face { font-family: 'Clash Display'; src: url('/assets/fonts/clash-display-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap }
@font-face { font-family: 'Switzer'; src: url('/assets/fonts/switzer-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap }
@font-face { font-family: 'Switzer'; src: url('/assets/fonts/switzer-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap }
@font-face { font-family: 'Switzer'; src: url('/assets/fonts/switzer-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap }

:root {
  --rouge: #E8281E;
  --rouge-vif: #FF3B30;
  --rouge-nuit: #7A0F0A;
  /*  CONTRASTES MESURES. Le rouge de marque #E8281E ne donne que 4,42:1
      avec du blanc : sous le minimum de 4,5 pour un texte de bouton.
      Les boutons prennent donc un cran plus sombre (5,17:1), le texte
      rouge sur fond clair un autre (5,39:1). A l'oeil, c'est le meme
      rouge.  */
  --rouge-bouton: #D42419;
  --rouge-texte: #CF2219;
  --noir: #0A0A0B;
  --blanc: #FFFFFF;
  --parchemin: #F5F5F7;
  --encre: #1D1D1F;

  --titre: 'Clash Display', 'Helvetica Neue', Arial, sans-serif;
  --texte: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --enveloppe: 1240px;
  --gouttiere: clamp(20px, 4vw, 44px);
  --ressort: cubic-bezier(.2, .7, .2, 1);
  /*  L'unique ombre du systeme : sous un objet ou une capture posee sur
      une surface. Jamais sur un bouton, une carte ou un texte.  */
  --ombre-objet: 0 30px 60px -20px rgba(0, 0, 0, .35), 3px 5px 30px rgba(0, 0, 0, .12);
}

/* --- Les tuiles ----------------------------------------------------- */
.tuile-claire, body {
  --t-fond: #FFFFFF; --t-texte: #1D1D1F; --t-doux: #6E6E73; --t-tenu: #737378;   /* #86868B ne faisait que 3,6:1 */
  --t-filet: #E5E5EA; --t-carte: #F5F5F7; --t-carte-bord: transparent;
  --t-action: var(--rouge-texte);
}
.tuile-parchemin {
  --t-fond: #F5F5F7; --t-texte: #1D1D1F; --t-doux: #6E6E73; --t-tenu: #737378;
  --t-filet: #DEDEE3; --t-carte: #FFFFFF; --t-carte-bord: transparent;
  --t-action: var(--rouge-texte);
}
.tuile-sombre, .entete, .pied, .page-tete {
  --t-fond: #0A0A0B; --t-texte: #F5F5F7; --t-doux: #A1A1A6; --t-tenu: #86868B;
  --t-filet: #242427; --t-carte: #161618; --t-carte-bord: #242427;
  --t-action: var(--rouge-vif);
}
.tuile-claire, .tuile-parchemin, .tuile-sombre, .page-tete { background: var(--t-fond); color: var(--t-texte) }

/* --- Socle ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--noir) }
body {
  margin: 0; background: var(--t-fond); color: var(--t-texte);
  font-family: var(--texte); font-size: 17px; line-height: 1.5; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100% }
p, figure { margin: 0 }
ul, ol { margin: 0; padding: 0; list-style: none }
a { color: inherit; text-decoration: none }
h1, h2, h3, h4 { margin: 0; font-family: var(--titre); font-weight: 600; line-height: 1.04; letter-spacing: -.03em; word-spacing: .04em; text-wrap: balance }
button { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--rouge-vif); outline-offset: 4px; border-radius: 6px }
::selection { background: var(--rouge); color: #fff }
[hidden] { display: none !important }

.enveloppe { width: 100%; max-width: calc(var(--enveloppe) + 2 * var(--gouttiere)); margin-inline: auto; padding-inline: var(--gouttiere) }
.centre { text-align: center; margin-inline: auto }

.saut {
  position: fixed; top: 12px; left: 12px; z-index: 300;
  transform: translateY(-200%); transition: transform .2s;
  background: var(--rouge); color: #fff; padding: 12px 18px; border-radius: 999px;
}
.saut:focus { transform: none }

section { padding: clamp(88px, 11vw, 150px) 0 }
.section-serree { padding: clamp(72px, 8vw, 112px) 0 }

/* --- Typographie ------------------------------------------------------ */
.titre-geant { font-size: clamp(46px, 7.4vw, 108px); line-height: .98; letter-spacing: -.04em; font-weight: 600 }
.titre-1 { font-size: clamp(38px, 5vw, 72px); line-height: 1; letter-spacing: -.035em }
.titre-2 { font-size: clamp(30px, 3.4vw, 48px); letter-spacing: -.03em }
.titre-3 { font-size: clamp(21px, 1.7vw, 26px); letter-spacing: -.02em; line-height: 1.12 }
.surtitre {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--t-action);
}
.chapo { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.45; color: var(--t-doux); max-width: 46ch }
.centre .chapo, .chapo.centre { margin-inline: auto }
.discret { color: var(--t-doux) }
.manifeste {
  font-family: var(--titre); font-weight: 600; font-size: clamp(32px, 4.4vw, 64px);
  line-height: 1.06; letter-spacing: -.035em; max-width: 22ch; margin-inline: auto; text-wrap: balance
}
.manifeste em { font-style: normal; color: var(--t-tenu) }

/* --- Boutons -----------------------------------------------------------
   Pilules, comme Apple : l'action se reconnait a sa forme autant qu'a sa
   couleur. Pression : `scale(.97)`, le meme geste partout. */
.bt {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 500; font-size: 16.5px; cursor: pointer; white-space: nowrap;
  transition: background-color .25s, color .25s, border-color .25s, transform .2s;
}
.bt:active { transform: scale(.97) }
.bt-plein { background: var(--rouge-bouton); color: #fff }
.bt-plein:hover { background: #BF1F15 }
.bt-nu { border-color: currentColor; color: var(--t-texte); opacity: .92 }
.bt-nu:hover { opacity: 1; background: color-mix(in srgb, var(--t-texte) 8%, transparent) }
.bt-blanc { background: #fff; color: var(--noir) }
.bt-blanc:hover { background: #F2F2F2 }
.bt .fl { transition: transform .3s var(--ressort) }
.bt:hover .fl { transform: translateX(4px) }

.lien-fleche { display: inline-flex; align-items: center; gap: 6px; color: var(--t-action); font-weight: 500; font-size: 17px }
.lien-fleche:hover { text-decoration: underline; text-underline-offset: 4px }
.lien-fleche span { transition: transform .3s var(--ressort) }
.lien-fleche:hover span { transform: translateX(3px) }

/* --- Entete : toujours noire ------------------------------------------ */
.entete {
  position: sticky; top: 0; z-index: 100; color: var(--t-texte);
  /*  Noir PLEIN. La version translucide (82 % + flou) laissait passer
      le blanc des pages claires : l'entete paraissait grise.  */
  background: var(--noir);
  border-bottom: 1px solid #1A1A1C;
}
.entete-in { display: flex; align-items: center; gap: 28px; min-height: 64px }
.marque { display: inline-flex; align-items: center; gap: 10px; font-family: var(--titre); font-size: 21px; font-weight: 600; letter-spacing: -.03em }
.marque-signe {
  width: 16px; height: 18px; flex: none; background: var(--rouge);
  clip-path: polygon(0 0, 40% 0, 40% 62%, 100% 62%, 100% 100%, 0 100%);
}
.nav { display: flex; align-items: center; gap: 2px; margin-inline: auto }
.nav-lien {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  font-size: 14.5px; font-weight: 400; color: rgba(245, 245, 247, .78); cursor: pointer; transition: color .2s;
}
.nav-lien:hover, .nav-lien.actif { color: #fff }
.nav-lien svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform .3s var(--ressort) }
.nav-services { position: relative }
.nav-services > summary { list-style: none }
.nav-services > summary::-webkit-details-marker { display: none }
.nav-services[open] > summary svg { transform: rotate(180deg) }
.nav-panneau {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); z-index: 10;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  width: min(92vw, 580px); padding: 10px;
  background: rgba(22, 22, 24, .96); backdrop-filter: blur(20px);
  border: 1px solid #2A2A2E; border-radius: 18px;
}
.nav-panneau a { padding: 12px 14px; border-radius: 12px; transition: background-color .2s }
.nav-panneau a:hover { background: rgba(255, 255, 255, .06) }
.nav-panneau b { display: block; font-size: 15px; font-weight: 500; color: #fff }
.nav-panneau span { display: block; font-size: 13.4px; color: #A1A1A6; margin-top: 1px }
.nav-panneau a[aria-current="page"] b { color: var(--rouge-vif) }

.entete-actions { display: flex; align-items: center; gap: 6px }
/*  Le numero, et non « Parlons de votre projet » (Nicolas, 2026-09-13) :
    sur un site d'agence locale, le telephone est l'action qui compte.
    Il reste visible sur telephone, a cote du menu.  */
.entete-cta { min-height: 38px; padding: 0 16px; font-size: 14.5px; gap: 8px; font-variant-numeric: tabular-nums }
.entete-cta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.burger { display: none; width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; padding: 0; place-content: center; gap: 6px; color: #fff }
.burger span { display: block; width: 20px; height: 1.5px; background: currentColor; transition: transform .35s var(--ressort) }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg) }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg) }
.menu-mobile { background: var(--noir); border-top: 1px solid #1E1E21; padding: 8px 0 28px; max-height: calc(100svh - 64px); overflow-y: auto }
.menu-mobile a:not(.bt) { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid #1E1E21; font-size: 20px; font-family: var(--titre); font-weight: 600; letter-spacing: -.02em; color: #F5F5F7 }
.menu-mobile .bt { width: 100%; margin-top: 20px }
.menu-mobile-titre { font-size: 13px; color: #86868B; margin: 18px 0 2px }
@media (max-width: 1060px) {
  .nav { display: none }
  .entete-actions { margin-left: auto }
  .burger { display: grid }
}
@media (min-width: 1061px) { .menu-mobile { display: none !important } }

/* --- Pied de page : toujours noir -------------------------------------- */
.pied { background: var(--t-fond); color: var(--t-texte); padding: clamp(64px, 8vw, 96px) 0 32px; font-size: 14.5px }
.pied-in { display: grid; gap: 44px; grid-template-columns: 1.6fr repeat(3, 1fr) }
@media (max-width: 900px) { .pied-in { grid-template-columns: 1fr 1fr } .pied-marque { grid-column: 1 / -1 } }
@media (max-width: 520px) { .pied-in { grid-template-columns: 1fr } }
.pied-marque { max-width: 34ch; display: grid; gap: 18px; justify-items: start; align-content: start }
.pied-marque p { color: var(--t-doux) }
.pied-col h2 { font-family: var(--texte); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--t-texte); margin-bottom: 14px }
.pied-col li { margin-bottom: 10px; color: var(--t-doux) }
.pied-col a { transition: color .2s }
.pied-col a:hover { color: #fff }
.pied-bas {
  margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--t-filet);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: 13px; color: var(--t-tenu);
}
.pied-bas a:hover { color: #fff }

/* --- Apparitions ---------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1.1s var(--ressort), transform 1.1s var(--ressort) }
.reveal.vu { opacity: 1; transform: none }
.reveal[data-retard="1"] { transition-delay: .08s }
.reveal[data-retard="2"] { transition-delay: .16s }
.reveal[data-retard="3"] { transition-delay: .24s }

@view-transition { navigation: auto }
::view-transition-old(root) { animation: sortie .25s ease both }
::view-transition-new(root) { animation: entree .45s var(--ressort) both }
@keyframes sortie { to { opacity: 0 } }
@keyframes entree { from { opacity: 0 } }

/* =====================================================================
   HERO DE L'ACCUEIL — une tuile noire, le titre centre, l'objet dessous.
   ===================================================================== */
.hero { padding: clamp(64px, 10vh, 120px) 0 0; overflow: hidden; position: relative }
.hero-in { display: grid; gap: 22px; justify-items: center; text-align: center; position: relative; z-index: 2 }
.hero h1 { max-width: 13ch }
.hero .chapo { max-width: 40ch }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; margin-top: 8px }
.hero-actions.gauche { justify-content: flex-start }

/*  L'objet. Pleine largeur, sans cadre : c'est le noir de la tuile qui
    lui sert d'ecrin, et sa lumiere rouge qui fait l'atmosphere.  */
.hero-objet { position: relative; width: min(100%, 1240px); aspect-ratio: 2 / 1; margin: clamp(8px, 2vh, 24px) auto 0; z-index: 1 }
.hero-objet canvas, .hero-objet img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.hero-objet img { transition: opacity .8s ease }
.hero-objet[data-mode="scene"] img { opacity: 0 }
/*  Un voile en bas fond l'objet dans la tuile suivante sans arete.  */
.hero-objet::after { content: ''; position: absolute; inset: auto 0 0; height: 22%; background: linear-gradient(transparent, var(--noir)); pointer-events: none; z-index: 2 }
@media (max-width: 760px) { .hero-objet { aspect-ratio: 4 / 3 } }

/* =====================================================================
   SECTIONS COMMUNES
   ===================================================================== */
/*  En pixels et non en `ch` : 60ch se calculait sur le corps du
    conteneur (17 px), soit 510 px — un titre de 72 px s'y cassait en
    trois lignes de huit lettres.  */
.tete { display: grid; gap: 16px; max-width: 880px; margin-bottom: clamp(44px, 6vw, 72px) }
.tete.centre { justify-items: center; text-align: center }
.tete-ligne { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 48px; margin-bottom: clamp(44px, 6vw, 72px) }
.tete-ligne .tete { margin-bottom: 0 }

.intro { display: grid; gap: clamp(56px, 7vw, 96px) }
.faits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px }
@media (max-width: 900px) { .faits { grid-template-columns: 1fr 1fr } }
@media (max-width: 520px) { .faits { grid-template-columns: 1fr } }
.fait { padding: 26px 24px; background: var(--t-carte); border: 1px solid var(--t-carte-bord); border-radius: 20px; display: grid; gap: 6px }
.fait b { font-family: var(--titre); font-weight: 600; font-size: 21px; letter-spacing: -.02em; line-height: 1.15 }
.fait span { color: var(--t-doux); font-size: 15.5px }

/* --- Bento des services ------------------------------------------------ */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px }
@media (max-width: 960px) { .bento { grid-template-columns: 1fr 1fr } }
@media (max-width: 600px) { .bento { grid-template-columns: 1fr } }
.carte-bento {
  position: relative; display: grid; align-content: space-between; gap: 40px; min-height: 250px;
  padding: 30px 30px 28px; border-radius: 24px; overflow: hidden;
  background: var(--t-carte); border: 1px solid var(--t-carte-bord);
  transition: background-color .3s, border-color .3s;
}
.carte-bento:hover { border-color: color-mix(in srgb, var(--t-action) 55%, var(--t-carte-bord)) }
.carte-bento h3 { font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -.03em }
.carte-bento p { color: var(--t-doux); font-size: 16px; margin-top: 10px; max-width: 32ch }
.carte-bento .lien-fleche { font-size: 16px }
.carte-bento.large { grid-column: span 2; min-height: 320px }
.carte-bento.large h3 { font-size: clamp(32px, 3.4vw, 52px) }
/*  La grande carte porte la lueur rouge de la signature, en fond.  */
.carte-bento.large::before {
  content: ''; position: absolute; right: -10%; bottom: -40%; width: 60%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(232, 40, 30, .45), transparent); pointer-events: none;
}
.carte-bento > * { position: relative }
@media (max-width: 600px) { .carte-bento.large { grid-column: auto } }

/* --- Etapes --------------------------------------------------------------- */
.etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px }
@media (max-width: 1000px) { .etapes { grid-template-columns: 1fr 1fr } }
@media (max-width: 560px) { .etapes { grid-template-columns: 1fr } }
.etape { display: grid; gap: 12px; align-content: start; padding: 30px 28px; background: var(--t-carte); border: 1px solid var(--t-carte-bord); border-radius: 24px }
.etape-n { font-family: var(--titre); font-weight: 600; font-size: 40px; letter-spacing: -.04em; color: var(--rouge); line-height: 1 }
.etape p { color: var(--t-doux); font-size: 16px }

/* --- Offres --------------------------------------------------------------- */
.offres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px }
.offre { display: grid; gap: 14px; align-content: start; padding: 36px 32px; background: var(--t-carte); border: 1px solid var(--t-carte-bord); border-radius: 28px }
.offre-prix { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 6px 0 4px }
.offre-prix b { font-family: var(--titre); font-weight: 600; font-size: clamp(52px, 5vw, 72px); letter-spacing: -.05em; line-height: 1 }
.offre-prix span { color: var(--t-doux); font-size: 16px }
.offre .discret { font-size: 16px }
.inclus { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 44px }
.inclus li { display: inline-flex; align-items: center; gap: 10px; color: var(--t-doux); font-size: 15.5px }
.inclus li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--rouge); flex: none }

/* --- La bande signature ----------------------------------------------------
   Reprise de Mistral : un degrade qui ferme chaque page. Rouge LocWeb,
   rouge nuit, puis le noir du pied de page — la bande se fond dans ce
   qui suit au lieu de s'y cogner. */
.appel {
  background:
    radial-gradient(120% 140% at 0% 0%, var(--rouge) 0%, #B8170F 35%, var(--rouge-nuit) 62%, var(--noir) 100%);
  color: #fff; padding: clamp(96px, 12vw, 160px) 0
}
.appel-in { display: grid; gap: 30px; justify-items: start }
.appel h2 { max-width: 12ch; color: #fff }
.appel .chapo { color: rgba(255, 255, 255, .82) }
.appel-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px }
.appel-tel { font-family: var(--titre); font-weight: 600; font-size: clamp(26px, 2.8vw, 38px); letter-spacing: -.03em; color: #fff }
.appel-tel:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px }
.appel .bt-plein { background: #fff; color: var(--noir) }
.appel .bt-plein:hover { background: #F2F2F2 }

/* =====================================================================
   PAGES INTERIEURES
   ===================================================================== */
.page-tete { padding: clamp(72px, 10vw, 136px) 0 clamp(72px, 9vw, 120px); text-align: center }
.page-tete .enveloppe { display: grid; gap: 20px; justify-items: center }
.page-tete h1 { max-width: 15ch }
.page-tete .chapo { margin-inline: auto }
.page-tete .hero-actions { justify-content: center }
.fil { font-size: 13.5px; color: var(--t-tenu) }
.fil a:hover { color: var(--t-texte) }

.lecture { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 24px clamp(32px, 6vw, 96px) }
@media (max-width: 900px) { .lecture { grid-template-columns: 1fr } }
.lecture > h2 { font-size: clamp(28px, 2.8vw, 40px) }
.prose { display: grid; gap: 20px; max-width: 66ch; align-content: start }
.prose p { color: var(--t-doux); font-size: 18px; line-height: 1.6 }
.prose strong { color: var(--t-texte); font-weight: 500 }
.prose h3 { font-size: 22px; margin-top: 12px }
.prose a:not(.bt) { color: var(--t-action) }
.prose a:not(.bt):hover { text-decoration: underline; text-underline-offset: 4px }
.puces { display: grid; gap: 14px }
.puces li { position: relative; padding-left: 24px; color: var(--t-doux); font-size: 17.5px; line-height: 1.55 }
.puces li::before { content: ''; position: absolute; left: 0; top: .66em; width: 7px; height: 7px; border-radius: 50%; background: var(--rouge) }
.puces li strong { color: var(--t-texte); font-weight: 500 }

.faq { display: grid; gap: 10px }
.faq details { background: var(--t-carte); border: 1px solid var(--t-carte-bord); border-radius: 18px; padding: 0 26px }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 0; cursor: pointer; list-style: none;
  font-family: var(--titre); font-size: clamp(19px, 1.6vw, 22px); letter-spacing: -.02em; font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: '+'; font-family: var(--texte); font-size: 28px; font-weight: 300; color: var(--rouge); transition: transform .35s var(--ressort); flex: none; line-height: 1 }
.faq details[open] summary::after { transform: rotate(45deg) }
.faq details p { padding: 0 0 24px; max-width: 70ch; color: var(--t-doux) }

.table-tarifs { width: 100%; border-collapse: separate; border-spacing: 0 }
.table-tarifs th, .table-tarifs td { text-align: left; padding: 28px 20px 28px 0; border-bottom: 1px solid var(--t-filet); vertical-align: top }
.table-tarifs thead th { font-size: 13px; font-weight: 500; color: var(--t-tenu); padding-top: 0 }
.table-tarifs tbody th { font-family: var(--titre); font-weight: 600; font-size: clamp(21px, 2vw, 28px); letter-spacing: -.02em; width: 30% }
.table-tarifs tbody th a:hover { color: var(--t-action) }
.table-tarifs td { font-size: 16.5px }
.table-tarifs td.desc { color: var(--t-doux) }
.table-tarifs .prix { font-family: var(--titre); font-weight: 600; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.04em; white-space: nowrap }
.table-tarifs .prix small { display: block; font-family: var(--texte); font-weight: 400; font-size: 14px; letter-spacing: 0; color: var(--t-tenu); margin-top: 4px }
@media (max-width: 760px) {
  .table-tarifs thead { display: none }
  .table-tarifs tr { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 24px 0; border-bottom: 1px solid var(--t-filet) }
  .table-tarifs th, .table-tarifs td, .table-tarifs tbody th { padding: 0; border: 0; width: auto }
}

.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(44px, 7vw, 100px) }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr } }
.coordonnees { display: grid; gap: 30px; align-content: start }
.coordonnees a.gros { font-family: var(--titre); font-weight: 600; font-size: clamp(30px, 3.2vw, 44px); letter-spacing: -.035em; line-height: 1.05; color: var(--t-texte); transition: color .2s }
.coordonnees a.gros:hover { color: var(--t-action) }
.etiquette { font-size: 13.5px; color: var(--t-tenu); margin-bottom: 6px }
.formulaire { display: grid; gap: 18px; position: relative; padding: clamp(28px, 4vw, 44px); background: var(--t-carte); border: 1px solid var(--t-carte-bord); border-radius: 28px }
.champ { display: grid; gap: 8px }
.champ label { font-size: 14px; color: var(--t-doux) }
.champ input, .champ textarea, .champ select {
  width: 100%; font: inherit; font-size: 17px; color: var(--t-texte);
  background: var(--t-fond); border: 1px solid var(--t-filet); border-radius: 12px;
  padding: 14px 16px; transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none;
}
.champ select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px }
.champ select option { color: #1D1D1F; background: #fff }
.champ textarea { min-height: 130px; resize: vertical }
.champ input:focus, .champ textarea:focus, .champ select:focus { outline: none; border-color: var(--rouge); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rouge) 22%, transparent) }
.deux-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px }
@media (max-width: 560px) { .deux-champs { grid-template-columns: 1fr } }
.formulaire .mention { font-size: 13.4px; color: var(--t-tenu) }
.formulaire .mention a { color: var(--t-action) }
.formulaire .bt { justify-self: start }
.formulaire-etat { font-size: 15.5px }
.formulaire-etat:empty { display: none }
.formulaire-etat[data-etat="ok"] { color: #1F8A4C }
.formulaire-etat[data-etat="erreur"] { color: var(--t-action) }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }

.autres { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px }
.autres a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 22px; border-radius: 16px; background: var(--t-carte); border: 1px solid var(--t-carte-bord); font-weight: 500; transition: border-color .25s }
.autres a:hover { border-color: color-mix(in srgb, var(--t-action) 55%, var(--t-carte-bord)) }
.autres a span { color: var(--t-action); transition: transform .35s var(--ressort) }
.autres a:hover span { transform: translateX(5px) }

.legal h2 { font-size: clamp(22px, 2vw, 28px); margin-top: 28px }
.legal h3 { font-size: 19px; margin-top: 16px }
.legal ul { display: grid; gap: 10px; padding-left: 20px; list-style: disc; color: var(--t-doux) }
.legal li::marker { color: var(--rouge) }

/* =====================================================================
   GALERIE
   ===================================================================== */
.filtres { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 44px }
.filtre {
  min-height: 42px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--t-filet); background: transparent; color: var(--t-doux);
  font-size: 15px; font-weight: 500; transition: background-color .2s, color .2s, border-color .2s;
}
.filtre:hover { color: var(--t-texte); border-color: var(--t-tenu) }
.filtre[aria-pressed="true"] { background: var(--t-texte); border-color: var(--t-texte); color: var(--t-fond) }
.grille-exemples { display: grid; gap: clamp(56px, 7vw, 96px) }
.exemple-lien { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center }
.exemple:nth-child(even) .exemple-lien { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) }
.exemple:nth-child(even) .exemple-ecran { order: 2 }
@media (max-width: 860px) {
  .exemple-lien, .exemple:nth-child(even) .exemple-lien { grid-template-columns: 1fr }
  .exemple:nth-child(even) .exemple-ecran { order: 0 }
}
/*  La capture est posee comme un produit : la seule ombre du systeme.  */
.exemple-ecran { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 18px; background: var(--t-carte); box-shadow: var(--ombre-objet); display: grid; place-items: center }
.exemple-ecran img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.2s var(--ressort) }
.exemple-lien:hover .exemple-ecran img { transform: scale(1.03) }
.exemple-ecran span { font-family: var(--titre); font-size: 26px; color: var(--t-tenu) }
.exemple-txt { display: grid; gap: 12px; justify-items: start }
.exemple-txt h2 { font-size: clamp(30px, 3.2vw, 46px); letter-spacing: -.035em }
.exemple-metier { font-size: 14px; color: var(--t-action); font-weight: 500 }
.exemple-txt p:not(.exemple-metier) { color: var(--t-doux); font-size: 17.5px; max-width: 38ch }
.galerie-vide { display: grid; gap: 16px; justify-items: center; text-align: center; max-width: 52ch; margin-inline: auto }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important }
  html { scroll-behavior: auto }
  .reveal { opacity: 1; transform: none }
  @view-transition { navigation: none }
}


/* =====================================================================
   PAGE SERVICE — version claire (2026-09-13)
   ===================================================================== */
.service-tete { background: linear-gradient(#FFFFFF, #F5F5F7); padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 8vw, 110px); border-bottom: 1px solid #E5E5EA }
.service-grille { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .8fr); gap: clamp(36px, 6vw, 88px); align-items: center }
@media (max-width: 920px) { .service-grille { grid-template-columns: 1fr } }
.service-intro { display: grid; gap: 20px; justify-items: start }
.service-intro h1 { max-width: 16ch }
.service-intro .fil span { margin: 0 4px }

/*  L'encadre de resume : blanc, net, la seule carte de l'en-tete.  */
.resume {
  display: grid; gap: 14px; padding: clamp(28px, 3vw, 36px);
  background: #fff; border: 1px solid #E5E5EA; border-radius: 24px;
  box-shadow: 0 24px 60px -30px rgba(29, 29, 31, .25);
}
.resume-etiquette { font-size: 13.5px; color: var(--t-tenu) }
.resume-prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-top: -8px }
.resume-prix b { font-family: var(--titre); font-weight: 600; font-size: clamp(48px, 4.4vw, 64px); letter-spacing: -.05em; line-height: 1 }
.resume-prix b.resume-devis { font-size: clamp(34px, 3vw, 44px); letter-spacing: -.035em }
.resume-prix span { font-size: 16px; color: var(--t-doux) }
.resume-note { font-size: 14px; color: var(--t-tenu); margin-top: -6px }
.resume .coches { padding-top: 16px; border-top: 1px solid #E5E5EA }
.resume-bt { width: 100%; margin-top: 6px; white-space: normal; text-align: center }

/*  Les coches : ce qui est compris.  */
.coches { display: grid; gap: 12px }
.coches li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.45; color: var(--t-texte) }
.coches li::before {
  content: ''; position: absolute; left: 0; top: .1em; width: 20px; height: 20px; border-radius: 50%;
  background: var(--rouge-bouton) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.coches-grandes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 36px }
@media (max-width: 700px) { .coches-grandes { grid-template-columns: 1fr } }
.coches-grandes li { font-size: 17.5px; color: var(--t-doux) }
.coches-grandes li strong { color: var(--t-texte); font-weight: 500 }

/*  Une seule colonne de lecture, centree : plus clair que le titre a
    gauche et le texte a droite.  */
.colonne { max-width: calc(780px + 2 * var(--gouttiere)); display: grid; gap: 28px }
.colonne .prose { max-width: none }

.puces-liens { display: flex; flex-wrap: wrap; gap: 10px }
.puces-liens a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--t-carte); border: 1px solid var(--t-filet); font-size: 15.5px; font-weight: 500;
  transition: border-color .2s, color .2s;
}
.puces-liens a:hover { border-color: var(--rouge-bouton); color: var(--t-action) }


/* =====================================================================
   SERVICES DE L'ACCUEIL — grille reguliere (2026-09-13)
   Remplace le bento noir : cartes de tailles inegales, beaucoup de vide
   et une tache rouge en fond, « moche » (Nicolas). Ici huit cartes de
   meme format, une icone, un titre, une ligne, une fleche. On compare
   d'un coup d'oeil et on clique.
   ===================================================================== */
.grille-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
@media (max-width: 1080px) { .grille-services { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 560px) { .grille-services { grid-template-columns: 1fr; gap: 12px } }
.grille-services li { display: flex }
.carte-service {
  position: relative; display: flex; flex-direction: column; gap: 10px; width: 100%;
  padding: 26px 24px 58px; background: #fff; border: 1px solid #E5E5EA; border-radius: 20px;
  transition: border-color .25s, box-shadow .25s, transform .25s var(--ressort);
}
.carte-service:hover {
  border-color: color-mix(in srgb, var(--rouge-bouton) 45%, #E5E5EA);
  box-shadow: 0 18px 40px -24px rgba(29, 29, 31, .35); transform: translateY(-3px);
}
.carte-icone {
  display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 8px;
  border-radius: 12px; background: #FDECEA; color: var(--rouge-bouton);
}
.carte-icone svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.carte-titre { font-family: var(--titre); font-weight: 600; font-size: 21px; letter-spacing: -.02em; line-height: 1.15; color: #1D1D1F }
.carte-note { font-size: 15.5px; line-height: 1.45; color: #6E6E73 }
.carte-fleche {
  position: absolute; left: 24px; bottom: 22px; font-size: 18px; color: var(--rouge-bouton);
  transition: transform .3s var(--ressort);
}
.carte-service:hover .carte-fleche { transform: translateX(6px) }
@media (max-width: 560px) {
  .carte-service { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 18px 44px 18px 18px }
  .carte-icone { margin: 0; width: 42px; height: 42px }
  .carte-titre { flex: 1; font-size: 19px }
  .carte-note { flex-basis: 100%; padding-left: 56px; font-size: 15px }
  .carte-fleche { left: auto; right: 18px; top: 50%; bottom: auto; transform: translateY(-50%) }
  .carte-service:hover .carte-fleche { transform: translate(4px, -50%) }
}


/* =====================================================================
   DIRECTION « TOUT BLANC » (2026-09-13)
   Active par `DIRECTION = 'blanc'` dans src/site.mjs. Tout ce qui etait
   noir devient blanc ou gris tres clair ; le rouge ne reste que par
   touches : le signe, les petits titres, les icones, les fleches, un
   mot du titre. Les boutons principaux passent a l'encre.
   ===================================================================== */
.direction-blanc .tuile-sombre, .direction-blanc .entete, .direction-blanc .pied, .direction-blanc .page-tete {
  --t-fond: #FFFFFF; --t-texte: #1D1D1F; --t-doux: #6E6E73; --t-tenu: #737378;
  --t-filet: #E8E8ED; --t-carte: #F5F5F7; --t-carte-bord: transparent; --t-action: var(--rouge-texte);
}
.direction-blanc #methode { --t-fond: #FAFAFB; --t-carte: #FFFFFF; --t-carte-bord: #ECECF0 }
.direction-blanc html, html.direction-blanc { background: #fff }

/* L'entete : blanche, un filet fin, texte encre. */
.direction-blanc .entete { background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px); border-bottom: 1px solid #ECECF0 }
.direction-blanc .nav-lien { color: #515154 }
.direction-blanc .nav-lien:hover, .direction-blanc .nav-lien.actif { color: #1D1D1F }
.direction-blanc .nav-panneau { background: #fff; border-color: #E8E8ED; box-shadow: 0 24px 60px -24px rgba(29, 29, 31, .25) }
.direction-blanc .nav-panneau b { color: #1D1D1F }
.direction-blanc .nav-panneau span { color: #6E6E73 }
.direction-blanc .nav-panneau a:hover { background: #F5F5F7 }
.direction-blanc .burger { color: #1D1D1F }
.direction-blanc .menu-mobile { background: #fff; border-top-color: #ECECF0 }
.direction-blanc .menu-mobile a:not(.bt) { color: #1D1D1F; border-bottom-color: #ECECF0 }

/* Les boutons principaux : a l'encre. Le rouge reste sur les details. */
.direction-blanc .bt-plein { background: #1D1D1F; color: #fff }
.direction-blanc .bt-plein:hover { background: #000 }
.direction-blanc .entete-cta svg { color: var(--rouge-vif) }
.direction-blanc .mot-rouge { color: var(--rouge-texte) }

/* Le hero : typographique, avec une lueur rouge a peine visible. */
.direction-blanc .hero { padding: clamp(96px, 16vh, 180px) 0 clamp(96px, 14vh, 160px); background:
  radial-gradient(60% 55% at 50% 0%, rgba(232, 40, 30, .07), transparent 70%), #fff }
.direction-blanc .hero h1 { max-width: 15ch }

/* Le pied : gris tres clair, texte encre. */
.direction-blanc .pied { background: #F5F5F7; border-top: 1px solid #ECECF0 }
.direction-blanc .pied-col a:hover, .direction-blanc .pied-bas a:hover { color: var(--rouge-texte) }

/* La bande de fin : plus de degrade rouge. Un fond blanc, un filet
   rouge fin au-dessus, le numero en rouge. */
.direction-blanc .appel { background: #fff; color: #1D1D1F; border-top: 1px solid #ECECF0; position: relative }
.direction-blanc .appel::before { content: ''; position: absolute; top: -1px; left: 50%; width: 64px; height: 3px; transform: translateX(-50%); background: var(--rouge); border-radius: 0 0 3px 3px }
.direction-blanc .appel-in { justify-items: center; text-align: center }
.direction-blanc .appel h2 { color: #1D1D1F; margin-inline: auto }
.direction-blanc .appel .chapo { color: #6E6E73 }
.direction-blanc .appel-bas { justify-content: center }
.direction-blanc .appel-tel { color: var(--rouge-texte) }
.direction-blanc .appel .bt-plein { background: #1D1D1F; color: #fff }

/* L'en-tete des pages service garde son degrade, sans le filet sombre. */
.direction-blanc .service-tete { background: linear-gradient(#FFFFFF, #FAFAFB) }


/* =====================================================================
   BLANC ET ROUGE, PLUS AUCUN NOIR (Nicolas, 2026-09-13)
   Les boutons, la pastille du numero et les etats actifs passent au
   rouge. Les boutons secondaires : contour et texte rouges. Seul le
   texte reste en gris tres fonce (#1D1D1F) — en rouge, un paragraphe
   entier deviendrait illisible.
   ===================================================================== */
.direction-blanc .bt-plein,
.direction-blanc .appel .bt-plein { background: var(--rouge-bouton); color: #fff }
.direction-blanc .bt-plein:hover,
.direction-blanc .appel .bt-plein:hover { background: #BF1F15 }
.direction-blanc .entete-cta svg { color: #fff }
.direction-blanc .bt-nu { border-color: var(--rouge-bouton); color: var(--rouge-texte); opacity: 1 }
.direction-blanc .bt-nu:hover { background: #FDECEA }
.direction-blanc .filtre[aria-pressed="true"] { background: var(--rouge-bouton); border-color: var(--rouge-bouton); color: #fff }
.direction-blanc .burger span { background: var(--rouge-bouton) }
.direction-blanc .marque b { color: #1D1D1F }


/* =====================================================================
   ACCUEIL CLAIR (2026-09-13) — inspire de web-premiere.fr
   Blanc, une seule couleur vive, sections en deux colonnes qui
   alternent, gros blocs de couleur pleine, mots cles soulignes.
   ===================================================================== */

/* --- Hero --------------------------------------------------------------- */
.hc { position: relative; padding: clamp(40px, 7vh, 88px) 0 clamp(96px, 12vh, 140px); overflow: hidden; background: #fff }
/*  Le fond : une trame de points tres fine qui s'efface vers le bas, et
    une lueur rouge derriere l'objet.  */
.hc-fond {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(42% 60% at 76% 46%, rgba(232, 40, 30, .13), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(29, 29, 31, .09) 1px, transparent 0) 0 0 / 26px 26px;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
          mask-image: linear-gradient(#000 55%, transparent);
}
.hc-grille { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(24px, 4vw, 64px); align-items: center }
@media (max-width: 960px) { .hc-grille { grid-template-columns: 1fr } }
.hc-texte { display: grid; gap: 24px; justify-items: start }
.hc-badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px;
  background: #fff; border: 1px solid #F0D5D2; border-radius: 999px;
  font-size: 14px; font-weight: 500; color: #1D1D1F; box-shadow: 0 6px 20px -12px rgba(232, 40, 30, .45);
}
.hc-point { width: 8px; height: 8px; border-radius: 50%; background: var(--rouge); box-shadow: 0 0 0 4px rgba(232, 40, 30, .16); animation: pouls 2.4s ease-in-out infinite }
@keyframes pouls { 50% { box-shadow: 0 0 0 7px rgba(232, 40, 30, 0) } }
.hc-titre { font-size: clamp(44px, 5.8vw, 86px); line-height: 1; letter-spacing: -.04em; font-weight: 600; color: #1D1D1F; max-width: 13ch }
/*  Le souligne : un trait rouge peint sous les mots, legerement incline,
    comme un coup de feutre. En fond (et non en `text-decoration`) pour
    qu'il suive le retour a la ligne.  */
.souligne {
  color: var(--rouge-texte);
  background: linear-gradient(transparent 78%, rgba(232, 40, 30, .2) 78%, rgba(232, 40, 30, .2) 94%, transparent 94%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .04em;
}
.hc-chapo { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.55; color: #515154; max-width: 44ch }
.hc-actions { display: flex; flex-wrap: wrap; gap: 12px }
.hc-coches { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 4px }
.hc-coches li { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: #515154 }
.hc-coches svg, .liste-coches svg {
  width: 20px; height: 20px; padding: 4px; border-radius: 50%; flex: none;
  background: #FDECEA; fill: none; stroke: var(--rouge-bouton); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.hc-visuel { position: relative }
/*  L'objet : carre, sans voile (le voile vers le noir etait celui de la
    version sombre).  */
.hc-objet { width: 100%; max-width: 620px; aspect-ratio: 1 / 1; margin: 0 auto }
.hc-objet::after { content: none }
.hc-objet img, .hc-objet canvas { object-fit: contain }
@media (max-width: 960px) { .hc-objet { max-width: 420px; margin-top: -8px } }

/* --- Bandeau de confiance : chevauche le bas du hero -------------------- */
.confiance {
  position: relative; z-index: 2; margin-top: calc(-1 * clamp(56px, 7vh, 84px));
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #fff; border: 1px solid #ECECF0; border-radius: 24px;
  box-shadow: 0 30px 70px -40px rgba(29, 29, 31, .35);
}
.confiance li { display: flex; align-items: center; gap: 14px; padding: 26px 24px }
.confiance li + li { border-left: 1px solid #ECECF0 }
.confiance svg {
  width: 46px; height: 46px; padding: 12px; flex: none; border-radius: 14px;
  background: var(--rouge-bouton); fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.confiance b { display: block; font-size: 16px; font-weight: 600; color: #1D1D1F }
.confiance span { display: block; font-size: 14px; color: #6E6E73 }
@media (max-width: 1000px) {
  .confiance { grid-template-columns: 1fr 1fr }
  .confiance li:nth-child(3) { border-left: 0 }
  .confiance li:nth-child(n+3) { border-top: 1px solid #ECECF0 }
}
@media (max-width: 560px) {
  .confiance { grid-template-columns: 1fr }
  .confiance li + li { border-left: 0; border-top: 1px solid #ECECF0 }
  .confiance li { padding: 18px 20px }
}

/* --- Sections en deux colonnes ------------------------------------------ */
.duo { padding: clamp(88px, 11vw, 150px) 0 }
.duo-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center }
.duo-inverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) }
@media (max-width: 960px) { .duo-grille, .duo-inverse { grid-template-columns: 1fr } }
.duo-texte { display: grid; gap: 20px; justify-items: start }
.duo-texte .titre-1 { font-size: clamp(34px, 4vw, 58px) }
.lead { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.55; color: #1D1D1F }

/*  Le grand bloc rouge : la couleur pleine qui donne du poids a la page. */
.bloc-rouge {
  position: relative; overflow: hidden; color: #fff; border-radius: 32px;
  padding: clamp(36px, 5vw, 64px);
  background: radial-gradient(120% 90% at 100% 0%, #FF4A3D 0%, #E8281E 45%, #B81C15 100%);
  box-shadow: 0 40px 80px -40px rgba(184, 28, 21, .6);
}
.bloc-rouge > * { position: relative }
.bloc-rouge-sur { font-size: 16px; font-weight: 500; opacity: .9 }
.bloc-rouge-prix { font-family: var(--titre); font-weight: 600; font-size: clamp(84px, 11vw, 150px); line-height: .9; letter-spacing: -.06em; margin: 6px 0 10px }
.bloc-rouge-sous { font-size: 18px; opacity: .92; margin-bottom: 30px }
.bloc-rouge ul { display: grid; gap: 12px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .28) }
.bloc-rouge li { display: flex; gap: 12px; align-items: center; font-size: 16.5px }
.bloc-rouge li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff; flex: none }
/*  Un grand L en filigrane dans le coin : le signe de la marque. */
.bloc-rouge-l {
  position: absolute !important; right: -40px; bottom: -60px; width: 300px; height: 340px;
  background: rgba(255, 255, 255, .1);
  clip-path: polygon(0 0, 40% 0, 40% 62%, 100% 62%, 100% 100%, 0 100%);
}

/* --- Liste a coches ------------------------------------------------------ */
.liste-coches { display: grid; gap: 14px; margin-top: 6px }
.liste-coches li { display: flex; gap: 12px; align-items: flex-start; font-size: 16.5px; color: #1D1D1F }
.liste-coches svg { margin-top: 2px }

/* --- La maquette de l'espace client ---------------------------------------- */
.maquette {
  background: #fff; border: 1px solid #E8E8ED; border-radius: 22px; overflow: hidden;
  box-shadow: 0 50px 90px -50px rgba(29, 29, 31, .45), 0 0 0 10px #F5F5F7;
  transform: rotate(-1.5deg);
}
.maquette-barre { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid #F0F0F3; background: #FAFAFB }
.maquette-barre i { width: 10px; height: 10px; border-radius: 50%; background: #E5E5EA }
.maquette-barre i:first-child { background: #FF6159 }
.maquette-barre span { margin-left: 10px; font-size: 13px; color: #86868B }
.maquette-corps { padding: 26px 26px 30px; display: grid; gap: 20px }
.maquette-titre { font-family: var(--titre); font-weight: 600; font-size: 22px; color: #1D1D1F }
.maquette-tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px }
.maquette-tuiles div { display: grid; gap: 12px; padding: 16px; border-radius: 14px; background: #F7F7F9 }
.maquette-tuiles span { font-size: 13px; color: #6E6E73 }
.barre-v { display: block; height: 70px; border-radius: 8px; background: #EDEDF1; position: relative; overflow: hidden }
.barre-v::after { content: ''; position: absolute; inset: auto 0 0; height: var(--h); background: linear-gradient(#FF5A4E, #E8281E); border-radius: 8px }
.maquette-courbe { width: 100%; height: 90px }
.maquette-lignes { display: grid; gap: 10px }
.maquette-lignes i { display: block; height: 10px; border-radius: 6px; background: #EFEFF3 }
@media (max-width: 960px) { .maquette { transform: none; max-width: 520px; margin-inline: auto; width: 100% } }

/* --- La frise de la methode ------------------------------------------------ */
.frise { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px }
.frise::before { content: ''; position: absolute; top: 27px; left: 12%; right: 12%; height: 2px; background: repeating-linear-gradient(90deg, #E8281E 0 10px, transparent 10px 18px); opacity: .5 }
.frise li { position: relative; display: grid; gap: 12px; justify-items: center; text-align: center }
.frise-n {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: #fff; border: 2px solid var(--rouge-bouton); color: var(--rouge-texte);
  font-family: var(--titre); font-weight: 600; font-size: 22px; box-shadow: 0 0 0 8px #F5F5F7;
}
.frise li:first-child .frise-n { background: var(--rouge-bouton); color: #fff }
.frise h3 { font-size: 21px; letter-spacing: -.02em; margin-top: 8px }
.frise p { font-size: 15.5px; color: #6E6E73; max-width: 26ch }
@media (max-width: 900px) {
  .frise { grid-template-columns: 1fr; gap: 26px; max-width: 520px; margin-inline: auto }
  .frise::before { top: 28px; bottom: 28px; left: 27px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(#E8281E 0 10px, transparent 10px 18px) }
  .frise li { grid-template-columns: 56px 1fr; justify-items: start; text-align: left; column-gap: 18px; row-gap: 4px }
  .frise-n { grid-row: span 2 }
  .frise h3 { margin-top: 12px }
}

/* --- Les offres ------------------------------------------------------------- */
.offres-c { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch }
@media (max-width: 1100px) { .offres-c { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin-inline: auto } }
@media (max-width: 640px) { .offres-c { grid-template-columns: 1fr; max-width: 560px } }
.offre-c {
  display: grid; gap: 14px; align-content: start; padding: 34px 30px;
  background: #fff; border: 1px solid #ECECF0; border-radius: 26px;
  transition: border-color .25s, box-shadow .25s, transform .25s var(--ressort);
}
.offre-c:hover { border-color: #F2B8B3; box-shadow: 0 30px 60px -36px rgba(232, 40, 30, .45); transform: translateY(-4px) }
.offre-c h3 { font-size: 22px; letter-spacing: -.02em }
.offre-c-prix { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap }
.offre-c-prix b { font-family: var(--titre); font-weight: 600; font-size: clamp(54px, 5vw, 70px); letter-spacing: -.05em; line-height: 1; color: var(--rouge-texte) }
.offre-c-prix span { font-size: 15px; color: #6E6E73 }
.offre-c .bt { justify-self: start; margin-top: 8px; min-height: 44px; padding: 0 20px; font-size: 15px }

/* --- L'appel final : un bloc rouge plein, arrondi ------------------------------ */
.direction-blanc .appel { background: #fff; border-top: 0; padding: clamp(40px, 6vw, 80px) 0 clamp(80px, 9vw, 120px) }
.direction-blanc .appel::before { content: none }
.direction-blanc .appel-in {
  position: relative; overflow: hidden; justify-items: center; text-align: center;
  padding: clamp(56px, 8vw, 104px) clamp(24px, 5vw, 64px); border-radius: 36px; color: #fff;
  background: radial-gradient(110% 120% at 0% 0%, #FF4A3D 0%, #E8281E 42%, #B81C15 100%);
  box-shadow: 0 50px 100px -50px rgba(184, 28, 21, .65);
}
.direction-blanc .appel-in::after {
  content: ''; position: absolute; left: -50px; top: -40px; width: 260px; height: 300px;
  background: rgba(255, 255, 255, .08); clip-path: polygon(0 0, 40% 0, 40% 62%, 100% 62%, 100% 100%, 0 100%);
}
.direction-blanc .appel-in > * { position: relative; z-index: 1 }
.direction-blanc .appel h2 { color: #fff }
.direction-blanc .appel .chapo { color: rgba(255, 255, 255, .88) }
.direction-blanc .appel-tel { color: #fff }
.direction-blanc .appel .bt-plein { background: #fff; color: var(--rouge-texte) }
.direction-blanc .appel .bt-plein:hover { background: #FFF1F0 }

/* --- En-tetes des pages interieures : meme trame que le hero ---------------------- */
.direction-blanc .page-tete { position: relative; overflow: hidden;
  background:
    radial-gradient(50% 70% at 50% 0%, rgba(232, 40, 30, .09), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(29, 29, 31, .07) 1px, transparent 0) 0 0 / 26px 26px, #fff }
.direction-blanc .service-tete {
  background:
    radial-gradient(40% 70% at 85% 30%, rgba(232, 40, 30, .09), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(29, 29, 31, .07) 1px, transparent 0) 0 0 / 26px 26px, #fff }


/* =====================================================================
   L'OUTIL INCLUS (2026-09-13) — l'argument des 49 €/mois
   ===================================================================== */
.outil { position: relative; overflow: hidden; background: linear-gradient(#fff, #FBF5F4 60%, #fff); padding-top: clamp(96px, 12vw, 160px) }
.outil-pastille {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
  background: var(--rouge-bouton); color: #fff; font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 24px -12px rgba(212, 36, 25, .7);
}
.outil-grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(40px, 6vw, 88px); align-items: center }
@media (max-width: 1040px) { .outil-grille { grid-template-columns: 1fr } }

/* --- La scene : l'ecran et ses deux fenetres flottantes ----------------- */
.outil-scene { position: relative; padding: 30px 30px 60px 0 }
@media (max-width: 1040px) { .outil-scene { max-width: 720px; margin-inline: auto; width: 100% } }
.ecran {
  background: #fff; border: 1px solid #E8E8ED; border-radius: 20px; overflow: hidden;
  box-shadow: 0 60px 110px -60px rgba(29, 29, 31, .5), 0 0 0 12px rgba(255, 255, 255, .7);
}
.ecran-barre { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #FAFAFB; border-bottom: 1px solid #F0F0F3 }
.ecran-barre i { width: 10px; height: 10px; border-radius: 50%; background: #E5E5EA }
.ecran-barre i:first-child { background: #FF6159 }
.ecran-barre i:nth-child(2) { background: #FFBD2E }
.ecran-barre i:nth-child(3) { background: #28C840 }
.ecran-barre span { margin: 0 auto; padding: 3px 14px; border-radius: 6px; background: #F0F0F3; font-size: 12px; color: #6E6E73 }
.ecran-corps { display: grid; grid-template-columns: 170px 1fr; min-height: 330px }
.ecran-menu { display: grid; align-content: start; gap: 4px; padding: 18px 12px; background: #FBFBFC; border-right: 1px solid #F0F0F3 }
.ecran-marque { display: flex; align-items: center; gap: 8px; font-family: var(--titre); font-weight: 600; font-size: 15px; padding: 0 8px 12px; color: #1D1D1F }
.ecran-marque .marque-signe { width: 12px; height: 14px }
.ecran-menu span { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 9px; font-size: 13px; color: #6E6E73 }
.ecran-menu span.actif { background: #FDECEA; color: var(--rouge-texte); font-weight: 600 }
.ecran-menu svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.ecran-principal { padding: 20px 22px; display: grid; gap: 16px; align-content: start }
.ecran-titre { font-family: var(--titre); font-weight: 600; font-size: 20px; color: #1D1D1F }
.ecran-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.ecran-kpi div { display: grid; gap: 10px; padding: 12px; border-radius: 12px; background: #F7F7F9 }
.ecran-kpi span { font-size: 12px; color: #6E6E73 }
.kpi-barre { display: block; height: 8px; border-radius: 6px; background: #EBEBEF; position: relative; overflow: hidden }
.kpi-barre::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--l); border-radius: 6px; background: linear-gradient(90deg, #FF5A4E, #E8281E) }
.ecran-courbe { width: 100%; height: 80px }
.ecran-lignes { display: grid; gap: 8px }
.ecran-lignes i { display: block; height: 9px; border-radius: 6px; background: #EFEFF3 }
@media (max-width: 560px) { .ecran-corps { grid-template-columns: 1fr } .ecran-menu { display: none } }

.flottant {
  position: absolute; background: #fff; border: 1px solid #ECECF0; border-radius: 16px;
  box-shadow: 0 30px 60px -28px rgba(29, 29, 31, .45);
}
.flottant svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none }
.flottant-edition { right: -6px; bottom: 6px; width: min(300px, 62%); padding: 16px 18px; display: grid; gap: 10px; animation: flotte 6s ease-in-out infinite }
.flottant-etiquette { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--rouge-texte) }
.flottant-champ { font-size: 14.5px; color: #1D1D1F; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--rouge-bouton); background: #fff; box-shadow: 0 0 0 4px rgba(232, 40, 30, .12) }
.curseur { display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--rouge-bouton); animation: clignote 1s steps(1) infinite }
@keyframes clignote { 50% { opacity: 0 } }
.flottant-ok { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 5px 10px; border-radius: 999px; background: #E9F7EE; color: #1F7A45; font-size: 12.5px; font-weight: 600 }
.flottant-notif { left: -22px; top: 70px; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; animation: flotte 7s ease-in-out -2s infinite }
.notif-icone { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--rouge-bouton); color: #fff }
.flottant-notif b { display: block; font-size: 14px; color: #1D1D1F }
.flottant-notif span:not(.notif-icone) { display: block; font-size: 12.5px; color: #6E6E73 }
@keyframes flotte { 50% { transform: translateY(-8px) } }
@media (max-width: 1040px) { .flottant-notif { left: 8px; top: 54px } }
@media (max-width: 560px) {
  .outil-scene { padding: 20px 0 110px }
  .flottant-edition { right: 8px; bottom: 0; width: calc(100% - 40px) }
  .flottant-notif { left: 8px; top: 8px }
}

/* --- La liste des fonctions ----------------------------------------------- */
.outil-liste { display: grid; gap: 22px }
.outil-liste li { display: flex; gap: 16px; align-items: flex-start }
.outil-picto { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; background: #FDECEA; color: var(--rouge-bouton) }
.outil-picto svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round }
.outil-liste h3 { font-size: 19px; letter-spacing: -.015em; margin: 2px 0 4px }
.outil-liste p { font-size: 15.5px; line-height: 1.5; color: #6E6E73 }
@media (prefers-reduced-motion: reduce) { .flottant, .curseur { animation: none } }

/* Le bandeau de confiance est suivi de l'outil : plus d'espace blanc
   double entre les deux. */
.confiance + * { margin-top: 0 }


/* =====================================================================
   ANCIEN LOGO, TITRE ANIME, SIGNE STYLISE (2026-09-13)
   ===================================================================== */
.marque { gap: 9px }
.marque-logo { width: auto; height: 32px; flex: none }
.marque b { font-family: var(--titre); font-weight: 600; letter-spacing: -.02em }
.marque b span { color: var(--rouge-texte) }
.pied .marque-logo { height: 30px }

/* --- La fin du titre qui change ------------------------------------------ */
/*  Hauteur reservee pour la phrase la plus longue : sans elle, le titre
    passerait de trois a quatre lignes et pousserait toute la page.  */
.hc-titre { min-height: 3.05em }
@media (max-width: 600px) { .hc-titre { min-height: 4.05em } }
.rotation { display: inline }
.rotation .souligne { display: inline; transition: opacity .38s ease, transform .38s var(--ressort), filter .38s ease; }
.rotation .souligne.sort { opacity: 0; filter: blur(6px); transform: translateY(-.25em) }
.rotation .souligne.entre { opacity: 0; filter: blur(6px); transform: translateY(.3em); transition: none }

/* --- Le signe anime --------------------------------------------------------- */
.hc-visuel { display: grid; place-items: center }
.signe-anime { position: relative; width: min(100%, 560px); aspect-ratio: 1 / 1 }
.signe-svg { width: 100%; height: 100%; overflow: visible }
.signe-svg .anneau, .signe-svg .arc-jauge, .signe-svg .orbite, .signe-svg .L-flotte {
  transform-box: view-box; transform-origin: 300px 300px;
}
.anneau-pointille { animation: tourne 60s linear infinite }
.anneau-jauge { animation: tourne 40s linear infinite reverse }
.arc-jauge { transform: rotate(-120deg); animation: jauge 5.5s var(--ressort) infinite }
.orbite { animation: tourne 14s linear infinite }
.L-flotte { animation: flotte-l 6s ease-in-out infinite }
@keyframes tourne { to { transform: rotate(360deg) } }
@keyframes jauge {
  0% { stroke-dasharray: 8 100; transform: rotate(-120deg) }
  55% { stroke-dasharray: 62 100; transform: rotate(-120deg) }
  100% { stroke-dasharray: 8 100; transform: rotate(240deg) }
}
@keyframes flotte-l { 50% { transform: translateY(-14px) rotate(-1.5deg) } }

.puce {
  position: absolute; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 10px 16px 10px 10px; border-radius: 999px; background: #fff; border: 1px solid #F0E3E1;
  font-size: 14px; font-weight: 600; color: #1D1D1F;
  box-shadow: 0 20px 40px -22px rgba(184, 28, 21, .45);
}
.puce svg {
  width: 30px; height: 30px; padding: 7px; border-radius: 50%; flex: none;
  background: var(--rouge-bouton); fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.puce-1 { top: 16%; right: 2%; animation: flotte 5s ease-in-out infinite }
.puce-2 { bottom: 20%; left: -4%; animation: flotte 6.5s ease-in-out -1.5s infinite }
.puce-3 { bottom: 4%; right: 10%; animation: flotte 5.8s ease-in-out -3s infinite }
@media (max-width: 960px) { .signe-anime { width: min(100%, 440px); margin-top: 8px } .puce-2 { left: 0 } }
@media (max-width: 480px) { .puce { font-size: 12.5px; padding: 8px 12px 8px 8px } .puce svg { width: 26px; height: 26px; padding: 6px } }

@media (prefers-reduced-motion: reduce) {
  .anneau-pointille, .anneau-jauge, .arc-jauge, .orbite, .L-flotte, .puce { animation: none }
}

.ecran-marque img { width: 12px; height: 16px }

/* La notification recouvrait le « Bonjour » de la maquette : elle passe
   au-dessus de l'ecran, en haut a droite. */
.flottant-notif { left: auto; right: 28px; top: -4px }
@media (max-width: 1040px) { .flottant-notif { left: auto; right: 16px; top: -4px } }
@media (max-width: 560px) { .outil-scene { padding-top: 48px } .flottant-notif { left: 8px; right: auto; top: 0 } }

/* ====================================================================
   GUIDES (2026-09-14) : hub, articles, et le bloc questions de l'accueil.
   ==================================================================== */
.guides-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 18px }
.guide-carte {
  display: grid; gap: 14px; align-content: start; padding: 32px 30px; border-radius: 24px;
  background: var(--t-carte); border: 1px solid var(--t-filet); transition: border-color .25s, transform .25s;
}
.guide-carte:hover { border-color: var(--rouge-bouton); transform: translateY(-2px) }
.guide-carte h2 { font-size: clamp(21px, 1.9vw, 25px); line-height: 1.2; text-wrap: balance }
.guide-carte p { color: var(--t-doux); font-size: 16px; line-height: 1.55 }
.guide-carte .lien-fleche { margin-top: 6px }

.guide-tete h1 { max-width: 22ch; text-wrap: balance }
.guide-maj { font-size: 14px; color: var(--t-tenu) }

.en-bref {
  display: grid; gap: 10px; padding: 28px 30px; border-radius: 22px;
  background: #FFF4F3; border: 1px solid #F6D5D2;
}
.en-bref p:not(.en-bref-titre) { font-size: 19px; line-height: 1.6; color: #1D1D1F }
.en-bref-titre { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rouge-texte, #CF2219) }
.sommaire { display: grid; gap: 12px; padding: 4px 2px }
.sommaire ol { display: grid; gap: 8px; padding-left: 22px; list-style: decimal; color: var(--t-tenu) }
.sommaire a { color: var(--t-texte); font-size: 16.5px }
.sommaire a:hover { color: var(--t-action); text-decoration: underline; text-underline-offset: 4px }

.tableau-defile { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 18px; border: 1px solid var(--t-filet) }
.tableau { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15.5px; background: #fff }
.tableau th, .tableau td { text-align: left; vertical-align: top; padding: 16px 18px; border-bottom: 1px solid var(--t-filet); line-height: 1.5 }
.tableau thead th { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--t-tenu); background: var(--t-carte) }
.tableau tbody th { font-weight: 600; color: var(--t-texte) }
.tableau td { color: var(--t-doux) }
.tableau tbody tr:last-child th, .tableau tbody tr:last-child td { border-bottom: 0 }

.accueil-questions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 32px clamp(32px, 6vw, 88px); align-items: start }
.accueil-questions .tete { margin-bottom: 0; position: sticky; top: 110px }
.accueil-questions .faq details p a { color: var(--t-action); text-decoration: underline; text-underline-offset: 3px }
@media (max-width: 960px) { .accueil-questions { grid-template-columns: 1fr } .accueil-questions .tete { position: static } }
.guides-liste { display: grid; gap: 4px; margin-top: 12px }
.guides-liste a:not(.lien-fleche) {
  display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--t-filet);
  font-size: 15.5px; font-weight: 500; color: var(--t-texte)
}
.guides-liste a:not(.lien-fleche):hover { color: var(--t-action) }
.guides-liste .lien-fleche { margin-top: 12px }
.faq details p a { color: var(--t-action) }
@media (max-width: 640px) {
  .tableau-defile { overflow: visible; border: 0; border-radius: 0 }
  .tableau { min-width: 0; background: transparent }
  .tableau thead { display: none }
  .tableau tr { display: grid; gap: 10px; padding: 20px 22px; margin-bottom: 12px; border-radius: 18px; background: #fff; border: 1px solid var(--t-filet) }
  .tableau th, .tableau td, .tableau tbody tr:last-child th, .tableau tbody tr:last-child td { display: block; padding: 0; border: 0 }
  .tableau tbody th { font-size: 17px }
  .tableau td[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--t-tenu); margin-bottom: 2px }
}