html, body{
  height: 100%;
}
body{
  min-height: 100vh;          /* occupe toute la hauteur de l’écran */
  display: flex;
  flex-direction: column;     /* empile header, main, footer */
}

:root{
  --bg: #fff8ef;
  --card: #fff2e3;        /* <<< beige doux pour les cartes */
  --text: #171717;
  --muted: #6b7280;
  --accent: #ffd166;
  --accent2:#ffe8a3;

  --radius: 18px;
  --border: #f1e5d6;      /* <<< nouvelle couleur de bordure */
}

:root{
  --measure: 62ch;  /* largeur idéale d'un paragraphe */
}
@media (min-width: 1200px){
  :root{ --measure: 58ch; } /* un poil plus étroit sur très grand écran */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
/* Header */
.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:rgba(255,248,239,.7);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid #f3e9d7;border-bottom:1px solid var(--border)}
.logo{font-weight:800;font-size:20px;padding:8px 12px;border-radius:999px;background:var(--card);box-shadow:var(--shadow)}
.nav{display:flex;gap:16px;align-items:center}
.nav a{padding:8px 12px;border-radius:12px}
.nav a:hover{background:var(--accent2)}
.burger{display:none;background:none;border:none;font-size:28px}
@media (max-width: 860px){
  .nav{position:absolute;right:16px;top:64px;background:var(--card);box-shadow:var(--shadow);padding:12px;border-radius:16px;display:none;flex-direction:column}
  .burger{display:block}
}

/* Hero */
.hero{position:relative;padding:72px 24px 24px}
.hero .waitlist-card{ margin-top:16px; }

.hero-inner{max-width:1100px;margin:0 auto;text-align:center}
.hero h1{
  font-size: clamp(36px, 6vw, 64px);  /* <<< plus grand, responsive */
  line-height: 1.05;
  margin: 0 0 10px;
}
.kicker{
  letter-spacing: .32em;                     /* un peu plus d’espace entre les lettres */
  font-size: clamp(14px, 2vw, 20px);         /* <<< taille augmentée */
  font-weight: 600;                          /* plus de présence */
  color: #7a7a7a;                            /* gris légèrement plus chaud */
  text-transform: uppercase;                 /* tout en majuscules (très clean) */
  margin-bottom: 12px;                       /* un peu d’air sous le kicker */
}

.sub{ font-size: clamp(14px, 2vw, 18px); }
.underline{box-shadow:inset 0 -0.45em 0 var(--accent2)}
.sub{color:var(--muted)}
.blob{position:absolute;inset:auto -120px -120px auto;width:360px;height:360px;background:radial-gradient(circle at 30% 30%, var(--accent) 0, var(--accent2) 35%, transparent 60%);filter:blur(30px);opacity:.5;pointer-events:none}

/* Cards & Sections */
main{max-width:1160px;margin:0 auto;padding:24px}

.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}
.media{padding:0;overflow:hidden}
/* AVANT
.split{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;margin:40px 0}
*/
.split{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;margin:40px 0} /* => même hauteur */

.split .card{height:100%; display:flex; flex-direction:column} /* étirer les cartes */

.media img{width:100%; height:100%; object-fit:cover} /* image couvre bien la carte */
@media (max-width: 900px){ .split{grid-template-columns:1fr} }
.feature{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;margin:40px 0}
/* GROSSE CARTE SUR TOUTE LA LARGEUR */
.feature-outer{margin:40px 0}
.feature-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}

/* Grille interne à 2 colonnes dans la grosse carte */
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
@media (max-width: 900px){
  .feature-grid{grid-template-columns:1fr}
}

.feature-copy h3{margin-top:0}
.cta{display:inline-block;padding:12px 18px;background:var(--text);color:white;border-radius:12px;box-shadow:var(--shadow)}
.cta:hover{opacity:.9}
.cta-band{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;text-align:center;margin:48px 0}

/* Formulaire liste d'attente — GRAND format */
.waitlist-card{
  display:flex;
  flex-direction:column;          /* email -> consent -> bouton */
  align-items:stretch;
  gap:14px;                       /* plus d'air entre les éléments */
  background: var(--card);
  box-shadow: 0 18px 40px rgba(0,0,0,.10); /* ombre un peu plus présente */
  border-radius: 22px;
  padding: 20px 22px;
  max-width: 960px;               /* <<< plus large */
  margin: 12px auto 0;            /* centré sous le titre */
}

/* Pleine largeur pour input & bouton */
.waitlist-card input[type="email"],
.waitlist-card button{
  width:100%;
}

/* Champ email : plus grand et confortable */
.waitlist-card input[type="email"]{
  height: 56px;                   /* <<< grand */
  border: 1px solid var(--border);
  background: #fff;
  padding: 0 18px;
  border-radius: 14px;
  font-size: 18px;
}
.waitlist-card input::placeholder{ font-size: 16px; color:#9b9b9b; }

/* Consentement : texte plus lisible */
.waitlist-card .consent{
  font-size: 15px;
  color: var(--muted);
  display:flex;
  align-items:flex-start;
  gap:10px;
  line-height: 1.5;
}
.waitlist-card .consent input{
  margin-top: 3px;
  width: 18px; height: 18px;      /* checkbox un poil plus grosse */
}

/* Gros bouton CTA */
.waitlist-card button{
  height: 56px;                   /* <<< grand */
  border:none;
  background: linear-gradient(180deg, #1d1d1d, #0f0f0f);
  color: #fff;
  padding: 0 18px;
  border-radius: 14px;
  cursor:pointer;
  font-weight: 800;
  font-size: 18px;                /* <<< plus gros */
  letter-spacing: .02em;
  transition: transform .08s ease, box-shadow .12s ease, opacity .12s ease;
}
.waitlist-card button:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,0,0,.28); }
.waitlist-card button:active{ transform: translateY(0); }
.waitlist-card button:disabled{ opacity:.75; cursor:not-allowed; }

/* Message de retour (succès/erreur) mieux visible */
.form-msg{ margin-top: 2px; font-size: 14px; }


.consent{font-size:14px;color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.form-msg{margin:6px 0 0;font-size:14px}

/* Page hero */
.page-hero{padding:36px 0 16px}
.page-hero.small h1{margin-bottom:6px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width: 900px){ .grid-2{grid-template-columns:1fr}}
.flow h2{margin-top:0}
.note{background:var(--card);border-left:6px solid var(--accent);border-radius:12px;padding:16px 20px;box-shadow:var(--shadow);border-left:6px solid var(--accent)}

.tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.tip{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}

.legal{display:grid;gap:24px}
.legal h2{margin-bottom:6px}

.site-footer{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding:24px;border-top:1px solid #f1e7d6;color:var(--muted);  margin-top: auto;}
.footer-links a{margin-right:12px}
.checklist{padding-left:18px}
.checklist li{margin:6px 0}

/* Justifier le texte dans les cartes / blocs de contenu */
.card p,
.feature-copy p,
.legal p,
.tip p{
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* Faire occuper la hauteur et centrer verticalement si le contenu est court */
.split .card,
.feature-card{
  display:flex;
  flex-direction:column;
}

/* Option : centrer verticalement le contenu dans une carte
   -> ajoute la classe "centered" à la div.card concernée si tu veux cet effet */
.card.centered{
  justify-content:center;   /* centre verticalement */
}


/*Conseils*/
/* ----- Conseils full page ----- */
/* Hero de la page Conseils : + grand et + haut */
.page-hero.full{
  /* remonte le bloc plus près du header */
  margin-top: -12px;                /* remonte visuellement */
  padding: 12px 0 8px;              /* moins d'espace au-dessus = plus haut */
  min-height: unset;                /* on enlève la min-height qui écartait */
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  gap: 14px;
  text-align: center;
}

.page-hero.full h1{
  /* titre plus grand mais responsive */
  font-size: clamp(28px, 4.4vw, 52px);
  line-height: 1.1;
  margin: 0;
}

.page-hero.full .sub{
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.4;
  margin: 0 auto;
  max-width: 70ch;                  /* lisible, pas trop long */
}


/* Choix de profil : centré, large, respirant */
.advice-chooser{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;                        /* plus d’air entre les boutons */
  margin-top: 6px;
  max-width: 980px;                 /* évite l’étalement sur ultra large */
  margin-left: auto; 
  margin-right: auto;
}

/* Boutons pilules : plus grands, plus visibles */
.pill{
  padding: 14px 18px;               /* plus gros padding */
  border-radius: 999px;
  border: 2px solid #efe6d2;        /* trait un peu plus marqué */
  background: var(--card);
  box-shadow: var(--shadow);
  cursor: pointer;
  font-weight: 700;
  font-size: clamp(14px, 2vw, 18px);/* taille responsive */
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  will-change: transform;
}

.pill:hover{ 
  transform: translateY(-1px); 
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

.pill.is-active{ 
  background: var(--text); 
  color: #fff; 
  border-color: var(--text);
}

.advice-pane{ display:none; margin: 24px 0 40px; }
.advice-pane.visible{ display:block; }

.feature-card{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:36px 32px; }
.advice-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap:32px 28px;              /* plus d’espace entre colonnes/rows */
  align-items:start;
  max-width:1100px;           /* évite l’étalement full-viewport */
  margin:0 auto;              /* centré dans la carte */
}
@media (max-width: 1100px){ .advice-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 750px){ .advice-grid{ grid-template-columns:1fr; } }

.advice-col h2, .advice-col h3{ margin-top:0; }
.checklist.big li{ margin:10px 0; }
.bullets li{ margin:8px 0; }

.statchips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.chip{ padding:8px 10px; border-radius:10px; background:#fff8ef; border:1px solid #f3e9d7; font-size:14px; border:1px solid var(--border);}
/* Colonne de conseils : layout vertical et respiration */
.advice-col{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Limiter la longueur des lignes et aérer le texte */
.advice-col p,
.advice-col .bullets,
.advice-col .checklist{
  max-width: var(--measure);
}

.advice-col p{
  line-height: 1.7;
  margin: 4px 0 12px;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* Listes plus lisibles */
.bullets li, .checklist.big li{
  margin: 12px 0;
}

/* Réordonner visuellement : mettre les "chips" au-dessus du texte si présents */
.advice-col h2, .advice-col h3{ order: -1; }  /* titres en premier */
.advice-col .statchips{ order: 0; }           /* chips juste sous le titre */
.advice-col .checklist,
.advice-col .bullets,
.advice-col p{ order: 1; }                    /* contenu textuel ensuite */

/* Chips : un peu plus d’air */
.statchips{ display:flex; flex-wrap:wrap; gap:10px; margin: 4px 0 6px; }
.chip{ padding:8px 10px; border-radius:10px; background:#fff8ef; border:1px solid #f3e9d7; font-size:14px; }

/* Texte justifié pour beau rendu dans ces colonnes */
.advice-col p{ text-align:justify; text-justify:inter-word; hyphens:auto; }

.note.small{ border-left:6px solid var(--accent); background:var(--card); padding:12px 14px; border-radius:12px; margin-top:8px; }
.tiny{ font-size:12px; }

[data-reveal]{opacity:0;transform:translateY(8px);transition:all .5s ease}
[data-reveal].visible{opacity:1;transform:translateY(0)}

/* Forcer l'empilement : un seul bloc par ligne */
.advice-grid{
  display: grid;
  grid-template-columns: 1fr !important; /* empile tout, même sur grand écran */
  gap: 24px;
  max-width: 780px;       /* largeur de lecture confortable */
  margin: 0 auto;         /* centré */
}
/* Le conteneur principal des conseils devient transparent (pas de double carte) */
.advice-pane .feature-card{
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* Chaque colonne devient une carte indépendante et jolie */
.advice-col{
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Boutons propres pour la zone légale */
.btn-row{
  display:flex; flex-wrap:wrap; gap:10px; margin: 8px 0 16px;
}
.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  background:var(--text);
  color:#fff;
  box-shadow:var(--shadow);
  text-decoration:none;
  font-weight:600;
}
.btn.light{
  background:var(--card);
  color:var(--text);
  border:1px solid #efe6d2;
  border:1px solid var(--border);
}

/* Cadre d’aperçu Google Drive intégré */
.drive-wrap{
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
}
.drive-frame{
  width: 100%;
  height: 72vh;           /* grande zone d’aperçu */
  border: 1px solid #f1e7d6;
  border-radius: 10px;
  background: #fff;
  border:1px solid var(--border);
}
.site-header{
  position:sticky; top:0; z-index:50;
  display:grid; grid-template-columns:1fr auto 1fr; /* gauche | CENTRE | droite */
  align-items:center; gap:12px;
  padding:16px 24px;
  background:rgba(255,248,239,.7);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
}
/* Header en grille : nav centré, burger à droite */
.site-header{
  position:sticky; top:0; z-index:50;
  display:grid; grid-template-columns:1fr auto 1fr; /* gauche | CENTRE | droite */
  align-items:center; gap:12px;
  padding:16px 24px;
  background:rgba(255,248,239,.7);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
}

.logo{justify-self:start;}

.nav{
  justify-self:center;                 /* <<< centre le menu */
  display:flex; align-items:center; gap:18px;
  background: var(--card);
  padding:8px 12px; border-radius:999px; 
  box-shadow: var(--shadow);
}

/* Liens “pilules” + effet trendy */
.nav a{
  padding:10px 14px; border-radius:999px;
  transition:transform .1s ease, background .15s ease, color .15s ease;
}
.nav a:hover{ background: var(--accent2); transform: translateY(-1px); }
.nav a[aria-current="page"]{ background: var(--text); color:#fff; }

/* Burger à droite en desktop */
.burger{ justify-self:end; background:none; border:none; font-size:28px; display:none; }

/* Mobile : menu déroulant centré */
@media (max-width: 860px){
  .nav{
    position:absolute; right:16px; top:64px;
    display:none; flex-direction:column; gap:8px; 
    padding:12px; border-radius:16px;
  }
  .burger{ display:block; }
}