/* ---------------------------------------------------------------------------
   Jetons — memes valeurs que la page d'exploration, pour que les deux se
   ressemblent. Le bloc :root nu porte la palette claire complete ; les deux
   blocs suivants ne redefinissent que des jetons, jamais des composants.
   --------------------------------------------------------------------------- */
:root {
  --ground:   #F6F7FE;
  --surface:  #FFFFFF;
  --sunken:   #EDEEFA;
  --ink:      #1B1B2E;
  --ink-soft: #454563;
  --muted:    #64647E;
  --line:     #E4E5F5;
  --line-firm:#CACBE6;

  --accent:      #5B54E8;
  --accent-soft: #A9A2FF;
  --accent-wash: #EDECFC;
  /* L'accent au survol. En aplat, un bouton ne peut plus se soulever :
     c'est la couleur qui doit repondre. Assombri ici, donc plus
     contraste encore que l'accent — le texte dessus ne risque rien. */
  --accent-hi:   #4038C4;
  /* Ce qu'on ecrit SUR l'accent. Ecrire "#fff" en dur supposait que l'accent
     resterait sombre dans les deux themes ; il ne l'est pas. */
  --on-accent:   #FFFFFF;

  --good:   #1E7A55;
  --warn:   #A66A12;
  --bad:    #A8332F;

  --focus:  #5B54E8;
  --shadow: 0 1px 2px rgba(21,24,31,.05), 0 8px 24px -12px rgba(21,24,31,.16);
  --lift:   0 2px 4px rgba(21,24,31,.06), 0 18px 40px -20px rgba(21,24,31,.28);

  /* --- mouvement ---------------------------------------------------------
     Memes trois durees et meme assouplissement que les deux autres pages : le
     mouvement fait partie du systeme au meme titre que la couleur, et trois
     rythmes differents d'une page a l'autre se remarquent tout autant que
     trois accents differents. */
  /* --- geometrie ---------------------------------------------------------
     Les rayons montent d'un cran par rapport a la version precedente et se
     lisent depuis un seul endroit. Le pas d'espacement suit l'echelle
     "spacieuse" : la page respire, c'est ce qui fait paraitre le formulaire
     court alors qu'il pose plus de questions qu'avant. */
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  32px;
  --pill:  999px;

  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 40px;
  --sp-5: 64px;

  --t-tap:   .09s;
  --t-hover: .16s;
  --t-panel: .42s;
  --ease:    cubic-bezier(.22,.61,.36,1);

  /* Panneau de reassurance : aplat profond, texte blanc. En sombre un
     aplat clair eblouirait sur toute la hauteur de l'ecran. */
  --aside-bg:   #EDECFC;
  --aside-ink:  #1B1B2E;
  --aside-soft: #64647E;
  --aside-line: #CACBE6;

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:   #101018;
    --surface:  #17171F;
    --sunken:   #1C1C28;
    --ink:      #ECECF6;
    --ink-soft: #C3C3D6;
    --muted:    #9494AC;
    --line:     #272733;
    --line-firm:#3C3C4E;

    --accent:      #A9A2FF;
    --accent-soft: #4F4A8C;
    --accent-wash: #1C1938;
    /* Eclairci et non assombri : sur fond noir, c'est vers le haut que
       la couleur doit aller pour signaler le survol. */
    --accent-hi:   #C4BEFF;
    /* L'accent s'eclaircit pour tenir sur fond noir : ce qu'on ecrit dessus
       doit donc s'assombrir. Du blanc n'y ferait que 3,47:1. */
    --on-accent:   #101018;

    --good:   #46B389;
    --warn:   #D9A24E;
    --bad:    #E2726D;

    --focus:  #A9A2FF;
    --aside-bg:   #1C1938;
    --aside-ink:  #ECECF6;
    --aside-soft: #9494AC;
    --aside-line: #3C3C4E;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --lift:   0 2px 4px rgba(0,0,0,.5), 0 18px 40px -20px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"] {
  --ground:   #101018;
  --surface:  #17171F;
  --sunken:   #1C1C28;
  --ink:      #ECECF6;
  --ink-soft: #C3C3D6;
  --muted:    #9494AC;
  --line:     #272733;
  --line-firm:#3C3C4E;

  --accent:      #A9A2FF;
  --accent-soft: #4F4A8C;
  --accent-wash: #1C1938;
  --accent-hi:   #C4BEFF;
  --on-accent:   #101018;

  --good:   #46B389;
  --warn:   #D9A24E;
  --bad:    #E2726D;

  --focus:  #A9A2FF;
  --aside-bg:   #1C1938;
  --aside-ink:  #ECECF6;
  --aside-soft: #9494AC;
  --aside-line: #3C3C4E;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --lift:   0 2px 4px rgba(0,0,0,.5), 0 18px 40px -20px rgba(0,0,0,.8);
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* --- coquille en deux colonnes -------------------------------------------

   A gauche, un panneau qui ne bouge jamais : la marque, la promesse, ce qui
   rend le resultat croyable, et l'estimation provisoire des qu'elle existe.
   A droite, une seule question dans beaucoup de vide.

   Le bord galbe du panneau est la "forme" demandee, et il ne coute rien : un
   rayon elliptique, pas une image ni un SVG. Sur un ecran haut, l'ellipse
   dessine une courbe franche ; c'est le meme trait que la vague de la
   reference, obtenu en une declaration.
   --------------------------------------------------------------------- */
.app {
  display: grid;
  grid-template-columns: minmax(300px, 27vw) 1fr;
  min-height: 100vh;
}

.aside {
  position: relative;
  background: var(--aside-bg);
  color: var(--aside-ink);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-3);
  border-radius: 0 var(--r-xl) var(--r-xl) 0 / 0 14% 14% 0;
  overflow: hidden;
}
.aside .brand {
  font-family: var(--serif); font-size: 25px; letter-spacing: -.01em;
  margin: 0; color: var(--aside-ink);
  /* `width: fit-content` et non `align-self`: en mobile le panneau passe en
     `flex-direction: row; align-items: center`, et un `align-self` calerait
     la marque en haut de la rangee. La largeur ajustee borne la zone
     cliquable au texte sans toucher a l'alignement transversal. */
  text-decoration: none; width: fit-content;
}
/* L'outline de focus n'est PAS supprimee : sur fond de lavis, un changement
   de couleur seul ne fait pas 3:1 (WCAG 1.4.11). */
.aside .brand:hover { opacity: .85; }
/* Ces trois regles n'existaient que parce que le panneau etait navy : le
   blanc y ressortait en clair, l'accent en sombre. Sur un lavis clair, du
   blanc serait invisible. L'accent convient desormais aux deux themes, et
   une seule regle remplace les trois. */
.aside .brand em { font-style: italic; color: var(--accent); }

.promise {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1;
  letter-spacing: -.015em; margin: 0; text-wrap: balance;
}
.trust { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.trust li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.45; color: var(--aside-soft);
}
.trust b { color: var(--aside-ink); font-weight: 500; }
.trust svg { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--aside-ink); }

/* Emplacement des illustrations. Vide, il ne prend aucune place : une boite
   reservee et vide vaut un trou dans la mise en page. */
/* L'image va bord a bord : les marges negatives annulent le retrait du
   panneau, et c'est le galbe de celui-ci qui la decoupe a droite — d'ou
   l'overflow:hidden posé sur .aside. Rien d'autre n'y deborde. */
.illus {
  margin: auto calc(-1 * var(--sp-4)) calc(-1 * var(--sp-3));
}
.illus:empty { display: none; }
.illus img { display: block; width: 100%; height: auto; }

/* --- estimation provisoire, dans le panneau ------------------------------
   Elle etait en bas de page, la ou on ne la lisait qu'en la cherchant. Ici
   elle est en face du regard pendant toute la saisie : c'est le motif de
   continuer, et il grandit a chaque reponse. */
.live {
  border: 1px solid var(--aside-line); border-radius: var(--r-md);
  padding: 16px 18px;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--t-panel) var(--ease), transform var(--t-panel) var(--ease);
}
.live.on { opacity: 1; transform: none; }
.live .k {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--aside-soft); display: block;
  margin-bottom: 6px;
}
.live .v {
  font-family: var(--mono); font-size: 23px; font-weight: 500;
  color: var(--aside-ink); font-variant-numeric: tabular-nums;
}
.live .v.up { animation: bump .4s ease; }
@keyframes bump { 40% { transform: translateY(-2px); } }

/* --- colonne de droite --------------------------------------------------- */
.stage {
  display: flex; flex-direction: column;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  min-width: 0;
}
.bar { display: flex; align-items: center; gap: var(--sp-2); }
.rail {
  flex: 1; height: 4px; border-radius: var(--pill);
  background: var(--sunken); overflow: hidden;
}
.rail > i {
  display: block; height: 100%; width: 0;
  border-radius: var(--pill); background: var(--accent);
  transition: width .5s var(--ease);
}
.count {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin: 0;
  white-space: nowrap; flex: none;
}

.iconbtn {
  position: relative;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  border-radius: var(--r-sm); width: 34px; height: 34px; cursor: pointer;
  display: grid; place-items: center; flex: none;
  transition: border-color var(--t-hover) var(--ease),
              color        var(--t-hover) var(--ease),
              background   var(--t-hover) var(--ease);
}
/* 34px dessines, 44px cliquables. Grossir le bouton deformerait la barre
   pour un seul controle ; la zone de contact, elle, ne se voit pas. */
.iconbtn::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.iconbtn:hover { border-color: var(--line-firm); color: var(--ink); background: var(--sunken); }
.iconbtn:active { transform: scale(.94); }

/* La scene occupe tout le reste et centre la question : c'est ce qui donne
   l'impression d'espace, meme quand la question est courte. */
.scene {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: var(--sp-4) 0;
  min-height: 0;
}
.step { width: 100%; max-width: 620px; margin: 0 auto; }
/* Repli quand GSAP n'est pas la : la classe est posee par le script des
   qu'il prend la main sur le mouvement. */
.step { animation: enter var(--t-panel) var(--ease) both; }
.step.back { animation-name: enterBack; }
.js-motion .step, .js-motion .step.back { animation: none; }
@keyframes enter     { from { opacity: 0; transform: translate3d(22px,0,0); } }
@keyframes enterBack { from { opacity: 0; transform: translate3d(-22px,0,0); } }
@media (prefers-reduced-motion: reduce) {
  .step, .step.back { animation: none; }
  .rail > i { transition: none; }
}

/* --- pied de la colonne : une action principale, une seule --------------- */
.nav {
  max-width: 620px; margin: 0 auto; width: 100%;
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
.nav .err { flex-basis: 100%; }

/* La jauge du panneau. Meme trace que la barre du haut, en plus lisible :
   celle-ci est nommee (« Progression », « 4 / 10 »), l'autre est muette. */
.live .jauge {
  display: block; height: 4px; margin-top: 8px;
  border-radius: var(--pill); background: var(--sunken); overflow: hidden;
}
.live .jauge > i {
  display: block; height: 100%; width: 0;
  border-radius: var(--pill); background: var(--accent);
  transition: width .4s var(--ease);
}

.foot {
  max-width: 620px; margin: var(--sp-3) auto 0; width: 100%;
  padding-top: var(--sp-2); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 6px var(--sp-2);
  font-size: 12px; color: var(--muted);
}
.foot a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.foot a:hover { color: var(--ink); border-bottom-color: var(--line-firm); }

/* --- ecran etroit --------------------------------------------------------
   Le panneau passe au-dessus et se reduit a l'essentiel : la marque et
   l'estimation provisoire. La promesse et les points de reassurance ont fait
   leur travail a l'ouverture ; les garder occuperait la moitie de l'ecran
   d'un telephone pour rien. */
@media (max-width: 900px) {
  /* "auto 1fr" n'est pas cosmetique : avec deux rangees auto sous un
     min-height de 100vh, la grille repartit l'espace libre entre les deux et
     le bandeau se fait etirer a 165px pour un contenu de 76. Seule la scene
     doit absorber ce qui reste. */
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .aside {
    flex-direction: row; align-items: center; gap: var(--sp-2);
    padding: 14px var(--sp-3);
    border-radius: 0 0 var(--r-lg) var(--r-lg) / 0 0 26px 26px;
  }
  .aside .promise, .aside .trust, .aside .illus { display: none; }
  .live {
    margin-left: auto; border: 0; padding: 0; text-align: right;
    transform: none;
  }
  .live .v { font-size: 18px; }
  .live .jauge { display: none; }
  .stage { padding: var(--sp-2) var(--sp-3) var(--sp-4); }
  .scene { padding: var(--sp-3) 0; }
}

/* --- la question --------------------------------------------------------- */
.qhead { margin: 0 0 var(--sp-3); }
h2.q {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 3.2vw, 42px); line-height: 1.08;
  letter-spacing: -.02em; margin: 0 0 12px; text-wrap: balance;
}
.sub {
  color: var(--muted); font-size: 14.5px; line-height: 1.55;
  margin: 0; max-width: 58ch;
}
.sub b { color: var(--ink-soft); font-weight: 500; }

/* --- champs -------------------------------------------------------------- */
.grid { display: grid; gap: var(--sp-3); }
.grid.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .grid.two { grid-template-columns: 1fr; } }

.fld { display: grid; gap: 7px; min-width: 0; }
.fld > label, .lbl {
  font-size: 14px; font-weight: 500; color: var(--ink-soft);
  display: flex; align-items: baseline; gap: 6px;
}
.req { color: var(--accent); }
.opt { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: auto; }

input[type="text"], input[type="number"], select {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-firm); border-radius: var(--r-sm);
  padding: 13px 15px;
  transition: border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input:hover, select:hover { border-color: var(--accent-soft); }
/* Le halo adoucit la prise de focus ; il ne la SIGNALE pas. --accent-wash sur
   fond blanc ne fait qu'environ 1,1:1, tres loin des 3:1 qu'exige un
   indicateur de focus, et le seul changement restant serait alors une bordure
   d'un pixel distinguee par la couleur seule. L'outline reste donc en place :
   :focus-visible ne la montre qu'au clavier, elle ne genait personne. */
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
input::placeholder { color: var(--muted); opacity: .7; }

.unit { position: relative; }
.unit > span {
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 12px; color: var(--muted); pointer-events: none;
}
.unit input { padding-right: 44px; }

.hint { font-size: 12px; color: var(--muted); margin: 0; }
.hint.warn { color: var(--warn); }
.hint.ok   { color: var(--good); }

/* --- suggestions --------------------------------------------------------- */
.combo { position: relative; }
.pop {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--surface); border: 1px solid var(--line-firm);
  border-radius: 10px;
  /* La liste doit se detacher du contenu sans ombre : une bordure ferme
     et un fond opaque suffisent, et restent lisibles en sombre ou une
     ombre noire sur fond noir ne se voit pas. */
  border-color: var(--accent-soft);
  max-height: 264px; overflow-y: auto; padding: 4px; display: none;
}
.pop.open { display: block; }
.pop button {
  display: flex; width: 100%; gap: 10px; align-items: baseline;
  text-align: left; font: inherit; color: var(--ink);
  background: none; border: 0; border-radius: 7px; padding: 8px 10px; cursor: pointer;
}
.pop button:hover, .pop button.on { background: var(--accent-wash); }
.pop .cp { font-family: var(--mono); font-size: 12px; color: var(--muted); flex: none; }
.pop .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop .n  { font-family: var(--mono); font-size: 11px; color: var(--muted); flex: none; }
.pop .empty { padding: 12px; color: var(--muted); font-size: 14px; }

/* --- tuiles -------------------------------------------------------------- */
.tiles { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; }
.tile {
  position: relative; cursor: pointer; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-firm);
  border-radius: var(--r-md); padding: 20px 18px 16px; min-width: 138px;
  display: grid; gap: 9px; justify-items: center; text-align: center;
  transition: border-color var(--t-hover) var(--ease),
              background   var(--t-hover) var(--ease);
}
.tile:hover { border-color: var(--accent); background: var(--accent-wash); }
.tile:active { transform: translateY(0); }
.tile[aria-pressed="true"] {
  border-color: var(--accent); background: var(--accent-wash);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.tile svg { width: 46px; height: 46px; color: var(--accent); }
.tile .cap { font-size: 14px; font-weight: 500; }
.tile .note { font-size: 11px; color: var(--muted); margin-top: -4px; }
.tiles.sm { max-width: none; }
.tiles.left { margin: 8px 0 0; }
.tiles.sm .tile { min-width: 108px; padding: 13px 12px 11px; }
.tiles.sm .tile svg { width: 32px; height: 32px; }

/* --- segments ------------------------------------------------------------ */
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button {
  flex: 1 1 auto; font: inherit; font-size: 14px; cursor: pointer;
  color: var(--ink-soft); background: var(--surface);
  border: 1px solid var(--line-firm); border-radius: 9px; padding: 9px 12px;
  min-height: 40px;
  transition: background var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease),
              color var(--t-hover) var(--ease), transform var(--t-tap) var(--ease);
  white-space: nowrap;
}
.seg button:hover { border-color: var(--accent-soft); color: var(--ink); }
.seg button:active { transform: translateY(1px); }
.seg button[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent);
  color: var(--on-accent); font-weight: 500;
}
.seg.epc button { min-width: 46px; flex: 0 0 auto; font-family: var(--mono); font-weight: 500; }
/* Les couleurs PEB sont imposees par le certificat, pas par notre palette :
   le blanc reste la seule encre qui tienne sur les sept, du vert fonce au
   rouge. C est le seul #fff en dur qui subsiste, et il est justifie. */
.seg.epc button[aria-pressed="true"] { background: var(--k); border-color: var(--k); color: #fff; }
.seg.epc button i { display: block; height: 3px; border-radius: 2px; background: var(--k); margin-top: 5px; }

/* --- pas a pas ----------------------------------------------------------- */
.stepper {
  display: flex; align-items: center; gap: 0;
  border: 1px solid var(--line-firm); border-radius: 10px; overflow: hidden;
  background: var(--surface); width: 100%;
}
.stepper button {
  font: inherit; font-size: 18px; line-height: 1; cursor: pointer;
  background: none; border: 0; color: var(--ink-soft);
  width: 44px; height: 44px; flex: none;
  transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
}
.stepper button:hover:not(:disabled) { background: var(--accent-wash); color: var(--accent); }
.stepper button:disabled { color: var(--line-firm); cursor: not-allowed; }
.stepper input {
  border: 0; border-radius: 0; text-align: center;
  font-family: var(--mono); font-size: 16px; padding: 11px 0;
}
.stepper input:focus { box-shadow: none; background: var(--accent-wash); }

/* --- reveal -------------------------------------------------------------- */
.reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-panel) var(--ease); }
.reveal.on { grid-template-rows: 1fr; }
.reveal > div { overflow: hidden; min-height: 0; }
@media (prefers-reduced-motion: reduce) { .reveal { transition: none; } }

/* --- action principale ---------------------------------------------------- */
.btn {
  font: inherit; font-size: 16px; font-weight: 500; cursor: pointer;
  border-radius: var(--pill); padding: 14px 28px; border: 1px solid transparent;
  min-height: 52px;
  transition: transform var(--t-tap) var(--ease),
              background   var(--t-hover) var(--ease),
              border-color var(--t-hover) var(--ease),
              color        var(--t-hover) var(--ease),
              opacity      var(--t-hover) var(--ease);
}
.btn.go {
  flex: 1; background: var(--accent); color: var(--on-accent);
  font-weight: 600;
}
.btn.go:hover:not(:disabled) { background: var(--accent-hi); border-color: var(--accent-hi); }
/* Le retour d'appui va vers le bas et plus vite que la sortie : c'est ce qui
   fait qu'un bouton parait enfonce plutot que deplace. */
.btn.go:active:not(:disabled) { transform: translateY(1px); }
.btn.go:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn.ghost {
  flex: none; background: none; color: var(--muted); padding: 14px 18px;
}
.btn.ghost:hover:not(:disabled) { color: var(--ink); background: var(--sunken); }
.btn.ghost:active:not(:disabled) { transform: translateY(1px); }
.btn.ghost:disabled { opacity: .35; cursor: not-allowed; }
/* Au premier ecran il n'y a rien derriere : le bouton disparait plutot que de
   rester grise, une action morte etant un bruit de plus a trier. */
/* [hidden] DOIT MASQUER, SANS EXCEPTION.

   La valeur que le navigateur applique a `[hidden]` est la plus faible qui
   soit : n'importe quelle regle posant un `display` la bat. `.modal form`
   est en grid — apres l'envoi, `formLead.hidden = true` n'avait donc AUCUN
   effet : le formulaire restait affiche, bouton fige sur « Un instant… »,
   avec la confirmation empilee dessous.

   Ce piege a deja mordu ici une fois, sur `.pair` et `.consent`, et il avait
   ete referme cas par cas. Il est revenu par un troisieme selecteur. Une
   regle globale le ferme pour de bon : `hidden` veut dire cache, et il
   n'existe aucun cas ou l'on veuille l'inverse — d'ou le `!important`, qui
   ne se justifie que parce que la regle du navigateur, elle, est
   inhabituellement faible.

   Le symptome est muet : rien ne casse, la page se contente d'afficher deux
   choses la ou il n'en faut qu'une. */
[hidden] { display: none !important; }


/* --- ecran de calcul ------------------------------------------------------
   Il occupe le temps reel du calcul et pas une seconde de plus : la
   progression est reelle — chaque ligne s'allume quand son etape est faite —
   plutot qu'une barre qui feint de mesurer quelque chose. */
.crunch { display: grid; gap: 14px; max-width: 460px; }
.crunch li {
  display: flex; align-items: center; gap: 12px;
  font-size: 14.5px; color: var(--muted); list-style: none;
}
.crunch li .dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--line-firm);
}
.crunch li.on { color: var(--ink); }
.crunch li.on .dot { background: var(--accent); }
/* SANS GSAP — le site heberge — PERSONNE N'ALLUMAIT CES POINTS. L'ecran de
   calcul restait fige, quatre lignes grises, pendant tout l'appel au serveur,
   et jusqu'a vingt secondes quand le jeton est trop jeune : c'est le « gel »
   signale par des utilisateurs (08/10/2026). Une pulsation en CSS dit que
   quelque chose travaille ; GSAP, quand il est la, reprend la main via .on. */
.crunch li .dot { animation: pulse 1.6s ease-in-out infinite; }
.crunch li:nth-child(2) .dot { animation-delay: .4s; }
.crunch li:nth-child(3) .dot { animation-delay: .8s; }
.crunch li:nth-child(4) .dot { animation-delay: 1.2s; }
.crunch li.on .dot { animation: none; }
@keyframes pulse {
  0%, 100% { background: var(--line-firm); transform: scale(1); }
  50%      { background: var(--accent);    transform: scale(1.4); }
}
@media (prefers-reduced-motion: reduce) {
  .crunch li .dot { animation: none; background: var(--accent); }
}

/* --- voile et modale ------------------------------------------------------ */
.veil {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(10, 14, 22, .58);
  display: grid; place-items: center; padding: var(--sp-3);
  overflow-y: auto;
}

.modal {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-firm); border-radius: var(--r-lg);
  width: 100%; max-width: 560px; padding: var(--sp-4);
  margin: auto;
}
.modal .k {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 12px;
}
.modal h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(26px, 3.6vw, 36px); line-height: 1.08;
  letter-spacing: -.015em; margin: 0 0 12px; text-wrap: balance;
}
.modal .say { color: var(--ink-soft); font-size: 14.5px; margin: 0 0 var(--sp-3); }
.modal .say b { color: var(--ink); font-weight: 600; }

.modal form { display: grid; gap: var(--sp-2); }
.modal .pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
@media (max-width: 480px) { .modal .pair { grid-template-columns: 1fr; } }

/* Sans cela, seuls les champs de la paire s'etirent : e-mail et telephone
   restaient a leur largeur par defaut, plus etroits, et le formulaire
   avait l'air bancal. */
.modal input:not([type="checkbox"]) { width: 100%; }

/* Sans cela, seuls les champs de la paire s'etirent : e-mail et telephone
   restaient a leur largeur par defaut, plus etroits, et le formulaire
   avait l'air bancal. */
.modal input:not([type="checkbox"]) { width: 100%; }

.modal label.lab {
  font-size: 14px; font-weight: 500; color: var(--ink-soft);
  display: block; margin-bottom: 6px;
}
.modal .req { color: var(--accent); margin-left: 3px; }

/* Le champ fautif se signale par la couleur ET par le message : la couleur
   seule ne dit rien a qui ne la distingue pas. */
.modal input[aria-invalid="true"] { border-color: var(--bad); }
.modal .ferr {
  font-size: 12.5px; color: var(--bad); margin: 6px 0 0; min-height: 0;
}
.modal .ferr:empty { display: none; }

/* --- consentement ---------------------------------------------------------
   Zone de contact large : la case seule fait 18px, bien en dessous du seuil
   tactile. C'est le libelle entier qui la coche. */
.consent {
  display: grid; grid-template-columns: auto 1fr; gap: 12px;
  align-items: start; cursor: pointer;
  background: var(--sunken); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 14px 16px;
  font-size: 14px; line-height: 1.5; color: var(--ink-soft);
  margin-top: 4px;
}
.consent input {
  width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent);
  cursor: pointer; flex: none;
}
.consent b { color: var(--ink); font-weight: 600; }
.consent:has(input:focus-visible) { border-color: var(--accent); }

.modal .actions { display: grid; gap: 10px; margin-top: var(--sp-2); }
.modal .btn.go { width: 100%; justify-content: center; }
.modal .btn.ghost { width: 100%; }
/* Un bouton desactive doit dire pourquoi : sans cela c'est une impasse
   silencieuse, et l'utilisateur cherche sans savoir quoi. */
.modal .why {
  font-size: 12.5px; color: var(--muted); margin: 0; text-align: center;
  min-height: 1.2em;
}
.modal .legal { font-size: 12px; color: var(--muted); margin: var(--sp-2) 0 0; }

/* --- ce qui suit le prix -------------------------------------------------
   Le resultat n'est plus sous cle et il n'y a plus qu'UNE suite : faire
   estimer le bien sur place. Le rapport par courriel a ete retire.

   Il promettait un suivi regulier des prix, ce qui supposait deux choses
   qu'on ne peut pas tenir aujourd'hui : une desinscription dans chaque
   courriel — donc un systeme de newsletter et une suppression effective en
   base — et surtout une CADENCE. Le releve est reconstruit quand il l'est,
   pas tous les mois. Promettre une regularite qu'on ne maitrise pas coute
   plus cher en credit qu'elle ne rapporte en contacts : c'est la meme regle
   que partout ici, le texte suit le comportement.

   Les leviers de prix, eux, n'avaient aucune raison d'etre retenus : ils
   s'affichent maintenant a l'ecran, pour tout le monde.
   ----------------------------------------------------------------------- */
.lev { display: grid; gap: 10px; margin: 4px 0 0; }
.lev .row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px;
  align-items: baseline; padding: 11px 0; border-top: 1px solid var(--line);
}
.lev .row:first-child { border-top: 0; }
.lev .quoi { font-size: 14.5px; }
.lev .quoi b { font-weight: 600; }
.lev .val { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 15px; }
.lev .pct { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--cool-ink, var(--ink)); }
/* L'avertissement n'est pas une mention de bas de page : annoncer un ecart
   de prix sans dire que le cout des travaux n'y est pas compte presenterait
   une perte possible comme un gain. */
.garde {
  font-size: 14px; color: var(--muted); margin: 16px 0 0;
  border-left: 2px solid var(--line-firm); padding-left: 12px;
}

/* La proposition d'estimation sur place : une seule action, apres le prix. */
.suite { margin-top: var(--sp-2); }
.suite h3 { margin: 0 0 10px; }
.suite .pitch { color: var(--muted); font-size: 16px; margin: 0 0 16px; max-width: 62ch; }
.suite ul { margin: 0 0 20px; padding-left: 18px; color: var(--muted); font-size: 14.5px; }
.suite ul li { margin: 0 0 9px; }
.suite ul li b { color: var(--ink); font-weight: 600; }
.suite .apres { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; max-width: 62ch; }
.suite .hs { }

/* --- la relance, quelques secondes apres le prix -------------------------
   C'EST UNE MODALE, ET ELLE EST CENTREE. Un panneau d'angle avait ete
   essaye d'abord, pour ne pas interrompre la lecture du prix ; il ne se
   voyait pas assez. Le parti est donc assume : on arrete le visiteur, une
   fois, sur le seul argument qui vaille.

   Ce qui n'est pas negociable, en revanche, c'est la SORTIE. Echap, un
   bouton « Plus tard » et une croix : trois fois la meme porte, parce
   qu'une modale sans issue est un piege clavier (WCAG 2.1.2), meme quand
   son objet est de retenir. Elle reutilise le voile du formulaire — un
   seul piege a focus, un seul `inert`, un seul endroit ou se tromper. */
.modal .relance-b ul {
  margin: 0 0 var(--sp-3); padding-left: 18px;
  color: var(--ink-soft); font-size: 14.5px;
}
.modal .relance-b ul li { margin: 0 0 10px; }
.modal .relance-b ul li b { color: var(--ink); font-weight: 600; }
/* `[hidden]` est la declaration la plus faible qui soit : n'importe quelle
   regle posant un `display` la bat. Le bloc n'en pose aucune aujourd'hui,
   et cette ligne existe pour que cela reste vrai si l'on en ajoute une —
   c'est exactement ainsi que le formulaire s'etait retrouve affiche sous sa
   propre confirmation. */
.modal .relance-b[hidden] { display: none; }
/* La croix est une vraie sortie, pas un ornement : 36 px de cible et une
   etiquette lisible par un lecteur d'ecran. */
.modal { position: relative; }
.modal .x {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px;
  background: none; color: var(--muted); font-size: 16px; cursor: pointer;
  line-height: 1;
}
.modal .x:hover { background: var(--sunken); color: var(--ink); }

/* --- resultat ------------------------------------------------------------ */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 26px;
}
.hero { text-align: center; padding: 34px 26px 30px; }
.hero .k { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
/* Le chiffre ne se compose pas : il est juste des la premiere image, et une
   breve mise en valeur suffit a le faire remarquer. Composer les dizaines
   de milliers ferait lire un montant faux pendant tout le trajet. */
.hero .big { animation: land .5s var(--ease) both .1s; }
@keyframes land { from { opacity: 0; transform: translateY(6px); }
                  60%  { color: var(--accent); } }
@media (prefers-reduced-motion: reduce) { .hero .big { animation: none; } }
.big {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(44px, 9vw, 78px); line-height: 1;
  letter-spacing: -.02em; margin: 0;
  font-variant-numeric: tabular-nums;
}
.per { font-family: var(--mono); font-size: 14px; color: var(--muted); margin: 10px 0 0; }

.band { position: relative; height: 8px; border-radius: 999px; background: var(--sunken); margin: 30px 0 8px; }

/* La fourchette se trace de la borne basse vers la haute, piste et point d'un
   seul geste : c'est le seul mouvement de l'ecran de resultat avec le chiffre
   qui se compose, et il dit dans quel sens lire la bande.

   Les marges negatives du clip sont indispensables : le point deborde de la
   piste (13px sur 8) et porte un halo de 3px. Un inset a zero les rognerait —
   et pas seulement pendant l'animation, puisque "both" retient l'etat final. */
.hero .band { animation: draw .62s var(--ease) both .12s; }
@keyframes draw {
  from { clip-path: inset(-12px 100% -12px -12px); }
  to   { clip-path: inset(-12px -12px -12px -12px); }
}
@media (prefers-reduced-motion: reduce) { .hero .band { animation: none; } }
.bfill { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--accent-wash); border: 1px solid var(--accent-soft); }
.bpt { position: absolute; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--surface); }
.bends { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.bends b { display: block; color: var(--ink-soft); font-weight: 500; }
/* Les deux bouts se lisent en meme police et meme couleur : colles, ils
   forment une seule phrase illisible. `space-between` ne les separe que
   s'il reste de la place — a 390 px il n'en restait que 7 px. Le cap les
   fait plier sur deux lignes plutot que se toucher. */
.bends span { max-width: 46%; }
.bends .r { text-align: right; }

/* `.cols` — la grille a deux colonnes de l'ecran de resultat — a ete retiree
   avec son dernier enfant : les cartes prennent toutes la largeur, et `.card
   mt` porte l'ecart. Ce fichier portait deja deux jeux de regles mortes
   (`.crow`, jamais posee ; `table`, sans tableau) ; une troisieme se serait
   fait passer pour un composant du systeme. */

h3.sec {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}

/* --- contributions --------------------------------------------------------
   C'ETAIT UNE BARRE DIVERGENTE, ET LA FORME MENTAIT. Un graphique centre sur
   zero avec des montants en euros est la grammaire d'une DECOMPOSITION
   ADDITIVE : il invitait exactement a la somme que la note de bas de carte
   interdisait ensuite, en jargon. Et l'additivite est hors d'atteinte ici par
   construction — la cible est log1p(prix), donc meme une attribution exacte
   en espace-modele redevient multiplicative en euros, expm1 n'etant pas
   lineaire. Il faut cesser de la suggerer, pas la poursuivre.

   Surtout, la barre ne disait pas PAR RAPPORT A QUOI. Le point de comparaison
   existait pourtant, et il etait gratuit : `valeur - contribution` est
   l'estimation qu'aurait donnee le meme bien sans cette reponse. Un vrai
   nombre en euros, calculable dans la page, sans rien changer au serveur.
   L'en-tete du tableau porte la question, la ligne d'ancrage porte la
   reference.

   Le tableau reprend `table` / `th` / `td.num` declares plus bas, qui ne
   servaient plus a rien depuis que les comparables se rendent en bande. */
.cintro { font-size: 13px; color: var(--muted); margin: -4px 0 16px; max-width: 72ch; }
/* Sous 900 px, le tableau defile dans sa boite plutot que de faire deborder
   la page entiere — meme parti que les tableaux du blog. */
.contrib-wrap { overflow-x: auto; }
.contrib td:first-child { color: var(--ink-soft); }
.contrib td.ref { color: var(--muted); }
.contrib td.ec  { font-weight: 500; }
.contrib td.pos { color: var(--good); }
.contrib td.neg { color: var(--bad); }
/* La ligne d'ancrage : ce a quoi tout le reste se compare. Sans filet
   superieur — elle ouvre le corps du tableau, elle ne s'en detache pas.
   `--accent-wash` et non `--sunken` : en sombre, #1C1C28 sur #17171F ne se
   distingue pratiquement pas, et la ligne perdait la seule chose qui la fait
   lire comme une reference. C'est aussi la teinte de `.bfill`, la zone de la
   fourchette — la meme couleur pour la meme idee. */
.contrib .anc td { background: var(--accent-wash); border-top: 0; color: var(--ink); font-weight: 600; }
.contrib .anc td:first-child { border-radius: 6px 0 0 6px; }
.contrib .anc td:last-child { border-radius: 0 6px 6px 0; padding-right: 10px; }

/* comparables */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 500; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 0 10px 8px 0; }
td { padding: 9px 10px 9px 0; border-top: 1px solid var(--line); vertical-align: top; }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
td a { color: var(--accent); text-decoration: none; }
td a:hover { text-decoration: underline; }
.tt { display: block; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* recap */
.recap { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 26px; }
.chip {
  font-size: 12px; color: var(--ink-soft); background: var(--sunken);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px;
  cursor: pointer; font-family: inherit;
  transition: border-color var(--t-hover) var(--ease),
              color        var(--t-hover) var(--ease),
              background   var(--t-hover) var(--ease),
              transform    var(--t-tap)   var(--ease);
}
.chip:hover { border-color: var(--accent-soft); color: var(--accent); background: var(--accent-wash); }
.chip:active { transform: translateY(1px); }
.chip b { font-weight: 500; color: var(--ink); }

.notes { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.notes li { margin-bottom: 7px; }
.notes b { color: var(--ink-soft); font-weight: 500; }

/* --- le partage : sous le prix, et un rappel en bas ---------------------
   Il vient JUSTE SOUS la carte du prix, et c'est tout l'objet. Le moment ou
   l'on a envie de montrer un resultat est celui ou on le decouvre ; pose en
   bas de page, apres la proposition d'agence, l'encart arrivait quand le
   visiteur etait deja parti. Il ne prend donc AUCUN fond : le prix doit rester
   l'element dominant, et un encart colore juste dessous lui disputerait
   l'attention. Le partage se lit comme une prolongation du resultat.

   Rien ici ne charge quoi que ce soit chez un reseau : ce sont des liens
   ordinaires, pas les boutons officiels des plateformes, qui eux font venir
   leur script et tracent le visiteur des l'affichage. C'est ce qui permet a
   la politique de cookies de rester vraie sans une ligne de plus. */
.envoi { text-align: center; padding: 26px 12px 8px; }
.envoi h3 {
  font-family: var(--serif); font-weight: 400; font-size: 25px;
  line-height: 1.2; letter-spacing: -.01em; margin: 0 0 8px; color: var(--ink);
  text-wrap: balance;
}
.envoi .tx {
  font-size: 14.5px; line-height: 1.6; color: var(--ink-soft);
  margin: 0 auto 18px; max-width: 46ch;
}
/* Le partage natif ouvre la liste des applications du telephone — la SEULE
   voie vers Instagram, TikTok, Messenger ou les SMS. Le bouton reste masque
   la ou le navigateur ne sait pas le faire : une action qui ne mene nulle
   part vaut moins que son absence. */
.envoi .btn.go, .rappel .btn.go {
  width: 100%; max-width: 320px; margin: 0 auto 14px; display: block;
}
.envoi .montant {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 13px; color: var(--muted); margin: 14px 0 0;
}
.envoi .montant input { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); cursor: pointer; }

.rs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.rs a, .rs button {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line-firm);
  border-radius: var(--pill); padding: 8px 15px 8px 9px; min-height: 42px;
  cursor: pointer;
  transition: border-color var(--t-hover) var(--ease),
              color       var(--t-hover) var(--ease),
              transform   var(--t-tap)   var(--ease);
}
.rs a:hover, .rs button:hover { border-color: var(--accent-soft); color: var(--ink); }
.rs a:active, .rs button:active { transform: translateY(1px); }
.rs .ic {
  width: 25px; height: 25px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.rs .ic svg { width: 14px; height: 14px; fill: #fff; }
/* Les couleurs de marque sont fixes — c'est ce qui les rend reconnaissables.
   « Copier » n'en a pas : les jetons font l'inversion entre les deux themes. */
.rs .wa { background: #25D366; }
.rs .fb { background: #1877F2; }
.rs .cp { background: var(--muted); }
.rs .cp svg { fill: var(--surface); }

/* Le rappel du bas ne repete pas le premier : il ne parle plus du resultat
   (« regardez ») mais de quelqu'un d'autre (« ca lui servirait »). Deux
   motivations differentes, donc deux phrases. Il prend le lavis d'accent,
   sans quoi il se perdrait dans la colonne de cartes blanches. */
.rappel {
  background: var(--accent-wash); border: 1px solid var(--accent-soft);
  border-radius: 16px; padding: 24px 22px; text-align: center; margin-top: 20px;
}
.rappel h3 {
  font-family: var(--serif); font-weight: 400; font-size: 22px;
  line-height: 1.25; margin: 0 0 16px; color: var(--ink); text-wrap: balance;
}
@media (max-width: 560px) {
  .envoi h3 { font-size: 22px; }
  .rappel { padding: 22px 16px; }
}

.center { text-align: center; }
.mt { margin-top: 20px; }
.err { color: var(--bad); font-size: 14px; }

/* --- banniere de consentement (posee par build_app.py) ------------------ */
.ck {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
  display: flex; justify-content: center; padding: 16px;
  pointer-events: none;
}
.ck[hidden] { display: none !important; }
.ck .ck-in {
  /* LA PALETTE CLAIRE EN DUR D'ABORD, ET LE THEME PAR-DESSUS.
     `light-dark()` n'existe que depuis 2024, et jusqu'ici SEUL L'ACCUEIL en
     dependait — les neuf cents pages de contenu calent leur theme sur une
     requete de media. La banniere y ajoute donc une dependance qu'elles
     n'avaient pas.
     Une var() dont la valeur ne peut pas etre calculee ne retombe PAS sur la
     declaration precedente : la propriete devient `unset`, donc `transparent`
     pour un fond. Sur un navigateur d'avant 2024, la banniere aurait ete du
     texte gris sur la page, sans boite ni boutons — illisible, et invisible
     depuis ici. Ecrire deux fois le jeton n'y change rien : c'est a la
     SUBSTITUTION que l'invalidite apparait, pas au parsing. Il faut donc un
     `@supports`, et la palette claire comme plancher. */
  --ck-bg:    #FFFFFF;
  --ck-ink:   #1B1B2E;
  --ck-soft:  #454563;
  --ck-mute:  #64647E;
  --ck-line:  #CACBE6;
  --ck-sunk:  #EDEEFA;
  --ck-acc:   #5B54E8;
  --ck-on:    #FFFFFF;
  --ck-ombre: rgba(27,27,46,.28);
  pointer-events: auto;
  width: 100%; max-width: 620px;
  background: var(--ck-bg); color: var(--ck-ink);
  border: 1px solid var(--ck-line); border-radius: 16px;
  box-shadow: 0 18px 48px -12px var(--ck-ombre);
  padding: 20px 22px 18px;
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: left;
}
@supports (color: light-dark(#000, #fff)) {
  .ck .ck-in {
    --ck-bg:    light-dark(#FFFFFF, #17171F);
    --ck-ink:   light-dark(#1B1B2E, #ECECF6);
    --ck-soft:  light-dark(#454563, #C3C3D6);
    --ck-mute:  light-dark(#64647E, #9494AC);
    --ck-line:  light-dark(#CACBE6, #3C3C4E);
    --ck-sunk:  light-dark(#EDEEFA, #1C1C28);
    --ck-acc:   light-dark(#5B54E8, #A9A2FF);
    --ck-on:    light-dark(#FFFFFF, #101018);
    --ck-ombre: light-dark(rgba(27,27,46,.28), rgba(0,0,0,.7));
  }
}
.ck .ck-in h2 {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-weight: 400; font-size: 23px; line-height: 1.2;
  margin: 0 0 7px; padding: 0; border: 0; color: var(--ck-ink);
  letter-spacing: -.005em; text-transform: none;
  max-width: none; text-wrap: wrap;
}
.ck .ck-in h2::before { content: none; }
.ck .ck-in p { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--ck-soft); }
.ck .ck-in p b { color: var(--ck-ink); font-weight: 600; }
.ck .ck-acts { display: flex; gap: 10px; }
.ck .ck-acts button {
  flex: 1 1 0; min-width: 0;
  font-family: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.2;
  padding: 11px 16px; border-radius: 12px; border: 1px solid transparent;
  cursor: pointer;
}
.ck .ck-acts .ck-non { background: var(--ck-sunk); color: var(--ck-ink); border-color: var(--ck-line); }
.ck .ck-acts .ck-oui { background: var(--ck-acc); color: var(--ck-on); }
.ck .ck-acts button:focus-visible { outline: 2px solid var(--ck-acc); outline-offset: 2px; }
.ck .ck-in .ck-more { margin: 14px 0 0; font-size: 12.5px; color: var(--ck-mute); }
.ck .ck-in .ck-more a { color: var(--ck-mute); text-underline-offset: 2px; }
/* Le bouton de rappel, sur la politique de cookies. */
.ck-again {
  font-family: inherit; font-size: 15px; font-weight: 600;
  padding: 11px 18px; border-radius: 12px; cursor: pointer;
  background: var(--accent, #5B54E8); color: var(--on-accent, #FFFFFF);
  border: 1px solid transparent;
}
.ck-again:focus-visible { outline: 2px solid var(--accent, #5B54E8); outline-offset: 2px; }
@media (max-width: 560px) {
  .ck { padding: 0; }
  .ck .ck-in { border-radius: 18px 18px 0 0; border-bottom: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .ck .ck-in { animation: ck-up .28s cubic-bezier(.22,.61,.36,1); }
}
@keyframes ck-up { from { transform: translateY(14px); opacity: 0; } }