/* ==========================================================================
   Cycles du Conflent — site vitrine (Vinça, 66)
   Feuille unique. Sommaire :
     1. Tokens
     2. Base
     3. Utilitaires
     4. Composants
        4.1  En-tête et navigation (+ menu mobile)
        4.2  Sur-titre
        4.3  Boutons et liens fléchés
        4.4  Hauts de page (accueil, pages internes)
        4.5  Bande « atouts »
        4.6  Titres de section
        4.7  Cartes services (accueil)
        4.8  Emplacements photo et cartes postales
        4.9  Bornes kilométriques (engagements, étapes)
        4.10 Blocs tarifs
        4.11 Horaires & accès, carte topo
        4.12 Bande d'appel à l'action
        4.13 Formulaire de contact
        4.14 Colonne « L'atelier » (contact)
        4.15 Pages de texte (légal, 404)
        4.16 Pied de page
     5. Pages
     6. Responsive
   ========================================================================== */

/* 1. Tokens ================================================================ */
:root {
  /* Couleurs : paysage */
  --c-nuit: #1C1F3A;
  --c-violet: #474877;
  --c-mauve: #7A6895;
  --c-bruyere: #B27F95;
  --c-canigou: #E0917D;
  --c-ciel: #F6D6C2;
  --c-soleil: #F2A33A;
  --c-neige: #FBF5EE;

  /* Couleurs : surfaces */
  --c-pierre: #F7F1E9;
  --c-blanc: #FFFFFF;
  --c-creme: #FBF5EE;
  --c-sable: #EADFD2;
  --c-sable-fonce: #CDBBA8;
  --c-bordure: #E4D8CA;
  --c-separateur: #EFE6DA;

  /* Couleurs : texte et accents */
  --c-texte: var(--c-nuit);
  --c-texte-2: #514F72;
  --c-texte-ciel: #3A3B62;
  --c-texte-nuit: #BDB7D6;
  --c-label-nuit: #9C97BC;
  --c-terre: #9A3820;
  --c-terre-fonce: #6E2716;
  --c-placeholder: #5B5670;
  --c-champ: #8E8299;
  --c-gr-blanc: #FBF5EE;
  --c-gr-rouge: #D2402B;

  /* Couleurs : carte topo */
  --c-carte-fond: #F3EADF;

  /* Typographie */
  --f-titre: 'Big Shoulders', 'Arial Narrow', sans-serif;
  --f-texte: 'Jost', system-ui, sans-serif;

  --fs-h1-accueil: clamp(52px, 7vw, 100px);
  --fs-h1-page: clamp(46px, 6.4vw, 88px);
  --fs-h2: clamp(42px, 4.6vw, 64px);
  --fs-h2-apercu: clamp(40px, 4.2vw, 58px);
  --fs-h2-cta: clamp(40px, 5vw, 64px);
  --fs-h2-bloc: 40px;
  --fs-h2-tarifs: 36px;
  --fs-h2-aside: 34px;
  --fs-h3-carte: 32px;
  --fs-h3: 30px;
  --fs-atout: 28px;
  --fs-logo: 26px;
  --fs-logo-pied: 24px;
  --fs-logo-mobile: 21px;
  --fs-borne: 24px;
  --fs-prix: 22px;
  --fs-bouton: 21px;
  --fs-bouton-s: 20px;
  --fs-legende: 18px;
  --fs-intro: 19px;
  --fs-texte: 17px;
  --fs-texte-s: 16px;
  --fs-petit: 15px;
  --fs-surtitre: 14px;
  --fs-detail: 14px;
  --fs-mini: 13px;
  --fs-tag: 12px;
  --fs-sous-logo: 11px;

  --lh-titre: 0.92;
  --lh-titre-2: 0.95;
  --lh-titre-3: 1;
  --lh-texte: 1.65;
  --lh-texte-long: 1.75;
  --lh-apercu: 1.7;
  --lh-intro: 1.6;
  --lh-atout: 1.55;

  --ls-h1: 0.01em;
  --ls-titre: 0.02em;
  --ls-logo: 0.03em;
  --ls-bouton: 0.06em;
  --ls-pastille: 0.08em;
  --ls-legende: 0.12em;
  --ls-surtitre: 0.18em;
  --ls-tag: 0.22em;
  --ls-sous-logo: 0.24em;

  /* Mise en page */
  --conteneur: 1200px;
  --conteneur-texte: 760px;
  --gouttiere: 24px;
  --gap-cartes: 24px;
  --rayon: 4px;
  --rayon-pilule: 999px;
  --rayon-borne: 27px 27px 4px 4px;
  --ombre-carte-postale: 0 12px 28px rgba(28, 31, 58, 0.12);
  --ombre-portrait: 0 14px 34px rgba(28, 31, 58, 0.14);
  --hauteur-bouton: 56px;
  --hauteur-bouton-s: 52px;
  --hauteur-champ: 52px;
  --cible-min: 44px;

  /* Focus */
  --focus-clair: 3px solid var(--c-nuit);
  --focus-sombre: 3px solid var(--c-soleil);
  --focus-decalage: 3px;
}

/* 2. Base ================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-pierre);
  color: var(--c-texte);
  font-family: var(--f-texte);
  font-size: var(--fs-texte-s);
  line-height: var(--lh-texte);
}

h1, h2, h3, p, ul, ol, dl, dd, figure, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
img, svg { display: block; max-width: 100%; }

h1, h2, h3 {
  font-family: var(--f-titre);
  font-weight: 900;
  text-transform: uppercase;
  text-wrap: balance;
}

a { color: var(--c-terre); }
a:hover { color: var(--c-terre-fonce); }

:focus-visible { outline: var(--focus-clair); outline-offset: var(--focus-decalage); }
.fond-nuit :focus-visible { outline: var(--focus-sombre); }

[hidden] { display: none !important; }

/* 3. Utilitaires =========================================================== */
.conteneur {
  box-sizing: content-box;
  max-width: var(--conteneur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

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

.evitement {
  position: absolute;
  left: var(--gouttiere);
  top: -100px;
  z-index: 10;
  padding: 12px 20px;
  background: var(--c-nuit);
  color: var(--c-neige);
  font-weight: 600;
  border-radius: var(--rayon);
}
.evitement:focus { top: 12px; color: var(--c-neige); outline: var(--focus-sombre); }

/* Démo : bandeau d'explication et contenus à remplacer par ceux du commerce */
.bandeau-demo {
  padding: 10px var(--gouttiere);
  background: var(--c-nuit);
  color: var(--c-neige);
  font-size: var(--fs-detail);
  line-height: var(--lh-intro);
  text-align: center;
}
.bandeau-demo a { color: var(--c-neige); font-weight: 600; }
.bandeau-demo a:hover { color: var(--c-soleil); }
.bandeau-demo__court { display: none; }
@media (max-width: 719.98px) {
  .bandeau-demo { padding-block: 6px; }
  .bandeau-demo__long { display: none; }
  .bandeau-demo__court { display: block; white-space: nowrap; }
}

.a-completer {
  padding: 0 0.2em;
  border-bottom: 2px dashed var(--c-terre);
  border-radius: 2px;
  background: var(--c-sable);
  color: var(--c-nuit);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Balise GR : blanc puis rouge */
.balise-gr { display: flex; flex-direction: column; gap: 3px; }
.balise-gr::before,
.balise-gr::after { content: ""; display: block; width: 34px; height: 7px; }
.balise-gr::before { background: var(--c-gr-blanc); }
.balise-gr::after { background: var(--c-gr-rouge); }

/* 4. Composants ============================================================ */

/* 4.1 En-tête et navigation ------------------------------------------------ */
.haut { background: var(--c-ciel); overflow: hidden; }

.entete {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  align-items: center;
  justify-content: space-between;
  padding-block: 20px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--c-nuit);
  text-decoration: none;
}
.logo:hover { color: var(--c-nuit); }
.logo__texte { display: flex; flex-direction: column; gap: 4px; line-height: 1; }
.logo__nom {
  font-family: var(--f-titre);
  font-weight: 900;
  font-size: var(--fs-logo);
  letter-spacing: var(--ls-logo);
  text-transform: uppercase;
}
.logo__sous {
  font-size: var(--fs-sous-logo);
  font-weight: 600;
  letter-spacing: var(--ls-sous-logo);
  text-transform: uppercase;
  color: var(--c-texte-2);
}

.nav__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  align-items: center;
}
.nav__lien {
  display: inline-block;
  padding: 10px 2px;
  border-bottom: 3px solid transparent;
  color: var(--c-nuit);
  font-weight: 500;
  font-size: var(--fs-texte-s);
  text-decoration: none;
}
.nav__lien:hover { color: var(--c-terre); }
.nav__lien[aria-current="page"] { border-bottom-color: var(--c-terre); }

/* Pastille FR · EN : prévue pour la phase 2 (version anglaise), non affichée d'ici là. */
.pastille-langue {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1.5px solid var(--c-nuit);
  border-radius: var(--rayon-pilule);
  font-size: var(--fs-mini);
  font-weight: 600;
  letter-spacing: var(--ls-pastille);
}

.menu-bouton {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: var(--cible-min);
  min-width: var(--cible-min);
  padding: 0 14px;
  border: 2px solid var(--c-nuit);
  border-radius: var(--rayon);
  background: transparent;
  color: var(--c-nuit);
  font-family: var(--f-titre);
  font-weight: 800;
  font-size: var(--fs-legende);
  letter-spacing: var(--ls-bouton);
  text-transform: uppercase;
  cursor: pointer;
}
.menu-bouton__icone { display: flex; flex-direction: column; gap: 4px; }
.menu-bouton__icone span { display: block; width: 18px; height: 2px; background: currentColor; }

/* 4.2 Sur-titre ------------------------------------------------------------ */
.surtitre {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-surtitre);
  font-weight: 600;
  letter-spacing: var(--ls-surtitre);
  line-height: var(--lh-intro);
  text-transform: uppercase;
  color: var(--c-terre);
}
.surtitre svg { flex: none; }

/* 4.3 Boutons et liens fléchés --------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hauteur-bouton);
  padding: 0 30px;
  border: 0;
  border-radius: var(--rayon);
  font-family: var(--f-titre);
  font-weight: 800;
  font-size: var(--fs-bouton);
  letter-spacing: var(--ls-bouton);
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.bouton--primaire { background: var(--c-nuit); color: var(--c-neige); }
.bouton--primaire:hover { background: var(--c-violet); color: var(--c-neige); }
.bouton--contour { border: 2px solid var(--c-nuit); color: var(--c-nuit); background: transparent; }
.bouton--contour:hover { background: var(--c-nuit); color: var(--c-neige); }
.bouton--accent { background: var(--c-soleil); color: var(--c-nuit); padding-inline: 32px; }
.bouton--accent:hover { background: var(--c-canigou); color: var(--c-nuit); }
.bouton--accent:disabled { cursor: progress; opacity: 0.75; }
.bouton--large { padding-inline: 32px; }
.bouton--appel { display: none; gap: 10px; }
.bouton--petit { min-height: var(--hauteur-bouton-s); padding: 0 26px; font-size: var(--fs-bouton-s); }

.lien-fleche { font-weight: 600; font-size: var(--fs-texte); }

/* 4.4 Hauts de page -------------------------------------------------------- */
.accroche {
  max-width: 1100px;
  margin-inline: auto;
  padding: 44px var(--gouttiere) 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.accroche h1 {
  font-size: var(--fs-h1-accueil);
  line-height: var(--lh-titre);
  letter-spacing: var(--ls-h1);
}
.intro {
  font-size: var(--fs-intro);
  line-height: var(--lh-intro);
  color: var(--c-texte-ciel);
  max-width: 640px;
}
.accroche__boutons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding-top: 6px;
}
.illustration-canigou { width: 100%; height: auto; min-height: 300px; }

.entete-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 40px;
  padding-bottom: 8px;
}
.entete-page h1 {
  font-size: var(--fs-h1-page);
  line-height: var(--lh-titre);
  max-width: 900px;
}
.entete-page .intro { max-width: 620px; }
.cretes { width: 100%; height: auto; min-height: 150px; }

/* 4.5 Bande « atouts » ----------------------------------------------------- */
.atouts { background: var(--c-nuit); color: var(--c-neige); }
.atouts__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 36px 32px;
  padding-top: 44px;
  padding-bottom: 52px;
}
.atout { display: flex; flex-direction: column; gap: 10px; }
.atout h3 {
  margin-top: 6px;
  font-weight: 800;
  font-size: var(--fs-atout);
  letter-spacing: var(--ls-logo);
  line-height: var(--lh-titre-3);
}
.atout p { font-size: var(--fs-texte-s); line-height: var(--lh-atout); color: var(--c-texte-nuit); }
.separateur-nuit { width: 100%; height: 72px; }

/* 4.6 Titres de section ---------------------------------------------------- */
.titre-section { display: flex; flex-direction: column; gap: 14px; }
.titre-section h2 { font-size: var(--fs-h2); line-height: var(--lh-titre-2); }
.titre-section--ligne {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: flex-end;
  justify-content: space-between;
}
.titre-section__bloc { display: flex; flex-direction: column; gap: 14px; }

/* 4.7 Cartes services ------------------------------------------------------ */
.services-apercu {
  display: flex;
  flex-direction: column;
  gap: 44px;
  padding-top: 72px;
  padding-bottom: 56px;
}
.grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap-cartes);
}
.carte-service {
  display: flex;
  flex-direction: column;
  background: var(--c-blanc);
  border: 1px solid var(--c-bordure);
  border-radius: var(--rayon);
  overflow: hidden;
}
.carte-service__bandeau {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 18px;
  background: var(--c-creme);
}
.carte-service__tag {
  padding: 0 28px;
  font-size: var(--fs-tag);
  font-weight: 600;
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--c-texte-2);
}
.profil { width: 100%; height: 100px; }
.carte-service__corps {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 28px 30px;
}
.carte-service h3 { font-weight: 800; font-size: var(--fs-h3-carte); line-height: var(--lh-titre-3); }
.carte-service__texte { color: var(--c-texte-2); }
.carte-service__prix {
  margin-top: auto;
  padding-top: 10px;
  font-family: var(--f-titre);
  font-weight: 800;
  font-size: var(--fs-prix);
  letter-spacing: var(--ls-logo);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--c-terre);
}

/* 4.8 Emplacements photo et cartes postales -------------------------------- */
/* Illustration provisoire à la place d'une photo (démo) */
.illustration {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--c-ciel);
}
.illustration svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.illustration--cadre { aspect-ratio: 5 / 4; border-radius: var(--rayon); }
.illustration__etiquette {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-size: var(--fs-mini);
  font-weight: 600;
  line-height: 1.6;
}

.carte-postale {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--c-blanc);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte-postale);
}
.carte-postale figcaption {
  padding: 0 4px 2px;
  font-family: var(--f-titre);
  font-weight: 800;
  font-size: var(--fs-legende);
  letter-spacing: var(--ls-legende);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--c-texte-2);
}
.carte-postale--portrait { gap: 12px; padding: 14px; box-shadow: var(--ombre-portrait); transform: rotate(1.5deg); }
.galerie .carte-postale:nth-child(1) { transform: rotate(-1.5deg); }
.galerie .carte-postale:nth-child(2) { transform: rotate(1deg); }
.galerie .carte-postale:nth-child(3) { transform: rotate(-0.8deg); }

/* 4.9 Bornes kilométriques ------------------------------------------------- */
.bornes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px 32px;
}
.bornes--etapes { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.bornes__item { display: flex; flex-direction: column; gap: 16px; }
.bornes__item h3 { font-weight: 800; font-size: var(--fs-h3); line-height: var(--lh-titre-3); }
.bornes__item p { color: var(--c-texte-2); }

.borne {
  display: flex;
  flex-direction: column;
  width: 54px;
  height: 70px;
  overflow: hidden;
  border: 2.5px solid var(--c-nuit);
  border-radius: var(--rayon-borne);
  background: var(--c-blanc);
}
.borne::before {
  content: "";
  height: 24px;
  flex: none;
  background: var(--c-soleil);
  border-bottom: 2.5px solid var(--c-nuit);
}
.borne span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-titre);
  font-weight: 900;
  font-size: var(--fs-borne);
  line-height: 1;
}

/* 4.10 Blocs tarifs -------------------------------------------------------- */
.tarifs-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: var(--gap-cartes);
  padding-top: 72px;
  padding-bottom: 40px;
}
.bloc-tarifs {
  display: flex;
  flex-direction: column;
  background: var(--c-blanc);
  border: 1px solid var(--c-bordure);
  border-radius: var(--rayon);
  overflow: hidden;
}
.bloc-tarifs__profil { padding-top: 16px; background: var(--c-creme); }
.bloc-tarifs__profil .profil { height: 76px; }
.bloc-tarifs__corps { display: flex; flex-direction: column; padding: 26px 32px 30px; }
.bloc-tarifs h2 {
  margin-bottom: 10px;
  font-size: var(--fs-h2-tarifs);
  line-height: var(--lh-titre-3);
  letter-spacing: var(--ls-titre);
}
.tarif { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; }
.tarif dt {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: var(--fs-texte);
  font-weight: 500;
  line-height: 1.45;
}
.tarif dt::after {
  content: "";
  flex: 1;
  min-width: 20px;
  border-bottom: 2px dotted var(--c-sable-fonce);
}
.tarif__libelle { display: flex; flex-direction: column; gap: 2px; }
.tarif__detail { font-size: var(--fs-detail); font-weight: 400; color: var(--c-texte-2); }
.tarif dd {
  font-family: var(--f-titre);
  font-weight: 800;
  font-size: var(--fs-prix);
  line-height: 1.2;
  white-space: nowrap;
}

/* 4.11 Horaires & accès, carte topo ---------------------------------------- */
.horaires-acces { padding-top: 16px; padding-bottom: 96px; }
.horaires-acces__carte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  background: var(--c-blanc);
  border: 1px solid var(--c-bordure);
  border-radius: var(--rayon);
  overflow: hidden;
}
.horaires-acces__infos { display: flex; flex-direction: column; gap: 20px; padding: 44px; }
.horaires-acces h2 { font-size: var(--fs-h2-bloc); line-height: var(--lh-titre-2); }
.horaires { display: flex; flex-direction: column; font-size: var(--fs-texte-s); }
.horaires__ligne {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-separateur);
}
.horaires__ligne:last-child { border-bottom: 0; }
.horaires dd { font-weight: 600; }
.horaires__ferme { color: var(--c-texte-2); }
.horaires-acces address { line-height: var(--lh-intro); color: var(--c-texte-2); }
.horaires-acces .bouton { align-self: flex-start; }

.carte-topo { position: relative; min-height: 340px; background: var(--c-carte-fond); overflow: hidden; }
.carte-topo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.carte-topo__lien {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-min);
  padding: 6px 16px;
  background: var(--c-blanc);
  border-radius: var(--rayon-pilule);
  font-size: var(--fs-mini);
  font-weight: 600;
  color: var(--c-terre);
}
.carte-topo--colonne { height: 280px; min-height: 0; border: 1px solid var(--c-bordure); border-radius: var(--rayon); }

/* 4.12 Bande d'appel à l'action -------------------------------------------- */
.cta { background: var(--c-ciel); overflow: hidden; }
.cta__contenu {
  max-width: 900px;
  margin-inline: auto;
  padding: 80px var(--gouttiere) 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}
.cta h2 { font-size: var(--fs-h2-cta); line-height: var(--lh-titre-2); }
.coucher-de-soleil { width: 100%; height: auto; min-height: 120px; }

/* 4.13 Formulaire de contact ----------------------------------------------- */
.contact-grille {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
  padding-top: 72px;
  padding-bottom: 96px;
}
.carte-formulaire {
  flex: 999 1 560px;
  min-width: 0;
  padding: 40px;
  background: var(--c-blanc);
  border: 1px solid var(--c-bordure);
  border-radius: var(--rayon);
}
.formulaire { display: flex; flex-direction: column; gap: 22px; }
.formulaire h2,
.envoi-ok h2 { font-size: var(--fs-h2-bloc); line-height: var(--lh-titre-2); }
.formulaire__duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 22px;
}
.champ { display: flex; flex-direction: column; gap: 8px; }
.champ label { font-size: var(--fs-petit); font-weight: 600; }
.champ__requis { color: var(--c-terre); }
.champ input,
.champ select,
.champ textarea {
  width: 100%;
  min-height: var(--hauteur-champ);
  padding: 12px 14px;
  border: 1.5px solid var(--c-champ);
  border-radius: var(--rayon);
  background: var(--c-blanc);
  color: var(--c-nuit);
  font: inherit;
  font-size: var(--fs-texte);
}
.champ textarea { min-height: 150px; resize: vertical; }
.champ input:focus-visible,
.champ select:focus-visible,
.champ textarea:focus-visible {
  outline: var(--focus-sombre);
  outline-offset: 1px;
  border-color: var(--c-nuit);
}
.champ [aria-invalid="true"] { border-color: var(--c-terre); }
.champ__erreur { font-size: var(--fs-detail); font-weight: 600; color: var(--c-terre); }
.champ__erreur:empty { display: none; }

/* Pot de miel : hors de la vue, ignoré par les lecteurs d'écran */
.pot-de-miel { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.formulaire .bouton { align-self: flex-start; }
.mention-rgpd { font-size: var(--fs-detail); color: var(--c-texte-2); }
.alerte-erreur {
  margin-bottom: 22px;
  padding: 14px 16px;
  border: 1.5px solid var(--c-terre);
  border-radius: var(--rayon);
  background: var(--c-creme);
  color: var(--c-nuit);
  font-size: var(--fs-petit);
}

.envoi-ok { display: none; flex-direction: column; gap: 16px; padding: 24px 0; }
.envoi-ok .balise-gr::before,
.envoi-ok .balise-gr::after { width: 40px; height: 8px; }
.envoi-ok .balise-gr::before { background: var(--c-blanc); box-shadow: inset 0 0 0 1.5px var(--c-nuit); }
.envoi-ok p { font-size: var(--fs-texte); line-height: var(--lh-intro); color: var(--c-texte-2); }
.envoi-ok .bouton { align-self: flex-start; }
.envoi-ok .envoi-ok__demo { align-self: flex-start; padding: 0 0.2em; border-bottom: 2px dashed var(--c-terre); background: var(--c-sable); color: var(--c-nuit); font-size: var(--fs-petit); }
.envoi-ok:focus { outline: none; }

/* Sans JS : contact.php redirige vers contact.html?envoye=1#merci */
.envoi-ok.est-visible,
.envoi-ok:target { display: flex; }
.carte-formulaire:has(.envoi-ok:target) .formulaire { display: none; }
#erreur-envoi { display: none; }
#erreur-envoi:target,
#erreur-envoi.est-visible { display: block; }

/* 4.14 Colonne « L'atelier » ----------------------------------------------- */
.contact-colonne { flex: 1 1 320px; display: flex; flex-direction: column; gap: 24px; }
.atelier {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 34px;
  background: var(--c-nuit);
  color: var(--c-neige);
  border-radius: var(--rayon);
}
.atelier__titre { display: flex; flex-direction: column; gap: 12px; }
.atelier h2 { font-size: var(--fs-h2-aside); line-height: var(--lh-titre-2); }
.atelier__infos { display: flex; flex-direction: column; gap: 22px; }
.atelier__infos div { display: flex; flex-direction: column; gap: 4px; line-height: var(--lh-intro); }
.atelier__infos dt {
  font-size: var(--fs-mini);
  font-weight: 600;
  letter-spacing: var(--ls-legende);
  text-transform: uppercase;
  color: var(--c-label-nuit);
}
.atelier a { color: var(--c-neige); font-weight: 600; }
.atelier a:hover { color: var(--c-soleil); }

/* 4.15 Pages de texte ------------------------------------------------------ */
.texte-legal {
  max-width: var(--conteneur-texte);
  padding-top: 64px;
  padding-bottom: 96px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--c-texte-2);
  font-size: var(--fs-texte);
  line-height: var(--lh-texte);
}
.texte-legal h2 {
  margin-top: 24px;
  font-size: var(--fs-h2-tarifs);
  line-height: var(--lh-titre-3);
  color: var(--c-nuit);
}
.texte-legal ul { padding-left: 1.2em; list-style: disc; }
.texte-legal strong { color: var(--c-nuit); font-weight: 600; }

/* 4.16 Pied de page -------------------------------------------------------- */
.pied { background: var(--c-nuit); color: var(--c-texte-nuit); }
.pied__contenu {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 56px;
  justify-content: space-between;
  padding-top: 36px;
  padding-bottom: 48px;
  font-size: var(--fs-petit);
  line-height: var(--lh-apercu);
}
.pied__bloc { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pied__logo { display: flex; align-items: center; gap: 12px; padding-bottom: 6px; }
.pied__nom {
  font-family: var(--f-titre);
  font-weight: 900;
  font-size: var(--fs-logo-pied);
  letter-spacing: var(--ls-logo);
  line-height: 1;
  text-transform: uppercase;
  color: var(--c-neige);
}
.pied a { color: var(--c-texte-nuit); }
.pied a:hover { color: var(--c-neige); }
.pied__credit,
.pied__credit a { color: var(--c-label-nuit); }

/* 5. Pages ================================================================= */

/* Accueil : aperçu « Qui sommes-nous » */
.apercu-equipe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 56px;
  align-items: center;
  padding-top: 48px;
  padding-bottom: 64px;
}
.apercu-equipe__texte { display: flex; flex-direction: column; gap: 20px; }
.apercu-equipe h2 { font-size: var(--fs-h2-apercu); line-height: var(--lh-titre-2); }
.apercu-equipe p:not(.surtitre) { font-size: var(--fs-texte); line-height: var(--lh-apercu); color: var(--c-texte-2); }

/* Qui sommes-nous */
.histoire {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 64px;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 88px;
}
.histoire__texte { display: flex; flex-direction: column; gap: 20px; }
.histoire__texte h2 { font-size: var(--fs-h2); line-height: var(--lh-titre-2); }
.histoire__texte p:not(.surtitre) { font-size: var(--fs-texte); line-height: var(--lh-texte-long); color: var(--c-texte-2); }

.engagements { background: var(--c-blanc); border-block: 1px solid var(--c-bordure); }
.engagements__contenu,
.etapes { display: flex; flex-direction: column; gap: 44px; }
.engagements__contenu { padding-block: 88px; }

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px 32px;
  padding-block: 96px;
}

/* Services */
.etapes { padding-top: 56px; padding-bottom: 96px; }

/* 6. Responsive ============================================================ */
@media (max-width: 719.98px) {
  /* Menu repliable : seulement si le JS est actif (sinon la navigation reste visible) */
  .js .menu-bouton { display: inline-flex; }
  .js .nav { display: none; flex-basis: 100%; }
  .js .nav.est-ouvert { display: block; }
  .js .nav__liste { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 8px; }
  .js .nav__lien {
    display: flex;
    align-items: center;
    min-height: var(--cible-min);
    padding: 10px 0;
    border-bottom: 1px solid var(--c-sable-fonce);
  }
  .js .nav__lien[aria-current="page"] { border-bottom: 3px solid var(--c-terre); }

  .bouton--appel { display: inline-flex; }
  .horaires-acces__infos { padding: 32px 24px; }
  .carte-formulaire { padding: 28px 20px; }
  .atelier { padding: 28px 24px; }
  .bloc-tarifs__corps { padding: 24px 20px 26px; }
  .apercu-equipe { gap: 40px; }
}

/* Petits téléphones : logo et bouton « Menu » sur la même ligne */
@media (max-width: 419.98px) {
  .entete { column-gap: 12px; }
  .logo { gap: 10px; }
  .logo__nom { font-size: var(--fs-logo-mobile); }
  .js .menu-bouton { justify-content: center; padding: 0; width: var(--cible-min); }
  .menu-bouton__texte {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}