/* ============================================================
   ReconversionPro40 — système de design commun
   Chargé par TOUTES les pages. La landing ajoute ses effets
   (nuit / aurore / scènes) dans son propre fichier.
   ============================================================ */

:root{
  --nuit:#362B23;
  --brume:#5E4C3E;
  --marron:#9B8275;
  --sable:#D9CDBB;
  --creme:#F4EEE3;
  --matin:#FAF6EE;
  --vert:#1D9E75;
  --vert-sombre:#0F6E56;
  --menthe:#8FD9BC;
  --encre:#3A3028;
  --encre-douce:#6E5F52;
  --serif:'Fraunces', Georgia, serif;
  --sans:'Karla', 'Segoe UI', sans-serif;
  --surface:linear-gradient(180deg,#FFFEFB,#FBF6EC);
  --bord:1px solid rgba(58,48,40,.08);
  --ombre:inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(58,48,40,.05), 0 16px 40px rgba(58,48,40,.09);
  --ombre-haute:inset 0 1px 0 #FFFFFF, 0 2px 4px rgba(58,48,40,.05), 0 24px 56px rgba(58,48,40,.12);
  --rayon:24px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:var(--sans);color:var(--encre);
  font-size:17px;line-height:1.85;
  background:var(--matin);overflow-x:clip;
}
::selection{background:var(--vert);color:#fff}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.14;letter-spacing:-.014em;text-wrap:balance}
em{font-style:italic}
:focus-visible{outline:2px solid var(--vert);outline-offset:3px;border-radius:4px}

/* ————— typographie utilitaire ————— */
.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--vert-sombre)}
.tete{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.2rem}
.tete .idx{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--vert);flex-shrink:0}
.tete::after{content:'';flex:1;height:1px;background:rgba(58,48,40,.14);transform:translateY(-4px)}
.h-page{font-size:clamp(2rem,4.6vw,3rem);color:var(--encre)}
.h-bloc{font-size:clamp(1.5rem,3vw,2rem);color:var(--encre)}
.intro{color:var(--encre-douce);margin-top:1rem;max-width:36rem}
.muted{color:var(--encre-douce)}
.tabnum{font-variant-numeric:tabular-nums}

/* ————— grille ————— */
.page{max-width:1080px;margin:0 auto;padding:6.5rem 1.5rem 5rem}
.page.etroite{max-width:720px}
.chapitre{max-width:680px;margin:0 auto;padding:9rem 1.5rem}
.chapitre.large{max-width:1040px}

/* ————— barre de navigation (mode jour par défaut) ————— */
nav#barre{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:1.1rem max(1.5rem, calc((100vw - 1080px)/2));
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(rgba(250,246,238,.92),rgba(250,246,238,0));
  backdrop-filter:blur(6px);
  transition:background .7s ease;
}
nav#barre .nav-logo{font-family:var(--serif);font-size:1.05rem;color:var(--encre);text-decoration:none;letter-spacing:.02em;transition:color .7s}
nav#barre .nav-links{display:flex;gap:2rem;list-style:none;align-items:center}
nav#barre .nav-links a{font-size:.8rem;letter-spacing:.06em;color:var(--encre-douce);text-decoration:none;transition:color .7s}
nav#barre .nav-links a:hover{color:var(--encre)}
nav#barre .nav-links a.cta{background:var(--vert);color:#fff;padding:.45rem 1.15rem;border-radius:99px;font-weight:600;white-space:nowrap;transition:background .3s}
nav#barre .nav-links a.cta:hover{background:var(--vert-sombre)}
nav#barre.solide{background:rgba(250,246,238,.94);box-shadow:0 1px 0 rgba(58,48,40,.06)}
@media(max-width:700px){
  nav#barre{padding:.9rem 1.25rem}
  nav#barre .nav-logo{font-size:.92rem}
  nav#barre .nav-links{gap:1rem}
  /* on cache les LI entiers (pas seulement les liens : un li vide consomme quand même le gap),
     en gardant le CTA et les liens retour des pages secondaires */
  nav#barre .nav-links li:not(:has(.cta, .lien-retour)){display:none}
  nav#barre .nav-links a.cta{padding:.45rem 1rem;font-size:.74rem}
}

/* ————— boutons ————— */
.btn{
  display:inline-block;text-decoration:none;font-weight:600;font-size:.95rem;
  padding:1.05rem 2.4rem;border-radius:99px;border:none;cursor:pointer;font-family:inherit;
  transition:transform .4s cubic-bezier(.2,.8,.3,1), box-shadow .4s, background .3s;
}
.btn-lumiere,.btn-plein{background:var(--vert);color:#fff;box-shadow:0 8px 30px rgba(29,158,117,.28)}
.btn-lumiere:hover,.btn-plein:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(29,158,117,.38)}
.btn-contour{border:1.5px solid var(--vert);color:var(--vert-sombre);background:transparent}
.btn-contour:hover{background:rgba(29,158,117,.07)}
.btn-marron{background:var(--nuit);color:var(--creme)}
.btn-marron:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(54,43,35,.3)}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.btn-bloc{display:block;width:100%;text-align:center}
.fl{display:inline-block;margin-left:.55rem;transition:transform .35s cubic-bezier(.2,.8,.3,1)}
a:hover .fl,button:hover .fl{transform:translateX(5px)}
.porte{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:2.6rem;
  font-family:var(--serif);font-style:italic;font-size:1.15rem;
  color:var(--vert-sombre);text-decoration:none;
  border-bottom:1px solid rgba(15,110,86,.35);padding-bottom:.25rem;
  transition:border-color .3s, color .3s;
}
.porte:hover{border-color:var(--vert-sombre);color:var(--vert)}
.porte .fl{margin-left:0}
.lien-retour{font-size:.85rem;color:var(--encre-douce);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;transition:color .3s}
.lien-retour:hover{color:var(--vert-sombre)}

/* ————— panneaux (surfaces en relief) ————— */
.panneau{background:var(--surface);border:var(--bord);border-radius:var(--rayon);box-shadow:var(--ombre)}
.panneau.accent{border-left:4px solid var(--vert)}
.panneau.plat{box-shadow:none;background:transparent;border:1px dashed rgba(58,48,40,.2)}
.panneau-nuit{background:var(--nuit);color:var(--creme);border-radius:var(--rayon);box-shadow:0 20px 50px rgba(54,43,35,.22)}
.panneau-nuit .eyebrow{color:var(--menthe)}
.panneau-nuit h2,.panneau-nuit h3{color:#fff}
.panneau-nuit .muted{color:rgba(244,238,227,.7)}
.pastille{display:inline-block;font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding:.3rem .8rem;border-radius:99px;background:rgba(29,158,117,.12);color:var(--vert-sombre)}
.pastille.nuit{background:var(--nuit);color:var(--creme)}

/* ————— formulaires ————— */
label{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--encre-douce);display:block;margin-bottom:.45rem}
input,select,textarea{
  width:100%;border:1px solid rgba(58,48,40,.18);border-radius:14px;background:#fff;
  padding:.95rem 1.2rem;font-size:1rem;font-family:inherit;color:var(--encre);outline:none;
  transition:border-color .3s, box-shadow .3s;
}
input:focus,select:focus,textarea:focus{border-color:var(--vert);box-shadow:0 0 0 4px rgba(29,158,117,.1)}
input.erreur{border-color:#C0392B}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:520px){.champs{grid-template-columns:1fr}}
.mention{font-size:.78rem;color:var(--encre-douce);opacity:.75;text-align:center}
.alerte{display:none;font-size:.9rem;color:#8a2a1f;background:#FBE9E5;border-radius:12px;padding:.8rem 1rem;margin-bottom:1rem;line-height:1.6}
.alerte.on{display:block}
.info{font-size:.9rem;color:var(--vert-sombre);background:rgba(29,158,117,.1);border-radius:12px;padding:.9rem 1.15rem;line-height:1.6}

/* ————— listes à flèches ————— */
.liste-fleches{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.liste-fleches li{display:flex;gap:.7rem;font-size:.95rem;color:var(--encre-douce);line-height:1.6}
.liste-fleches li::before{content:'→';color:var(--vert);flex-shrink:0}
.liste-coches li::before{content:'✓';font-weight:700}

/* ————— révélations douces au scroll ————— */
.rev{opacity:0;transform:translateY(34px);filter:blur(6px);transition:opacity 1.15s ease, transform 1.15s cubic-bezier(.16,.7,.2,1), filter 1.15s ease}
.rev.vu{opacity:1;transform:none;filter:none}

/* ————— FAQ / accordéons ————— */
details.pli{background:var(--surface);border:var(--bord);border-radius:16px;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(58,48,40,.04),0 6px 20px rgba(58,48,40,.05);padding:0 1.75rem;margin-bottom:1rem}
details.pli summary{cursor:pointer;list-style:none;padding:1.4rem 2.5rem 1.4rem 0;position:relative;font-family:var(--serif);font-size:1.12rem;color:var(--encre);transition:color .3s}
details.pli summary::-webkit-details-marker{display:none}
details.pli summary::after{content:'+';position:absolute;right:.25rem;top:50%;transform:translateY(-50%);font-size:1.4rem;color:var(--vert);font-family:var(--sans);transition:transform .4s}
details.pli[open] summary::after{transform:translateY(-50%) rotate(45deg)}
details.pli summary:hover{color:var(--vert-sombre)}
details.pli p{padding:0 2.5rem 1.6rem 0;color:var(--encre-douce);font-size:.97rem}

/* ————— footer composé ————— */
footer.pied-site{padding:5rem 1.5rem 2.5rem;border-top:1px solid rgba(58,48,40,.1);margin-top:5rem}
.pied{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5rem}
@media(max-width:700px){.pied{grid-template-columns:1fr}}
.pied .marque{font-family:var(--serif);color:var(--encre);font-size:1.15rem}
.pied .devise{font-size:.88rem;color:var(--encre-douce);margin-top:.9rem;max-width:26rem;line-height:1.7}
.pied h4{font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--encre-douce);margin-bottom:1.1rem;font-family:var(--sans)}
.pied ul{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.pied a{color:var(--encre-douce);text-decoration:none;font-size:.88rem;transition:color .3s}
.pied a:hover{color:var(--vert-sombre)}
.pied-bas{max-width:1040px;margin:3rem auto 0;padding-top:1.5rem;border-top:1px solid rgba(58,48,40,.08);font-size:.76rem;color:var(--encre-douce);opacity:.8;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}

/* ————— grain de film ————— */
.grain{
  position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size:160px 160px;
}

/* ————— fil de progression ————— */
#chemin{position:fixed;top:0;left:0;height:3px;width:0;z-index:70;background:linear-gradient(90deg,var(--vert-sombre),var(--vert))}

/* ————— pages secondaires : en-tête de page ————— */
.entete-page{margin-bottom:3rem}
.entete-page .h-page{margin-top:.6rem}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
@media(max-width:700px){.duo{grid-template-columns:1fr}}
.deux-colonnes{display:grid;grid-template-columns:1fr 400px;gap:3rem;align-items:start}
@media(max-width:900px){.deux-colonnes{grid-template-columns:1fr}}

/* ————— mobile ————— */
@media(max-width:900px){
  aside.recap{position:static}
}
@media(max-width:700px){
  .page{padding:5.5rem 1.25rem 4rem}
  .chapitre{padding:5.5rem 1.25rem}
  form{padding:2rem 1.4rem}
  .porte{font-size:1.05rem}
  .btn{padding:1rem 1.9rem}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rev{opacity:1;transform:none;filter:none;transition:none}
  .btn,.fl,.porte{transition:none}
}