/* ==========================================================================
   SimonNtieche.com — Feuille de style principale
   "De la douleur à l'impact." — média éditorial francophone
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,500;0,7..72,600;1,7..72,400&family=Work+Sans:wght@400;500;600;700&display=swap');

/* -------------------------------- Tokens -------------------------------- */
:root{
  /* Couleurs de base — charte alignée sur le logo SN (bleu marine + or) */
  --ink:        #0D233A;
  --ink-soft:   #16324F;
  --ink-line:   #274867;
  --paper:      #F5F1E6;
  --paper-dim:  #EAE1C9;
  --paper-line: #D8CBA3;
  --white:      #FFFFFF;

  /* Texte */
  --text:       #14202E;
  --text-muted: #5C6B78;
  --text-inv:   #F5F1E6;
  --text-inv-muted: #B7C2CC;

  /* Accents — bleu marine (identité) + or (accent, tiré du logo) */
  --navy:       #0D233A;
  --navy-deep:  #081727;
  --gold:       #CDA95B;
  --gold-deep:  #A9853A;
  --gold-light: #E4C888;

  /* Fonctions */
  --success:    #4B6A45;
  --error:      #A23B2A;

  /* Typo */
  --font-display: 'Fraunces', 'Iowan Old Style', serif;
  --font-body:    'Literata', 'Iowan Old Style', Georgia, serif;
  --font-ui:      'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Échelle */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.35rem + 0.75vw, 1.9rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.4vw, 2.6rem);
  --step-4:  clamp(2.4rem, 1.9rem + 2.4vw, 3.6rem);
  --step-5:  clamp(3rem, 2.2rem + 3.8vw, 5rem);

  /* Mise en page */
  --content-max: 1180px;
  --text-max: 68ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 3px;
  --radius-md: 6px;

  color-scheme: light;
}

/* -------------------------------- Base ----------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body{
  margin:0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ max-width:100%; display:block; }
svg{ display:block; }

a{ color: inherit; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h1{ font-size: var(--step-5); font-weight: 600; }
h2{ font-size: var(--step-3); }
h3{ font-size: var(--step-2); }
h4{ font-size: var(--step-1); font-family: var(--font-ui); font-weight: 600; }

p{ margin: 0 0 1.1em; }
p:last-child{ margin-bottom: 0; }

.text-max{ max-width: var(--text-max); }

ul, ol{ padding-left: 1.3em; }
li{ margin-bottom: 0.4em; }

::selection{ background: var(--gold); color: var(--ink); }

:focus-visible{
  outline: 2.5px solid var(--navy);
  outline-offset: 3px;
}

/* Barre de progression au clavier pour skip-link */
.skip-link{
  position:absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.9em 1.4em;
  z-index: 200;
  font-family: var(--font-ui);
  font-weight:600;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus{ left: 0; }

/* ------------------------------ Conteneurs -------------------------------- */
.wrap{
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section{
  padding-block: clamp(3.5rem, 5vw + 1rem, 6.5rem);
  position: relative;
}
.section--tight{ padding-block: clamp(2.5rem, 3vw + 1rem, 4rem); }
.section--dark{
  background: var(--ink);
  color: var(--text-inv);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4{ color: var(--white); }
.section--dark p{ color: var(--text-inv-muted); }
.section--dim{ background: var(--paper-dim); }
.section--line-top{ border-top: 1px solid var(--paper-line); }
.section--dark.section--line-top{ border-top-color: var(--ink-line); }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap: 0.6em;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--gold-deep);
  margin-bottom: 0.9em;
}
.section--dark .eyebrow{ color: var(--gold-light); }
.eyebrow::before{
  content:"";
  width: 1.6em;
  height: 2px;
  background: currentColor;
  display:block;
}

.section-head{
  max-width: 46ch;
  margin-bottom: clamp(2rem, 3vw, 3rem);
}
.section-head--wide{ max-width: 62ch; }
.section-head p{ color: var(--text-muted); font-size: var(--step-1); }
.section--dark .section-head p{ color: var(--text-inv-muted); }

/* -------------------------------- En-tête --------------------------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245,241,230,0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--paper-line);
}
.site-header__bar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1rem;
}
.brand{
  text-decoration: none;
  color: var(--ink);
  display:flex;
  align-items:center;
  gap: 0.7rem;
  line-height: 1.1;
}
.brand__logo{
  width: 44px;
  height: 44px;
  border-radius: 9px;
  display:block;
  flex-shrink:0;
}
.brand__text{
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  display:flex;
  flex-direction: column;
}
.brand small{
  font-family: var(--font-ui);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold-deep);
  margin-top: 0.15em;
}
@media (max-width: 420px){
  .brand__text{ font-size: 1.05rem; }
}

.main-nav{
  display:flex;
  align-items:center;
  gap: clamp(1rem, 2vw, 2rem);
}
.main-nav__links{
  display:flex;
  gap: clamp(0.9rem, 1.6vw, 1.7rem);
  list-style:none;
  margin:0; padding:0;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 500;
}
.main-nav__links a{
  text-decoration:none;
  color: var(--text);
  padding-block: 0.3em;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.main-nav__links a:hover{ border-color: var(--gold); }
.main-nav__links a[aria-current="page"]{
  color: var(--navy);
  border-color: var(--navy);
}

.nav-toggle{
  display:none;
  background:none;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-sm);
  width: 42px; height: 38px;
  cursor:pointer;
  position: relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:"";
  position:absolute;
  left: 9px; right: 9px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle span{ top: 18px; }
.nav-toggle span::before{ top: -7px; }
.nav-toggle span::after{ top: 7px; }
.nav-toggle[aria-expanded="true"] span{ background: transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px){
  .nav-toggle{ display:block; }
  .main-nav{
    position: fixed;
    inset: 0 0 0 auto;
    width: min(78vw, 340px);
    height: 100vh;
    background: var(--paper);
    flex-direction: column;
    align-items: stretch;
    padding: 5.5rem 1.75rem 2rem;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    box-shadow: -8px 0 30px rgba(20,15,5,0.15);
  }
  .main-nav.is-open{ transform: translateX(0); }
  .main-nav__links{
    flex-direction: column;
    gap: 0;
    font-size: 1.15rem;
  }
  .main-nav__links li{ border-bottom: 1px solid var(--paper-line); }
  .main-nav__links a{ display:block; padding-block: 1em; border-bottom: none; }
  .main-nav .btn{ margin-top: 1.5rem; width: 100%; text-align:center; }
}

/* -------------------------------- Boutons --------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap: 0.55em;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration:none;
  padding: 0.85em 1.5em;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor:pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color .15s ease, transform .12s ease;
  line-height:1.2;
}
.btn:active{ transform: translateY(1px); }
.btn--primary{
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.btn--primary:hover{ background: var(--navy-deep); border-color: var(--navy-deep); }
.btn--gold{
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}
.btn--gold:hover{ background: var(--gold-deep); border-color: var(--gold-deep); color: var(--white); }
.btn--ghost{
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover{ background: var(--ink); color: var(--paper); }
.section--dark .btn--ghost{ color: var(--paper); border-color: var(--paper-line); }
.section--dark .btn--ghost:hover{ background: var(--paper); color: var(--ink); }
.btn--sm{ padding: 0.6em 1.1em; font-size: 0.85rem; }
.btn--block{ width:100%; justify-content:center; }
.btn[disabled]{ opacity:0.55; cursor:not-allowed; }

.link-arrow{
  font-family: var(--font-ui);
  font-weight:600;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap: 0.4em;
  color: var(--navy);
  border-bottom: 1.5px solid transparent;
  padding-bottom: 0.1em;
  transition: border-color 0.15s ease, gap 0.15s ease;
}
.link-arrow:hover{ border-color: currentColor; gap: 0.6em; }
.section--dark .link-arrow{ color: var(--gold-light); }

/* -------------------------------- Hero ------------------------------------ */
.hero{
  padding-block: clamp(2.75rem, 6vw, 5.5rem) clamp(3rem, 5vw, 5rem);
  background:
    radial-gradient(560px 420px at 88% -10%, rgba(205,169,91,0.16), transparent 60%),
    var(--paper);
  border-bottom: 1px solid var(--paper-line);
}
.hero__grid{
  display:grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items:center;
}
@media (max-width: 880px){
  .hero__grid{ grid-template-columns: 1fr; }
  .hero__art{ order:-1; max-width: 320px; margin-inline:auto; }
}
.hero h1{
  font-size: var(--step-5);
  max-width: 12ch;
}
.hero h1 .accent{
  display:block;
  color: var(--navy);
}
.hero__lede{
  font-size: var(--step-1);
  color: var(--text-muted);
  max-width: 44ch;
  margin-bottom: 1.6em;
  font-family: var(--font-body);
}
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap: 0.9rem;
  align-items:center;
}
.hero__meta{
  margin-top: 1.6rem;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Illustration abstraite "de la douleur à l'impact" */
.gradient-arc{ width:100%; height:auto; }

/* --------------------------- Quatre portes --------------------------------- */
.doors{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--paper-line);
  border: 1px solid var(--paper-line);
}
@media (max-width: 880px){ .doors{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .doors{ grid-template-columns: 1fr; } }
.door{
  background: var(--paper);
  padding: 2rem 1.6rem;
  text-decoration:none;
  color: var(--text);
  display:flex;
  flex-direction:column;
  gap: 1rem;
  min-height: 220px;
  transition: background-color 0.15s ease;
}
.door:hover{ background: var(--white); }
.door:hover .door__icon{ color: var(--navy); }
.door__icon{ color: var(--gold-deep); transition: color 0.15s ease; }
.door__icon svg{ width: 34px; height:34px; }
.door h3{ font-size: var(--step-1); margin-bottom: 0.2em; }
.door p{ color: var(--text-muted); font-size: 0.95rem; flex-grow:1; }
.door span.link-arrow{ font-size: 0.85rem; }

/* -------------------------------- Cartes ----------------------------------- */
.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2vw, 2rem);
}
@media (max-width: 880px){ .cards{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .cards{ grid-template-columns: 1fr; } }

.card{
  background: var(--white);
  border: 1px solid var(--paper-line);
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color: var(--text);
}
.card__cover{
  aspect-ratio: 4/3;
  background: var(--ink);
  position:relative;
  overflow:hidden;
}
.card__cover svg{ width:100%; height:100%; }
.card__body{ padding: 1.4rem 1.5rem 1.7rem; display:flex; flex-direction:column; gap: 0.6rem; flex-grow:1; }
.card__cat{
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight:700;
  letter-spacing: 0.03em;
  color: var(--gold-deep);
}
.card h3{ font-size: 1.3rem; margin-bottom: 0.1em; }
.card p{ color: var(--text-muted); font-size: 0.94rem; flex-grow:1; }
.card__meta{
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--text-muted);
  display:flex;
  gap: 0.9em;
  border-top: 1px solid var(--paper-line);
  padding-top: 0.8rem;
  margin-top: 0.4rem;
}

/* --------------------------- Séquence D.I.A.I ------------------------------- */
.diai{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  counter-reset: diai;
}
@media (max-width: 780px){ .diai{ grid-template-columns: 1fr 1fr; row-gap: 2rem; } }
@media (max-width: 480px){ .diai{ grid-template-columns: 1fr; } }

.diai__step{
  counter-increment: diai;
  padding: 0 1.4rem;
  position:relative;
}
.diai__step:first-child{ padding-left: 0; }
.diai__step:last-child{ padding-right: 0; }
.diai__step::before{
  content: counter(diai, decimal-leading-zero);
  display:block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--diai-color, var(--gold));
  margin-bottom: 0.6rem;
}
.diai__step:nth-child(1){ --diai-color: #6E86A0; }
.diai__step:nth-child(2){ --diai-color: #A9853A; }
.diai__step:nth-child(3){ --diai-color: #CDA95B; }
.diai__step:nth-child(4){ --diai-color: #E4C888; }
.diai__bar{
  height: 3px;
  background: var(--diai-color, var(--gold));
  margin-bottom: 1rem;
}
.diai__step h4{ font-family: var(--font-display); font-weight:600; font-size: 1.15rem; margin-bottom: 0.4em; }
.diai__step p{ color: var(--text-inv-muted); font-size: 0.94rem; }

/* ------------------------------ Indice SN ---------------------------------- */
.sn-index{
  background: var(--white);
  border: 1px solid var(--paper-line);
  padding: 1.8rem 2rem;
}
.sn-index__total{
  display:flex;
  align-items:baseline;
  gap: 0.5rem;
  font-family: var(--font-display);
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--paper-line);
  padding-bottom: 1.1rem;
}
.sn-index__total strong{ font-size: 2.6rem; color: var(--navy); }
.sn-index__total span{ font-family: var(--font-ui); color: var(--text-muted); font-size: 0.9rem; }
.sn-meter{ margin-bottom: 1rem; }
.sn-meter:last-child{ margin-bottom: 0; }
.sn-meter__label{
  display:flex;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  margin-bottom: 0.35em;
}
.sn-meter__label b{ font-weight:600; }
.sn-meter__label span{ color: var(--text-muted); }
.sn-meter__track{
  height: 7px;
  background: var(--paper-dim);
  border-radius: 4px;
  overflow:hidden;
}
.sn-meter__fill{
  height:100%;
  background: linear-gradient(90deg, var(--navy), var(--gold));
  border-radius: 4px;
}

/* --------------------------------- Vidéo ------------------------------------ */
.video-block{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items:center;
}
@media (max-width: 820px){ .video-block{ grid-template-columns: 1fr; } }
.video-frame{
  position:relative;
  aspect-ratio: 16/10;
  background: linear-gradient(140deg, #0D233A, #1F3F5E);
  border: 1px solid var(--ink-line);
  display:flex;
  align-items:center;
  justify-content:center;
}
.video-frame__play{
  width: 68px; height:68px;
  border-radius:50%;
  border: 1.5px solid rgba(245,241,230,0.5);
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--paper);
}
.video-frame__note{
  position:absolute;
  bottom: 0.9rem; left: 0.9rem; right: 0.9rem;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: rgba(245,241,230,0.65);
  letter-spacing: 0.02em;
}

/* -------------------------------- Formulaires ------------------------------- */
.form{ max-width: 560px; }
.form--wide{ max-width: 100%; }
.field{ margin-bottom: 1.3rem; }
.field label{
  display:block;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 0.4em;
}
.field input,
.field textarea,
.field select{
  width:100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75em 0.9em;
  background: var(--white);
  border: 1.5px solid var(--paper-line);
  border-radius: var(--radius-sm);
  color: var(--text);
}
.section--dark .field input,
.section--dark .field textarea{
  background: var(--ink-soft);
  border-color: var(--ink-line);
  color: var(--paper);
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color: var(--navy);
}
.field textarea{ resize: vertical; min-height: 130px; }
.field-hint{ font-size: 0.82rem; color: var(--text-muted); margin-top: 0.35em; }
.section--dark .field-hint{ color: var(--text-inv-muted); }
.field-row{ display:flex; gap:1rem; }
.field-row .field{ flex:1; }
@media (max-width: 560px){ .field-row{ flex-direction:column; gap:0; } }

.inline-form{
  display:flex;
  gap: 0.7rem;
  flex-wrap:wrap;
}
.inline-form input{
  flex:1;
  min-width: 220px;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.8em 1em;
  border: 1.5px solid var(--paper-line);
  border-radius: var(--radius-sm);
  background: var(--white);
}
.section--dark .inline-form input{ background: var(--ink-soft); border-color: var(--ink-line); color: var(--paper); }

.consent{
  display:flex;
  gap: 0.6em;
  align-items:flex-start;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.9rem;
}
.section--dark .consent{ color: var(--text-inv-muted); }
.consent input{ margin-top: 0.28em; }

.form-note{
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 0.8rem;
}
.section--dark .form-note{ color: var(--text-inv-muted); }

.form-status{
  display:none;
  padding: 0.9em 1.1em;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  margin-top: 1rem;
}
.form-status.is-visible{ display:block; }
.form-status--ok{ background: rgba(75,106,69,0.12); color: #33492E; border:1px solid rgba(75,106,69,0.35); }
.form-status--error{ background: rgba(162,59,42,0.12); color: #7A2A1C; border:1px solid rgba(162,59,42,0.35); }

/* Honeypot (antispam invisible) */
.hp-field{ position:absolute; left:-9999px; top:-9999px; }

/* -------------------------------- Filtres archive ---------------------------- */
.filters{
  display:flex;
  flex-wrap:wrap;
  gap: 0.6rem;
  margin-bottom: 2.2rem;
}
.filters button{
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight:600;
  padding: 0.55em 1.1em;
  border-radius: 999px;
  border: 1.5px solid var(--paper-line);
  background: transparent;
  color: var(--text);
  cursor:pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.filters button:hover{ border-color: var(--navy); }
.filters button.is-active{
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* -------------------------------- Listes utilitaires ------------------------- */
.check-list{ list-style:none; padding:0; }
.check-list li{
  padding-left: 1.7em;
  position:relative;
  margin-bottom: 0.7em;
}
.check-list li::before{
  content:"";
  position:absolute; left:0; top: 0.45em;
  width: 9px; height:9px;
  background: var(--gold);
}

.breadcrumb{
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--text-muted);
  display:flex;
  gap:0.5em;
  flex-wrap:wrap;
  margin-bottom: 1.5rem;
}
.breadcrumb a{ text-decoration:none; color: var(--text-muted); border-bottom: 1px solid transparent; }
.breadcrumb a:hover{ border-color: currentColor; }
.breadcrumb .sep{ opacity:0.5; }
.breadcrumb .current{ color: var(--text); }

/* -------------------------------- Table des offres --------------------------- */
.offer{
  border: 1px solid var(--paper-line);
  background: var(--white);
  padding: 2rem;
  display:flex;
  flex-direction:column;
  gap: 1rem;
  height:100%;
}
.offer__status{
  align-self:flex-start;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight:700;
  letter-spacing:0.03em;
  padding: 0.3em 0.8em;
  border-radius: 999px;
}
.offer__status--dispo{ background: rgba(75,106,69,0.15); color:#33492E; }
.offer__status--attente{ background: rgba(205,169,91,0.18); color: var(--gold-deep); }
.offer__meta{
  list-style:none; padding:0; margin: 0.4rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--text-muted);
  display:flex; flex-direction:column; gap: 0.45em;
}
.offer__meta b{ color: var(--text); font-weight:600; }
.offer-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px){ .offer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .offer-grid{ grid-template-columns: 1fr; } }

/* -------------------------------- Bandeau citation ---------------------------- */
.pull{
  border-left: 3px solid var(--gold);
  padding-left: 1.3rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight:500;
  max-width: 34ch;
  margin: 1.5rem 0;
}

/* -------------------------------- Sommaire gabarit ---------------------------- */
.toc{
  border: 1px solid var(--paper-line);
  background: var(--paper-dim);
  padding: 1.5rem 1.7rem;
}
.toc h4{ margin-bottom: 0.8em; }
.toc ol{ margin:0; padding-left: 1.2em; font-family: var(--font-ui); font-size: 0.92rem; }
.toc a{ text-decoration:none; color: var(--text); }
.toc a:hover{ color: var(--navy); }

.summary-section{
  border-top: 1px solid var(--paper-line);
  padding-block: 2.4rem;
}
.summary-section:first-of-type{ border-top:none; padding-top:0; }
.summary-section__label{
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight:700;
  color: var(--gold-deep);
  margin-bottom: 0.6em;
}

.action-24{
  background: var(--ink);
  color: var(--paper);
  padding: 1.8rem 2rem;
  display:flex;
  gap: 1.4rem;
  align-items:flex-start;
}
.action-24__icon{ flex-shrink:0; color: var(--gold-light); }
.action-24 h4{ color: var(--white); margin-bottom: 0.3em; }
.action-24 p{ color: var(--text-inv-muted); margin:0; }

/* -------------------------------- Bio / à propos ------------------------------ */
.bio-grid{
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items:start;
}
@media (max-width: 820px){ .bio-grid{ grid-template-columns:1fr; } }
.bio-portrait{
  aspect-ratio: 4/5;
  background: linear-gradient(155deg, var(--navy) 0%, var(--gold) 100%);
  position:relative;
  overflow:hidden;
}
.bio-portrait svg{ width:100%; height:100%; }

.paths{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
}
@media (max-width: 760px){ .paths{ grid-template-columns:1fr; } }
.path{
  background: var(--ink);
  padding: 2rem;
  display:flex;
  flex-direction:column;
  gap: 0.8rem;
}
.path h4{ color: var(--white); }
.path p{ margin:0; }

/* -------------------------------- Pied de page --------------------------------- */
.site-footer{
  background: var(--ink);
  color: var(--text-inv-muted);
  padding-block: 3.5rem 2rem;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--ink-line);
}
@media (max-width: 820px){ .footer-grid{ grid-template-columns: 1fr 1fr; row-gap: 2.2rem; } }
@media (max-width: 520px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-brand .brand{ color: var(--white); }
.footer-brand p{ margin-top: 0.9rem; max-width: 34ch; font-size: 0.92rem; }
.footer-col h4{
  font-family: var(--font-ui);
  color: var(--white);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  margin-bottom: 1em;
}
.footer-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 0.65em; }
.footer-col a{
  color: var(--text-inv-muted);
  text-decoration:none;
  font-size: 0.92rem;
}
.footer-col a:hover{ color: var(--gold-light); }
.footer-bottom{
  padding-top: 1.6rem;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap: 1rem;
  font-size: 0.8rem;
}
.footer-bottom a{ color: var(--text-inv-muted); text-decoration:none; }
.footer-bottom a:hover{ color: var(--gold-light); }

/* -------------------------------- Bandeau cookies ------------------------------- */
.cookie-banner{
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  max-width: 620px;
  margin-inline:auto;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink-line);
  padding: 1.4rem 1.6rem;
  z-index: 300;
  display:none;
  gap: 1rem;
  align-items:flex-start;
  flex-direction:column;
  box-shadow: 0 10px 40px rgba(10,7,3,0.35);
}
.cookie-banner.is-visible{ display:flex; }
.cookie-banner p{ margin:0; font-size: 0.88rem; color: var(--text-inv-muted); }
.cookie-banner__actions{ display:flex; gap:0.7rem; flex-wrap:wrap; }

/* -------------------------------- Pages utilitaires ------------------------------- */
.legal-body h2{ font-size: var(--step-2); margin-top: 1.6em; }
.legal-body h3{ font-size: var(--step-1); margin-top:1.3em; }
.legal-body p, .legal-body li{ color: var(--text-muted); }
.legal-body table{ width:100%; border-collapse: collapse; margin: 1.2em 0; font-size: 0.92rem; }
.legal-body th, .legal-body td{ text-align:left; padding: 0.6em 0.8em; border-bottom: 1px solid var(--paper-line); vertical-align: top; }
.legal-body th{ font-family: var(--font-ui); font-size: 0.8rem; }

.error-page{
  min-height: 60vh;
  display:flex;
  align-items:center;
}
.error-page__code{
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 8rem);
  color: var(--navy);
  line-height:1;
  margin-bottom: 0.2em;
}

.thanks-hero{
  text-align:left;
  max-width: 640px;
}
.thanks-icon{
  width: 64px; height:64px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 1.6rem;
}

/* -------------------------------- Utilitaires -------------------------------- */
.mt-0{ margin-top:0; }
.center{ text-align:center; margin-inline:auto; }
.stack{ display:flex; flex-direction:column; gap: 1rem; }
.mb-lg{ margin-bottom: clamp(2rem,3vw,3rem); }