@font-face {
  font-family:Montaine Garamond;
  src:url('assets/garamond.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap
}

@font-face {
  font-family:Montaine Garamond;
  src:url('assets/garamond-italic.ttf') format('truetype');
  font-weight:400;
  font-style:italic;
  font-display:swap
}

@font-face {
  font-family:Montaine Typewriter;
  src:url('assets/typewriter.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap
}

/* Troisième voix de l'identité, absente de cette page jusqu'ici.
   Réservée à l'annotation en marge : la main de Clémence sur le
   document, jamais un titre. */
@font-face {
  font-family:Montaine Script;
  src:url('assets/suite-home.otf') format('opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap
}

:root {
  --cream:#f4f1ea;
  --caramel:#a69279;
  --warm:#8f5828;
  --beige:#dbd3c2;
  --wine:#401f28;
  --brown:#4f383a;
  --muted:#6a5054;
  --line:#401f2833;
  --line-light:#f4f1ea55;
  --serif:Montaine Garamond,Georgia,serif;
  --mono:Montaine Typewriter,'Courier New',monospace;
  --script:Montaine Script,cursive;
  --space-section:clamp(56px,6vw,84px);
  --ease:cubic-bezier(.16,1,.3,1);
  --motion:.65s;
  --gutter:clamp(22px,5vw,80px)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}

body {
  margin:0;
  background:var(--cream);
  color:var(--brown);
  font-family:var(--serif);
  font-size:21px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased
}

::selection {
  background:var(--beige);
  color:var(--wine)
}

::-webkit-scrollbar {
  width:10px
}

::-webkit-scrollbar-track {
  background:var(--cream)
}

::-webkit-scrollbar-thumb {
  background:var(--wine);
  border:2px solid var(--cream)
}

[hidden] {
  display:none!important
}

a {
  color:inherit
}

button,input,textarea {
  font:inherit
}

button,a,input,textarea,summary {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

button:disabled {
  cursor:not-allowed;
  opacity:.55
}

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

figure {
  margin:0
}

h1,h2,h3,p {
  margin:0
}

h1,h2,h3 {
  font-weight:400;
  color:var(--wine);
  line-height:1.04;
  letter-spacing:-.025em;
  text-wrap:balance
}

h1 {
  font-size:clamp(60px,6.6vw,96px)
}

h2 {
  font-size:clamp(40px,4vw,56px)
}

h3 {
  font-size:32px
}

em {
  font-weight:400
}

p+p {
  margin-top:20px
}

svg {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:2px solid currentColor;
  outline-offset:5px
}

.wrap {
  width:calc(100% - var(--gutter)*2);
  max-width:1280px;
  margin-inline:auto
}

.section {
  padding-block:var(--space-section)
}

.eyebrow,.micro {
  font-family:var(--mono);
  font-size:11px;
  line-height:1.7;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--wine)
}

.micro {
  font-size:11px;
  letter-spacing:.025em;
  text-transform:none
}

.light {
  color:var(--cream)
}

.lead {
  font-size:27px;
  line-height:1.35
}

.section-head {
  margin-bottom:48px
}

.section-head h2,.deliverable h2,.boundaries h2,.invitation h2,.contact h2,.faq h2 {
  margin-top:18px
}

.section-intro {
  margin-top:24px;
  max-width:540px
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:18px 23px;
  min-height:54px;
  border:1px solid transparent;
  text-decoration:none;
  font-family:var(--mono);
  font-size:12px;
  line-height:1.5;
  letter-spacing:.025em;
  transition:background .2s,color .2s
}

.button-cream {
  background:var(--cream);
  color:var(--wine)
}

.button-cream:hover {
  background:var(--beige)
}

.button-bordeaux {
  background:var(--wine);
  color:var(--cream)
}

.button-bordeaux:hover {
  background:var(--brown)
}

.text-link,.text-link:visited {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  text-decoration:none;
  padding-block:12px;
  border-bottom:1px solid currentColor;
  font-family:var(--mono);
  font-size:12px;
  line-height:1.6
}

.text-link:hover svg,.header-cta:hover svg {
  transform:translate(2px,-2px)
}

.skip-link {
  position:fixed;
  left:20px;
  top:-100px;
  background:var(--cream);
  color:var(--wine);
  z-index:20;
  padding:12px 20px;
  clip-path:inset(50%);
}

.skip-link:focus {
  top:15px;
  clip-path:none;
}

/* Collant : la page fait plus de 7 000 px et l'en-tête — donc le
   CTA — disparaissait dès le premier écran.
   L'état crème est le défaut : sans JavaScript, l'en-tête reste
   lisible au-dessus de n'importe quelle section. Le script ne
   l'efface qu'en tout début de page, pour que le caramel monte
   jusqu'au bord haut au lieu de commencer par une barre — et le
   rétablit dès le premier pixel de défilement, sans quoi le
   contenu passerait derrière un en-tête sans fond. */
.header {
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  padding:21px var(--gutter);
  background:var(--cream);
  border-bottom:1px solid var(--line);
  /* background-color et non le raccourci background : seul le
     premier est une propriété réellement animable. */
  transition:background-color .3s var(--ease), border-bottom-color .3s var(--ease)
}

.header.is-over-hero {
  background:transparent;
  border-bottom-color:transparent
}

.brand {
  width:156px;
  flex-shrink:0;
  text-decoration:none
}

.brand span {
  display:block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.28em;
  margin-left:3px;
  margin-bottom:3px
}

.brand img {
  width:156px;
  height:auto
}

.header nav {
  display:flex;
  align-items:center;
  gap:35px;
  font-family:var(--mono);
  font-size:11px
}

.header nav a {
  text-decoration:none
}

.header nav a:hover {
  text-decoration:underline;
  text-underline-offset:5px
}

.header-cta {
  display:flex;
  align-items:center;
  gap:20px;
  border-bottom:1px solid var(--wine);
  padding-block:10px
}

.header-cta svg {
  width:17px;
  height:17px;
  transition:transform .2s
}

/* Le DESIGN.md fait venir la profondeur du collage, des cadres
   crème et des feuilles superposées — mais l'aplat ne donnait
   à ces objets aucun espace où se poser. On pose donc une
   lumière : une nappe claire derrière le collage, et un léger
   assombrissement en pied pour asseoir la section sur le crème
   qui suit. Uniquement du crème et du bordeaux de la palette,
   à faible opacité — pas de teinte ajoutée. */
.hero {
  background:
    /* Papier millimétré. Deux niveaux, comme sur le vrai papier :
       un quadrillage fin tous les 8,5px et une ligne plus marquée
       tous les 5 carreaux. Un seul niveau donnait une grille de
       wireframe, pas une matière. */
    repeating-linear-gradient(0deg, rgba(64,31,40,.055) 0 1px, transparent 1px 42.5px),
    repeating-linear-gradient(90deg, rgba(64,31,40,.055) 0 1px, transparent 1px 42.5px),
    repeating-linear-gradient(0deg, rgba(64,31,40,.022) 0 1px, transparent 1px 8.5px),
    repeating-linear-gradient(90deg, rgba(64,31,40,.022) 0 1px, transparent 1px 8.5px),
    radial-gradient(118% 82% at 66% 26%, rgba(244,241,234,.22), rgba(244,241,234,0) 62%),
    /* 3 % maximum : le bordeaux sur caramel est donné à 4,85:1
       dans le DESIGN.md, et au-delà de 5 % l'assombrissement du
       pied fait passer le texte sous le seuil AA de 4,5. */
    linear-gradient(to bottom, rgba(64,31,40,0) 58%, rgba(64,31,40,.03) 100%),
    var(--caramel);
  color:var(--wine);
  overflow:hidden
}

.hero-grid {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:40px;
  align-items:center;
  padding-top:62px;
  padding-bottom:42px
}

/* Sur ordinateur, le hero tient dans un écran : la hauteur
   disponible pilote les marges, le corps du titre et la fiche.
   Mesuré à 1440×900, il dépassait de 102px ; il tombe à 0.

   Le seuil de 860px de haut n'est pas arbitraire : le collage
   occupe 650px de hauteur fixe — ses photos sont positionnées en
   absolu et ses quatre états ont des décalages calés au pixel.
   En dessous, il ne reste pas la place, et le comprimer
   décalerait la composition et ferait passer ses commandes sous
   les 44px de cible tactile. Les écrans plus courts gardent donc
   un hero qui défile, ce qui est préférable à un hero tassé. */
@media (min-width:900px) and (min-height:860px) {
  .hero {
    display:flex;
    align-items:center;
    min-height:calc(100svh - 92px)
  }

  .hero-grid {
    width:100%;
    padding-top:clamp(20px, 3.8vh, 62px);
    padding-bottom:clamp(14px, 1.7vh, 42px)
  }

  .hero h1 { font-size:clamp(52px, min(6.6vw, 8.5vh), 96px) }

  /* .hero prefixé : la règle de base de .situation-answer est
     déclarée plus bas dans le fichier et l'emporterait à
     spécificité égale.

     530px n'est pas un chiffre rond choisi à l'œil : à 470px la
     plus longue des cinq questions prend une ligne de plus et la
     fiche passe de 149 à 179px, ce qui faisait grandir le hero de
     30px au premier clic. À 530px les cinq questions rendent
     exactement 150px — variation nulle — et la colonne en offre
     650. La hauteur est figée dessus pour qu'aucune ne la fasse
     bouger. */
  .hero .situation-answer {
    max-width:530px;
    min-height:150px
  }
}

.hero h1 {
  color:var(--wine);
  margin-top:28px;
  margin-bottom:24px
}

.hero h1 em {
  color:var(--wine)
}

.hero-offer {
  font-size:20px;
  font-style:italic;
  color:var(--wine)
}

.hero-reassurance {
  margin-top:15px;
  font-size:19px;
  font-style:italic;
  max-width:370px
}

.hero-copy .button-cream {
  background:var(--wine);
  color:var(--cream)
}

.hero-copy .button-cream:hover {
  background:var(--brown)
}

.hero-description {
  max-width:455px;
  font-size:21px;
  line-height:1.45
}


.hero-copy .button {
  margin-top:30px
}

.hero-art {
  position:relative;
  height:650px;
  isolation:isolate
}

.hero-main-photo,.hero-detail-photo,.hero-context-photo {
  position:absolute;
  transition:transform .75s var(--ease);
  transform-origin:50% 70%
}

.hero-main-photo {
  left:22%;
  top:15px;
  width:66%;
  height:420px;
  border:9px solid var(--cream);
  box-shadow:0 14px 35px #401f281a;
  transform:rotate(5deg);
  z-index:2
}

.hero-main-photo>img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 28%
}

.hero-main-photo figcaption {
  position:absolute;
  left:-55px;
  bottom:25px;
  background:var(--cream);
  padding:17px 22px;
  width:270px;
  transform:rotate(-5deg);
  box-shadow:0 8px 28px #2213191f;
  color:var(--wine)
}

.photo-caption {
  display:block;
  font-size:22px;
  line-height:1.2
}

.photo-intro {
  display:block;
  font-size:18px;
  font-style:italic;
  line-height:1.3;
  margin-top:5px
}

.hero-context-photo {
  left:0;
  top:48px;
  width:44%;
  height:310px;
  border:7px solid var(--cream);
  transform:rotate(-12deg);
  box-shadow:0 12px 25px #401f281a;
  z-index:1
}

.hero-context-photo img {
  width:100%;
  height:100%;
  object-fit:cover
}

.hero-detail-photo {
  width:36%;
  right:-3%;
  bottom:170px;
  transform:rotate(-8deg);
  z-index:3
}

.hero-detail-photo img {
  width:100%;
  height:190px;
  border:7px solid var(--cream);
  object-fit:cover;
  box-shadow:0 10px 24px #401f281a
}

.hero-detail-photo figcaption {
  background:var(--cream);
  padding:8px 10px;
  font-size:19px;
  font-style:italic;
  line-height:1.2
}

.collage-controls {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  z-index:4
}

.situation-prompt {
  font-size:23px;
  font-style:italic;
  line-height:1.3
}

.situation-choices {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 22px;
  margin-top:12px
}

.situation-choices button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:44px;
  padding:9px 0;
  background:url('assets/mark.svg') no-repeat 0 100%/100% 6px;
  color:var(--wine);
  border:0;
  font-size:21px;
  /* 21px est la taille de corps du DESIGN.md : l'interligne suit
     le corps et non le titrage, car ces libellés passent sur deux
     lignes sous 480px. */
  line-height:1.4;
  text-align:left
}

.situation-choices svg {
  width:18px;
  height:18px;
  transition:transform .2s
}

.situation-choices button:hover svg {
  transform:translateX(4px)
}

/* Sélection : le trait est repassé une seconde fois, comme on
   appuie sur un mot qu'on veut retenir. */
.situation-choices button[aria-pressed="true"] {
  background-size:100% 11px
}

/* Le bouton appartient au collage : c'est une étiquette de papier
   posée sur la table, pas un rectangle d'interface. Mêmes rotation
   et ombre que les légendes des photos — l'angle est moins marqué
   (-2° contre -5°) parce qu'il reste une cible à cliquer. */
.collage-cycle {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:fit-content;
  margin:18px auto 0;
  padding:10px 18px;
  min-height:44px;
  border:0;
  background:var(--cream);
  color:var(--wine);
  font-size:18px;
  font-style:italic;
  position:relative;
  /* Coin corné : le coin bas-droit est découpé dans la feuille,
     et le rabat replié le remplit dans un ton plus sombre. */
  background-image:linear-gradient(315deg, transparent 0 15px, var(--cream) 15px);
  background-color:transparent;
  transform:rotate(-2deg);
  filter:drop-shadow(0 8px 28px #2213191f);
  transition:transform .25s var(--ease)
}

.collage-cycle::after {
  content:'';
  position:absolute;
  right:0;
  bottom:0;
  width:15px;
  height:15px;
  background:var(--beige);
  clip-path:polygon(100% 0, 0 100%, 100% 100%);
  pointer-events:none
}

/* Au survol on redresse l'étiquette, comme si on la reprenait. */
.collage-cycle:hover,
.collage-cycle:focus-visible {
  transform:rotate(0deg)
}

.collage-cycle svg {
  width:18px;
  height:18px;
  transition:transform .4s var(--ease)
}

.collage-cycle:hover svg {
  transform:rotate(45deg)
}

/* La fiche est une page de carnet, pas un cartouche : réglure
   calée sur l'interligne de la question (24px × 1,25 = 30px) et
   ancrée sur la boîte de contenu, pour que le texte s'écrive sur
   les lignes. Marge verticale à gauche, comme sur un cahier. */
.situation-answer {
  /* Pas de valeur en dur : le pas de réglure est déclaré ici et
     repris par la question, pour que les deux ne puissent pas
     diverger quand la taille change au point de rupture. */
  --rule-step:30px;
  margin-top:22px;
  max-width:470px;
  min-height:140px;
  padding:18px 22px 18px 34px;
  background-color:var(--cream);
  background-image:
    linear-gradient(90deg, transparent 0 11px, rgba(166,146,121,.55) 11px 12px, transparent 12px),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--rule-step) - 1px), rgba(64,31,40,.09) calc(var(--rule-step) - 1px) var(--rule-step));
  background-origin:border-box, content-box;
  background-repeat:no-repeat, repeat;
  /* Bord bas déchiré : une bande dessinée à la main, répétée
     horizontalement, plutôt qu'un dégradé en dents de scie qui
     se repère immédiatement. La bande fait tuile — ses deux
     extrémités sont à la même hauteur.
     drop-shadow et non box-shadow : seule la première suit la
     forme masquée, la seconde tracerait une ombre droite sous
     une déchirure. */
  mask-image:linear-gradient(#000 0 0), url('assets/torn.svg');
  mask-size:100% calc(100% - 13px), 120px 14px;
  mask-position:0 0, 0 100%;
  mask-repeat:no-repeat, repeat-x;
  -webkit-mask-image:linear-gradient(#000 0 0), url('assets/torn.svg');
  -webkit-mask-size:100% calc(100% - 13px), 120px 14px;
  -webkit-mask-position:0 0, 0 100%;
  -webkit-mask-repeat:no-repeat, repeat-x;
  padding-bottom:26px;
  filter:drop-shadow(0 8px 22px #401f2814);
  transform:rotate(-1deg)
}

.situation-note {
  margin:0 0 10px;
  font-size:18px;
  font-style:italic
}

.situation-answer #situation-question {
  margin:0;
  font-size:24px;
  line-height:var(--rule-step)
}

.hero h1 em {
  display:inline-block;
  position:relative;
  padding-bottom:12px
}

.hero-underline {
  position:absolute;
  left:0;
  bottom:-4px;
  width:100%;
  height:24px;
  stroke:var(--wine);
  stroke-width:1.8;
  opacity:.65
}

/* ══ Le document annoté ══════════════════════════════════════
   Trois dispositifs qui racontent la même chose : une page
   travaillée à la main.
     .annotation  → la main de Clémence, en marge
     .mark        → la marque au crayon sur ce qui compte
     .eyebrow     → l'appareil tapé à la machine, entre crochets
   ═══════════════════════════════════════════════════════════ */

/* 1. Annotation manuscrite. Toujours en marge, jamais dans le
   fil de lecture : c'est une note ajoutée après coup. */
.annotation {
  display:block;
  font-family:var(--script);
  font-size:clamp(20px,1.9vw,27px);
  line-height:1.35;
  /* Encre secondaire et non caramel : le caramel sur crème tombe
     à 2,66:1, sous le seuil AA. L'encre secondaire du DESIGN.md
     donne 6,45:1 et son rôle — « aides » — est exactement celui
     d'une annotation. */
  color:var(--muted);
  transform:rotate(-1.6deg);
  transform-origin:left center
}

.annotation--wine { color:var(--wine) }
/* Crème et non beige : le DESIGN.md interdit le beige pour du
   petit texte sur brun chaud (3,93:1 mesuré). Crème donne 5,18:1. */
.annotation--light { color:var(--cream) }

/* Décrochée du fil de lecture : marge à gauche sur les blocs
   alignés à gauche, centrée sous un titre centré. */
.recognition-copy .annotation { margin-top:26px; margin-left:-12px }
.fit-grid .annotation { margin-top:30px; max-width:22ch }
.closing .annotation { margin:22px auto 0; transform:rotate(-1deg) }

/* 2. La marque au crayon. Le trait du hero existait déjà mais ne
   servait qu'une fois ; il devient un dispositif réutilisable. */
/* Le trait est un fond d'élément inline, pas un SVG positionné :
   quand la phrase passe sur deux lignes — ce qui arrive en
   dessous de 480px — chaque ligne reçoit son propre trait.
   « box-decoration-break: clone » est ce qui le garantit. */
.mark {
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  /* Fichier et non data: URI — la CSP du projet impose
     « img-src 'self' », qui bloque les images en data:. */
  background-image:url('assets/mark.svg');
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:100% .2em;
  padding-bottom:.16em
}

/* 3. Appareil éditorial entre crochets, repris de la référence
   leasarnowski.fr que la cliente a donnée. Les crochets sont
   décoratifs : ils ne doivent pas être lus à voix haute. */
.eyebrow::before,
.eyebrow::after,
.eyebrow-bracket::before,
.eyebrow-bracket::after {
  opacity:.45
}

.eyebrow::before,
.eyebrow-bracket::before { content:'[\00a0' }

.eyebrow::after,
.eyebrow-bracket::after { content:'\00a0]' }

/* Le pied de la maquette Notion et le copyright ne sont pas des
   libellés de section : pas de crochets. */
.preview-caption::before,
.preview-caption::after,
.footer .eyebrow::before,
.footer .eyebrow::after { content:none }

.hero-art[data-active="offres"] .hero-main-photo {
  transform:translate(18px,-20px) rotate(10deg)
}

.hero-art[data-active="offres"] .hero-context-photo {
  transform:translate(-12px,25px) rotate(-18deg)
}

.hero-art[data-active="offres"] .hero-detail-photo {
  transform:translate(-25px,-35px) rotate(-3deg)
}

.hero-art[data-active="image"] .hero-main-photo {
  transform:translate(-20px,12px) rotate(-3deg)
}

.hero-art[data-active="image"] .hero-context-photo {
  transform:translate(20px,-22px) rotate(3deg)
}

.hero-art[data-active="image"] .hero-detail-photo {
  transform:translate(8px,-45px) rotate(10deg)
}

.hero-art[data-active="direction"] .hero-main-photo {
  transform:translate(20px,10px) rotate(0deg)
}

.hero-art[data-active="direction"] .hero-context-photo {
  transform:translate(-8px,-30px) rotate(-5deg)
}

.hero-art[data-active="direction"] .hero-detail-photo {
  transform:translate(-45px,-25px) rotate(-14deg)
}

.hero-art[data-active="inconnu"] .hero-main-photo {
  transform:translate(-10px,-15px) rotate(8deg)
}

.hero-art[data-active="inconnu"] .hero-context-photo {
  transform:translate(5px,35px) rotate(-18deg)
}

.hero-art[data-active="inconnu"] .hero-detail-photo {
  transform:translate(-10px,5px) rotate(3deg)
}

.recognition-grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:70px;
  align-items:center
}

.recognition-photo img {
  width:100%;
  height:400px;
  object-fit:cover;
  object-position:center 48%
}

.recognition-copy { max-width:650px }
.recognition-copy .lead { margin-top:22px; font-size:24px }
.recognition-list { list-style:none; padding:0; margin:22px 0 }
.recognition-list li { padding:11px 0; border-bottom:1px solid var(--line); font-size:22px; line-height:1.3 }
.recognition-close { font-size:21px; line-height:1.35; max-width:500px }

.method {
  background:var(--warm);
  color:var(--cream)
}

.method-grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:70px;
  align-items:start
}

.method h2,.method h3,.method-number { color:var(--cream) }
.method-intro { max-width:410px }
.method .section-intro { font-size:23px; line-height:1.4 }
.method-steps { list-style:none; padding:0; margin:0 }
.method-steps li { display:grid; grid-template-columns:44px 1fr; gap:20px; padding:25px 0; border-top:1px solid var(--line-light) }
.method-steps li:first-child { padding-top:0; border-top:0 }
.method-number { font-size:38px; line-height:1; font-variant-numeric:tabular-nums }
.method-steps h3 { font-size:32px; line-height:1.1 }
.method-duration { font-family:var(--mono); font-size:11px; line-height:1.5; margin-top:12px; letter-spacing:.02em }
.method-steps p:not(.method-duration) { font-size:21px; line-height:1.4; margin-top:12px; max-width:500px }
.method-steps li.is-current .method-number { font-style:italic }

.deliverable-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center
}

.deliverable-visual {
  position:relative;
  min-height:500px
}

.deliverable-visual>img {
  height:500px;
  width:100%;
  object-fit:cover
}

.diagnostic-preview {
  position:absolute;
  left:9%;
  right:9%;
  top:16%;
  padding:25px 30px;
  background:var(--cream);
  transform:rotate(-3deg);
  box-shadow:0 10px 30px #401f2818
}

.diagnostic-preview h3 {
  font-size:40px;
  margin-top:16px
}

.preview-rule {
  height:1px;
  background:var(--line);
  margin:24px 0 18px
}

.diagnostic-preview ol {
  padding:0;
  list-style:none;
  counter-reset:preview;
  line-height:1.3;
  font-size:19px;
  margin:14px 0 20px
}

.diagnostic-preview li {
  counter-increment:preview;
  padding:7px 0;
  border-bottom:1px solid var(--line)
}

.diagnostic-preview li:before {
  content:'0' counter(preview);
  font:9px var(--mono);
  padding-right:12px
}

.preview-caption {
  font-size:11px;
  letter-spacing:0
}

.deliverable-copy>.lead {
  margin-top:28px
}

.deliverable-topics {
  margin:28px 0
}

details {
  border-bottom:1px solid var(--line)
}

details:first-child {
  border-top:1px solid var(--line)
}

summary {
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:20px 0;
  font-size:24px;
  line-height:1.2;
  color:var(--wine);
  cursor:pointer
}

summary::-webkit-details-marker {
  display:none
}

summary svg {
  width:19px;
  height:19px;
  transition:transform .2s
}

details[open] summary svg {
  transform:rotate(45deg)
}

details p {
  padding:0 30px 22px 0;
  font-size:21px;
  line-height:1.4
}

details summary:hover {
  text-decoration:underline;
  text-underline-offset:5px
}

.deliverable-copy .text-link {
  margin-top:23px
}

.boundaries {
  background:var(--beige);
  padding-block:50px
}

.boundaries-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px }
.boundaries h2 { font-size:36px; margin-top:0 }
.boundaries-grid>div>p { margin-top:18px; max-width:380px; font-size:21px; line-height:1.4 }
.boundaries-list { display:grid; grid-template-columns:1fr 1fr; gap:22px 30px; margin:0 }
.boundaries-list>div { padding:0 }
.boundaries-list dt { font-size:24px; line-height:1.2; color:var(--wine) }
.boundaries-list dd { margin:8px 0 0; font-size:19px; line-height:1.35 }

/* ── Phrase-pivot ───────────────────────────────────────────
   Une respiration entre la reconnaissance et le déroulé.
   Reste sur le crème (rôle « lecture » du DESIGN.md) : la
   césure vient de l'échelle et du blanc, pas d'une bande de
   couleur supplémentaire, pour ne pas rompre le rythme. */
.pivot {
  background:var(--cream);
  padding-block:clamp(48px,7vw,96px)
}

.pivot-inner { max-width:940px; border-top:1px solid var(--line); padding-top:clamp(32px,4vw,52px) }

.pivot p {
  margin:0;
  font-family:var(--serif);
  font-size:clamp(27px,3.3vw,44px);
  line-height:1.3;
  letter-spacing:-.02em;
  color:var(--wine)
}

.pivot p em { font-style:italic; color:var(--brown) }

/* ── Pour qui ───────────────────────────────────────────────
   Crème et non beige : collée aux limites de l'offre, qui sont
   beiges, la section se fondait dans la précédente et l'ensemble
   se lisait comme un seul bloc. Le crème sépare et rétablit
   l'alternance beige → crème → bordeaux.
   Structure reprise du déroulé : filets entre les entrées,
   mesure contrainte pour que les citations ne courent pas
   sur toute la largeur. */
.fit {
  background:var(--cream)
}

.fit-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:start }
.fit h2 { font-size:36px; margin-top:0 }
.fit h2 em { font-style:italic; color:var(--brown) }
.fit-list { margin:0 }
/* Une seule mesure sur l'entrée : citation et explication
   partagent le même bord droit, au lieu de deux largeurs
   différentes qui donnaient un drapeau irrégulier. */
.fit-list>div { padding:24px 0; border-top:1px solid var(--line); max-width:570px }
.fit-list>div:first-child { padding-top:0; border-top:0 }
.fit-list dt { font-size:22px; line-height:1.35; color:var(--wine); font-style:italic }
.fit-list dd { margin:9px 0 0; font-size:19px; line-height:1.45; color:var(--brown) }

.invitation {
  background:var(--wine);
  color:var(--cream)
}

.invitation-grid { display:grid; grid-template-columns:1.25fr .65fr; gap:100px; align-items:center }
.invitation h2 { color:var(--cream); margin-top:0 }
.invitation h2 em { color:var(--beige) }
.invitation .lead { margin-top:25px; max-width:580px; font-size:24px }
.invitation-grid>div>p { max-width:600px }
.invitation-signature { font-size:27px; font-style:italic }
.approach-proof {
  max-width:340px;
  margin-inline:auto;
  padding:28px;
  background:var(--cream);
  color:var(--wine);
  transform:rotate(-2deg)
}

.approach-proof blockquote { margin:0 }
.approach-proof blockquote p { font-size:29px; line-height:1.25; font-style:italic }
.approach-proof figcaption { margin-top:24px; padding-top:18px; border-top:1px solid var(--line) }
.proof-author { display:block; font-size:20px; line-height:1.3 }
.proof-context { display:block; margin-top:9px; font-size:17px; line-height:1.35; color:var(--muted) }

.contact {
  background:var(--beige)
}

.contact-grid {
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:100px;
  align-items:start
}

.offer h2 {
  font-size:54px
}

.offer-price {
  font-size:80px;
  line-height:1;
  margin-top:27px;
  font-variant-numeric:tabular-nums;
  color:var(--wine)
}

.offer-price span {
  font-size:40px
}

.offer ul {
  list-style:none;
  padding:0;
  margin:30px 0;
  font-size:22px;
  line-height:1.3
}

.offer li {
  padding:12px 0;
  border-bottom:1px solid var(--line)
}

.offer-note {
  font-size:20px;
  line-height:1.4
}


.form-panel h2 {
  font-size:54px
}

#diagnostic-form {
  margin-top:30px
}

.form-intro {
  max-width:580px;
  margin-top:22px;
  font-size:21px;
  line-height:1.4
}

.preview-notice {
  font-family:var(--mono);
  font-size:11px;
  line-height:1.65;
  padding:14px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-top:20px!important;
  color:var(--wine)
}






.field-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px
}

.field {
  margin:0 0 22px
}

.field label {
  display:block;
  font-size:21px;
  line-height:1.3;
  color:var(--wine);
  margin-bottom:9px
}


input:not([type=checkbox]):not([type=radio]):not([type=hidden]),textarea {
  border:1px solid var(--muted);
  background:var(--cream);
  border-radius:0;
  width:100%;
  padding:12px 13px;
  color:var(--wine);
  font-size:21px;
  line-height:1.4;
  min-height:49px;
  caret-color:var(--wine)
}

textarea {
  resize:vertical;
  display:block
}

input::placeholder,textarea::placeholder {
  color:var(--muted)
}

input[aria-invalid=true],textarea[aria-invalid=true] {
  border:2px solid var(--wine)
}

.field-help {
  font-size:17px;
  line-height:1.3;
  margin-top:8px;
  color:var(--muted)
}





.consent {
  display:flex;
  align-items:flex-start;
  gap:11px;
  font-size:19px;
  line-height:1.3;
  cursor:pointer
}



input[type=checkbox] {
  accent-color:var(--wine);
  width:18px;
  height:18px;
  flex-shrink:0;
  margin:3px 0 0;
  cursor:pointer
}

.consent {
  margin:25px 0;
  min-height:44px
}

.form-privacy {
  font-size:17px;
  line-height:1.4;
  margin-top:20px!important
}

.form-privacy a {
  text-underline-offset:3px
}

.form-actions {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  padding-top:10px
}

.text-link {
  background:none;
  border:0;
  border-bottom:1px solid currentColor;
  padding:10px 0;
  font-family:var(--mono);
  font-size:12px;
  color:var(--wine);
  min-height:44px
}

.form-actions>#form-submit {
  margin-left:auto
}

.form-status {
  font-family:var(--mono);
  font-size:12px;
  line-height:1.6;
  border:1px solid var(--wine);
  padding:15px;
  margin-block:20px
}

.form-success {
  padding:40px 0;
  min-height:340px
}

.form-success h3 {
  font-size:55px;
  margin-top:18px
}

.form-success p:last-child {
  margin-top:24px;
  max-width:500px
}

.captcha-row {
  display:flex;
  gap:20px;
  align-items:center
}

.captcha-row input {
  max-width:130px
}

.honeypot {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%)
}

.faq-grid {
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:100px
}

.faq summary {
  font-size:25px;
  padding:23px 0
}

.closing {
  background:var(--warm);
  color:var(--cream);
  padding:55px 0;
  text-align:center
}

.closing h2 {
  font-size:clamp(40px,4.5vw,60px);
  color:var(--cream);
  margin:24px 0 30px
}

.closing em {
  color:var(--cream)
}

.footer {
  display:grid;
  grid-template-columns:1fr 1.2fr 1.5fr;
  gap:30px;
  align-items:start;
  padding-block:45px
}

.footer p {
  font-size:19px;
  line-height:1.3
}

.footer>div {
  display:flex;
  flex-direction:column;
  gap:10px;
  font-family:var(--mono);
  font-size:11px;
  line-height:1.5
}

.footer>div a {
  text-decoration:none
}

.footer>div a:hover {
  text-decoration:underline
}

.footer>.eyebrow {
  grid-column:1/-1;
  font-size:11px
}

@media(min-width:1600px) {
  .hero-grid {
    gap:65px
  }

}

@media(max-width:1100px) {
  .hero-grid {
    gap:25px
  }

  .hero-description {
    font-size:20px
  }

  .method-grid,.deliverable-grid,.boundaries-grid,.fit-grid {
    gap:50px
  }

  .contact-grid,.faq-grid {
    gap:60px
  }

  .invitation-grid {
    gap:60px
  }




}

@media(max-width:800px) {
  .header nav {
    gap:20px
  }

  .header nav>a:not(.header-cta) {
    display:none
  }

  .hero-grid {
    grid-template-columns:1fr;
    gap:35px;
    padding-top:42px;
    padding-bottom:24px
  }

  .hero-copy {
    max-width:600px
  }

  .hero h1 {
    font-size:clamp(58px,10vw,78px)
  }

  .hero-description,
  .recognition .section-head,.recognition-grid,.method-grid,.deliverable-grid,.boundaries-grid,.fit-grid,.invitation-grid,.contact-grid,.faq-grid {
    grid-template-columns:1fr;
    gap:38px
  }

  
  
  .recognition-photo {
    max-width:480px
  }

  .recognition-photo img {
    height:400px
  }

  .method-steps li {
    padding-block:28px
  }

  /* Dès que la grille passe sur une colonne, la feuille devient plus
     haute que la photo sur laquelle elle est posée : en absolu elle
     débordait de 84 px et recouvrait le titre de la section. Elle
     repasse donc dans le flux, et c'est une marge négative qui garde
     le chevauchement — le bloc grandit avec elle, quelle que soit la
     longueur du sommaire. */
  .deliverable-visual {
    max-width:500px;
    min-height:0
  }

  .deliverable-visual>img {
    height:300px
  }

  .diagnostic-preview {
    position:static;
    margin:-64px 18px 0;
    transform:rotate(-1.5deg)
  }

  .contact-grid {
    gap:50px
  }

  .offer {
    display:grid;
    grid-template-columns:1fr 130px;
    gap:0 30px
  }

  .offer>.eyebrow,.offer h2,.offer ul,.offer-note {
    grid-column:1
  }

  .offer-price {
    grid-column:2;
    grid-row:2;
    margin-top:15px;
    font-size:60px
  }

  .offer h2 {
    font-size:48px
  }

  .offer-price span {
    font-size:30px
  }

  .offer ul {
    margin-block:20px
  }

  .offer-note {
    font-size:19px
  }


  .footer {
    grid-template-columns:1fr 1fr;
    gap:25px
  }

  .footer>div {
    grid-column:1/-1
  }

  .closing {
    padding-block:65px
  }

}

@media(max-width:480px) {
  body {
    font-size:20px;
    line-height:1.45
  }

  h2 {
    font-size:43px
  }

  .header {
    padding-block:18px;
    gap:15px
  }

  .brand {
    width:120px
  }

  .brand img {
    width:120px
  }

  .header-cta {
    font-size:11px;
    gap:10px
  }

  .header-cta svg {
    width:16px;
    height:16px
  }

  .hero h1 {
    font-size:clamp(47px,11.6vw,61px);
    letter-spacing:-.02em;
    margin-top:25px
  }

  .hero-copy .eyebrow {
    font-size:11px;
    gap:12px
  }

  .hero-description {
    font-size:21px
  }

  
  .hero-grid {
    gap:28px
  }

.photo-intro {
  display:block;
  font-size:18px;
  margin-top:5px;
  font-style:italic;
  line-height:1.3
}

/* L'invitation est la voix de Clemence, pas un libelle d'interface :
   elle passe a la main. Corps monte de 26 a 31px, le script lisant
   plus petit a taille egale. */
.situation-prompt {
  font-family:var(--script);
  font-size:31px;
  font-style:normal;
  line-height:1.25
}

.situation-note {
  font-family:var(--script);
  font-size:26px;
  font-style:normal;
  line-height:1.25;
  color:var(--muted);
  margin:0
}

  .eyebrow {
    font-size:11px
  }

  .lead {
    font-size:25px
  }

  .section-head {
    margin-bottom:34px
  }

  .recognition-photo img {
    height:370px
  }

  .recognition-list li {
    font-size:22px
  }

  .recognition-close {
    font-size:23px
  }

  .method-steps li {
    grid-template-columns:40px 1fr;
    gap:14px
  }

  .deliverable-grid {
    gap:38px
  }

  .deliverable-visual>img {
    height:250px
  }

  .diagnostic-preview {
    margin:-54px 10px 0;
    padding:21px 23px
  }

  .diagnostic-preview h3 {
    font-size:31px
  }

  .diagnostic-preview ol {
    font-size:17px
  }

  .diagnostic-preview .eyebrow {
    font-size:11px
  }

  .preview-caption {
    font-size:11px!important
  }

  .boundaries-list dt {
    font-size:25px
  }

  
  .offer {
    grid-template-columns:1fr;
    gap:0
  }

  .offer>.eyebrow,.offer h2,.offer ul,.offer-note,.offer-price {
    grid-column:auto;
    grid-row:auto
  }

  .offer-price {
    margin-top:20px;
    font-size:68px
  }

  .form-panel h2 {
    font-size:44px
  }




  .field-row {
    grid-template-columns:1fr;
    gap:0
  }

  .field label {
    font-size:20px
  }


  .form-intro {
    font-size:20px
  }

  .form-actions {
    gap:14px
  }

  .form-actions .button {
    padding-inline:16px;
    font-size:11px;
    gap:14px
  }

  .faq summary {
    font-size:23px
  }

  .closing h2 {
    font-size:44px
  }

  .footer {
    grid-template-columns:1fr
  }

  .footer>div,.footer>.eyebrow {
    grid-column:auto
  }

  .footer p {
    font-size:19px
  }

}

@media(max-width:1100px) {
  .hero-main-photo { height:390px }
  .hero-main-photo figcaption { left:-35px; width:240px; padding:15px }
  .hero-detail-photo img { height:170px }
}

@media(max-width:800px) {
  .hero-grid { gap:35px; padding-bottom:48px }
  .hero-art { height:650px; max-width:520px; width:100%; margin-inline:auto }
  .hero-main-photo { height:420px }
  .hero-copy { max-width:600px }
  .situation-answer { max-width:540px; min-height:0 }
}

@media(max-width:480px) {
  .hero-art { height:610px }
  .hero-main-photo { left:21%; top:20px; width:70%; height:340px; border-width:6px }
  .hero-main-photo figcaption { left:-60px; bottom:20px; width:190px; padding:12px }
  .photo-caption { font-size:19px }
  .photo-intro { font-size:16px }
  .hero-context-photo { top:55px; height:240px; border-width:5px }
  .hero-detail-photo { bottom:220px; width:30%; right:0 }
  .hero-detail-photo img { height:140px; border-width:5px }
  .hero-detail-photo figcaption { font-size:17px }
  .situation-prompt { font-size:22px }
  .situation-choices { gap:8px 18px }
  .situation-choices button { font-size:20px }
  .situation-answer { padding:16px 18px 24px 30px }
  .situation-answer { --rule-step:29px }
  .situation-answer #situation-question { font-size:23px }
}

@media(max-width:800px) {
  .method-grid { gap:35px }
  .boundaries-list { gap:24px 28px }
  .invitation-grid { grid-template-columns:1.1fr .9fr; gap:35px }
  }

@media(max-width:480px) {
  .recognition-photo img { height:280px }
  .recognition-copy .lead { font-size:23px }
  .method-steps li { grid-template-columns:35px 1fr; gap:12px }
  .method-steps h3 { font-size:28px }
  .method-steps p:not(.method-duration) { font-size:20px }
  .method-number { font-size:32px }
  .boundaries h2 { font-size:33px }
  .boundaries-list { grid-template-columns:1fr; gap:18px }
  .boundaries-list dt { font-size:23px }
  .invitation-grid { grid-template-columns:1fr; gap:30px }
        .invitation .lead { font-size:23px }
  .approach-proof { padding:24px; max-width:100% }
  .approach-proof blockquote p { font-size:27px }
  .closing { padding-block:50px }
  .closing h2 { font-size:40px }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }

}

/* Mention fiscale : qualificatif du prix, pas une seconde valeur.
   Clémence a confirmé le 23/09/2026 que ses tarifs sont TTC. */
.offer-price .offer-tax {
  /* Spécificité : .offer-price span met tous les spans à 40px. */
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.09em;
  color:var(--muted);
  margin-left:10px;
  vertical-align:middle
}