/* =====================================================================
   Cactusia and Co. — feuille de style unique
   Tokens dérivés de la charte graphique (juillet 2026).
   Base lin et ivoire de la maquette, accents vifs de la charte.
   ===================================================================== */

/* ---- Polices auto-hébergées ----------------------------------------
   Bitter est une police variable : un seul fichier couvre 100 à 900.
   Deux sous-ensembles suffisent au français ; le cyrillique, le grec et
   le vietnamien ont été écartés pour diviser le poids par deux.        */

@font-face {
  font-family: Bitter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/bitter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Bitter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/bitter-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Bitter;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/bitter-var-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Bitter;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/bitter-var-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Courier Prime";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/courier-prime-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Courier Prime";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/courier-prime-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Courier Prime";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/courier-prime-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Courier Prime";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/courier-prime-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =====================================================================
   1. Tokens
   ===================================================================== */

:root {
  /* Palette charte — neutres */
  --c-ivoire: #fef7ed;
  --c-lin: #f6efe3;
  --c-rayon: #fff7d4;

  /* Palette charte — verts */
  --c-epine: #5d6a34;
  --c-sauge: #959b71;
  --c-aloe: #c8dc7a;
  --c-bourgeon: #b5c614;

  /* Palette charte — accents */
  --c-soleil: #fbd602;
  --c-fleur: #b20074;

  /* Rôles. Contrastes vérifiés sur --bg :
     text 12.4:1 · text-soft 6.6:1 · text-muted 4.7:1 · action 4.9:1 */
  --bg: var(--c-lin);
  --bg-alt: #efe6d7;
  --surface: var(--c-ivoire);
  --surface-haute: #fffdf8;

  --text: #2a3018;
  --text-soft: #4a5528;
  --text-muted: #67704a;

  --line: #ddd2bd;
  --line-forte: var(--c-sauge);

  /* Agave assombri : 5.6:1 avec du blanc dessus, 4.9:1 posé en texte. */
  --action: #35754c;
  --action-survol: #2a5e3d;
  --action-doux: #e4efe0;

  --accent: var(--c-bourgeon); /* décoratif : contraste insuffisant en texte */
  --accent-encre: var(--c-fleur);
  --accent-chaud: var(--c-soleil);
  /* Bourgeon assombri. Ne vient pas de la charte : il en dérive, retenu par la
     cliente pour les traits de soulignement, le Bourgeon pur étant trop vif. */
  --accent-trait: #9aa61c;

  --focus: var(--c-fleur);
  --danger: #a4322a;

  /* Typographie */
  --font-titre: Bitter, Georgia, "Times New Roman", serif;
  --font-mono: "Courier Prime", "Courier New", ui-monospace, monospace;

  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 1rem;
  --fs-lg: 1.0625rem;
  --fs-xl: clamp(1.125rem, 0.4vw + 1.05rem, 1.3125rem);
  --fs-2xl: clamp(1.375rem, 0.8vw + 1.2rem, 1.75rem);
  --fs-3xl: clamp(1.75rem, 1.6vw + 1.4rem, 2.5rem);
  --fs-4xl: clamp(2.25rem, 3.2vw + 1.5rem, 3.75rem);

  --lh-serre: 1.14;
  --lh-normal: 1.55;
  --lh-large: 1.75;
  --tracking: 0.14em;

  /* Espacement, base 4 */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  --section-y: clamp(3.5rem, 7vw, 7rem);
  --gouttiere: clamp(1.25rem, 4vw, 3rem);
  --mesure: 68ch;
  --largeur: 76rem;

  /* Formes */
  --r-sm: 0.5rem;
  --r: 1rem;
  --r-lg: 1.5rem;
  --r-xl: 2rem;
  --r-pilule: 999px;

  --ombre-sm: 0 1px 2px rgba(42, 48, 24, 0.05);
  --ombre: 0 1px 2px rgba(42, 48, 24, 0.04), 0 10px 28px -16px rgba(42, 48, 24, 0.28);
  --ombre-lg: 0 2px 4px rgba(42, 48, 24, 0.05), 0 26px 56px -28px rgba(42, 48, 24, 0.34);

  /* Mouvement */
  --ease: cubic-bezier(0.2, 0.8, 0.3, 1);
  --dur-court: 140ms;
  --dur: 220ms;
  --dur-long: 380ms;

  --entete-h: 4.75rem;
}

/* =====================================================================
   2. Reset
   ===================================================================== */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete-h) + var(--sp-5));
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Le fond ne doit jamais paraître plat. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 16% 10%, rgba(181, 198, 20, 0.08), transparent 42%),
    radial-gradient(circle at 88% 76%, rgba(93, 106, 52, 0.08), transparent 46%);
}

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

img,
video {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

/* L'attribut hidden doit l'emporter sur les classes qui posent un display.
   Sans ce !important, .alerte et .succes (display: flex) restaient visibles
   alors que le HTML les déclare masqués. */
[hidden] {
  display: none !important;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

.icone {
  flex-shrink: 0;
}

/* Bibliothèque de symboles inline : présente dans le DOM, jamais rendue.
   Pas d'attribut style= afin de garder une CSP sans 'unsafe-inline'. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* =====================================================================
   3. Typographie
   ===================================================================== */

h1,
h2,
h3,
h4 {
  font-family: var(--font-titre);
  font-weight: 600;
  line-height: var(--lh-serre);
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--text);
}

p {
  text-wrap: pretty;
}

/* Courier Prime porte l'identité « carnet d'atelier » mais fatigue sur les
   longs paragraphes : au-delà de trois lignes, on repasse en Bitter. */
.prose {
  font-family: var(--font-titre);
  font-size: var(--fs-lg);
  line-height: var(--lh-large);
  max-width: var(--mesure);
  color: var(--text-soft);
}

.prose > * + * {
  margin-top: var(--sp-5);
}

.prose h2 {
  margin-top: var(--sp-7);
  font-size: var(--fs-2xl);
  color: var(--text);
}

.prose a {
  color: var(--action);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.prose a:hover {
  color: var(--action-survol);
}

.prose ul {
  padding-left: 1.2em;
  list-style: disc;
}

.prose li + li {
  margin-top: var(--sp-2);
}

/* Note de chantier : visible sans imiter un encart éditorial.
   À retirer avec son contenu une fois les informations fournies. */
/* Le cœur que la cliente pose en fin de texte. Repris du sprite plutôt qu'en
   emoji : le site n'affiche que ses propres symboles dessinés, et un emoji
   système jurerait au milieu de Bitter. Taille en em pour suivre le corps du
   texte, qui est fluide. */
.prose__coeur {
  /* Le reset pose display:block sur tout svg, ce qui renvoyait le cœur à la
     ligne suivante. Il doit rester dans le fil du texte. */
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.15em;
  vertical-align: -0.12em;
  color: var(--c-epine);
}

/* Chute d'un texte : la phrase qui referme, posée plus grande et en Épine
   verte pour qu'on l'entende comme une signature. */
.prose__chute {
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: var(--lh-serre);
  color: var(--c-epine);
}

.a-completer {
  padding: var(--sp-4);
  border: 1.5px dashed var(--line-forte);
  border-radius: var(--r-sm);
  background-color: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: var(--lh-large);
  color: var(--text-muted);
}

.a-completer strong {
  color: var(--accent-encre);
  letter-spacing: 0.06em;
}

/* =====================================================================
   4. Accessibilité
   ===================================================================== */

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--c-aloe);
  color: var(--text);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 100;
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-pilule);
  background-color: var(--text);
  color: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 700;
  transform: translateY(-150%);
  transition: transform var(--dur) var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    /* Sans cette ligne, une animation infinie ramenée à 0,01 ms clignoterait
       au lieu de s'arrêter. Les étoiles restent alors simplement posées. */
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   4 bis. Étoiles d'ambiance
   Le ✦ du logo, en trait fin. Ambiance lente et basse en contraste : elles
   accompagnent le fil d'encre sans lui disputer l'attention.
   ===================================================================== */

@keyframes scintille {
  0%,
  100% {
    opacity: 0.16;
    transform: scale(0.88) rotate(-6deg);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.04) rotate(6deg);
  }
}

/* Sous 64rem, le hero est en une colonne et n'offre aucun vide : les étoiles
   tomberaient sur le menu ou sur la photo. Les panneaux d'appel gardent les
   leurs à toutes les tailles, leurs marges intérieures sont assez larges. */
.etoiles {
  display: none;
}

@media (min-width: 64rem) {
  .etoiles {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }
}

.etoile {
  position: absolute;
  width: 1rem;
  height: 1rem;
  color: var(--c-sauge);
  opacity: 0.16;
  will-change: opacity, transform;
  animation: scintille 7s var(--ease) infinite;
}

/* Positions relevées sur la composition réelle. Les seuls vides exploitables
   sont la gouttière centrale (44–49 %), la marge de gauche, la bande au-dessus
   du visuel et l'espace sous la carte, à gauche du tampon. */
@media (min-width: 64rem) {
  .etoile--1 {
    top: 5%;
    left: 45%;
    width: 0.75rem;
    height: 0.75rem;
  }

  .etoile--2 {
    top: 33%;
    left: 1.5%;
    animation-duration: 8.5s;
    animation-delay: 1.4s;
  }

  .etoile--3 {
    bottom: 9%;
    left: 46%;
    width: 0.7rem;
    height: 0.7rem;
    animation-duration: 6s;
    animation-delay: 2.9s;
  }

  .etoile--4 {
    top: 3%;
    left: 62%;
    color: var(--accent);
    animation-duration: 9s;
    animation-delay: 0.7s;
  }

  .etoile--5 {
    bottom: 3%;
    left: 56%;
    width: 0.8rem;
    height: 0.8rem;
    animation-duration: 7.5s;
    animation-delay: 3.6s;
  }
}

/* Deux étoiles sur les panneaux d'appel, sans toucher au HTML. */
.appel::before,
.appel::after {
  content: "";
  position: absolute;
  width: 0.875rem;
  height: 0.875rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23959b71' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.6 13.6 9.2 20.2 12 13.6 14.8 12 21.4 10.4 14.8 3.8 12 10.4 9.2Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  opacity: 0.16;
  animation: scintille 8s var(--ease) infinite;
  pointer-events: none;
}

.appel::before {
  top: 1.75rem;
  left: 2rem;
}

.appel::after {
  right: 2.25rem;
  bottom: 2rem;
  animation-duration: 6.5s;
  animation-delay: 2.2s;
}

/* Le ✦ des surtitres est un accent lisible, pas une étoile d'ambiance :
   il garde sa présence et respire à peine. */
@keyframes respire {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(0.94);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

.eyebrow__etincelle,
.bouton__etincelle {
  animation: respire 5.5s var(--ease) infinite;
}

.bouton__etincelle {
  animation-delay: 1.8s;
}

/* =====================================================================
   5. Structure
   ===================================================================== */

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

/* Deux sections transparentes qui se suivent ne cumulent pas leur marge. */
.section + .section {
  padding-top: 0;
}

.section--surface {
  background-color: var(--surface);
}

/* Une section teintée garde toujours son air en haut et en bas : sans quoi
   le fond colle à son titre. Ces deux règles ont la même spécificité que
   la précédente et la suivent, donc elles l'emportent. */
.section + .section--surface,
.section--surface + .section {
  padding-top: var(--section-y);
}

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.conteneur--texte {
  max-width: 52rem;
}

.entete-page {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-7);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
}

.entete-page__titre {
  max-width: 18ch;
  font-size: var(--fs-4xl);
}

.entete-page__chapo {
  max-width: 52ch;
  line-height: var(--lh-large);
  color: var(--text-soft);
}

.entete-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-7);
  text-align: center;
}

.entete-section__ligne {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  width: 100%;
}

.entete-section__titre {
  font-size: var(--fs-3xl);
}

.entete-section__chapo {
  max-width: 56ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-large);
  color: var(--text-muted);
}

.branche {
  flex: 0 1 5rem;
  width: 5rem;
  height: 1rem;
  color: var(--line-forte);
}

.branche--retournee {
  transform: scaleX(-1);
}

@media (max-width: 40rem) {
  .branche {
    display: none;
  }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--text-muted);
}

.eyebrow__etincelle {
  color: var(--accent-chaud);
}

/* Le seul trait coloré d'une page : il souligne un mot, une fois. Le Bourgeon
   pur de la charte a été jugé trop criard ; --accent-trait garde la même
   famille en plus sourd. Décoratif : ne jamais y faire porter de sens. */
.souligne {
  position: relative;
  color: var(--action);
  white-space: nowrap;
}

.souligne::after {
  content: "";
  position: absolute;
  left: -0.06em;
  right: -0.06em;
  bottom: 0.02em;
  height: 0.14em;
  border-radius: var(--r-pilule);
  background-color: var(--accent-trait);
  opacity: 0.8;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

.actions--centre {
  justify-content: center;
}

/* =====================================================================
   6. Boutons
   ===================================================================== */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0.75rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-pilule);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  transition: background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), transform var(--dur-court) var(--ease);
}

.bouton:active {
  transform: translateY(1px);
}

.bouton[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.bouton--grand {
  min-height: 52px;
  padding: 0.95rem 2rem;
  font-size: var(--fs-base);
}

.bouton--principal {
  background-color: var(--action);
  border-color: var(--action);
  color: #fff;
  box-shadow: var(--ombre-sm);
}

.bouton--principal:hover {
  background-color: var(--action-survol);
  border-color: var(--action-survol);
  box-shadow: var(--ombre);
}

.bouton--secondaire {
  border-color: var(--text);
  color: var(--text);
}

.bouton--secondaire:hover {
  background-color: var(--text);
  color: var(--surface);
}

.bouton--discret {
  min-height: 44px;
  padding: 0.65rem 0.25rem;
  color: var(--action);
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

.bouton--discret:hover {
  color: var(--action-survol);
  text-decoration-thickness: 2px;
}

.bouton__fleche {
  transition: transform var(--dur) var(--ease);
}

.bouton:hover .bouton__fleche {
  transform: translateX(3px);
}

.bouton__etincelle {
  color: var(--accent-chaud);
}

.bouton--secondaire .bouton__etincelle,
.bouton--discret .bouton__etincelle {
  color: var(--accent-encre);
}

/* =====================================================================
   7. En-tête
   ===================================================================== */

.entete {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.entete__barre {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  max-width: var(--largeur);
  min-height: var(--entete-h);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.entete__marque {
  justify-self: center;
  display: block;
  padding: var(--sp-2);
  border-radius: var(--r-sm);
}

.entete__marque img {
  width: auto;
  height: 2.4rem;
}

.entete__nav {
  display: none;
  align-items: center;
  gap: var(--sp-5);
}

.entete__lien {
  position: relative;
  padding: var(--sp-2) 0;
  font-size: var(--fs-sm);
  color: var(--text-soft);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}

/* Porte la zone cliquable à 44 px sans éloigner le soulignement du texte. */
.entete__lien::before {
  content: "";
  position: absolute;
  inset: -4px 0;
}

.entete__lien::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background-color: var(--accent-trait);
  opacity: 0.8;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.entete__lien:hover {
  color: var(--text);
}

.entete__lien:hover::after,
.entete__lien[aria-current="page"]::after {
  transform: scaleX(1);
}

.entete__lien[aria-current="page"] {
  color: var(--text);
  font-weight: 700;
}

.entete__droite {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-4);
}

.entete__bascule {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  color: var(--text);
}

.entete__bascule:hover {
  background-color: var(--bg-alt);
}

/* ---- Panneau mobile -------------------------------------------------
   Hors du <header> : son backdrop-filter en ferait le bloc conteneur
   d'un élément en position fixed. Seuls transform et opacity sont
   animés, donc aucune propriété de mise en page n'est recalculée.      */

.panneau {
  position: fixed;
  inset: var(--entete-h) 0 0;
  z-index: 60;
  border-top: 1px solid var(--line);
  background-color: var(--surface);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.75rem);
  transition: transform var(--dur-long) var(--ease),
    opacity var(--dur) var(--ease), visibility 0s linear var(--dur-long);
}

.panneau[data-ouvert="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: transform var(--dur-long) var(--ease),
    opacity var(--dur) var(--ease), visibility 0s;
}

.panneau__contenu {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.panneau__nav {
  display: flex;
  flex-direction: column;
  padding: var(--sp-2) var(--gouttiere);
}

.panneau__lien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 56px;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-titre);
  font-size: var(--fs-xl);
  color: var(--text);
}

.panneau__lien[aria-current="page"] {
  color: var(--action);
}

.panneau__pied {
  margin-top: auto;
  padding: var(--sp-5) var(--gouttiere) var(--sp-7);
  border-top: 1px solid var(--line);
}

.panneau__contact {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

@media (min-width: 60rem) {
  .entete__barre {
    grid-template-columns: 1fr auto 1fr;
  }

  .entete__nav {
    display: flex;
  }

  .entete__nav--gauche {
    justify-self: start;
  }

  .entete__marque img {
    height: 2.75rem;
  }

  .entete__bascule,
  .panneau {
    display: none;
  }
}

/* =====================================================================
   8. Fil d'encre — la signature du site
   ===================================================================== */

.fil-zone {
  position: relative;
}

.fil {
  display: none;
}

.fil__trace {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

@media (min-width: 64rem) {
  .fil {
    display: block;
    position: absolute;
    inset-block: 0;
    left: max(0.75rem, calc((100vw - var(--largeur)) / 2 - 3.25rem));
    z-index: 1;
    width: 3.5rem;
    height: 100%;
    pointer-events: none;
  }
}

@media (min-width: 90rem) {
  .fil {
    width: 4.5rem;
  }
}

/* =====================================================================
   9. Accueil
   ===================================================================== */

.hero {
  padding-block: clamp(2.5rem, 6vw, 5rem) var(--section-y);
}

.hero__interieur {
  position: relative; /* repère des étoiles d'ambiance */
  display: grid;
  gap: var(--sp-7);
  align-items: center;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.hero__texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}

.hero__titre {
  max-width: 13ch;
  font-size: var(--fs-4xl);
}

.hero__chapo {
  max-width: 42ch;
  line-height: var(--lh-large);
  color: var(--text-soft);
}

.hero__note {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.hero__visuel {
  position: relative;
}

.hero__carte {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background-color: var(--surface);
  box-shadow: var(--ombre-lg);
}

.hero__carte img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 64rem) {
  .hero__interieur {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: var(--sp-8);
  }

  .hero__titre {
    font-size: clamp(2.75rem, 3.4vw + 1.5rem, 4rem);
  }
}

/* ---- Tampon d'atelier ----------------------------------------------- */

.tampon {
  position: absolute;
  right: -0.75rem;
  bottom: -1.5rem;
  display: grid;
  place-items: center;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: var(--r-pilule);
  background-color: var(--surface);
  box-shadow: var(--ombre);
  color: var(--c-epine);
  transform: rotate(-9deg);
}

.tampon__disque {
  width: 100%;
  height: 100%;
}

.tampon__bord {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.tampon__bord--fin {
  stroke-width: 0.8;
  opacity: 0.55;
}

.tampon__texte {
  fill: currentColor;
  font-family: var(--font-mono);
  font-size: 8.4px;
  font-weight: 700;
  letter-spacing: 0.11em;
}

/* Illustration de la charte, servie en 2x. Le fichier est recadré au ras de
   l'encre visible : il n'a aucune marge, donc centrer la boîte centre le
   dessin. Ne pas régénérer ce PNG avec un simple getbbox() — la source traîne
   un halo à peine opaque qui déborde de 172 px à gauche et décale tout. */
.tampon__cactus {
  position: absolute;
  width: 2.1875rem;
  height: auto;
}

@media (max-width: 48rem) {
  .tampon {
    width: 5.75rem;
    height: 5.75rem;
  }
}

/* ---- Catégories ------------------------------------------------------ */

/* Sept vignettes : aucun nombre de colonnes ne tombe juste, il restera
   toujours une ligne incomplète. On la centre pour qu'elle paraisse voulue
   plutôt qu'orpheline — d'où le flex, qu'une grille ne sait pas faire.
   Quatre par ligne au large, donc 4 + 3. */
.categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
}

.categories > li {
  flex: 1 1 9.5rem;
  max-width: 16rem;
}

@media (min-width: 60rem) {
  .categories > li {
    flex-basis: calc(25% - var(--sp-4));
  }
}

.categorie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  height: 100%;
  padding: var(--sp-5) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background-color: var(--surface);
  text-align: center;
  transition: border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.categorie:hover {
  border-color: var(--line-forte);
  background-color: var(--surface-haute);
  transform: translateY(-3px);
}

.categorie__icone {
  color: var(--c-epine);
}

.categorie__nom {
  font-family: var(--font-titre);
  font-weight: 600;
  color: var(--text);
}

.categorie__resume {
  font-size: var(--fs-2xs);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}

/* ---- Étapes ---------------------------------------------------------- */

/* Colonnes déclarées explicitement plutôt qu'en auto-fit : le pointillé de
   liaison n'a de sens que si l'on sait combien d'étapes tiennent par ligne. */
.etapes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6) var(--sp-5);
}

.etape {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
}

/* Une colonne : le pointillé descend d'une étape à la suivante. */
.etape:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--sp-6));
  height: var(--sp-6);
  border-left: 2px dashed var(--line-forte);
  opacity: 0.55;
}

/* Deux colonnes : deux lignes de deux, aucune liaison ne serait juste. */
@media (min-width: 34rem) {
  .etapes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .etape:not(:last-child)::after {
    content: none;
  }
}

/* Quatre de front : la liaison redevient horizontale, comme sur la maquette. */
@media (min-width: 62rem) {
  .etapes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .etape:not(:last-child)::after {
    content: "";
    top: 3.4rem;
    bottom: auto;
    left: calc(50% + 3.25rem);
    width: calc(100% - 6.5rem);
    height: 0;
    border-left: 0;
    border-top: 2px dashed var(--line-forte);
    opacity: 0.6;
  }
}

.etape__numero {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: var(--r-pilule);
  background-color: var(--c-epine);
  color: var(--c-ivoire);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.etape__rond {
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  border: 1.5px solid var(--line-forte);
  border-radius: var(--r-pilule);
  background-color: var(--bg);
  color: var(--c-epine);
}

.section--surface .etape__rond {
  background-color: var(--surface);
}

.etape__titre {
  font-size: var(--fs-lg);
}

.etape__texte {
  max-width: 24ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-large);
  color: var(--text-muted);
}

/* ---- Aperçu et cartes ------------------------------------------------ */

.apercu {
  display: grid;
  gap: var(--sp-6);
}

.apercu__texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}

.apercu__titre {
  max-width: 12ch;
  font-size: var(--fs-3xl);
}

.apercu__chapo {
  max-width: 40ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-large);
  color: var(--text-muted);
}

.grille-creations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--sp-5);
}

.grille-creations--large {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

@media (min-width: 64rem) {
  .apercu {
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 2fr);
    gap: var(--sp-8);
    align-items: start;
  }

  .apercu__texte {
    position: sticky;
    top: calc(var(--entete-h) + var(--sp-6));
  }
}

.carte {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background-color: var(--surface-haute);
  box-shadow: var(--ombre-sm);
  transition: box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.carte:hover {
  border-color: var(--line-forte);
  box-shadow: var(--ombre);
  transform: translateY(-3px);
}

.carte:focus-within {
  border-color: var(--action);
}

.carte__visuel {
  width: 100%;
  /* Les mockups fournis sont carrés. Ils sont déjà inscrits dans un carré au
     format, donc « cover » ne rogne rien. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background-color: var(--bg-alt);
}

/* ---- Carrousel d'une création ---------------------------------------
   Le défilement est natif : sans JavaScript la piste reste balayable au
   doigt et navigable au clavier. Les flèches et les puces sont ajoutées
   par le script, donc jamais affichées si elles ne peuvent rien faire. */

.carrousel {
  position: relative;
}

.carrousel__piste {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.carrousel__piste::-webkit-scrollbar {
  display: none;
}

.carrousel__piste:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}

.carrousel__vue {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

.carrousel__fleche {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border: 1px solid var(--line);
  border-radius: var(--r-pilule);
  background-color: var(--surface-haute);
  color: var(--text);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.carrousel__fleche--prec { left: var(--sp-2); }
.carrousel__fleche--suiv { right: var(--sp-2); }

/* Au doigt on balaie, la flèche ne sert qu'à la souris et au clavier. */
.carrousel:hover .carrousel__fleche,
.carrousel__fleche:focus-visible {
  opacity: 1;
}

.carrousel__fleche[disabled] {
  opacity: 0;
  pointer-events: none;
}

.carrousel__puces {
  position: absolute;
  bottom: var(--sp-2);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.carrousel__puce {
  /* 24 px : le plancher de cible tactile. Le point visible, lui, fait 7 px. */
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pilule);
  background: none;
  cursor: pointer;
}

/* C'est le pseudo-élément qui porte la couleur : la surface cliquable reste
   confortable sans que le point grossisse. */
.carrousel__puce::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: 0 auto;
  border-radius: var(--r-pilule);
  background-color: var(--c-sauge);
  box-shadow: 0 0 0 1px rgb(255 253 248 / 0.9);
  transition: background-color var(--dur) var(--ease);
}

.carrousel__puce[aria-current="true"]::before {
  background-color: var(--c-epine);
}

.carrousel__compte {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-pilule);
  background-color: rgb(255 253 248 / 0.92);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
}

.carte__corps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
  padding: var(--sp-5);
}

.carte__etiquette {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--text-muted);
}

.carte__titre {
  font-size: var(--fs-xl);
}

.carte__accroche {
  font-size: var(--fs-sm);
  line-height: var(--lh-large);
  color: var(--text-muted);
}

.carte__meta {
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--line);
  font-size: var(--fs-2xs);
  letter-spacing: 0.03em;
  color: var(--text-soft);
}

.carte__lien {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  margin-top: auto;
  padding-top: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--action);
}

.carte__lien:hover {
  color: var(--action-survol);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.carte__lien:hover .bouton__fleche {
  transform: translateX(3px);
}

/* ---- Engagements ------------------------------------------------------ */

.engagements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--sp-5);
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background-color: var(--surface);
}

.engagement {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.engagement__icone {
  color: var(--c-epine);
}

.engagement__titre {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
}

.engagement__texte {
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  line-height: var(--lh-large);
  color: var(--text-muted);
}

@media (min-width: 48rem) {
  .engagements {
    padding: var(--sp-7);
  }
}

/* ---- Appel à contact -------------------------------------------------- */

.appel {
  position: relative; /* repère des deux étoiles en pseudo-éléments */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-5);
  border: 1.5px dashed var(--line-forte);
  border-radius: var(--r-xl);
  background-color: var(--c-rayon);
  text-align: center;
}

.appel__icone {
  color: var(--c-epine);
}

.appel__titre {
  max-width: 22ch;
  font-size: var(--fs-3xl);
}

.appel__texte {
  max-width: 48ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-large);
  color: var(--text-soft);
}

@media (min-width: 64rem) {
  .appel {
    padding-inline: var(--sp-8);
  }
}

/* =====================================================================
   10. Galerie des créations
   ===================================================================== */

.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.filtre {
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pilule);
  background-color: var(--surface);
  font-size: var(--fs-sm);
  color: var(--text-soft);
  transition: border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.filtre:hover {
  border-color: var(--line-forte);
  color: var(--text);
}

.filtre[aria-pressed="true"] {
  border-color: var(--c-epine);
  background-color: var(--c-epine);
  color: var(--c-ivoire);
  font-weight: 700;
}

.compte {
  margin-bottom: var(--sp-5);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.galerie__vide {
  max-width: 52ch;
  margin-top: var(--sp-5);
  padding: var(--sp-6);
  border: 1.5px dashed var(--line-forte);
  border-radius: var(--r-lg);
  background-color: var(--surface);
  font-size: var(--fs-sm);
  line-height: var(--lh-large);
  color: var(--text-muted);
}

.galerie__vide a {
  color: var(--action);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* =====================================================================
   11. Personnalisation
   ===================================================================== */

.etapes-detail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  max-width: 54rem;
  margin-inline: auto;
}

.etape-detail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background-color: var(--surface-haute);
}

.etape-detail__marque {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.etape-detail__icone {
  color: var(--c-epine);
  opacity: 0.75;
}

.etape-detail__titre {
  font-size: var(--fs-xl);
}

.etape-detail__resume {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--action);
}

.etape-detail__texte {
  max-width: 58ch;
  margin-top: var(--sp-2);
  font-family: var(--font-titre);
  line-height: var(--lh-large);
  color: var(--text-soft);
}

.preparer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--sp-5);
}

.preparer__carte {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background-color: var(--surface);
}

.preparer__icone {
  color: var(--c-epine);
}

.preparer__titre {
  font-size: var(--fs-lg);
}

.preparer__texte {
  font-size: var(--fs-sm);
  line-height: var(--lh-large);
  color: var(--text-muted);
}

.bandeau {
  display: grid;
  gap: var(--sp-6);
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background-color: var(--c-rayon);
}

.bandeau__titre {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-2xl);
}

.liste-check {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.liste-check li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

.liste-check svg {
  margin-top: 0.15em;
  color: var(--action);
}

.encart {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1.5px dashed var(--line-forte);
  border-radius: var(--r);
  background-color: var(--surface-haute);
}

.encart__titre {
  font-size: var(--fs-lg);
}

.encart__texte {
  font-size: var(--fs-sm);
  line-height: var(--lh-large);
  color: var(--text-muted);
}

.encart__lien {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--action);
}

.encart__lien:hover {
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

.faq {
  display: grid;
  gap: var(--sp-5);
}

.faq__item {
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
}

.faq dt {
  font-family: var(--font-titre);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--text);
}

.faq dd {
  max-width: 62ch;
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-large);
  color: var(--text-muted);
}

@media (min-width: 56rem) {
  .bandeau {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-7);
    padding: var(--sp-7);
  }

  .faq {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5) var(--sp-7);
  }
}

/* =====================================================================
   12. À propos
   ===================================================================== */

.presentation {
  display: grid;
  gap: var(--sp-6);
}

.presentation__portrait {
  max-width: 26rem;
}

.presentation__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-lg);
  background-color: var(--bg-alt);
  box-shadow: var(--ombre);
}

.nom {
  display: grid;
  gap: var(--sp-7);
}

.nom__titre {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-3xl);
}

.valeurs {
  display: grid;
  gap: var(--sp-4);
}

.valeurs li {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background-color: var(--surface-haute);
}

.valeurs svg {
  color: var(--c-epine);
}

.valeurs h3 {
  font-size: var(--fs-lg);
}

.valeurs p {
  font-size: var(--fs-sm);
  line-height: var(--lh-large);
  color: var(--text-muted);
}

@media (min-width: 48rem) {
  .valeurs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .presentation {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--sp-8);
    align-items: start;
  }

  .presentation__portrait {
    position: sticky;
    top: calc(var(--entete-h) + var(--sp-6));
  }
}

/* =====================================================================
   13. Contact
   ===================================================================== */

.contact {
  display: grid;
  gap: var(--sp-7);
  align-items: start;
}

@media (min-width: 64rem) {
  .contact {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.85fr);
    gap: var(--sp-8);
  }

  .aside {
    position: sticky;
    top: calc(var(--entete-h) + var(--sp-6));
  }
}

.formulaire {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
  width: 100%;
}

.formulaire__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--sp-5);
  width: 100%;
}

.champ {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.champ--large {
  width: 100%;
}

.champ label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
}

.champ label span {
  color: var(--accent-encre);
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background-color: var(--surface-haute);
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  color: var(--text);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.champ textarea {
  min-height: 10rem;
  line-height: var(--lh-large);
  resize: vertical;
}

.champ input:hover,
.champ select:hover,
.champ textarea:hover {
  border-color: var(--line-forte);
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  border-color: var(--action);
  box-shadow: 0 0 0 3px var(--action-doux);
}

.champ [aria-invalid="true"] {
  border-color: var(--danger);
}

.champ__aide {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}

.champ__erreur {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--danger);
}

.alerte {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-4);
  border: 1.5px solid var(--danger);
  border-radius: var(--r-sm);
  background-color: #fbeceb;
  font-size: var(--fs-sm);
  color: var(--danger);
}

.consentement {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-4);
  border: 1px dashed var(--line-forte);
  border-radius: var(--r-sm);
}

/* 24 px : seuil minimal de cible WCAG 2.5.8. Le libellé reste cliquable
   et forme la vraie surface de clic. */
.consentement input {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.05rem;
  accent-color: var(--action);
}

.consentement label {
  font-size: var(--fs-xs);
  line-height: var(--lh-large);
  color: var(--text-muted);
}

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

.succes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-7) var(--sp-6);
  border: 1.5px solid var(--action);
  border-radius: var(--r-lg);
  background-color: var(--action-doux);
}

.succes__icone {
  color: var(--action);
}

.succes__titre {
  font-size: var(--fs-2xl);
}

.succes__texte {
  max-width: 48ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-large);
  color: var(--text-soft);
}

.aside {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.bloc {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background-color: var(--surface);
}

.bloc__titre {
  margin-bottom: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--text-muted);
}

.bloc__lien {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;
  font-size: var(--fs-sm);
  color: var(--text);
  overflow-wrap: anywhere;
}

.bloc__lien svg {
  color: var(--c-epine);
}

.bloc__lien:hover {
  color: var(--action);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.bloc__suite {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-left: 1.2rem;
  list-style: decimal;
  font-size: var(--fs-sm);
  line-height: var(--lh-large);
  color: var(--text-soft);
}

.bloc__rgpd {
  font-size: var(--fs-xs);
  line-height: var(--lh-large);
  color: var(--text-muted);
}

.bloc__rgpd a {
  color: var(--action);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* =====================================================================
   14. Page introuvable
   ===================================================================== */

.introuvable,
.attente {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-7);
  text-align: center;
}

.introuvable__logo {
  width: auto;
  height: 7rem;
  opacity: 0.9;
}

.introuvable__titre,
.attente__titre {
  font-size: var(--fs-3xl);
}

.introuvable__texte,
.attente__texte {
  max-width: 46ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-large);
  color: var(--text-muted);
}

/* ---- Page d'attente -------------------------------------------------- */

/* Le cactus de la charte, servi ici en pleine page. La hauteur est bornee en
   vh pour qu'il ne mange pas l'ecran sur un mobile couche. */
.attente__logo {
  width: auto;
  height: clamp(6rem, 22vh, 10rem);
}

.attente__contact {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* La page d'attente n'a ni navigation ni colonnes de liens : le pied se
   reduit a sa derniere ligne. */
.pied--nu {
  margin-top: var(--sp-7);
}

.pied--nu .pied__bas {
  justify-content: center;
  text-align: center;
}

/* =====================================================================
   15. Pied de page
   ===================================================================== */

.pied {
  /* Contrastes sur #5d6a34 : ivoire 5.1:1, doux 4.6:1 */
  --pied-texte: var(--c-ivoire);
  --pied-doux: #e8e4d4;
  --pied-ligne: rgba(254, 247, 237, 0.22);

  margin-top: var(--section-y);
  padding: var(--sp-8) var(--gouttiere) var(--sp-5);
  background-color: var(--c-epine);
  color: var(--pied-texte);
}

.pied__contenu {
  display: grid;
  gap: var(--sp-7);
  max-width: var(--largeur);
  margin-inline: auto;
}

.pied__marque {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}

.pied__marque img {
  width: auto;
  height: 4.5rem;
}

.pied__baseline {
  max-width: 30ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-large);
  color: var(--pied-doux);
}

.pied__reseaux {
  display: flex;
  gap: var(--sp-3);
}

.pied__rond {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--pied-ligne);
  border-radius: var(--r-pilule);
  color: var(--pied-texte);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.pied__rond:hover {
  background-color: rgba(254, 247, 237, 0.14);
  border-color: var(--pied-texte);
}

.pied__colonne {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.pied__titre {
  font-family: var(--font-titre);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--pied-texte);
}

.pied__liste {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.pied__liste a {
  display: inline-block;
  padding: 0.75rem 0;
  font-size: var(--fs-sm);
  color: var(--pied-doux);
  transition: color var(--dur) var(--ease);
}

.pied__liste a:hover {
  color: var(--pied-texte);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.pied__etiquette {
  width: 8.5rem;
  height: auto;
  color: var(--pied-doux);
  justify-self: start;
}

.pied__merci {
  font-family: var(--font-titre);
  font-size: 26px;
  font-style: italic;
}

.pied__mention {
  max-width: var(--largeur);
  margin: var(--sp-7) auto 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--pied-ligne);
  font-size: var(--fs-xs);
  line-height: var(--lh-large);
  color: var(--pied-doux);
}

@media (min-width: 48rem) {
  .pied__contenu {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--sp-8) var(--sp-6);
  }

  .pied__etiquette {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    transform: rotate(4deg);
  }
}

@media (min-width: 64rem) {
  .pied__contenu {
    grid-template-columns: 1.5fr 1fr 1fr 0.8fr;
  }

  .pied__etiquette {
    grid-column: 4;
    width: 9.5rem;
  }

  .pied__mention {
    text-align: center;
  }
}