/* HOLLI — feuille de style unique des quatre pages.
   Relevée des maquettes validées le 2026-09-01 ; les valeurs sont documentées
   dans design-system.md, qui fait foi. Ne pas introduire de valeur qui n'y figure pas. */


@font-face{font-family:'Instrument Sans';src:url('fonts/instrument-sans-latin-wght-normal.woff2') format('woff2-variations');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('fonts/instrument-sans-latin-wght-italic.woff2') format('woff2-variations');font-weight:400 700;font-style:italic;font-display:swap}

:root{
  /* --- échelle typographique : 6 crans --- */
  --t1:.8125rem; --t2:.9375rem; --t3:1.0625rem; --t4:1.375rem; --t5:2rem; --t6:3.25rem;
  /* --- espacement : base unique de 8px --- */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:6rem;
  /* --- couleurs de base --- */
  --paper:#faf9f6; --paper-alt:#ffffff;
  --ink:#111110; --ink-soft:#3a3a38; --ink-sec:#5f5c56;
  --hairline:#e4e0d7;
  --container:68rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:'Instrument Sans',system-ui,-apple-system,'Aptos','Calibri',sans-serif;
  font-size:var(--t3);line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{margin:0;line-height:1.15;letter-spacing:-.02em;font-weight:600;text-wrap:balance}
p,li{text-wrap:pretty}
p{margin:0 0 var(--s2)}
p:last-child{margin-bottom:0}
a{color:inherit}
.wrap{max-width:var(--container);margin:0;padding:0 var(--s3)}
.wrap>*{max-width:62ch}
.split{max-width:none}
.split>*{max-width:62ch}

/* --- en-tête --- */
.site{position:sticky;top:0;z-index:10;border-bottom:1px solid var(--hairline);background:var(--paper)}
.site .wrap{display:flex;align-items:center;justify-content:space-between;
  min-height:3.5rem;gap:var(--s2)}
.mark{display:inline-flex;align-items:center;gap:var(--s1);
  text-decoration:none;color:inherit}
.mark-logo{display:block;height:2rem;width:auto}
.mark-text{font-size:var(--t4);font-weight:700;letter-spacing:.06em;line-height:1}
/* menu mobile (defaut, < 64rem) : nav et lang caches, burger visible */
.nav{display:none;gap:var(--s3)}
.nav a{text-decoration:none;color:var(--ink-sec);font-size:var(--t2)}
.nav a[aria-current]{color:var(--ink)}
.lang-desktop{display:none}
.menu-burger{position:relative;display:block}
.menu-burger summary{list-style:none;cursor:pointer;user-select:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper);padding:var(--s2);line-height:0}
.menu-burger summary::-webkit-details-marker{display:none}
.menu-ico{display:block;fill:var(--ink);height:1.4rem;width:1.4rem}
.menu-panel{display:flex;flex-direction:column;gap:var(--s1);
  position:absolute;right:0;top:100%;margin-top:var(--s1);
  background:var(--paper);border:1px solid var(--hairline);
  padding:var(--s2);min-width:12rem;z-index:10}
.menu-panel .menu-link{text-decoration:none;color:var(--ink-sec);font-size:var(--t2);
  padding:var(--s1) 0}
.menu-panel .menu-link[aria-current]{color:var(--ink)}
.lang{font-size:var(--t1);color:var(--ink-sec);letter-spacing:.04em}
.lang a{color:inherit;text-decoration:none}
.lang a[aria-current]{color:var(--ink);font-weight:600}

/* --- sections --- */
section{padding:var(--s5) 0}
section+section{border-top:1px solid var(--hairline)}
h2{font-size:var(--t4);margin-bottom:var(--s3);max-width:20ch}
.lede{font-size:var(--t3);color:var(--ink-soft);max-width:62ch}
.narrow{max-width:62ch}
.trust span{white-space:nowrap}

/* --- A. accroche --- */
.hero{padding:var(--s5) 0 var(--s5)}
.hero h1{font-size:clamp(2rem,8.5vw,var(--t6));max-width:15ch}
.hero .sub{margin-top:var(--s3);font-size:var(--t4);line-height:1.35;
  color:var(--ink-soft);max-width:28ch;font-weight:400;letter-spacing:-.01em}
.actions{margin-top:var(--s4);display:flex;flex-direction:column;gap:var(--s2);align-items:stretch}
.trust{margin-top:var(--s4);font-size:var(--t1);color:var(--ink-sec);letter-spacing:.02em}

/* --- promesse de page : une phrase qui porte un engagement --- */
.promesse{margin-top:var(--s4);font-size:var(--t3);color:var(--ink);font-weight:600;
  padding-top:var(--s3);border-top:1px solid var(--hairline)}
/* le filet sépare de ce qui précède : sans rien au-dessus, il n'a pas lieu d'être */
.promesse:first-child{margin-top:0;padding-top:0;border-top:0}

/* --- boutons --- */
.btn{display:block;text-align:center;text-decoration:none;
  padding:.95rem var(--s3);font-size:var(--t2);font-weight:600;letter-spacing:.01em;
  border:1px solid var(--ink)}
.btn-ghost{border-color:var(--hairline);color:var(--ink-soft);font-weight:500}

/* --- D. le triptyque --- */
.claim{letter-spacing:-.02em}
.claim i{font-style:normal}

/* --- E. les étapes --- */
.steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline)}
.steps li{display:flex;gap:var(--s2);align-items:baseline;
  padding:var(--s2) 0;border-bottom:1px solid var(--hairline)}
.num{flex:0 0 auto;font-size:var(--t1);font-variant-numeric:tabular-nums;font-weight:600;
  min-width:1.75rem}
.step-body{flex:1 1 auto}
.step-name{font-weight:600}
.step-livrable{display:block;font-size:var(--t2);color:var(--ink-soft);margin-top:var(--s1)}
.step-dur{display:block;font-size:var(--t2);color:var(--ink-sec)}
.cross{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--hairline)}
.cross h3{font-size:var(--t2);font-weight:600;margin-bottom:var(--s1)}
.cross .item{margin-bottom:var(--s3);max-width:52ch}
.cross .item:last-child{margin-bottom:0}
.cross p{font-size:var(--t2);color:var(--ink-soft)}
.cross .detail p{font-size:var(--t3)}
.more{display:inline-block;margin-top:var(--s4);font-size:var(--t2);color:var(--ink-soft)}

/* --- F. la preuve --- */
.shot{margin-top:var(--s3);border:1px solid var(--hairline);background:var(--paper-alt);
  aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;
  color:var(--ink-sec);font-size:var(--t1);text-align:center;padding:var(--s3)}
figcaption{margin-top:var(--s1);font-size:var(--t1);color:var(--ink-sec)}

/* --- G. la souveraineté --- */
.pipeline{margin-top:var(--s3);font-size:var(--t3);color:var(--ink);letter-spacing:.01em}
.pipeline+p{color:var(--ink-soft)}
.pipeline .suite{display:block;margin-top:var(--s1);color:var(--ink-soft)}
blockquote{margin:var(--s3) 0 var(--s4);padding:0 var(--s3) 0;border-left:2px solid var(--sombre);
  font-size:var(--t2);color:var(--ink);font-style:italic}
blockquote p{margin:0}
blockquote footer{margin-top:var(--s1);padding:0;font-style:normal;font-size:var(--t2);color:var(--ink-soft)}
.preuve{color:var(--sombre);font-weight:600}

/* --- H. clients --- */
.logos{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.logo{border:1px solid var(--hairline);color:var(--ink-sec);font-size:var(--t1);
  padding:var(--s2) var(--s3);flex:0 1 8rem;min-height:6rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s1);
  overflow:hidden;transition:border-color .15s ease;text-decoration:none}
.logo:hover{border-color:var(--ink-sec)}
.logo img{display:block;width:5.5rem;height:2.25rem;object-fit:contain;object-position:center;flex:0 0 auto}
.logo .name{display:block;font-size:var(--t1);color:var(--ink-sec);line-height:1.2;
  max-width:100%;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis;word-break:normal;overflow-wrap:break-word;hyphens:auto}
.logo[hidden]{display:none}
.logos--many{max-width:none;width:100%}
.logos--many .logo{flex-basis:7rem;padding-left:var(--s2);padding-right:var(--s2)}
.logos--many .logo img{width:4.25rem;height:2rem}
.logos--many .logo .name{font-size:.85em;-webkit-line-clamp:3}
.ref{margin-top:var(--s3);font-size:var(--t2);color:var(--ink-soft)}

/* --- I. sortie --- */
.out h2{max-width:20ch}
.contact{margin-top:var(--s4);font-size:var(--t2);color:var(--ink-sec)}
.contact a{text-decoration:none}

/* --- formulaire de contact --- */
.form{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s3)}
.form label{font-size:var(--t2);font-weight:600;color:var(--ink)}
.form input,.form textarea{font:inherit;font-size:var(--t2);color:var(--ink);background:var(--paper);
  border:1px solid var(--hairline);border-radius:0;padding:var(--s2) var(--s2)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--ink-sec)}
.form textarea{resize:vertical}
footer{border-top:1px solid var(--hairline);padding:var(--s3) 0 var(--s5);
  font-size:var(--t1);color:var(--ink-sec)}

/* --- focus clavier --- */
a:focus-visible,.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* ============ rupture 1 : 40rem ============ */
@media (min-width:40rem){
  .wrap{padding:0 var(--s4)}
  section{padding:var(--s6) 0}
  .actions{flex-direction:row;align-items:center}
  .btn{display:inline-block;padding:.95rem var(--s4)}
  .steps li{gap:var(--s3);align-items:baseline}
  .step-dur{display:inline;margin-left:var(--s2)}
  h2{font-size:var(--t5)}
}
/* ============ rupture 2 : 64rem ============ */
@media (min-width:64rem){
  /* desktop : nav inline, burger cache, FR/EN inline */
  .nav{display:flex;align-items:center}
  .menu-burger{display:none}
  .lang-desktop{display:inline}
  .hero{padding:var(--s6) 0}
  /* Le grand écran ne déplace pas le texte : il sort les titres dans une
     marge de gauche. La colonne de texte garde UNE seule position, qu'il y
     ait un titre ou non. */
  .split{display:grid;grid-template-columns:minmax(0,20rem) minmax(0,40rem);gap:var(--s4)}
  .split h2{margin-bottom:0;position:sticky;top:var(--s3);align-self:start}
  .split>*:only-child{grid-column:2}
  /* en marge, le triptyque s'empile : l'alinéa remplace le séparateur */
  .claim span{display:block}
  .claim .sep{display:none}
  /* le hero suit la grille des sections : l'accroche est le titre de la page,
     elle occupe la colonne de titre ; sous-titre, action et réassurance
     descendent dans la colonne de texte, alignés sur tout le corps de la page */
  .hero .wrap{display:grid;grid-template-columns:minmax(0,20rem) minmax(0,40rem);
    gap:var(--s4);align-items:start;grid-auto-rows:min-content;
    padding-left:var(--s3)!important;max-width:var(--container)}
  .hero h1{grid-column:1;grid-row:1 / span 3;font-size:2.75rem;max-width:none}
  .hero .sub{grid-column:2;grid-row:1;margin-top:0;max-width:30ch}
  .hero .actions{grid-column:2;grid-row:2;margin-top:var(--s3)}
  .hero .trust{grid-column:2;grid-row:3;margin-top:var(--s3)}
}
:root{ --paper:#fcfdfe; --paper-alt:#ffffff; --ink:#101113; --ink-soft:#383a3c; --ink-sec:#5b5e62;
  --hairline:#e5eaec; --clair:#d1e0f2; --sombre:#255684; }
.btn-primary{background:var(--sombre);color:#fffdf9;border-color:var(--sombre)}
.num{background:var(--clair);color:var(--ink);text-align:center;padding:.15rem 0;min-width:1.9rem;font-weight:600}
.fig{color:var(--sombre)}
section+section{border-top-color:var(--sombre)}
.proof .wrap{border-left:2px solid var(--sombre);padding-left:var(--s3)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--sombre);outline-offset:3px}

/* ===== composants ajoutés pour les pages 2, 3 et 4 ===== */

/* le détail dépliable — l'état fermé se lit comme complet ; ne s'applique qu'aux .fold (contenu, pas menu) */
details.fold{border-bottom:1px solid var(--hairline)}
details.fold:first-of-type{border-top:1px solid var(--hairline)}
summary{list-style:none;cursor:pointer;padding:var(--s2) 0;display:flex;gap:var(--s2);
  align-items:baseline}
summary::-webkit-details-marker{display:none}
summary:focus-visible{outline:3px solid var(--sombre);outline-offset:3px}
.etape{flex:1 1 auto}
.etape b{font-weight:600}
.etape .dur{color:var(--ink-sec)}
.etape .livrable{display:block;color:var(--ink-soft)}
.plus{flex:0 0 auto;color:var(--sombre);font-weight:600;font-size:var(--t2);
  line-height:1.6;user-select:none}
.plus::before{content:"+"}
details[open] .plus::before{content:"−"}
.detail{padding:0 0 var(--s3) 0;max-width:58ch}
.detail p{color:var(--ink-soft)}
.prix{display:block;margin-top:var(--s1);font-size:var(--t3);color:var(--ink-sec)}
.prix .lbl{color:var(--ink);font-weight:600}
.prix .montant{font-weight:700;color:var(--ink)}
.prix .note,.detail .note{display:block;margin-top:var(--s1);font-size:var(--t2);color:var(--ink-soft)}
.duree,.perimetre{display:block;margin-top:var(--s1);color:var(--ink-sec)}
.duree b,.perimetre b{color:var(--ink);font-weight:600}

/* mention de financement, au-dessus de la liste */
.finance{border-left:2px solid var(--sombre);padding-left:var(--s2);margin-bottom:var(--s4)}
.finance b{display:block}
.finance p{font-size:var(--t2);color:var(--ink-soft);margin:0}

/* piliers — fiches en colonne unique, tableau à partir de 40rem */
.piliers{margin:0;padding:0;list-style:none;border-top:1px solid var(--hairline)}
.piliers li{padding:var(--s2) 0;border-bottom:1px solid var(--hairline)}
.piliers .couche{font-weight:600}
.piliers .quoi{display:block}
.piliers .garantit{display:block;color:var(--ink-sec);font-size:var(--t2)}
@media (min-width:40rem){
  .piliers li{display:grid;grid-template-columns:9rem 1fr 1fr;gap:var(--s2);align-items:baseline}
  .piliers .garantit{font-size:var(--t2)}
}
.note{font-size:var(--t2);color:var(--ink-sec);margin-top:var(--s2)}

/* la promesse de page — une phrase, pas une liste de garanties :
   corps de texte, jamais le traitement de la ligne de réassurance */
.promesse{margin-top:var(--s4);font-size:var(--t3);color:var(--ink);font-weight:600;
  padding-top:var(--s3);border-top:1px solid var(--hairline)}
/* dans un même bloc, une seule mesure — fixée en rem, car 30 caractères
   à 22px et à 17px ne font pas la même largeur */
.hero .sub,.hero .promesse{max-width:28rem}
/* le bloc d'entrée d'une page de contenu : une seule taille, une seule mesure */
.hero .narrow>p{max-width:28rem}
/* mobile : le titre et le texte sont empilés, il leur faut un écart franc.
   À partir de 64rem ils sont côte à côte et l'écart n'a plus lieu d'être. */
.hero .narrow>p:first-child{margin-top:var(--s3)}
@media (min-width:64rem){ .hero .narrow>p:first-child{margin-top:0} }

/* relance : intro, puis la ligne d'appel avec le bouton à côté */
/* pas de filet ici : la dernière ligne de la liste ferme déjà le bloc.
   Deux filets voisins se lisent comme un défaut, jamais comme une séparation. */
.relance{margin-top:var(--s4)}
.relance>p{max-width:58ch;color:var(--ink-soft)}
.cta-inline{margin-top:var(--s3);display:flex;flex-direction:column;gap:var(--s2);align-items:stretch}
.cta-txt{margin:0;max-width:34ch}
.cta-txt b{font-weight:600}
@media (min-width:40rem){
  .cta-inline{flex-direction:row;align-items:center;gap:var(--s4)}
  .cta-inline .btn{flex:0 0 auto}
}

/* bandeau des fondateurs */
.fondateurs{display:flex;flex-direction:column;gap:var(--s3)}
.fondateur{display:flex;gap:var(--s2);align-items:center}
.portrait{flex:0 0 auto;width:5rem;height:6.25rem;border:1px solid var(--hairline);
  background:var(--paper-alt);overflow:hidden}
.portrait img{display:block;width:100%;height:100%;object-fit:cover}
.fondateur b{display:block}
.fondateur .poste{display:block;color:var(--ink-sec);font-size:var(--t1)}
.fondateur .linkedin{display:inline-flex;align-items:center;gap:var(--s1);
  margin-top:var(--s1);color:var(--ink);text-decoration:none}
.fondateur .linkedin svg{display:block}
.fondateur .linkedin:hover{color:var(--sombre)}
@media (min-width:40rem){ .fondateurs{flex-direction:row;gap:var(--s4)} }