/* =========================================================================
   Landing publique - le système Mariline
   =========================================================================
   Portage de la maquette de Rémi : les TEXTES et la structure ne bougent pas,
   seule l'habillage passe au système. La page tourne sous le layout "accueil",
   autoportante (pas de Tailwind).

   Ce qui change par rapport à la version sombre :
     - fond clair, papier de Mariline (pois discrets), plus de dégradés
       violet/orange en aplat ;
     - le texte en dégradé disparaît : il est banni par le système. Les mots
       qu'on veut faire ressortir passent au stabilo ;
     - les cartes deviennent des feuilles posées : bordure à l'encre, tracé
       irrégulier, ombre pleine et décalée.
   ========================================================================= */

:root{
  /* Les jetons, identiques à tokens.css. */
  --surface:#FFFFFF; --fond:#FBFAF7; --fond-2:#F2F4F6; --pointille:#E4E2DA;
  --filet:#E3E1DA; --filet-fort:#C7C4BA;
  --encre:#161616; --encre-2:#3F3D3A; --gris:#55524C; --gris-doux:#6B675F;
  --ardoise:#2F4D63; --ardoise-clair:#35566F; --ardoise-fonce:#274257; --ardoise-pale:#EDF1F5;
  --stabilo-ambre:#F7C948; --stabilo-menthe:#7CE8B5; --stabilo-ciel:#8FC9FF; --stabilo-rose:#FF9ED2;
  --feutre:#E85D1F; --feutre-lisible:#B93D0B;
  --succes:#2E6B47; --alerte:#A2371F;
  --titre:Fraunces,Georgia,serif; --police:Archivo,system-ui,sans-serif; --main:Caveat,cursive;
  --trace:10px 16px 12px 18px / 16px 10px 18px 12px;
  --trace-doux:0.6em 0.3em 0.7em 0.25em / 0.4em 0.7em 0.3em 0.6em;
  --trace-surl:0.5em 0.25em 0.6em 0.2em / 0.35em 0.6em 0.25em 0.55em;
  --penche:-0.6deg; --penche-plus:-1.4deg; --penche-main:-2deg;
  --ombre-papier:4px 5px 0 var(--filet); --ombre-ambre:4px 5px 0 var(--stabilo-ambre);
  --cible:44px; --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--fond);color:var(--encre-2);
  font-family:var(--police);font-size:17px;line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  /* Le papier de Mariline : des pois, pas un aplat mort. */
  background-image:radial-gradient(circle at 1px 1px,var(--pointille) 1.2px,transparent 1.3px);
  background-size:26px 26px;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--titre);font-weight:900;line-height:1.1;letter-spacing:-.015em;margin:0;color:var(--encre);text-wrap:balance}

/* Le stabilo remplace le texte en dégradé, banni par le système. */
.grad{
  background:var(--stabilo-ambre);color:var(--encre);
  padding:.04em .22em;margin:0 -.06em;border-radius:var(--trace-surl);
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  display:inline-block;transform:rotate(var(--penche));
}
/* L'accroche est à l'écriture de Mariline, plus une étiquette en capitales. */
.eyebrow{
  font-family:var(--main);font-size:22px;font-weight:700;color:var(--feutre-lisible);
  transform:rotate(var(--penche-main));display:inline-block;line-height:1.2;
}
.muted{color:var(--gris)}
.center{text-align:center}
section{padding:76px 0}

/* --- Navigation ---------------------------------------------------------- */
#nav{position:sticky;top:0;z-index:200;background:rgba(251,250,247,.94);
     border-bottom:1px solid var(--filet);backdrop-filter:blur(8px)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:12px 26px;display:flex;align-items:center;gap:18px}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--titre);font-weight:900;
      font-size:20px;color:var(--encre);letter-spacing:-.01em}
.logo .dot{display:none}
.nav-links{display:flex;gap:22px;margin-left:auto;font-size:15px;color:var(--gris)}
.nav-links a:hover{color:var(--encre)}
@media(max-width:860px){.nav-links{display:none}}

/* --- Boutons ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
     min-height:var(--cible);padding:13px 22px;border:1.5px solid transparent;
     border-radius:var(--trace-doux);font-family:inherit;font-size:16px;font-weight:600;
     cursor:pointer;white-space:nowrap;transition:background .12s,transform .12s}
.btn:hover{transform:rotate(0) scale(1.02)}
.btn-primary{background:linear-gradient(180deg,var(--ardoise-clair),var(--ardoise-fonce));
             color:var(--surface);box-shadow:var(--ombre-ambre);transform:rotate(var(--penche))}
.btn-primary:hover{background:var(--ardoise-fonce)}
.btn-ghost{background:var(--surface);color:var(--encre);border-color:var(--encre)}
.btn-ghost:hover{background:var(--fond-2)}

/* --- Hero ---------------------------------------------------------------- */
header{padding:64px 0 40px}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media(max-width:960px){.hero{grid-template-columns:1fr;gap:36px}}
h1{font-size:clamp(2rem,4.4vw,3.2rem)}
.sub{font-size:19px;color:var(--gris);max-width:34rem;margin:18px 0 26px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px}
.trust{display:flex;flex-wrap:wrap;gap:14px 26px;font-size:15px;color:var(--gris)}
.trust b{color:var(--encre);font-weight:600}
.chk{color:var(--succes);font-weight:700}

/* L'illustration : le portrait de Mariline, monte comme une photo posee. */
.art{position:relative}
.glow{display:none}
.photo-frame{
  /* La photo est TIREE, pas collee : le trait d'encre et l'ombre papier la
     rattachent au reste de la charte, et l'inclinaison la sort de la grille
     comme les cartes d'offre. overflow cache les angles de l'image. */
  position:relative;border:1.5px solid var(--encre);border-radius:var(--trace);
  background:var(--fond-2);overflow:hidden;line-height:0;
  box-shadow:var(--ombre-papier);transform:rotate(calc(var(--penche) * -1));
}
.photo-frame .portrait{
  /* width/height sont dans le HTML pour reserver la place ; ici on rend
     l'image fluide sans perdre le rapport, sinon elle deborde du cadre. */
  display:block;width:100%;height:auto;
}
.badge-float{position:absolute;background:var(--surface);border:1.5px solid var(--encre);
             border-radius:var(--trace-doux);padding:9px 15px;font-size:14px;font-weight:600;
             color:var(--encre);box-shadow:var(--ombre-papier);display:flex;align-items:center;gap:8px}
.bf1{top:34px;left:-26px;transform:rotate(var(--penche-plus))}
.bf2{bottom:34px;right:-22px;transform:rotate(.9deg)}
.pulse{width:8px;height:8px;border-radius:999px;background:var(--succes);flex:none}
@media(max-width:960px){.bf1,.bf2{position:static;transform:none;margin-top:10px;display:inline-flex}}

/* --- Titres de section --------------------------------------------------- */
.shead{max-width:44rem;margin-bottom:38px}
.shead h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
.shead .muted{margin-top:12px}

/* --- Verbatims ----------------------------------------------------------- */
.qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}
.qcard{background:var(--surface);border:1.5px solid var(--encre);border-radius:var(--trace);
       padding:22px 24px;position:relative;transition:transform .12s,box-shadow .12s}
.qcard:hover{transform:rotate(var(--penche)) translateY(-2px);box-shadow:var(--ombre-papier)}
.qcard .mark{font-family:var(--titre);font-size:44px;line-height:.6;color:var(--stabilo-ambre);
             display:block;margin-bottom:6px}
.qcard p{margin:0 0 14px;color:var(--encre-2);font-size:16px}
.who{font-size:14px;color:var(--gris)}
.who b{color:var(--encre);font-weight:600}

/* --- Bandes de formulaire ------------------------------------------------ */
.band{background:var(--surface);border:1.5px solid var(--encre);border-radius:var(--trace);
      padding:34px 36px;box-shadow:var(--ombre-ambre)}
.band-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center}
@media(max-width:860px){.band{padding:26px 22px}.band-grid{grid-template-columns:1fr;gap:26px}}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.field label{font-size:14px;font-weight:600;color:var(--encre)}
.field input,.field select{
  width:100%;min-height:var(--cible);padding:12px;border:1.5px solid var(--encre);
  border-radius:var(--trace);background:var(--surface);font-family:inherit;font-size:16px;color:var(--encre)}
.field input::placeholder{color:var(--gris-doux)}
.field input:focus,.field select:focus{outline:3px solid var(--stabilo-ambre);outline-offset:1px}
.err{margin-top:12px;padding:11px 14px;background:var(--surface);border:1.5px solid var(--alerte);
     border-radius:var(--trace);color:var(--alerte);font-size:15px}
.ok{margin-top:12px;padding:13px 16px;background:var(--surface);border:1.5px solid var(--encre);
    border-radius:var(--trace);box-shadow:var(--ombre-papier);font-size:15.5px;color:var(--encre-2)}

/* --- Offres -------------------------------------------------------------- */
.ogrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding-top:16px}
@media(max-width:860px){.ogrid{grid-template-columns:1fr}}
.ocard{background:var(--surface);border:1.5px solid var(--encre);border-radius:var(--trace);
       padding:28px 26px;display:flex;flex-direction:column;gap:14px;position:relative}
.ocard.feature{box-shadow:var(--ombre-ambre);transform:rotate(var(--penche))}
.otag{position:absolute;top:-13px;left:22px;padding:4px 13px;font-size:13px;font-weight:600;
      border-radius:var(--trace-doux);background:var(--stabilo-ambre);color:var(--encre);
      transform:rotate(var(--penche-plus))}
.otag.b{background:var(--stabilo-menthe)}
.ocard h3{font-size:23px;margin-top:6px}
.oprice{font-family:var(--titre);font-weight:900;font-size:40px;color:var(--encre);line-height:1}
.oprice span{font-family:var(--police);font-size:16px;font-weight:500;color:var(--gris)}
.oline{color:var(--gris);font-size:16px}
.plus{font-size:14.5px;font-weight:600;color:var(--encre);padding-top:6px;border-top:1px solid var(--filet)}
.feat{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.feat li{display:flex;gap:10px;font-size:15.5px;color:var(--encre-2)}
.feat .ic{color:var(--succes);font-weight:700;flex:none}
.ocard .btn{margin-top:auto;width:100%}

/* --- Réassurance --------------------------------------------------------- */
.big-quote{font-family:var(--titre);font-weight:900;font-size:clamp(1.5rem,2.9vw,2.2rem);
           line-height:1.2;color:var(--encre);max-width:46rem;margin:0 auto;text-wrap:balance}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px}
.pcard{background:var(--surface);border:1.5px solid var(--encre);border-radius:var(--trace);padding:26px 24px}
.pcard .pic{font-size:30px;margin-bottom:12px}
.pcard h3{font-size:19px;margin-bottom:10px}
.pcard p{margin:0;font-size:15.5px;color:var(--encre-2)}

/* --- WhatsApp ------------------------------------------------------------ */
.wa-grid{display:grid;grid-template-columns:1fr .82fr;gap:52px;align-items:start}
@media(max-width:960px){.wa-grid{grid-template-columns:1fr;gap:34px}}
.phone{max-width:330px;margin:0 auto;border:2.5px solid var(--encre);border-radius:34px;
       padding:9px;background:var(--surface);box-shadow:var(--ombre-papier)}
.phone-screen{background:#ECE5DD;border-radius:26px;overflow:hidden}
.wa-head{display:flex;align-items:center;gap:9px;padding:11px 13px;background:var(--ardoise);color:#fff;font-size:14px}
.wa-back{font-size:19px}
.wa-av{width:30px;height:30px;border-radius:999px;background:var(--stabilo-ambre);color:var(--encre);
       display:flex;align-items:center;justify-content:center;font-weight:800;flex:none}
.wa-id{display:flex;flex-direction:column;line-height:1.2}
.wa-id b{font-size:14.5px}
.wa-id span{font-size:11.5px;opacity:.8}
.wa-icons{margin-left:auto;display:flex;gap:9px;font-size:13px;opacity:.85}
.wa-body{padding:12px 11px;display:flex;flex-direction:column;gap:8px}
.wa-day{align-self:center;background:#fff;border-radius:999px;padding:2px 11px;font-size:11.5px;color:var(--gris)}
.wa-row{display:flex}
.wa-row.out{justify-content:flex-end}
.bubble{max-width:84%;padding:8px 11px;border-radius:9px;font-size:13.5px;line-height:1.45;color:var(--encre)}
.b-in{background:#fff}
.b-out{background:#D9FDD3}
.wa-time{display:block;text-align:right;font-size:10.5px;color:var(--gris);margin-top:3px}
.tick{color:#4A9BD1}
.wa-voice{display:flex;align-items:center;gap:9px;min-width:170px}
.wa-voice .play{color:var(--ardoise)}
.wa-voice .track{flex:1;height:2px;background:var(--filet-fort)}
.wa-voice .dur{font-size:11.5px;color:var(--gris)}
/* La barre de saisie ferme l'ecran du telephone. La masquer laissait la
   conversation s'arreter net, et le texte "Ecrivez a Mariline" ne s'affichait
   nulle part. Elle garde les codes de WhatsApp (c'est WhatsApp qu'on montre),
   avec l'ardoise du systeme pour le bouton d'envoi. */
.wa-input{display:flex;align-items:center;gap:9px;padding:9px 11px;background:var(--fond-2)}
.wa-input span{flex:1;background:#fff;border-radius:20px;padding:9px 14px;
               font-size:12.5px;color:var(--gris-doux)}
.wa-send{width:34px;height:34px;border-radius:50%;background:var(--ardoise);color:#fff;
         display:grid;place-items:center;font-size:15px;flex:none}

/* --- Étapes, promesses, pied --------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.step{background:var(--surface);border:1.5px solid var(--encre);border-radius:var(--trace);padding:24px}
.step h3{font-size:18px;margin-bottom:9px}
.step p{margin:0;font-size:15.5px;color:var(--encre-2)}
.final{text-align:center;padding:70px 0}
footer{border-top:1.5px solid var(--encre);background:var(--fond-2);padding:34px 0}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:0 26px;display:flex;flex-wrap:wrap;
         gap:14px 26px;align-items:center;font-size:14px;color:var(--gris)}

/* --- Modale -------------------------------------------------------------- */
.modal-fond{position:fixed;inset:0;background:rgba(22,22,22,.42);z-index:300;
            display:flex;align-items:center;justify-content:center;padding:20px}
.modal-boite{background:var(--surface);border:1.5px solid var(--encre);border-radius:var(--trace);
             box-shadow:0 8px 24px rgba(34,57,79,.14);max-width:460px;width:100%;padding:28px}
.modal-x{position:absolute;top:14px;right:16px;background:none;border:0;font-size:22px;
         color:var(--gris);cursor:pointer}

/* --- Révélation au défilement -------------------------------------------- */
/* L'apparition au defilement est un ORNEMENT : elle ne doit JAMAIS
   conditionner la lisibilite.
   Deux gardes, et j'ai casse les deux en reecrivant cette feuille :
     1. le masquage est porte par .js-reveal, classe posee par le script
        LUI-MEME. Sans JS, ou si le script casse, rien n'est masque et la page
        reste lisible. Je masquais sans condition : la landing est sortie
        VIDE en preprod.
     2. la classe d'apparition est .in, celle que le script ajoute vraiment.
        J'attendais .on, que personne ne pose. */
.reveal{transition:.7s cubic-bezier(.2,.7,.2,1)}
.js-reveal .reveal{opacity:0;transform:translateY(26px)}
.js-reveal .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js-reveal .reveal{opacity:1;transform:none}
  .reveal{transition:none}
  .btn,.qcard,.ocard.feature,.otag,.eyebrow,.grad,.bf1,.bf2{transform:none!important;transition:none!important}
}

/* --- Compléments : ce que les styles en ligne de la vue appellent ---------
   La vue de Rémi porte quelques styles en ligne qui lisent --ink et --warm2,
   hérités de la charte sombre. On les redéfinit ici pour qu'ils tombent sur
   les bonnes couleurs du système plutôt que de rester indéfinis. */
:root{--ink:var(--encre);--warm2:var(--feutre-lisible)}

/* Le numéro d'étape : une pastille au stabilo, pas un chiffre en dégradé. */
.step{position:relative;padding-top:30px}
.step .n{
  position:absolute;top:-14px;left:20px;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  background:var(--stabilo-ambre);color:var(--encre);
  font-family:var(--titre);font-weight:900;font-size:17px;
  border-radius:var(--trace-doux);transform:rotate(var(--penche-plus));
}

/* Le bloc "on n'est pas des margoulins" : une feuille posée, pas une bande. */
.anti{background:var(--surface);border:1.5px solid var(--encre);border-radius:var(--trace);
      padding:38px 36px;box-shadow:var(--ombre-papier)}
@media(max-width:860px){.anti{padding:26px 22px}}
.anti h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.anti > p{color:var(--encre-2)}
.promises{margin-top:20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
           column-gap:38px}
.promise{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--encre-2);
         padding:15px 0;border-top:1px solid var(--filet)}
.promise .ic{color:var(--succes);font-weight:700;flex:none}

/* La modale de souscription : masquée tant que `hidden` est posé. */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:20px}
.modal .modal-boite{position:relative;z-index:1}
.modal .modal-fond{position:absolute;inset:0}

/* --- Messages du serveur --------------------------------------------------
   Le checkout renvoie ici avec un flash (paiement indisponible, compte deja
   actif). Sans ces regles le prospect reviendrait sur une page muette.

   Ils suivent la lecon des notifications : le stabilo va DERRIERE, jamais
   dans le texte. La couleur passe par la bordure et la barre laterale, le
   texte reste a l'encre sur du blanc. */
.flash{max-width:var(--maxw);margin:14px auto 0;padding:13px 18px;
       background:var(--surface);border:1.5px solid var(--encre);
       border-radius:var(--trace);box-shadow:var(--ombre-papier);
       font-size:15.5px;font-weight:500;color:var(--encre-2)}
.flash-alert{border-color:var(--alerte)}
.flash-notice{border-color:var(--succes)}

/* --- Adaptations mobiles --------------------------------------------------
   Elles sont EN FIN DE FICHIER a dessein : a specificite egale, c'est la
   derniere regle qui gagne. Placees plus haut, elles se faisaient battre par
   les regles de base ecrites en dessous (l'emplacement d'image gardait ses
   470px). Toute nouvelle adaptation vient donc ici, pas a cote de la regle
   qu'elle corrige. */
@media(max-width:960px){
  /* Le heros passe sous une barre collante d'environ 61px : sans cette
     marge, l'accroche manuscrite disparait derriere elle. */
  header{padding:86px 0 34px}
  /* Sur telephone la photo se remet droite : l'inclinaison mange la largeur
     utile et decolle un angle du bord de l'ecran. */
  .photo-frame{transform:none}
}