/* ============================================================
   LE SITE PUBLIC, page d'accueil.
   Extrait de design/site-accueil.html au moment de la mise en
   ligne : la CSP du site porte style-src 'self', donc AUCUN style
   en ligne ne s'applique en production. Un bloc <style> dans la
   page serait purement decoratif, et la page arriverait nue.
   Les polices sont auto-hebergees par /style.css, jamais Google.
   ============================================================ */
/* ============================================================
     LE SITE PUBLIC, page d'accueil.
     Hérite du vocabulaire du logiciel praticien (validé le 14 août
     2026) : papier chaud et encre, Fraunces en titres et chiffres,
     Inter Tight au travail, deux accents rares.

     🔴 DEUX RÈGLES DU DOSSIER, TENUES ICI :
     1. « Elle vend le RÉSULTAT, jamais le mécanisme » (règle de
        discrétion). Aucune phrase de cette page n'explique comment
        le créneau se remplit : ni liste d'attente, ni ordre de
        priorité, ni calendrier d'envoi. Un concurrent qui la lit
        apprend ce que ça fait, pas comment le refaire.
     2. **L'adresse du siège n'apparaît nulle part.** C'est une
        adresse personnelle, la règle est absolue.

     Responsive : une seule colonne sous 900 px, sans rien perdre.
     ============================================================ */

  :root{
    --sol:#EFEDE4; --carte:#FFFDF7; --encre:#111208;
    --gris:#5E5C52; --gris3:#8B8879; --filet:#D3CFC0;
    --rouille:#A63A1E; --vert:#27512F; --vert-vif:#1D9E75; --brume:#E1F5EE;
    --serif:'Fraunces',Georgia,serif;
    --sans:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0;background:var(--sol);color:var(--encre)}
  body{font-family:var(--sans);font-size:17px;font-weight:450;line-height:1.6;
       -webkit-font-smoothing:antialiased}
  .serif{font-family:var(--serif);font-variation-settings:'SOFT' 20,'WONK' 1}
  .dedans{max-width:1180px;margin:0 auto;padding:0 40px}

  /* ===== en-tête ===== */
  header{padding:26px 0}
  header .dedans{display:flex;align-items:center;justify-content:space-between}
  .logo{display:flex;align-items:center;gap:11px;font-family:var(--serif);
        font-variation-settings:'SOFT' 20,'WONK' 1;font-size:22px;font-weight:700;
        letter-spacing:-.02em}
  /* l'anneau vert de la marque, demande d'Adrien le 15 aout 2026 */
  .logo .mk{width:34px;height:34px;border-radius:10px;overflow:hidden;position:relative;
            flex:none;background:#0A0A08;box-shadow:0 0 0 1.5px #0F6E56}
  .logo .mk img{width:100%;height:100%;object-fit:cover;display:block}
  .logo .mk svg{position:absolute;top:8%;right:11%;height:56%;width:auto}
  header a.entrer{font-size:15px;font-weight:600;color:var(--encre);text-decoration:none;
                  border:1.5px solid var(--filet);padding:10px 18px;border-radius:9px;
                  background:var(--carte)}

  /* ===== la promesse ===== */
  .promesse{padding:92px 0 78px}
  .promesse h1{font-family:var(--serif);font-variation-settings:'SOFT' 20,'WONK' 1;
               font-size:82px;font-weight:700;line-height:1.02;letter-spacing:-.035em;
               margin:0;max-width:15ch}
  .promesse h1 em{font-style:normal;color:var(--vert)}
  .promesse p{font-size:21px;line-height:1.55;color:var(--gris);margin:30px 0 0;
              max-width:52ch;font-weight:450}
  .gestes{display:flex;gap:12px;margin:38px 0 0;flex-wrap:wrap;align-items:center}
  .bouton{display:inline-block;background:var(--encre);color:var(--sol);
          text-decoration:none;font-size:17px;font-weight:600;padding:17px 28px;
          border-radius:10px}
  .bouton.creux{background:none;color:var(--encre);border:1.5px solid var(--filet)}
  .sous-geste{font-size:15px;color:var(--gris3);font-weight:500}

  /* ===== le problème ===== */
  .probleme{border-top:1.5px solid var(--filet);padding:74px 0}
  .probleme .duo{display:flex;gap:70px;align-items:flex-start}
  .probleme .gros{font-family:var(--serif);font-variation-settings:'SOFT' 20,'WONK' 1;
                  font-size:118px;font-weight:800;line-height:.9;letter-spacing:-.045em;
                  color:var(--rouille);flex:none}
  .probleme .gros small{display:block;font-family:var(--sans);font-size:15px;
                        font-weight:600;letter-spacing:.1em;text-transform:uppercase;
                        color:var(--gris);margin-top:16px;line-height:1.4}
  .probleme h2{font-family:var(--serif);font-variation-settings:'SOFT' 20,'WONK' 1;
               font-size:38px;font-weight:700;line-height:1.15;letter-spacing:-.025em;
               margin:0 0 18px;max-width:20ch}
  .probleme p{margin:0 0 16px;color:var(--gris);max-width:56ch}
  .probleme p:last-child{margin-bottom:0}
  .probleme b{color:var(--encre);font-weight:600}

  /* ===== ce que ça change ===== */
  .change{border-top:1.5px solid var(--filet);padding:74px 0}
  .surtitre{font-size:12px;letter-spacing:.17em;text-transform:uppercase;
            color:var(--gris);font-weight:600;margin:0 0 34px}
  .trois{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
  .trois .u .n{font-family:var(--serif);font-variation-settings:'SOFT' 20,'WONK' 1;
               font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.2;
               padding-top:20px;border-top:3px solid var(--encre)}
  .trois .u p{margin:12px 0 0;color:var(--gris);font-size:16.5px}

  /* ===== la preuve ===== */
  .preuve{padding:0 0 78px}
  .bloc{background:var(--encre);color:var(--sol);border-radius:14px;padding:56px 56px 48px;
        position:relative;overflow:hidden}
  .bloc .m{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#8E8B7C;
           font-weight:600}
  .bloc .montant{font-family:var(--serif);font-variation-settings:'SOFT' 20,'WONK' 1;
                 font-size:110px;font-weight:800;line-height:.9;letter-spacing:-.045em;
                 margin:22px 0 0}
  .bloc .montant span{font-size:52px;font-weight:600;margin-left:10px}
  .bloc .quoi{font-family:var(--serif);font-variation-settings:'SOFT' 20,'WONK' 1;
              font-size:28px;font-weight:500;line-height:1.32;margin:24px 0 0;
              max-width:34ch;color:#D8D4C4}
  .bloc .quoi b{font-weight:800;color:var(--sol)}
  .bloc .ret{position:absolute;right:56px;top:56px;text-align:right}
  .bloc .ret .f{font-family:var(--serif);font-variation-settings:'SOFT' 20,'WONK' 1;
                font-size:78px;font-weight:800;line-height:.9;letter-spacing:-.04em}
  .bloc .ret .f i{font-style:normal;font-size:38px;font-weight:500;margin-right:7px;
                  color:#B9B5A4;vertical-align:.14em}
  .bloc .ret .l{font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;
                color:#8E8B7C;font-weight:600;margin-top:10px}
  .legende{font-size:14.5px;color:var(--gris3);margin:16px 0 0;font-weight:500}

  /* ===== vos chiffres ===== */
  .chiffres-a-vous{border-top:1.5px solid var(--filet);padding:74px 0}
  .chiffres-a-vous .duo{display:flex;gap:70px;align-items:flex-start}
  .chiffres-a-vous h2{font-family:var(--serif);font-variation-settings:'SOFT' 20,'WONK' 1;
                      font-size:40px;font-weight:700;line-height:1.12;
                      letter-spacing:-.027em;margin:0 0 18px;max-width:16ch}
  .chiffres-a-vous p{color:var(--gris);margin:0 0 16px;max-width:52ch}
  .chiffres-a-vous p b{color:var(--encre);font-weight:600}
  .apercu{background:var(--carte);border:1.5px solid var(--filet);border-radius:14px;
          padding:26px 30px;width:400px;flex:none}
  .ap-t{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
        color:var(--gris);font-weight:600;margin-bottom:16px}
  .ap-l{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
        padding:13px 0;border-top:1px solid var(--filet);font-size:15.5px;
        color:var(--gris)}
  .ap-l b{font-family:var(--serif);font-variation-settings:'SOFT' 20,'WONK' 1;
          font-size:19px;font-weight:700;color:var(--encre)}

  /* ===== le prix ===== */
  .prix{border-top:1.5px solid var(--filet);padding:74px 0}
  .prix .duo{display:flex;gap:70px;align-items:flex-start}
  .prix .carte2{background:var(--carte);border:1.5px solid var(--filet);border-radius:14px;
                padding:34px 36px;width:400px;flex:none}
  .prix .chiffre{font-family:var(--serif);font-variation-settings:'SOFT' 20,'WONK' 1;
                 font-size:62px;font-weight:800;line-height:1;letter-spacing:-.04em}
  .prix .chiffre small{font-size:22px;font-weight:600;letter-spacing:-.01em}
  .prix .par{font-size:15.5px;color:var(--gris);margin-top:8px;font-weight:500}
  .prix ul{list-style:none;padding:0;margin:26px 0 0}
  .prix li{display:flex;gap:11px;align-items:flex-start;font-size:16px;margin-bottom:13px;
           color:var(--gris)}
  .prix li b{color:var(--encre);font-weight:600}
  .prix li svg{width:19px;height:19px;flex:none;margin-top:3px}
  .prix h2{font-family:var(--serif);font-variation-settings:'SOFT' 20,'WONK' 1;
           font-size:40px;font-weight:700;line-height:1.12;letter-spacing:-.027em;
           margin:0 0 18px;max-width:16ch}
  .prix .gratuit{display:inline-block;background:var(--brume);color:var(--vert);
                 font-size:14.5px;font-weight:700;padding:9px 16px;border-radius:999px;
                 margin-bottom:20px}
  .prix p{color:var(--gris);margin:0 0 16px;max-width:52ch}
  .prix p b{color:var(--encre);font-weight:600}

  /* ===== la confiance ===== */
  .confiance{border-top:1.5px solid var(--filet);padding:66px 0}
  .quatre{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
  .quatre .u .t{font-size:16.5px;font-weight:600;margin-bottom:7px}
  .quatre .u p{margin:0;font-size:15.5px;color:var(--gris);line-height:1.55}

  /* ===== le pied ===== */
  footer{border-top:1.5px solid var(--filet);padding:44px 0 60px;margin-top:20px}
  footer .dedans{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;
                 flex-wrap:wrap}
  footer .liens{display:flex;gap:22px;font-size:14.5px}
  footer a{color:var(--gris);text-decoration:none}
  footer .ou{font-size:14.5px;color:var(--gris3)}

  /* ===== téléphone ===== */
  @media (max-width:900px){
    .dedans{padding:0 22px}
    .promesse{padding:56px 0 48px}
    .promesse h1{font-size:46px;letter-spacing:-.028em}
    .promesse p{font-size:18px;margin-top:22px}
    .bouton{display:block;text-align:center}
    .gestes{flex-direction:column;align-items:stretch;gap:10px}
    .sous-geste{text-align:center}
    .probleme .duo,.prix .duo{flex-direction:column;gap:32px}
    .probleme .gros{font-size:52px}
    .chiffres-a-vous .duo{flex-direction:column;gap:32px}
    .chiffres-a-vous h2{font-size:30px}
    .apercu{width:100%}
    .probleme h2,.prix h2{font-size:30px}
    .trois,.quatre{grid-template-columns:1fr;gap:30px}
    .bloc{padding:34px 26px 30px}
    .bloc .montant{font-size:62px}
    .bloc .montant span{font-size:30px}
    .bloc .quoi{font-size:20px}
    .bloc .ret{position:static;text-align:left;margin-top:28px;
               border-top:1px solid #3A3A30;padding-top:22px}
    .bloc .ret .f{font-size:52px}
    .prix .carte2{width:100%}
  }


/* Repris des attributs style= de la maquette : la CSP les bloque. */
.defs { position: absolute; }
.logo.pied { font-size: 19px; }
.logo.pied .mk { width: 28px; height: 28px; border-radius: 8px; }

/* ============================================================
   LA DEMANDE D'OUVERTURE (Adrien, 15 août 2026).
   Le geste principal du site. Il tient dans un écran, il ne
   demande que ce qui sert à ouvrir un cabinet, et il ne réclame
   ni mot de passe ni moyen de paiement : rien ne s'engage ici.
   ============================================================ */
.gestes .second {
  font-size: 15px; font-weight: 600; color: var(--encre);
  text-decoration: none; border-bottom: 1.5px solid var(--filet);
  padding-bottom: 2px;
}
.gestes .second:hover { border-color: var(--encre); }

.ouvrir { border-top: 1.5px solid var(--filet); padding: 76px 0 84px; }
.ouvrir h2 {
  font-size: clamp(34px, 4.4vw, 52px); font-weight: 700; margin: 10px 0 14px;
  letter-spacing: -0.03em; line-height: 1.04;
}
.ouvrir .intro { max-width: 54ch; color: var(--gris); margin: 0 0 30px; }

.form { max-width: 820px; }
.form .paire { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.form .paire > label { flex: 1; min-width: 240px; }
.form label, .form .plein {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--encre);
}
.form .plein { margin-bottom: 20px; }
.form input, .form select, .form textarea {
  display: block; width: 100%; margin-top: 7px;
  font: 450 16px/1.5 var(--sans);
  background: var(--carte); color: var(--encre);
  border: 1.5px solid var(--filet); border-radius: 9px;
  padding: 12px 14px;
}
.form textarea { resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: 2px solid var(--encre); outline-offset: 1px; border-color: var(--encre);
}
.form .envoi { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form .envoi .sous-geste.erreur { color: var(--rouille); font-weight: 600; }

.recue { border: 1.5px solid var(--vert); background: #E9F0E9;
  border-radius: 12px; padding: 26px 28px; max-width: 620px; }
.recue .t {
  font-family: var(--serif); font-variation-settings: 'SOFT' 20, 'WONK' 1;
  font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
}
.recue p { margin: 8px 0 0; color: var(--gris); }

/* Le piège à robots : hors de l'écran, mais bien dans le formulaire.
   Ni display:none ni hidden, que certains robots savent ignorer. */
.pas-pour-vous {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}