/* ==========================================================================
   L'Atelier des Actifs — feuille de style unique (§9 du brief)
   Direction artistique retenue : « le carnet de relevé » (voir étape 2).
   Points de rupture de référence pour les tests, pas pour la cascade :
   320 / 375 / 768 / 1024 / 1440 / 1920.
   ========================================================================== */

@font-face {
  font-family: 'Piazzolla';
  src: url('/assets/fonts/piazzolla-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bodoni Moda';
  src: url('/assets/fonts/bodoni-moda-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Fichiers de police à ajouter dans public/assets/fonts/ — voir README (étape 10). */

:root {
  /* Palette — direction D, palette reprise de la direction C (voir étape 2). */
  --couleur-fond: #F2EFEA;        /* ivoire carnet */
  --couleur-texte: #221F1D;       /* noir carnet */
  --couleur-kraft: #C9BBA0;       /* séparateurs, fonds de section */
  --couleur-accent: #3F5A48;      /* vert sourdine — accent unique */
  --couleur-texte-att: #6A6862;   /* gris note — texte secondaire, métadonnées (assombri pour 4,5:1 sur --couleur-fond) */
  --couleur-or-cta: #A27A2A;      /* or du logo, éclairci pour 3:1 sur --couleur-fond — élément non textuel (liseret CTA) uniquement */
  --couleur-or-texte: #856423;    /* or assombri pour 4,5:1 sur --couleur-fond — seul à utiliser sur du texte lisible */

  /* Typographie — deux familles, rôles distincts. */
  --police-lecture: 'Piazzolla', Georgia, serif;              /* texte courant : voix éditoriale */
  --police-titres: 'Bodoni Moda', Georgia, serif;             /* h1/h2/h3 : police du logo, répliquée pour cohérence */
  --police-ui: 'IBM Plex Mono', 'Courier New', monospace;     /* nav, légendes, cotes, boutons : annotation */

  /* Échelle typographique fluide (clamp), base 16px. */
  --taille-texte: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --taille-petite: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --taille-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --taille-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --taille-h2: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  --taille-h1: clamp(2rem, 1.6rem + 2vw, 3.5rem);

  /* Échelle d'espacement. */
  --espace-1: 0.25rem;
  --espace-2: 0.5rem;
  --espace-3: 1rem;
  --espace-4: 1.5rem;
  --espace-5: 2.5rem;
  --espace-6: 4rem;
  --espace-7: 6rem;

  /* Mise en page. */
  --largeur-conteneur: 72rem;

  /* 100vh est faux sur mobile à cause de la barre d'adresse (§10 du brief). */
  --hauteur-app: 100dvh;
}

/* --------------------------------------------------------------------------
   Réinitialisation minimale
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  /* Compense le header collant : une ancre (#titre-faq...) ne doit pas se
     retrouver masquée sous lui au défilement. */
  scroll-padding-top: calc(var(--espace-7) + var(--espace-4));
}

body {
  margin: 0;
  background-color: var(--couleur-fond);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJuIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC4yMiIgbnVtT2N0YXZlcz0iNCIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPjwvZmlsdGVyPjxtYXNrIGlkPSJtIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWx0ZXI9InVybCgjbikiLz48L21hc2s+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI0M5QkJBMCIgbWFzaz0idXJsKCNtKSIgb3BhY2l0eT0iMC4yIi8+PC9zdmc+Cg==");
  background-repeat: repeat;
  color: var(--couleur-texte);
  font-family: var(--police-lecture);
  font-size: var(--taille-texte);
  line-height: 1.5;
}

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

a {
  color: inherit;
}

a:hover {
  text-decoration-color: var(--couleur-or-texte);
}

h1, h2, h3 {
  font-family: var(--police-titres);
  line-height: 1.15;
  margin: 0 0 var(--espace-3);
}

h1 { font-size: var(--taille-h1); }
h2 { font-size: var(--taille-h2); }
h3 { font-size: var(--taille-h3); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Accessibilité — focus et lien d'évitement
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--couleur-accent);
  outline-offset: 2px;
}

.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--couleur-accent);
  color: var(--couleur-fond);
  padding: var(--espace-2) var(--espace-3);
  font-family: var(--police-ui);
  z-index: 1000;
}

.lien-evitement:focus {
  left: var(--espace-3);
  top: var(--espace-3);
}

/* --------------------------------------------------------------------------
   Structure générale
   -------------------------------------------------------------------------- */

.conteneur {
  width: min(100% - 2 * var(--espace-4), var(--largeur-conteneur));
  margin-inline: auto;
}

.entete-site {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--couleur-fond);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJuIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC4yMiIgbnVtT2N0YXZlcz0iNCIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPjwvZmlsdGVyPjxtYXNrIGlkPSJtIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWx0ZXI9InVybCgjbikiLz48L21hc2s+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI0M5QkJBMCIgbWFzaz0idXJsKCNtKSIgb3BhY2l0eT0iMC4yIi8+PC9zdmc+Cg==");
  background-repeat: repeat;
}

.entete-site__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-4);
  padding-block: var(--espace-3);
  border-bottom: 1px solid var(--couleur-kraft);
}

.entete-site__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-2);
  padding-block: var(--espace-2);
}

.entete-site__logo-icone {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

.entete-site__logo-texte {
  width: auto;
  height: 1.1rem;
}

.entete-site__logo-empile {
  width: auto;
  height: 4rem;
}

.nav-principale ul,
.pied-site__liens ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-4);
  margin: 0;
  padding: 0;
  font-family: var(--police-ui);
  font-size: var(--taille-petite);
}

.pied-site__liens a {
  color: var(--couleur-or-texte);
}

.pied-site {
  margin-top: var(--espace-7);
  padding-block: var(--espace-6);
}

.pied-site__haut {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-5);
  border-top: 1px solid var(--couleur-kraft);
  padding-top: var(--espace-4);
  padding-bottom: var(--espace-5);
}

@media (min-width: 768px) {
  .pied-site__haut {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.pied-site__marque {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.pied-site__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-2);
  text-decoration: none;
  margin-bottom: var(--espace-4);
}

.pied-site__logo-empile {
  width: auto;
  height: 4rem;
}

.pied-site__reseaux {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espace-2);
  margin: 0;
  padding: 0;
}

.pied-site__reseaux a {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-1);
  color: var(--couleur-or-texte);
  font-family: var(--police-ui);
  font-size: var(--taille-petite);
  text-decoration: none;
}

.pied-site__reseaux svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
  flex-shrink: 0;
}

.pied-site__colonne ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--espace-2);
}

.pied-site__colonne a {
  font-family: var(--police-ui);
  font-size: var(--taille-petite);
  color: var(--couleur-texte-att);
  text-decoration: none;
}

.pied-site__colonne a:hover {
  text-decoration: underline;
}

.pied-site__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-3);
  margin-bottom: var(--espace-4);
}

.pied-site__copyright {
  font-family: var(--police-ui);
  font-size: var(--taille-petite);
  color: var(--couleur-texte-att);
  margin: 0;
}

.pied-site__mention {
  font-family: var(--police-ui);
  font-size: 0.7rem;
  color: var(--couleur-texte-att);
}

/* --------------------------------------------------------------------------
   Bouton — zone tactile ≥ 44×44px (définition du fini, CLAUDE.md)
   -------------------------------------------------------------------------- */

.bouton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: var(--espace-2) var(--espace-4);
  font-family: var(--police-ui);
  font-size: var(--taille-petite);
  text-decoration: none;
  border: 1px solid var(--couleur-accent);
}

.bouton--accent {
  background: var(--couleur-accent);
  color: var(--couleur-fond);
}

.bouton--accent::before {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -4px;
  height: 4px;
  background: linear-gradient(to right, transparent, var(--couleur-or-cta), transparent);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Planche-contact — élément signature de la direction artistique retenue.
   Cadres numérotés, chacun coté à l'échelle réelle (voir étape 2).
   -------------------------------------------------------------------------- */

.planche-contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-4);
}

@media (min-width: 768px) {
  .planche-contact {
    grid-template-columns: repeat(3, 1fr);
  }
}

.planche-contact__cadre {
  margin: 0;
  border: 1px solid var(--couleur-kraft);
  padding: var(--espace-3);
}

/* Repères d'angle façon planche de calage (passe-partout) — signale un
   emplacement réservé sans jamais simuler une œuvre (§ interdits rédactionnels,
   CLAUDE.md). */
.visuel-a-fournir {
  background-color: var(--couleur-fond);
  border: 1px solid var(--couleur-kraft);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--espace-4);
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--couleur-kraft), var(--couleur-kraft)),
    linear-gradient(var(--couleur-kraft), var(--couleur-kraft)),
    linear-gradient(var(--couleur-kraft), var(--couleur-kraft)),
    linear-gradient(var(--couleur-kraft), var(--couleur-kraft)),
    linear-gradient(var(--couleur-kraft), var(--couleur-kraft)),
    linear-gradient(var(--couleur-kraft), var(--couleur-kraft)),
    linear-gradient(var(--couleur-kraft), var(--couleur-kraft)),
    linear-gradient(var(--couleur-kraft), var(--couleur-kraft));
  background-size:
    22px 1px, 1px 22px,
    22px 1px, 1px 22px,
    22px 1px, 1px 22px,
    22px 1px, 1px 22px;
  background-position:
    top 20px left 20px, top 20px left 20px,
    top 20px right 20px, top 20px right 20px,
    bottom 20px left 20px, bottom 20px left 20px,
    bottom 20px right 20px, bottom 20px right 20px;
}

.visuel-a-fournir__texte {
  font-family: var(--police-ui);
  font-size: var(--taille-petite);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--couleur-texte-att);
  max-width: 16rem;
  line-height: 1.6;
}

.visuel-a-fournir__detail {
  display: block;
  text-transform: none;
  letter-spacing: normal;
  margin-top: var(--espace-2);
}

figcaption {
  font-family: var(--police-ui);
  font-size: var(--taille-petite);
  color: var(--couleur-texte-att);
  margin-top: var(--espace-2);
}

/* --------------------------------------------------------------------------
   Page d'accueil (étape 4)
   -------------------------------------------------------------------------- */

.section-hero,
.section-differenciateurs,
.section-triangle,
.section-distinction,
.section-planche-contact {
  padding-block: var(--espace-6);
}

.section-hero {
  padding-top: var(--espace-7);
}

.section-hero__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-5);
  align-items: center;
}

@media (min-width: 1024px) {
  .section-hero__grille {
    grid-template-columns: 3fr 2fr;
  }
}

.titre-kicker {
  font-family: var(--police-ui);
  font-size: var(--taille-petite);
  color: var(--couleur-or-texte);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--espace-3);
}

/* Titre de section autonome (pas un kicker au-dessus d'un h1) : écart
   important et identique avant le contenu, référence = Comment ça fonctionne. */
.titre-kicker--section {
  margin-bottom: var(--espace-6);
}

.section-hero__sous-titre {
  color: var(--couleur-texte-att);
  max-width: 38rem;
  margin: 0 0 var(--espace-4);
}

.section-intro {
  color: var(--couleur-texte-att);
}

.section-hero__visuel {
  aspect-ratio: 4 / 5;
  min-height: 16rem;
  border: 1px solid var(--couleur-kraft);
  overflow: hidden;
}

.section-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-principal {
  margin-top: var(--espace-4);
}

.cta-principal--bas {
  text-align: center;
  margin-block: var(--espace-6);
}

/* Différenciateurs — numérotés, pas de cartes à ombre portée (proscrit, §11). */

.liste-differenciateurs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-5);
}

@media (min-width: 768px) {
  .liste-differenciateurs {
    /* auto-fit : s'adapte à 3 ou 4 items sans media query dédiée par page. */
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
}

.liste-differenciateurs__item {
  border-top: 1px solid var(--couleur-kraft);
  padding-top: var(--espace-3);
}

.liste-differenciateurs__numero {
  display: block;
  font-family: var(--police-ui);
  font-size: var(--taille-petite);
  color: var(--couleur-or-texte);
  margin-bottom: var(--espace-2);
}

.liste-differenciateurs__item p {
  color: var(--couleur-texte-att);
}

/* Ce qui nous distingue — contraste « ailleurs / chez nous ». */

.liste-distinction {
  list-style: none;
  margin: var(--espace-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--espace-4);
  max-width: 42rem;
}

.liste-distinction__item {
  border-left: 2px solid var(--couleur-kraft);
  padding-left: var(--espace-4);
}

.liste-distinction__ailleurs {
  font-family: var(--police-ui);
  font-size: var(--taille-petite);
  color: var(--couleur-texte-att);
  text-decoration: line-through;
  margin: 0 0 var(--espace-1);
}

.liste-distinction__nous {
  font-size: var(--taille-lead);
  margin: 0;
}

/* Frise chronologique — accueil uniquement : ligne + marqueurs circulaires. */

.frise {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-6);
}

@media (min-width: 768px) {
  .frise {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--espace-5);
  }
}

.frise__etape {
  position: relative;
  padding-top: var(--espace-4);
  border-top: 1px solid var(--couleur-kraft);
}

.frise__marqueur {
  position: absolute;
  top: -0.7rem;
  left: 0;
  width: 1.4rem;
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--couleur-or-cta);
  border-radius: 50%;
  background: var(--couleur-fond);
}

.frise__marqueur::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--couleur-or-cta);
}

.frise__numero {
  display: block;
  font-family: var(--police-ui);
  font-size: var(--taille-petite);
  color: var(--couleur-or-texte);
  margin: var(--espace-3) 0 var(--espace-2);
}

.frise__etape p {
  color: var(--couleur-texte-att);
}

/* Triangle des trois acteurs. */

.triangle__noeuds {
  list-style: none;
  margin: 0 0 var(--espace-4);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--espace-4);
}

@media (min-width: 768px) {
  .triangle__noeuds {
    grid-template-columns: repeat(3, 1fr);
  }
}

.triangle__noeud {
  position: relative;
  padding-top: var(--espace-4);
  border-top: 1px solid var(--couleur-kraft);
}

.triangle__marqueur {
  position: absolute;
  top: -0.7rem;
  left: 0;
  width: 1.4rem;
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--couleur-or-cta);
  border-radius: 50%;
  background: var(--couleur-fond);
}

.triangle__marqueur::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--couleur-or-cta);
}

.triangle__role {
  font-family: var(--police-ui);
  font-size: var(--taille-petite);
  color: var(--couleur-texte-att);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: var(--espace-3) 0 var(--espace-2);
}

.triangle__noeud h3 {
  font-size: var(--taille-h3);
}

.triangle__noeud p {
  color: var(--couleur-texte-att);
}

/* --------------------------------------------------------------------------
   Simulateur (étape 5)
   -------------------------------------------------------------------------- */

.section-simulateur {
  padding-block: var(--espace-7) var(--espace-6);
}

/* Par défaut : navigateur supposé sans JavaScript. simulateur.js retire cette
   classe au démarrage (§5 du brief — dégradation sans JS). */
body.js-requis .simulateur {
  display: none;
}

.simulateur {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-5);
  margin-top: var(--espace-5);
}

@media (min-width: 1024px) {
  .simulateur {
    grid-template-columns: 3fr 2fr;
    align-items: start;
  }
}

.simulateur__commandes > * + * {
  margin-top: var(--espace-5);
}

.champ-valeur__ligne {
  display: flex;
  align-items: center;
  gap: var(--espace-3);
  flex-wrap: wrap;
}

.champ-valeur__ligne input[type='range'] {
  flex: 1 1 12rem;
  min-width: 10rem;
  height: 44px;
}

.champ-valeur__ligne input[type='number'] {
  width: 7rem;
  min-height: 44px;
  font-family: var(--police-ui);
  font-size: var(--taille-texte);
  padding: var(--espace-2);
  border: 1px solid var(--couleur-kraft);
  background: var(--couleur-fond);
  color: var(--couleur-texte);
}

.champ-valeur__deduit {
  font-family: var(--police-ui);
  font-size: var(--taille-petite);
  margin: var(--espace-2) 0 0;
}

.champ-valeur__precision {
  font-size: var(--taille-petite);
  color: var(--couleur-texte-att);
  margin: var(--espace-1) 0 0;
}

.champ-duree {
  border: 0;
  padding: 0;
  margin: 0;
}

.champ-duree legend {
  font-family: var(--police-ui);
  font-size: var(--taille-petite);
  padding: 0;
  margin-bottom: var(--espace-2);
}

.champ-duree label {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-2);
  min-height: 44px;
  margin-right: var(--espace-4);
}

.simulateur__resultat {
  border: 1px solid var(--couleur-kraft);
  padding: var(--espace-4);
}

.simulateur__resultat dl {
  margin: 0;
}

.simulateur__resultat dl > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--espace-3);
  padding-block: var(--espace-2);
  border-top: 1px solid var(--couleur-kraft);
}

.simulateur__resultat dl > div:first-child {
  border-top: 0;
}

.simulateur__resultat dt {
  font-family: var(--police-ui);
  font-size: var(--taille-petite);
  color: var(--couleur-texte-att);
}

.simulateur__resultat dd {
  margin: 0;
  font-family: var(--police-lecture);
  font-size: var(--taille-h3);
  text-align: right;
  transition: opacity 150ms ease;
}

.simulateur__resultat .bouton {
  margin-top: var(--espace-4);
  width: 100%;
}

@media (max-width: 1023.98px) {
  .simulateur__resultat {
    position: sticky;
    bottom: 0;
    background: var(--couleur-fond);
    z-index: 5;
  }
}

.simulateur__mentions {
  list-style: none;
  display: grid;
  gap: var(--espace-2);
  margin: var(--espace-5) 0 0;
  padding: var(--espace-4) 0 0;
  border-top: 1px solid var(--couleur-kraft);
  font-family: var(--police-ui);
  font-size: var(--taille-petite);
  color: var(--couleur-texte-att);
}

.simulateur__secours {
  max-width: 38rem;
  margin-top: var(--espace-5);
}

/* --------------------------------------------------------------------------
   Comment ça marche (étape 6)
   -------------------------------------------------------------------------- */

.section-deroule {
  padding-block: var(--espace-7) var(--espace-6);
}

.deroule-detaille {
  list-style: none;
  margin: var(--espace-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--espace-5);
}

.deroule-detaille__item {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--espace-4);
  border-top: 1px solid var(--couleur-kraft);
  padding-top: var(--espace-4);
}

.deroule-detaille__numero {
  font-family: var(--police-ui);
  font-size: var(--taille-h3);
  color: var(--couleur-accent);
}

.deroule-detaille__item h3 {
  margin-bottom: var(--espace-1);
}

.deroule-detaille__item p {
  color: var(--couleur-texte-att);
}

.deroule-detaille__qui {
  font-family: var(--police-ui);
  font-size: var(--taille-petite);
  color: var(--couleur-texte-att);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 var(--espace-2);
}

.section-faq {
  padding-block: var(--espace-6);
}

.faq-theme + .faq-theme {
  margin-top: var(--espace-5);
}

.faq-theme__titre {
  font-family: var(--police-ui);
  font-size: var(--taille-petite);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--couleur-texte-att);
  margin: var(--espace-5) 0 0;
}

.faq-theme:first-child .faq-theme__titre {
  margin-top: var(--espace-4);
}

.liste-faq {
  display: grid;
  gap: var(--espace-2);
  margin-top: var(--espace-3);
}

.liste-faq__item {
  border: 1px solid var(--couleur-kraft);
  padding: var(--espace-2) var(--espace-3);
}

.liste-faq__item p {
  color: var(--couleur-texte-att);
}

.liste-faq__item summary {
  font-family: var(--police-lecture);
  font-size: var(--taille-texte);
  font-weight: 700;
  cursor: pointer;
  padding-block: var(--espace-1);
}

.liste-faq__item[open] summary {
  margin-bottom: var(--espace-2);
}

.liste-faq__item summary:focus-visible {
  outline: 3px solid var(--couleur-accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Galeries (étape 6)
   -------------------------------------------------------------------------- */

.section-attendus {
  padding-block: var(--espace-6);
  border-top: 1px solid var(--couleur-kraft);
}

.liste-attendus {
  list-style: none;
  margin: var(--espace-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-4);
}

@media (min-width: 768px) {
  .liste-attendus {
    grid-template-columns: repeat(3, 1fr);
  }
}

.liste-attendus__item {
  border-top: 1px solid var(--couleur-kraft);
  padding-top: var(--espace-3);
}

.liste-attendus__item p {
  color: var(--couleur-texte-att);
}

/* --------------------------------------------------------------------------
   Formulaire de contact (étape 7)
   -------------------------------------------------------------------------- */

.section-contact {
  padding-block: var(--espace-7) var(--espace-6);
}

.contact-erreur {
  border: 1px solid var(--couleur-accent);
  padding: var(--espace-3) var(--espace-4);
  margin: var(--espace-4) 0;
  font-family: var(--police-ui);
  font-size: var(--taille-petite);
}

.formulaire-contact {
  display: grid;
  gap: var(--espace-4);
  max-width: 34rem;
  margin-top: var(--espace-5);
}

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

.champ label {
  font-family: var(--police-ui);
  font-size: var(--taille-petite);
}

.champ__facultatif {
  color: var(--couleur-texte-att);
}

.champ input[type='text'],
.champ input[type='email'],
.champ input[type='tel'],
.champ textarea {
  font-family: var(--police-lecture);
  font-size: var(--taille-texte);
  padding: var(--espace-2) var(--espace-3);
  min-height: 44px;
  border: 1px solid var(--couleur-kraft);
  background: var(--couleur-fond);
  color: var(--couleur-texte);
}

.champ textarea {
  min-height: 8rem;
  resize: vertical;
}

.champ input[aria-invalid='true'],
.champ textarea[aria-invalid='true'] {
  border-color: var(--couleur-accent);
}

.champ__erreur {
  font-family: var(--police-ui);
  font-size: var(--taille-petite);
  color: var(--couleur-accent);
  margin: 0;
}

.champ--fieldset {
  border: 0;
  padding: 0;
}

.champ--fieldset legend {
  font-family: var(--police-ui);
  font-size: var(--taille-petite);
  padding: 0;
  margin-bottom: var(--espace-2);
}

.champ__option {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  min-height: 44px;
  font-family: var(--police-lecture);
}

.champ--consentement label {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-3);
  font-family: var(--police-lecture);
  font-size: var(--taille-petite);
}

.champ--consentement input {
  margin-top: 0.2em;
  min-width: 1.25rem;
  min-height: 1.25rem;
}

button.bouton {
  font: inherit;
  cursor: pointer;
  appearance: none;
  background-image: none;
}

/* Honeypot : décalé hors écran, jamais display:none seul (§6.4.3 du brief). */
.champ-piege {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Merci (étape 7)
   -------------------------------------------------------------------------- */

.section-merci {
  padding-block: var(--espace-7) var(--espace-6);
}

.merci-bloc {
  margin-top: var(--espace-5);
  max-width: 38rem;
}

.merci-bloc ol {
  padding-left: 1.25rem;
}

/* --------------------------------------------------------------------------
   Pages juridiques et pages d'erreur (étape 8)
   -------------------------------------------------------------------------- */

.section-juridique,
.section-erreur {
  padding-block: var(--espace-7) var(--espace-6);
}

.section-juridique h2 {
  margin-top: var(--espace-6);
  border-top: 1px solid var(--couleur-kraft);
  padding-top: var(--espace-4);
}

.section-juridique p {
  max-width: 42rem;
}

.liste-juridique {
  margin: var(--espace-3) 0 0;
  max-width: 42rem;
}

.liste-juridique > div {
  display: flex;
  justify-content: space-between;
  gap: var(--espace-4);
  padding-block: var(--espace-2);
  border-top: 1px solid var(--couleur-kraft);
}

.liste-juridique > div:first-child {
  border-top: 0;
}

.liste-juridique dt {
  font-family: var(--police-ui);
  font-size: var(--taille-petite);
  color: var(--couleur-texte-att);
  flex: 0 0 auto;
}

.liste-juridique dd {
  margin: 0;
  text-align: right;
}

@media (max-width: 480px) {
  .liste-juridique > div {
    flex-direction: column;
    gap: var(--espace-1);
  }

  .liste-juridique dd {
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   Glossaire — définitions génériques du vocabulaire du secteur.
   -------------------------------------------------------------------------- */

.section-glossaire {
  padding-block: var(--espace-6);
}

.liste-glossaire {
  margin: var(--espace-4) 0 0;
  max-width: 42rem;
}

.liste-glossaire__item {
  padding-block: var(--espace-4);
  border-top: 1px solid var(--couleur-kraft);
}

.liste-glossaire__item:first-child {
  border-top: 0;
  padding-top: 0;
}

.liste-glossaire__item dt {
  font-family: var(--police-titres);
  font-size: var(--taille-h3);
  margin-bottom: var(--espace-2);
}

.liste-glossaire__item dd {
  margin: 0;
  color: var(--couleur-texte-att);
}

/* --------------------------------------------------------------------------
   Réalisations — gabarit de présentation, en l'absence de cas réels.
   -------------------------------------------------------------------------- */

.realisation-gabarit {
  display: grid;
  gap: var(--espace-5);
  margin-top: var(--espace-4);
  max-width: 42rem;
}

@media (min-width: 768px) {
  .realisation-gabarit {
    grid-template-columns: minmax(0, 20rem) 1fr;
    align-items: start;
  }
}

.realisation-gabarit__champs {
  margin: 0;
}

.realisation-gabarit__champs > div {
  display: flex;
  justify-content: space-between;
  gap: var(--espace-4);
  padding-block: var(--espace-2);
  border-top: 1px solid var(--couleur-kraft);
}

.realisation-gabarit__champs > div:first-child {
  border-top: 0;
}

.realisation-gabarit__champs dt {
  font-family: var(--police-ui);
  font-size: var(--taille-petite);
  color: var(--couleur-texte-att);
  flex: 0 0 auto;
}

.realisation-gabarit__champs dd {
  margin: 0;
  text-align: right;
}

/* --------------------------------------------------------------------------
   Apparition au scroll — progressive : le JS ajoute .avant-apparition avant
   observation ; sans JS ou avec prefers-reduced-motion, rien n'est jamais
   masqué (voir public/assets/js/reveal.js).
   -------------------------------------------------------------------------- */

.reveal {
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.avant-apparition {
  opacity: 0;
  transform: translateY(1rem);
}

/* --------------------------------------------------------------------------
   Modale juridique — mentions légales, confidentialité, CGV en superposition
   (public/assets/js/modale-juridique.js). Amélioration progressive : sans JS,
   les liens du pied de page ouvrent directement la page correspondante.
   -------------------------------------------------------------------------- */

.modale-juridique {
  border: 1px solid var(--couleur-kraft);
  background: var(--couleur-fond);
  padding: var(--espace-5);
  width: min(100% - 2 * var(--espace-4), 42rem);
  max-height: min(85dvh, 100%);
  overflow-y: auto;
}

.modale-juridique::backdrop {
  background: rgba(26, 22, 16, 0.55);
}

.modale-juridique__fermer {
  position: sticky;
  top: 0;
  float: right;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--couleur-fond);
  border: 1px solid var(--couleur-kraft);
  font-family: var(--police-ui);
  font-size: var(--taille-lead);
  line-height: 1;
  color: var(--couleur-texte-att);
  cursor: pointer;
}

.modale-juridique__fermer:hover {
  border-color: var(--couleur-or-cta);
  color: var(--couleur-or-texte);
}

.modale-juridique__corps {
  clear: both;
}

.modale-juridique__corps .conteneur {
  width: 100%;
  margin-inline: 0;
}

.modale-juridique__corps .section-juridique {
  padding-block: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .modale-juridique[open] {
    animation: modale-juridique-apparition 0.2s ease;
  }
}

@keyframes modale-juridique-apparition {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}