/* ITIWE V4 — éditorial : bandeau, hero, sections numérotées, citations,
   encadré de garantie, moments du déroulé, cas, callout, bios, bibliothèque. */

/* Bandeau haut de page d'accueil */
.strip{background:var(--ink);color:var(--paper-warm);font:400 italic clamp(16px,1.5vw,21px)/1.4 var(--font-display)}
.strip__inner{max-width:var(--wrap);margin:0 auto;padding:14px var(--pad)}

/* Hero */
.hero{padding:var(--s24) 0 var(--s20)}
.hero .lead{margin-top:var(--s8)}
.hero__sub{font:400 italic clamp(18px,1.6vw,22px)/1.45 var(--font-display);color:var(--ink-60);max-width:40ch;margin:var(--s8) 0 0}
.page-head{padding:var(--s24) 0 var(--s16)}

/* Sections numérotées (approche) */
.sect{display:grid;grid-template-columns:88px minmax(0,1fr);gap:var(--s8);align-items:start}
.sect__num{font:500 12px/1.6 var(--font-mono);letter-spacing:.12em;color:var(--ink-60);padding-top:10px;border-top:1px solid var(--ink)}
@media(max-width:900px){.sect{grid-template-columns:1fr;gap:var(--s6)}.sect__num{border-top:0;padding-top:0}}

/* Citations client — poids de preuve */
.quote{margin:0;padding:var(--s8) 0 var(--s8) var(--s8);border-left:2px solid var(--vermillon);max-width:52ch}
.quote p{font:400 italic clamp(22px,2.3vw,32px)/1.28 var(--font-display);color:var(--ink);margin:0}
.quote em{font-style:normal}
.quote--tight{margin:var(--s12) 0}

/* Encadré de garantie — la double lecture */
.guarantee{background:var(--ink-blue);color:var(--paper-warm);border-radius:var(--r-md);padding:clamp(28px,4vw,56px);margin:var(--s16) 0}
.guarantee p{font:400 clamp(18px,1.6vw,22px)/1.55 var(--font-display);color:var(--paper-warm);max-width:56ch;margin:0 0 var(--s6)}
.guarantee p:last-child{margin-bottom:0}
.guarantee strong{font-weight:600;color:#fff}
.guarantee__seal{font:500 11px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:#8FA3CE;margin:0 0 var(--s6)}

/* Les moments du déroulé / les quatre temps */
.moments{list-style:none;margin:var(--s8) 0 0;padding:0;display:grid;gap:0}
.moments>li{padding:var(--s8) 0;border-top:1px solid var(--ink-10);display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:var(--s8);align-items:baseline}
.moments>li:last-child{border-bottom:1px solid var(--ink-10)}
.moments h3{font:600 clamp(19px,1.6vw,23px)/1.3 var(--font-display);margin:0 0 var(--s3)}
.moments p{margin:0;color:var(--ink-80);max-width:58ch}
.moments p+p{margin-top:var(--s3)}
.moments strong{font-weight:600;color:var(--ink)}
.moment__aside{font:400 italic 15px/1.5 var(--font-display);color:var(--vermillon);text-align:right}
.moment__aside strong{font-style:normal;font-weight:600;color:var(--vermillon)}
@media(max-width:900px){.moments>li{grid-template-columns:1fr;gap:var(--s3)}.moment__aside{text-align:left}}

/* Listes de définition sobres (temps, conditions, facturation) */
.stack{display:grid;gap:var(--s8);margin:var(--s8) 0 0;max-width:var(--measure)}
.stack>div{padding-top:var(--s6);border-top:1px solid var(--ink-10)}
.stack h3{font:600 19px/1.3 var(--font-display);margin:0 0 var(--s2)}
.stack p{margin:0;color:var(--ink-80)}
.stack p+p{margin-top:var(--s3)}
.stack strong{font-weight:600;color:var(--ink)}

/* Cas — références */
.case{padding:var(--s20) 0;border-top:1px solid var(--ink)}
.case__index{font:500 12px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-60);margin:0 0 var(--s6)}
.case__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s12);margin-top:var(--s12)}
.case__part h3{font:500 12px/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--vermillon);margin:0 0 var(--s4);padding-top:var(--s4);border-top:1px solid var(--ink-10)}
.case__part .prose{max-width:64ch}
@media(min-width:1024px){.case__grid{grid-template-columns:1fr 1fr;gap:var(--s16) var(--s12)}}

/* Callout non validé — bloc autonome, retirable sans dépendance */
.callout{background:var(--paper-deep);border:1px solid var(--paper-edge);border-radius:var(--r-md);padding:clamp(24px,3vw,40px);margin:var(--s12) 0;max-width:70ch}
.callout__label{font:500 11px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-60);margin:0 0 var(--s4)}
.callout h3{font:600 clamp(20px,1.8vw,26px)/1.25 var(--font-display);margin:0 0 var(--s6)}
.callout p{margin:0 0 var(--s4);color:var(--ink-80)}
.callout p:last-child{margin-bottom:0}
.callout strong{font-weight:600;color:var(--ink)}

/* Bios — emplacement portrait + LinkedIn */
.bios{display:grid;gap:var(--s16);margin-top:var(--s12)}
.bio{display:grid;grid-template-columns:180px minmax(0,1fr);gap:var(--s8)}
.bio__portrait{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:50%}
.bio h3{font:600 clamp(22px,2vw,28px)/1.2 var(--font-display);margin:0 0 var(--s4)}
.bio p{margin:0;color:var(--ink-80)}
.bio__link{margin-top:var(--s4);font:500 14px/1 var(--font-body)}
@media(max-width:900px){.bio{grid-template-columns:140px minmax(0,1fr)}}
@media(max-width:640px){.bio{grid-template-columns:1fr}.bio__portrait{max-width:200px}}

/* Bibliothèque — aucune date, aucun ordre chronologique */
.shelf{display:grid;gap:0;margin-top:var(--s12);border-top:1px solid var(--ink)}
.shelf a{display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);gap:var(--s8);padding:var(--s12) 0;border-bottom:1px solid var(--ink-10);text-decoration:none;color:var(--ink);transition:background var(--t-fast)}
.shelf a:hover{background:var(--paper-warm);color:var(--ink)}
.shelf h2{font:600 clamp(24px,2.4vw,34px)/1.15 var(--font-display);margin:0}
.shelf h2 em{font-style:italic;font-weight:500}
.shelf p{margin:0;color:var(--ink-60);max-width:52ch}
.shelf a:hover h2{color:var(--vermillon)}
@media(max-width:900px){.shelf a{grid-template-columns:1fr;gap:var(--s3)}}