/* =========================================================
   20h42 — feuille de style unique
   1. Tokens         5. Méthode          9.  Contact
   2. Réinitialisation 6. Manifeste      10. Questions
   3. Utilitaires    7. Prestations      11. Pied de page
   4. En-tête / Hero 8. Réalisations     12. Charte + pages simples

   Règle du projet : aucune couleur, taille ou espacement en dur
   ailleurs que dans le bloc « Tokens ».
   ========================================================= */

/* ---------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------- */

:root {
  /* Couleurs — kaki, encre, vert vif */
  --c-argile:     #F3F4EF;  /* fond général — gris chaud très pâle */
  --c-blanc:      #FFFFFF;  /* surfaces posées                     */
  --c-encre:      #1E201C;  /* gris très sombre — texte et fonds   */
  --c-fumee:      #5F6459;  /* texte secondaire                    */
  --c-trait:      #E0E2D9;  /* filets, bordures, séparateurs       */
  --c-voile:      #E4E9DE;  /* aplats de mise en avant             */
  --c-kaki:       #45543F;  /* couleur de marque : liens, boutons  */
  --c-kaki-clair: #A8B79E;  /* kaki sur fond sombre                */
  --c-vif:        #55951A;  /* ponctuation sur fond clair            */
  --c-vif-clair:  #9CE93F;  /* ponctuation sur fond sombre           */

  --c-encre-80:  rgba(30, 32, 28, 0.80);
  --c-encre-12:  rgba(30, 32, 28, 0.12);
  --c-vif-14:    rgba(85, 149, 26, 0.14);
  --c-clair-72:  rgba(243, 244, 239, 0.72);
  --c-clair-58:  rgba(243, 244, 239, 0.58);
  --c-clair-18:  rgba(243, 244, 239, 0.18);

  /* Typographie */
  --f-titre:  "Archivo", "Helvetica Neue", sans-serif;
  --f-texte:  "Manrope", system-ui, -apple-system, sans-serif;
  --f-heure:  "DM Mono", ui-monospace, "SFMono-Regular", monospace;

  --fs-mega: clamp(2.6rem, 6.8vw, 5.6rem);
  --fs-xxl:  clamp(2rem, 4.4vw, 3.3rem);
  --fs-xl:   clamp(1.55rem, 2.9vw, 2.1rem);
  --fs-l:    clamp(1.12rem, 1.6vw, 1.35rem);
  --fs-m:    1.0625rem;
  --fs-s:    0.9375rem;
  --fs-xs:   0.75rem;

  --lh-serre: 1.03;
  --lh-titre: 1.13;
  --lh-texte: 1.62;

  /* Rythme (base 4 px) */
  --e-1:  0.25rem;
  --e-2:  0.5rem;
  --e-3:  0.75rem;
  --e-4:  1rem;
  --e-6:  1.5rem;
  --e-8:  2rem;
  --e-12: 3rem;
  --e-16: 4rem;
  --e-24: 6rem;
  --e-section: clamp(4.5rem, 10vw, 8.5rem);

  /* Cadre */
  --l-page: 74rem;
  --l-gouttiere: clamp(1.25rem, 5vw, 3.5rem);
  --r-court: 3px;
  --r-carte: 10px;
  --transition: 220ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* ---------------------------------------------------------
   2. RÉINITIALISATION
   --------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  background: var(--c-argile);
  color: var(--c-encre);
  font-family: var(--f-texte);
  font-size: var(--fs-m);
  line-height: var(--lh-texte);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video, iframe { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--f-titre);
  font-weight: 600;
  font-variation-settings: "wdth" 92;
  line-height: var(--lh-titre);
  letter-spacing: -0.024em;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-mega);
  line-height: var(--lh-serre);
  letter-spacing: -0.036em;
}

h2 { font-size: var(--fs-xxl); letter-spacing: -0.03em; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-l); }

p { text-wrap: pretty; }

::selection { background: var(--c-kaki); color: var(--c-blanc); }

:focus-visible {
  outline: 2px solid var(--c-kaki);
  outline-offset: 3px;
  border-radius: var(--r-court);
}

/* ---------------------------------------------------------
   3. UTILITAIRES
   --------------------------------------------------------- */

.cadre {
  width: 100%;
  max-width: var(--l-page);
  margin-inline: auto;
  padding-inline: var(--l-gouttiere);
}

/* Horodatage : le repère structurel de la marque */
.heure {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--f-heure);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-fumee);
}

.heure::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--c-vif);
  flex: none;
}

.mesure {
  font-family: var(--f-heure);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--c-fumee);
}

.chapo {
  font-size: var(--fs-l);
  line-height: 1.5;
  color: var(--c-encre-80);
  max-width: 48ch;
}

/* Boutons */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0.85rem 1.4rem;
  border: 1px solid var(--c-kaki);
  border-radius: var(--r-court);
  background: var(--c-kaki);
  color: var(--c-blanc);
  font-family: var(--f-texte);
  font-size: var(--fs-s);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), transform var(--transition);
}

.bouton:hover { background: var(--c-encre); border-color: var(--c-encre); }
.bouton:active { transform: translateY(1px); }

.bouton--vide {
  background: transparent;
  color: var(--c-encre);
  border-color: var(--c-encre-12);
}

.bouton--vide:hover {
  background: transparent;
  color: var(--c-kaki);
  border-color: var(--c-kaki);
}


.lien {
  text-decoration: none;
  background-image: linear-gradient(var(--c-kaki), var(--c-kaki));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--transition), color var(--transition);
}

.lien:hover { background-size: 100% 1px; color: var(--c-kaki); }

.saut {
  position: absolute;
  left: -9999px;
  top: var(--e-2);
  z-index: 100;
  background: var(--c-encre);
  color: var(--c-argile);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-court);
}

.saut:focus { left: var(--e-4); }

.revele {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.revele.visible { opacity: 1; transform: none; }

/* ---------------------------------------------------------
   4. EN-TÊTE ET HERO
   --------------------------------------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(243, 244, 239, 0.86);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--c-trait);
}

.entete__cadre {
  display: flex;
  align-items: center;
  gap: var(--e-6);
  min-height: 4.5rem;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  text-decoration: none;
  color: var(--c-encre);
  margin-right: auto;
}

.marque__signe { width: 30px; height: 30px; flex: none; }

/* Logotype : le « h » est le pivot, il porte l'accent */
.logotype {
  font-family: var(--f-titre);
  font-size: 1.4rem;
  font-weight: 700;
  font-variation-settings: "wdth" 112;
  letter-spacing: -0.02em;
}

.logotype b { font-weight: 400; color: var(--c-kaki); }

.nav { display: flex; gap: var(--e-6); }

.nav__lien {
  font-size: var(--fs-s);
  font-weight: 600;
  color: var(--c-fumee);
  text-decoration: none;
  padding-block: var(--e-2);
  transition: color var(--transition);
}

.nav__lien:hover { color: var(--c-encre); }

@media (max-width: 64rem) { .nav { display: none; } }
@media (max-width: 30rem) { .entete__action { display: none; } }

.hero {
  padding-top: clamp(3rem, 7vw, 5.5rem);
  padding-bottom: var(--e-12);
}

.hero__titre { margin-top: var(--e-6); max-width: 15ch; }
.hero__sourdine { color: var(--c-fumee); }
.hero__chapo { margin-top: var(--e-8); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-8);
}

/* --- Élément signature : les chemins étudiés -----------------
   Trois trajets partent du même point. L'un bute sur un obstacle
   suspendu, l'autre s'allonge, le troisième passe. Celui qu'on
   recommande est le seul tracé plein. */

.chemins { margin: clamp(2.5rem, 5.5vw, 4rem) 0 0; }

.chemins__svg {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.chemins__route {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.chemins__route--etudiee {
  stroke: var(--c-fumee);
  stroke-width: 1.5;
  opacity: 0.45;
}

.chemins__route--haute  { animation: tracer 620ms ease-out 150ms forwards; }
.chemins__route--basse  { animation: tracer 800ms ease-out 500ms forwards; }

.chemins__route--retenue {
  stroke: var(--c-kaki);
  stroke-width: 3.5;
  animation: tracer 1000ms cubic-bezier(0.4, 0, 0.15, 1) 1350ms forwards;
}

@keyframes tracer { to { stroke-dashoffset: 0; } }

.chemins__obstacle {
  fill: var(--c-encre-12);
  opacity: 0;
  animation: apparaitre 320ms ease-out 600ms forwards;
}

.chemins__croix line {
  stroke: var(--c-fumee);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  animation: apparaitre 260ms ease-out 800ms forwards;
}

@keyframes apparaitre { to { opacity: 1; } }

.chemins__depart { fill: var(--c-encre); }

.chemins__jalon {
  fill: var(--c-argile);
  stroke: var(--c-kaki);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  animation: apparaitre 240ms ease-out forwards;
}

.chemins__jalon--1 { animation-delay: 1700ms; }
.chemins__jalon--2 { animation-delay: 1950ms; }
.chemins__jalon--3 { animation-delay: 2200ms; }

.chemins__arrivee {
  fill: var(--c-vif);
  transform-origin: center;
  transform-box: fill-box;
  scale: 0;
  animation: poser 420ms cubic-bezier(0.34, 1.4, 0.64, 1) 2450ms forwards;
}

@keyframes poser { to { scale: 1; } }

.chemins__halo {
  fill: var(--c-vif);
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  animation: halo 2000ms ease-out 2600ms infinite;
}

@keyframes halo {
  0%   { opacity: 0.28; scale: 1; }
  100% { opacity: 0;    scale: 3.2; }
}

.chemins__legende {
  display: flex;
  justify-content: space-between;
  gap: var(--e-4);
  margin-top: var(--e-4);
  font-family: var(--f-heure);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-fumee);
}

.chemins__legende b { color: var(--c-kaki); font-weight: 500; }
.chemins__legende span:last-child { text-align: right; color: var(--c-encre); }

@media (max-width: 44rem) { .chemins__legende-centre { display: none; } }

/* ---------------------------------------------------------
   5. MÉTHODE
   --------------------------------------------------------- */

.methode {
  padding-block: var(--e-section);
  border-top: 1px solid var(--c-trait);
}

.methode__entete { max-width: 44rem; }
.methode__entete h2 { margin-top: var(--e-4); }
.methode__entete .chapo { margin-top: var(--e-6); }

.temps {
  list-style: none;
  padding: 0;
  margin-top: var(--e-16);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.temps__item {
  position: relative;
  padding: var(--e-8) var(--e-6) 0;
  border-top: 1px solid var(--c-trait);
  border-left: 1px solid var(--c-trait);
}

.temps__item:first-child { padding-left: 0; border-left: 0; }
.temps__item:last-child { padding-right: 0; }

/* Jauge d'avancement : un tiers, deux tiers, la totalité. */
.temps__item::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  height: 2px;
  background: var(--c-kaki);
}

.temps__item:nth-child(1)::before { width: 33.33%; }
.temps__item:nth-child(2)::before { width: 66.66%; }
.temps__item:nth-child(3)::before { width: 100%; background: var(--c-vif); }

.temps__rang {
  font-family: var(--f-heure);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-fumee);
}

.temps__item:nth-child(3) .temps__rang { color: var(--c-vif); }

.temps__titre {
  margin-top: var(--e-2);
  font-size: var(--fs-xl);
}

.temps__accroche { margin-top: var(--e-4); font-weight: 700; font-size: var(--fs-m); }
.temps__corps { margin-top: var(--e-3); color: var(--c-fumee); font-size: var(--fs-s); }

.temps__suite {
  margin-top: var(--e-8);
  padding-top: var(--e-4);
  border-top: 1px solid var(--c-trait);
  font-size: var(--fs-s);
  color: var(--c-encre-80);
  max-width: 60ch;
}

.temps__suite b { font-weight: 700; color: var(--c-encre); }

@media (max-width: 54rem) {
  .temps { grid-template-columns: 1fr; }
  .temps__item {
    padding: var(--e-6) 0 var(--e-8);
    border-left: 0;
  }
  .temps__item::before { top: -1px; height: 2px; }
}

/* ---------------------------------------------------------
   6. MANIFESTE
   --------------------------------------------------------- */

.manifeste {
  background: var(--c-encre);
  color: var(--c-argile);
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

.manifeste__texte {
  font-family: var(--f-titre);
  font-size: clamp(1.55rem, 3.6vw, 2.8rem);
  font-weight: 500;
  font-variation-settings: "wdth" 96;
  line-height: 1.2;
  letter-spacing: -0.03em;
  max-width: 26ch;
  text-wrap: balance;
}

.manifeste__texte em { font-style: normal; color: var(--c-vif-clair); }

.manifeste__signature {
  margin-top: var(--e-8);
  font-family: var(--f-heure);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-clair-58);
}

/* ---------------------------------------------------------
   7. PRESTATIONS
   --------------------------------------------------------- */

.offre {
  padding-block: var(--e-section);
}

.offre__entete { max-width: 44rem; }
.offre__entete h2 { margin-top: var(--e-4); }
.offre__entete .chapo { margin-top: var(--e-6); }

.table { margin-top: var(--e-12); border-top: 1px solid var(--c-encre-12); }
.ligne { border-bottom: 1px solid var(--c-encre-12); }

.ligne__tete {
  display: grid;
  grid-template-columns: minmax(11rem, 17rem) 1fr 2rem;
  align-items: baseline;
  gap: var(--e-6);
  padding-block: var(--e-6);
  cursor: pointer;
  list-style: none;
}

.ligne__tete::-webkit-details-marker { display: none; }
.ligne__tete::marker { content: ""; }
.ligne__tete:hover .ligne__titre { color: var(--c-kaki); }

.ligne__titre {
  font-family: var(--f-titre);
  font-size: var(--fs-xl);
  font-weight: 600;
  font-variation-settings: "wdth" 92;
  letter-spacing: -0.028em;
  transition: color var(--transition);
}

.ligne__question { color: var(--c-fumee); font-size: var(--fs-s); }

.ligne__signe {
  justify-self: end;
  align-self: center;
  position: relative;
  width: 14px;
  height: 14px;
}

.ligne__signe::before,
.ligne__signe::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--c-encre);
  transition: transform var(--transition);
}

.ligne__signe::after { transform: rotate(90deg); }
.ligne[open] .ligne__signe::after { transform: rotate(0deg); }
.ligne[open] .ligne__signe::before,
.ligne[open] .ligne__signe::after { background: var(--c-kaki); }

.ligne__corps { padding-bottom: var(--e-8); max-width: 60ch; }
.ligne__texte { color: var(--c-encre-80); }

.ligne__livrables {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  list-style: none;
  padding: 0;
  margin-top: var(--e-4);
}

.ligne__livrables li {
  font-family: var(--f-heure);
  font-size: var(--fs-xs);
  letter-spacing: 0.03em;
  padding: 0.35rem 0.65rem;
  background: var(--c-voile);
  border-radius: var(--r-court);
}

/* --- Prestations sur petit écran ---------------------------------
   La table à deux colonnes ne tient pas : titre et question passent
   l'un sous l'autre. Sans précaution, la liste se lit alors comme une
   suite de lignes de texte. Deux repères la remettent d'aplomb : le
   signe + devient un carré cliquable, et le contenu déplié se pose
   sur une surface blanche. La métaphore de la table est conservée. */

@media (max-width: 56rem) {
  .ligne__tete {
    grid-template-columns: 1fr 1.75rem;
    grid-template-areas: "titre signe" "question question";
    align-items: center;
    gap: var(--e-2) var(--e-4);
    padding-block: var(--e-4);
  }

  .ligne__titre { grid-area: titre; }
  .ligne__question { grid-area: question; }

  .ligne__signe {
    grid-area: signe;
    align-self: center;
    margin-top: 0;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--c-encre-12);
    border-radius: var(--r-court);
    background: var(--c-blanc);
  }

  .ligne__signe::before,
  .ligne__signe::after { inset: 50% 7px auto 7px; }

  .ligne[open] .ligne__signe { border-color: var(--c-kaki); }

  .ligne__corps {
    background: var(--c-blanc);
    border: 1px solid var(--c-trait);
    border-radius: var(--r-carte);
    padding: var(--e-4);
    margin-bottom: var(--e-6);
    max-width: none;
  }

  .ligne__livrables { margin-top: var(--e-3); }
}

/* ---------------------------------------------------------
   7 bis. FORFAIT
   --------------------------------------------------------- */

.forfait {
  padding-block: var(--e-section);
  border-top: 1px solid var(--c-trait);
}

.forfait__entete { max-width: 44rem; }
.forfait__entete h2 { margin-top: var(--e-4); }
.forfait__entete .chapo { margin-top: var(--e-6); }

.offres {
  margin-top: var(--e-12);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-4);
  align-items: start;
}

.carte {
  background: var(--c-blanc);
  border: 1px solid var(--c-trait);
  border-radius: var(--r-carte);
  padding: var(--e-8);
}

/* En-tête de carte : intitulé, prix, note. Regroupés pour que le filet de la
   liste tombe toujours au même endroit, quelle que soit la largeur d'écran. */
.carte__tete { display: grid; gap: 0; }

.carte--phare { background: var(--c-encre); border-color: var(--c-encre); color: var(--c-argile); }

.carte__quoi {
  font-family: var(--f-heure);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-fumee);
}

.carte--phare .carte__quoi { color: var(--c-kaki-clair); }

.carte__prix {
  margin-top: var(--e-3);
  font-family: var(--f-titre);
  font-size: clamp(2.6rem, 5.5vw, 3.6rem);
  font-weight: 700;
  font-variation-settings: "wdth" 108;
  letter-spacing: -0.04em;
  line-height: 1;
}

/* « Sur devis » n'est pas un nombre : il ne supporte pas la taille du chiffre. */
.carte__prix--texte {
  font-size: clamp(1.75rem, 3.2vw, 2.4rem);
  font-variation-settings: "wdth" 96;
  letter-spacing: -0.03em;
}

.carte__prix span {
  font-size: var(--fs-l);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-fumee);
  white-space: nowrap;
}

.carte--phare .carte__prix span { color: var(--c-kaki-clair); }

.carte__note {
  margin-top: var(--e-3);
  font-size: var(--fs-s);
  font-weight: 700;
}

.carte--phare .carte__note { color: var(--c-vif-clair); }

.carte__liste {
  list-style: none;
  padding: 0;
  margin-top: var(--e-6);
  padding-top: var(--e-6);
  border-top: 1px solid var(--c-trait);
  display: grid;
  gap: var(--e-3);
}

.carte--phare .carte__liste { border-top-color: var(--c-clair-18); }

.carte__liste li {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: var(--e-3);
  font-size: var(--fs-s);
  color: var(--c-encre-80);
}

.carte--phare .carte__liste li { color: var(--c-clair-72); }

.carte__liste li::before {
  content: "";
  width: 9px;
  height: 2px;
  margin-top: 0.72em;
  background: var(--c-vif);
}

.carte--phare .carte__liste li::before { background: var(--c-vif-clair); }

.forfait__promesse {
  margin-top: var(--e-8);
  padding-left: var(--e-6);
  border-left: 2px solid var(--c-kaki);
  max-width: 58ch;
  color: var(--c-encre-80);
  font-size: var(--fs-s);
}

.forfait__promesse b {
  display: block;
  margin-top: var(--e-3);
  font-family: var(--f-titre);
  font-size: var(--fs-l);
  font-weight: 600;
  font-variation-settings: "wdth" 92;
  letter-spacing: -0.02em;
  color: var(--c-encre);
}

.carte__action { margin-top: var(--e-6); }
.carte__action .bouton { width: 100%; justify-content: center; }

/* --- Forfait : trois colonnes, puis une seule ---------------------
   Sous 58rem les cartes s'empilent. À cette largeur, la mise en forme
   doit rester celle du bureau — surface posée, filet, prix en gros —
   et non retomber en simple suite de paragraphes : on resserre donc
   les marges internes plutôt que de renoncer à la carte. */

@media (max-width: 74rem) {
  .carte { padding: var(--e-6); }
}

@media (max-width: 58rem) {
  .offres {
    grid-template-columns: 1fr;
    gap: var(--e-6);
  }

  .carte {
    padding: var(--e-6);
    border-color: var(--c-encre-12);
  }

  .carte--phare { border-color: var(--c-encre); }

  .carte__prix { font-size: 2.5rem; }
  .carte__prix--texte { font-size: 1.9rem; }
  .carte__prix span { font-size: var(--fs-m); }

  .carte__liste {
    margin-top: var(--e-4);
    padding-top: var(--e-4);
    gap: var(--e-4);
  }

  /* 17 px au lieu de 15 : c'est la seule taille lisible à bout de bras. */
  .carte__liste li { font-size: var(--fs-m); }

  .forfait__promesse { padding-left: var(--e-4); }
}

/* ---------------------------------------------------------
   8. RÉALISATIONS
   --------------------------------------------------------- */

.travaux {
  padding-block: var(--e-section);
  border-top: 1px solid var(--c-trait);
}

.travaux__entete { max-width: 44rem; }
.travaux__entete h2 { margin-top: var(--e-4); }
.travaux__entete .chapo { margin-top: var(--e-6); }

.vitrine {
  margin-top: var(--e-12);
  display: grid;
  grid-template-columns: 1fr 20rem;
  gap: clamp(var(--e-8), 5vw, var(--e-16));
  align-items: start;
}

/* Fenêtre de navigateur */
.fenetre {
  border: 1px solid var(--c-trait);
  border-radius: var(--r-carte);
  overflow: hidden;
  background: var(--c-blanc);
  box-shadow: 0 18px 44px -30px rgba(30, 32, 28, 0.40);
}

.fenetre__barre {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  background: var(--c-argile);
  border-bottom: 1px solid var(--c-trait);
}

.fenetre__pastilles { display: flex; gap: 6px; flex: none; }

.fenetre__pastilles span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-trait);
}

.fenetre__url {
  flex: 1;
  font-family: var(--f-heure);
  font-size: var(--fs-xs);
  color: var(--c-fumee);
  background: var(--c-blanc);
  border: 1px solid var(--c-trait);
  border-radius: 100px;
  padding: 0.25rem 0.7rem;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fenetre__ecran {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-blanc);
}

/* La capture défile lentement puis remonte : on parcourt la page entière
   sans que le visiteur ait à faire quoi que ce soit.

   Elle est posée en fond CSS et non en <img> : c'est délibéré. Les robots
   d'aperçu des réseaux sociaux ne lisent que les <img> et la balise og:image.
   En fond, cette capture ne peut jamais être choisie comme vignette de
   partage à la place du logo. Le rapport 1100/4419 est celui du fichier :
   la hauteur du bloc suit donc exactement celle de l'image affichée. */
.fenetre__apercu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1100 / 4419;
  background-image: url("/img/al-dente.jpg");
  background-image: image-set(url("/img/al-dente.webp") type("image/webp"),
                              url("/img/al-dente.jpg") type("image/jpeg"));
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  animation: parcourir 17s ease-in-out infinite alternate;
}

@keyframes parcourir {
  0%,  9% { transform: translateY(0); }
  91%, 100% { transform: translateY(var(--course, -80%)); }
}

.fenetre__ecran:hover .fenetre__apercu,
.fenetre__ecran:focus-within .fenetre__apercu { animation-play-state: paused; }

.fenetre__indice {
  position: absolute;
  right: var(--e-3);
  bottom: var(--e-3);
  padding: 0.3rem 0.6rem;
  border-radius: 100px;
  background: var(--c-encre-80);
  color: var(--c-argile);
  font-family: var(--f-heure);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition);
}

.fenetre__ecran:hover .fenetre__indice { opacity: 1; }

.vitrine__notes { display: grid; gap: var(--e-6); }
.vitrine__client { font-size: var(--fs-xl); }

.vitrine__bloc dt {
  font-family: var(--f-heure);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-fumee);
  margin-bottom: var(--e-2);
}

.vitrine__bloc dd { margin: 0 0 var(--e-4); font-size: var(--fs-s); color: var(--c-encre-80); }
.vitrine__bloc dd:last-child { margin-bottom: 0; }
.vitrine__bloc dd em { font-style: normal; font-weight: 700; color: var(--c-encre); }

/* Accompagnements secondaires */
.appuis__intro { margin-top: var(--e-16); }

.appuis {
  margin-top: var(--e-6);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e-4);
}

.appui {
  background: var(--c-blanc);
  border: 1px solid var(--c-trait);
  border-radius: var(--r-carte);
  padding: var(--e-8);
}

.appui__type {
  font-family: var(--f-heure);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-kaki);
}

.appui__titre { margin-top: var(--e-3); font-size: var(--fs-l); }
.appui__corps { margin-top: var(--e-3); font-size: var(--fs-s); color: var(--c-fumee); }

@media (max-width: 60rem) {
  .vitrine { grid-template-columns: 1fr; }
  .appuis { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   9. CONTACT
   --------------------------------------------------------- */

.contact {
  padding-block: var(--e-section);
  border-top: 1px solid var(--c-trait);
}

.contact__cadre {
  display: grid;
  grid-template-columns: 1fr 24rem;
  gap: clamp(var(--e-12), 6vw, var(--e-24));
  align-items: start;
}

.contact__texte h2 { margin-top: var(--e-4); max-width: 17ch; }
.contact__chapo { margin-top: var(--e-6); }

.contact__liste {
  list-style: none;
  padding: 0;
  margin-top: var(--e-8);
  display: grid;
  gap: var(--e-4);
  max-width: 46ch;
}

.contact__liste li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: var(--e-3);
  font-size: var(--fs-s);
  color: var(--c-encre-80);
}

.contact__liste li::before {
  content: "";
  width: 10px;
  height: 2px;
  margin-top: 0.72em;
  background: var(--c-vif);
}

.contact__direct {
  margin-top: var(--e-8);
  font-size: var(--fs-s);
  color: var(--c-fumee);
  text-wrap: pretty;
}

.formulaire {
  background: var(--c-blanc);
  border: 1px solid var(--c-trait);
  border-radius: var(--r-carte);
  padding: var(--e-8);
  display: grid;
  gap: var(--e-4);
}

.formulaire__piege { position: absolute; left: -9999px; }

.champ { display: grid; gap: var(--e-2); }

.champ label {
  font-family: var(--f-heure);
  font-size: var(--fs-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-fumee);
}

.champ__note { text-transform: none; letter-spacing: 0; opacity: 0.75; }

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  background: var(--c-argile);
  border: 1px solid var(--c-trait);
  border-radius: var(--r-court);
  font-size: var(--fs-s);
  transition: border-color var(--transition), background var(--transition);
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  background: var(--c-blanc);
  border-color: var(--c-kaki);
}

.champ textarea { resize: vertical; font-family: inherit; }

.formulaire__envoi { margin-top: var(--e-2); justify-content: center; }

.formulaire__mention {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--c-fumee);
}

@media (max-width: 60rem) {
  .contact__cadre { grid-template-columns: 1fr; }
  .formulaire { padding: var(--e-6); }
}

/* ---------------------------------------------------------
   10. QUESTIONS
   --------------------------------------------------------- */

.faq {
  padding-block: var(--e-section);
  border-top: 1px solid var(--c-trait);
}

.faq__cadre {
  display: grid;
  grid-template-columns: 20rem 1fr;
  gap: clamp(var(--e-8), 5vw, var(--e-16));
  align-items: start;
}

.faq__entete h2 { margin-top: var(--e-4); font-size: var(--fs-xl); }
.faq__liste { border-top: 1px solid var(--c-encre-12); }
.q { border-bottom: 1px solid var(--c-encre-12); }

.q__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-6);
  padding-block: var(--e-6);
  cursor: pointer;
  list-style: none;
  font-family: var(--f-titre);
  font-size: var(--fs-l);
  font-weight: 600;
  font-variation-settings: "wdth" 92;
  letter-spacing: -0.02em;
  transition: color var(--transition);
}

.q__question::-webkit-details-marker { display: none; }
.q__question::marker { content: ""; }
.q__question:hover { color: var(--c-kaki); }

.q__signe {
  flex: none;
  position: relative;
  width: 13px;
  height: 13px;
  margin-top: 0.45em;
}

.q__signe::before,
.q__signe::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--transition);
}

.q__signe::after { transform: rotate(90deg); }
.q[open] .q__signe::after { transform: rotate(0deg); }
.q[open] .q__signe::before,
.q[open] .q__signe::after { background: var(--c-kaki); }

.q__reponse {
  padding-bottom: var(--e-6);
  max-width: 62ch;
  color: var(--c-encre-80);
  font-size: var(--fs-s);
}

@media (max-width: 56rem) { .faq__cadre { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------
   11. PIED DE PAGE
   --------------------------------------------------------- */

.pied {
  background: var(--c-encre);
  color: var(--c-argile);
  padding-top: var(--e-16);
  padding-bottom: var(--e-8);
}

.pied__cadre {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-8);
  padding-bottom: var(--e-12);
}

.pied__signe { width: 32px; height: 32px; }
.pied__mot { margin-top: var(--e-3); }
.pied__mot .logotype { font-size: 1.5rem; }
.pied__mot .logotype b { color: var(--c-kaki-clair); }

.pied__lieu {
  margin-top: var(--e-1);
  font-family: var(--f-heure);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--c-clair-58);
}

.pied__nav {
  display: grid;
  gap: var(--e-2);
  align-content: start;
  font-size: var(--fs-s);
}

.pied__nav a { width: fit-content; text-decoration: none; }
.pied__contact { font-size: var(--fs-s); }
.pied__contact a { text-decoration: none; }

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-3);
  padding-top: var(--e-6);
  border-top: 1px solid var(--c-clair-18);
  font-family: var(--f-heure);
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  color: var(--c-clair-58);
}

@media (max-width: 48rem) { .pied__cadre { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------
   12. CHARTE ET PAGES SIMPLES
   --------------------------------------------------------- */

.tete { padding-top: clamp(3rem, 7vw, 5rem); padding-bottom: var(--e-16); }
.tete__titre { margin-top: var(--e-6); }
.tete__chapo { margin-top: var(--e-6); }

.bloc { padding-block: var(--e-16); border-top: 1px solid var(--c-trait); }
.bloc--dernier { padding-bottom: var(--e-24); }

.bloc__cadre {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: clamp(var(--e-6), 4vw, var(--e-12));
  align-items: start;
}

.bloc__titre h2 { margin-top: var(--e-2); font-size: var(--fs-xl); }
.bloc__contenu { display: grid; gap: var(--e-8); max-width: 46rem; }

.texte { max-width: 62ch; color: var(--c-encre-80); }
.texte + .texte { margin-top: calc(var(--e-4) * -1); }

.regles { display: grid; gap: var(--e-3); padding-left: var(--e-4); margin: 0; }
.regles li { font-size: var(--fs-s); color: var(--c-encre-80); }
.regles li::marker { color: var(--c-kaki); }

.logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-4); }

.boite {
  background: var(--c-blanc);
  border: 1px solid var(--c-trait);
  border-radius: var(--r-carte);
  padding: var(--e-8);
  display: grid;
  align-content: start;
  gap: var(--e-6);
}

.boite--sombre { background: var(--c-encre); border-color: var(--c-encre); }
.boite--sombre .boite__legende { color: var(--c-clair-58); }
.boite--sombre .logotype { color: var(--c-argile); }
.boite--sombre .logotype b { color: var(--c-kaki-clair); }

.boite__signe { width: 64px; height: 64px; }
.boite .logotype { font-size: 2rem; }

.boite__legende {
  font-family: var(--f-heure);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--c-fumee);
}

.nuancier { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-4); }

.nuance {
  border: 1px solid var(--c-trait);
  border-radius: var(--r-carte);
  overflow: hidden;
  background: var(--c-blanc);
}

.nuance__aplat { height: 5.5rem; }
.nuance__infos { padding: var(--e-4); }
.nuance__nom { font-weight: 700; }

.nuance__hex,
.nuance__var {
  font-family: var(--f-heure);
  font-size: var(--fs-xs);
  color: var(--c-fumee);
}

.nuance__role { margin-top: var(--e-2); font-size: var(--fs-s); }

.nuance__contraste {
  margin-top: var(--e-1);
  font-family: var(--f-heure);
  font-size: var(--fs-xs);
  color: var(--c-fumee);
}

.alerte {
  border-left: 2px solid var(--c-kaki);
  padding-left: var(--e-4);
  font-size: var(--fs-s);
  color: var(--c-encre-80);
}

.fonte { border-top: 1px solid var(--c-trait); padding-top: var(--e-4); }
.fonte__meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-4); }
.fonte__nom { font-weight: 700; }
.fonte__detail { margin-top: var(--e-3); font-size: var(--fs-s); color: var(--c-fumee); max-width: 62ch; }

.demo { margin-top: var(--e-4); }

.demo--titre {
  font-family: var(--f-titre);
  font-size: clamp(2rem, 5vw, 3.1rem);
  font-weight: 600;
  font-variation-settings: "wdth" 92;
  letter-spacing: -0.034em;
  line-height: 1.05;
}

.demo--texte { font-family: var(--f-texte); font-size: var(--fs-xl); }

.demo--heure {
  font-family: var(--f-heure);
  font-size: var(--fs-xl);
  letter-spacing: 0.06em;
}

.echelle { border-top: 1px solid var(--c-trait); padding-top: var(--e-4); display: grid; gap: var(--e-2); }
.echelle__titre { margin-bottom: var(--e-2); }
.ech { font-family: var(--f-titre); font-weight: 600; font-variation-settings: "wdth" 92; letter-spacing: -0.03em; line-height: 1.1; }
.ech--mega { font-size: clamp(2.2rem, 5vw, 3.3rem); }
.ech--xxl { font-size: clamp(1.8rem, 3.6vw, 2.3rem); }
.ech--xl { font-size: var(--fs-xl); }
.ech--l { font-size: var(--fs-l); }
.ech--m { font-family: var(--f-texte); font-weight: 400; font-size: var(--fs-m); }
.ech--s { font-family: var(--f-texte); font-weight: 400; font-size: var(--fs-s); color: var(--c-fumee); }
.ech--xs { font-family: var(--f-heure); font-weight: 400; font-size: var(--fs-xs); letter-spacing: 0.12em; color: var(--c-fumee); }

.grille-demo { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--e-2); height: 4rem; }
.grille-demo span { background: var(--c-voile); border-radius: var(--r-court); }

.compo { border-top: 1px solid var(--c-trait); padding-top: var(--e-4); }
.compo__rangee { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin-top: var(--e-4); }
.compo__trace { width: 100%; max-width: 24rem; margin-top: var(--e-4); }

.pastille {
  font-family: var(--f-heure);
  font-size: var(--fs-xs);
  letter-spacing: 0.03em;
  padding: 0.35rem 0.65rem;
  background: var(--c-voile);
  border-radius: var(--r-court);
}

.voix { border-top: 1px solid var(--c-encre-12); }

.voix__entete,
.voix__paire {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-6);
}

.voix__entete { padding-block: var(--e-3); border-bottom: 1px solid var(--c-encre-12); }
.voix__paire { padding-block: var(--e-4); border-bottom: 1px solid var(--c-trait); font-size: var(--fs-s); }
.voix__oui { font-weight: 700; }
.voix__non { color: var(--c-fumee); text-decoration: line-through; text-decoration-color: var(--c-vif); }

@media (max-width: 56rem) {
  .bloc__cadre { grid-template-columns: 1fr; }
  .logos,
  .nuancier { grid-template-columns: 1fr; }
  .voix__entete,
  .voix__paire { grid-template-columns: 1fr; gap: var(--e-2); }
}

.page { padding-block: clamp(3rem, 7vw, 5rem) var(--e-24); }
.page__titre { margin-top: var(--e-4); font-size: var(--fs-xxl); }
.page__corps { margin-top: var(--e-12); max-width: 62ch; display: grid; gap: var(--e-3); }
.page__corps h2 { font-size: var(--fs-l); margin-top: var(--e-6); }
.page__corps p { color: var(--c-encre-80); font-size: var(--fs-s); }

.perdu { padding-block: clamp(4rem, 12vw, 9rem); }
.perdu__titre { margin-top: var(--e-6); font-size: var(--fs-xxl); max-width: 17ch; }
.perdu__chapo { margin-top: var(--e-6); }
.perdu__action { margin-top: var(--e-8); }

/* ---------------------------------------------------------
   MOUVEMENT RÉDUIT — doit rester en dernier
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revele { opacity: 1; transform: none; transition: none; }
  .chemins__route { stroke-dashoffset: 0; }
  .chemins__obstacle,
  .chemins__croix line,
  .chemins__jalon { opacity: 1; }
  .chemins__arrivee { scale: 1; }
  .chemins__halo { display: none; }
  .fenetre__apercu { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}