/* Le Labo Marketing, feuille commune aux pages de la base documentaire
   et aux pages légales. Charte v3 « Décider avant de faire » :
   fond blanc, marine pour les titres, brique pour l'accent, corail jamais en texte sur blanc.
   Une nouvelle matrice = une copie de swot/index.html, rien à changer ici. */

:root{
  --marine:#16235C; --brique:#C0432E; --corail:#F08A6E; --papier:#F4F1EA;
  --bleu-clair:#EEF0F6; --rose:#FBEDE9;
  --corps:#1E1E24; --texte2:#3A3F55; --gris:#5A5F73; --filet:#D6D3CC;
  --sans:"Instrument Sans",Helvetica,Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --gut:clamp(16px,4.4vw,48px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:#fff; color:var(--corps); font-family:var(--serif);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%; height:auto; display:block}
a{color:var(--marine); text-underline-offset:.18em}
a:hover{color:var(--brique)}
:focus-visible{outline:3px solid var(--brique); outline-offset:2px}

h1,h2,h3{font-family:var(--sans); color:var(--marine); margin:0; letter-spacing:-.02em; line-height:1.1; text-wrap:balance}
.sur{font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--brique)}

/* ---------- bandeau ---------- */
.bandeau{border-bottom:1px solid var(--filet)}
.bandeau .in{max-width:1080px; margin:0 auto; padding:14px var(--gut); display:flex; justify-content:space-between; align-items:center; gap:16px}
.marque{font-family:var(--sans); font-weight:700; font-size:16px; color:var(--marine); text-decoration:none; letter-spacing:-.01em}
.marque span{color:var(--brique)}
.bandeau .moi{font-family:var(--sans); font-size:13.5px; color:var(--gris); text-decoration:none}

/* ---------- contenu ---------- */
main{max-width:1080px; margin:0 auto; padding:0 var(--gut)}
.haut{display:grid; gap:28px; padding:32px 0 40px; align-items:start}
@media (min-width:880px){ .haut{grid-template-columns:1fr 1.05fr; gap:48px; padding:56px 0 64px} }
.haut h1{font-size:clamp(30px,5.2vw,48px); margin-top:10px}
.chapo{margin:16px 0 0; font-size:18px; color:var(--texte2); max-width:34em}

.apercu{border:1px solid var(--filet); border-radius:6px; overflow:hidden; box-shadow:0 10px 30px rgba(22,35,92,.10)}
.legende{margin:10px 0 0; font-family:var(--sans); font-size:13px; color:var(--gris)}

/* ---------- formulaire ---------- */
.formulaire{margin-top:26px; padding:22px; background:var(--papier); border-radius:8px}
.formulaire label.titre{display:block; font-family:var(--sans); font-weight:700; font-size:15px; color:var(--marine); margin-bottom:8px}
.ligne{display:flex; flex-wrap:wrap; gap:10px}
.ligne input[type=email]{flex:1 1 220px; min-width:0; font:inherit; font-family:var(--sans); font-size:16px;
  padding:13px 14px; border:1.5px solid var(--gris); border-radius:6px; background:#fff; color:var(--corps)}
.ligne input[type=email]:focus{border-color:var(--marine)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--sans); font-size:16px; font-weight:700;
  padding:13px 20px; border:0; border-radius:6px; background:var(--marine); color:#fff; cursor:pointer; text-decoration:none}
.btn:hover{background:var(--brique); color:#fff}
.case-a-cocher{display:flex; gap:10px; align-items:flex-start; margin-top:16px; font-family:var(--sans); font-size:14.5px; line-height:1.45; color:var(--texte2)}
.case-a-cocher input{width:20px; height:20px; margin:1px 0 0; flex:none; accent-color:var(--marine)}
.mention{margin:14px 0 0; font-family:var(--sans); font-size:12.5px; line-height:1.5; color:var(--gris)}
.piege{position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden}

/* ---------- fiche ---------- */
.fiche{border-top:1px solid var(--filet); padding:40px 0; display:grid; gap:36px}
@media (min-width:880px){ .fiche{grid-template-columns:repeat(3,1fr); gap:40px} }
.fiche h2{font-size:22px; margin:8px 0 12px}
.fiche p{margin:0 0 12px}
.fiche ul{margin:0; padding:0; list-style:none}
.fiche li{position:relative; padding-left:18px; margin-bottom:12px}
.fiche li::before{content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; background:var(--brique)}
.fiche b{color:var(--marine); font-weight:600}

/* ---------- passerelle vers le guide ---------- */
.guide{margin:0 0 48px; padding:28px; background:var(--marine); color:#fff; border-radius:8px; display:grid; gap:16px; align-items:center}
@media (min-width:880px){ .guide{grid-template-columns:1fr auto; padding:36px 40px} }
.guide .sur{color:var(--corail)}
.guide h2{color:#fff; font-size:clamp(22px,3vw,28px); margin:8px 0 10px}
.guide p{margin:0; color:#D9DDEC; max-width:38em}
.guide .btn{background:var(--corail); color:var(--marine)}
.guide .btn:hover{background:#fff; color:var(--marine)}

/* ---------- pages de texte (légales, merci) ---------- */
.texte{max-width:44em; padding:40px 0 56px}
.texte h1{font-size:clamp(28px,4.6vw,40px); margin:10px 0 24px}
.texte h2{font-size:21px; margin:32px 0 10px}
.texte p,.texte li{margin:0 0 12px}
.texte ul{padding-left:20px}
.texte .maj{font-family:var(--sans); font-size:13.5px; color:var(--gris)}

/* ---------- pied ---------- */
.pied{border-top:1px solid var(--filet)}
.pied .in{max-width:1080px; margin:0 auto; padding:22px var(--gut) 32px; display:flex; flex-wrap:wrap; gap:8px 22px;
  font-family:var(--sans); font-size:13.5px; color:var(--gris)}
.pied a{color:var(--gris)}
.pied .droite{margin-left:auto; display:flex; gap:18px; flex-wrap:wrap}
@media (max-width:560px){ .pied .droite{margin-left:0} }

@media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto!important; transition:none!important} }

.erreur{margin:12px 0 0; padding:10px 12px; background:var(--rose); border-left:3px solid var(--brique); font-family:var(--sans); font-size:14px; color:var(--corps)}
.btn:disabled{opacity:.6; cursor:wait}