/* =========================================================================
   bbart-outdoor.fr — feuille de style principale
   Palette et typographie reprises de l'ancien site.
   ========================================================================= */

:root {
  /* couleurs */
  --creme:        #F8F6F2;
  --creme-fonce:  #EFEAE1;
  --cuivre:       #A67C52;
  --cuivre-fonce: #8A6642;
  --ardoise:      #1F2933;
  --ardoise-clair:#2D3748;
  --ardoise-moyen:#465866;
  --cuivre-sombre:#8B6230;
  --gris:         #D8DDE3;
  --gris-texte:   #5A6672;
  --blanc:        #FFFFFF;

  /* typographie */
  --titre: "Cormorant Garamond", Cormorant, Georgia, serif;
  --texte: "DM Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* echelle : ratio 1.25 sur base 17px */
  --t-xs:   0.8125rem;
  --t-s:    0.9375rem;
  --t-base: 1.0625rem;
  --t-m:    1.25rem;
  --t-l:    1.625rem;
  --t-xl:   2.25rem;
  --t-xxl:  clamp(2.5rem, 5vw, 3.75rem);

  /* rythme */
  --gouttiere: 1.5rem;
  --section:   clamp(3.5rem, 8vw, 6rem);
  --largeur:   1180px;
  --lecture:   68ch;

  --rayon:  8px;
  --bordure: 1px solid var(--gris);
  --transition: 180ms ease;
}

/* ---------------------------------------------------------------- base --- */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--ardoise);
  font: var(--t-base)/1.65 var(--texte);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 .6em;
  letter-spacing: -.01em;
}

h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }
h4 { font-size: var(--t-m); }

p, li { max-width: var(--lecture); }
p { margin: 0 0 1.1em; }

a { color: var(--cuivre-fonce); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--ardoise); }

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

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

.contenant { width: min(100% - 2.5rem, var(--largeur)); margin-inline: auto; }

.saut-contenu {
  position: absolute; left: -9999px;
  background: var(--ardoise); color: var(--blanc);
  padding: .75rem 1.25rem; z-index: 100;
}
.saut-contenu:focus { left: 1rem; top: 1rem; }

/* -------------------------------------------------------------- boutons -- */

.bouton {
  display: inline-block;
  font: 500 var(--t-s)/1 var(--texte);
  padding: 1rem 1.75rem;
  border: 1px solid var(--ardoise);
  border-radius: var(--rayon);
  background: transparent;
  color: var(--ardoise);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.bouton:hover { background: var(--ardoise); color: var(--creme); }

.bouton--plein {
  background: var(--cuivre);
  border-color: var(--cuivre);
  color: var(--blanc);
}
.bouton--plein:hover { background: var(--cuivre-fonce); border-color: var(--cuivre-fonce); color: var(--blanc); }

.bouton--clair { border-color: var(--creme); color: var(--creme); }
.bouton--clair:hover { background: var(--creme); color: var(--ardoise); }

/* --------------------------------------------------------------- entete -- */

.entete {
  background: var(--blanc);
  border-bottom: var(--bordure);
  position: sticky; top: 0; z-index: 50;
}
.entete__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gouttiere);
  padding-block: .75rem;
}
.entete__logo img { height: 56px; width: auto; }

.nav ul { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.nav li { max-width: none; }
.nav a {
  font-size: var(--t-s); color: var(--ardoise); text-decoration: none;
  padding-block: .5rem; border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--cuivre); }

.entete__tel { font-size: var(--t-s); white-space: nowrap; }

.entete__bascule {
  display: none; background: none; border: 0; cursor: pointer;
  padding: .5rem; color: var(--ardoise);
}

@media (max-width: 900px) {
  .entete__bascule { display: block; }
  .nav {
    display: none; position: absolute; inset-inline: 0; top: 100%;
    background: var(--blanc); border-bottom: var(--bordure);
    padding: 1rem 1.25rem 1.5rem;
  }
  .nav[data-ouvert="true"] { display: block; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { display: block; padding: .8rem 0; border-bottom: 1px solid var(--creme-fonce); }
  .entete__tel { display: none; }
}

/* ----------------------------------------------------------------- hero -- */

.hero { position: relative; background: var(--ardoise); color: var(--creme); }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.hero__contenu {
  position: relative;
  padding-block: clamp(4rem, 12vw, 8rem);
  max-width: 46rem;
}
.hero h1 { color: var(--creme); margin-bottom: .35em; }
.hero__accroche { font-size: var(--t-m); color: var(--gris); max-width: 38rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero__fil { font-size: var(--t-xs); color: var(--gris); margin-bottom: 1.5rem; }
.hero__fil a { color: var(--gris); }

/* ------------------------------------------------------------- sections -- */

.section { padding-block: var(--section); }
.section--clair { background: var(--blanc); }
.section__titre { max-width: var(--lecture); }

.duo {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 860px) { .duo { grid-template-columns: 1.1fr .9fr; } }

/* fiche technique */
.specs { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.specs caption { text-align: left; font-family: var(--titre); font-size: var(--t-l); padding-bottom: .8rem; }
.specs th, .specs td { text-align: left; padding: .85rem 0; border-bottom: 1px solid var(--gris); vertical-align: top; }
.specs th { font-weight: 500; color: var(--gris-texte); width: 42%; }

/* points cles */
.points { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; }
@media (min-width: 700px) { .points { grid-template-columns: repeat(2, 1fr); } }
.points li { max-width: none; border-top: 2px solid var(--cuivre); padding-top: 1rem; }
.points strong { display: block; font-family: var(--titre); font-size: var(--t-m); font-weight: 500; margin-bottom: .3rem; }

/* galerie */
.galerie { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.galerie img { border-radius: var(--rayon); }

/* coloris */
.coloris { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; padding: 0; margin: 1.5rem 0 0; }
.coloris li { max-width: none; text-align: center; font-size: var(--t-xs); color: var(--gris-texte); }
.coloris span {
  display: block; width: 64px; height: 64px; border-radius: 50%;
  border: 1px solid var(--gris); margin: 0 auto .5rem;
}

/* ------------------------------------------------------------------ faq -- */

.faq { max-width: var(--lecture); }
.faq details { border-bottom: 1px solid var(--gris); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.1rem 2rem 1.1rem 0; position: relative;
  font-family: var(--titre); font-size: var(--t-m); font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .35rem; top: 1.6rem;
  width: 10px; height: 10px;
  border-right: 1.5px solid var(--cuivre); border-bottom: 1.5px solid var(--cuivre);
  transform: rotate(45deg); transition: transform var(--transition);
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.9rem; }
.faq__reponse { padding-bottom: 1.3rem; color: var(--ardoise-clair); }

/* ---------------------------------------------------------------- devis -- */

.devis { background: var(--blanc); border: var(--bordure); border-radius: var(--rayon); padding: clamp(1.75rem, 4vw, 3rem); }
.devis__intro { max-width: var(--lecture); }
.devis__erreur {
  background: #FDF0EC; border-left: 3px solid #C0492B; color: #8A2F1B;
  padding: .9rem 1.1rem; margin-bottom: 1.5rem; max-width: none;
}
.devis__grille { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .devis__grille { grid-template-columns: repeat(2, 1fr); } }
.devis__champ { margin: 0; max-width: none; }
.devis__champ--large { grid-column: 1 / -1; }
.devis__champ label { display: block; font-size: var(--t-s); margin-bottom: .35rem; color: var(--ardoise-clair); }
.devis__champ input, .devis__champ select, .devis__champ textarea {
  width: 100%; font: var(--t-base)/1.5 var(--texte); color: var(--ardoise);
  background: var(--creme); border: 1px solid var(--gris); border-radius: var(--rayon);
  padding: .75rem .9rem;
}
.devis__champ textarea { resize: vertical; }
.devis__champ [aria-invalid="true"] { border-color: #C0492B; }
.devis__rgpd label { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--t-s); }
.devis__rgpd input { width: auto; margin-top: .25rem; flex: none; }
.devis__pot { position: absolute; left: -9999px; }
.devis .bouton { margin-top: 1.75rem; }
.devis__mention { font-size: var(--t-xs); color: var(--gris-texte); margin-top: 1rem; }

/* ------------------------------------------------------------ appel CTA -- */

.appel { background: var(--ardoise); color: var(--creme); text-align: center; }
.appel h2 { color: var(--creme); }
.appel p { color: var(--gris); margin-inline: auto; }
.appel .bouton { margin-top: 1rem; }

/* ------------------------------------------------------------------ pied -- */

.pied { background: var(--ardoise); color: var(--gris); font-size: var(--t-s); }
.pied a { color: var(--gris); text-decoration: none; }
.pied a:hover { color: var(--blanc); text-decoration: underline; }
.pied__grille {
  display: grid; gap: 2.5rem; padding-block: var(--section) 2rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.pied h3 { color: var(--creme); font-size: var(--t-base); font-family: var(--texte); font-weight: 500; margin-bottom: 1rem; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: .55rem; max-width: none; }
.pied__logo img { height: 64px; width: auto; margin-bottom: 1rem; }
.pied__bas {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-block: 1.5rem; font-size: var(--t-xs);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
}

/* =========================================================================
   Assistant de devis en 4 etapes
   ========================================================================= */

.assistant-tete { background: var(--blanc); border-bottom: var(--bordure); padding-block: clamp(2.5rem, 6vw, 4rem) 2rem; text-align: center; }
.assistant-tete h1 { margin-bottom: .4em; }
.assistant-tete p { color: var(--gris-texte); font-size: var(--t-s); margin: 0 auto; }

/* jalons */
.jalons {
  display: flex; align-items: flex-start; justify-content: center;
  list-style: none; margin: 2.5rem auto; padding: 0;
  max-width: 34rem; counter-reset: none;
}
.jalon {
  flex: 1; max-width: none; text-align: center; position: relative;
  font-size: var(--t-xs); color: var(--gris-texte);
}
.jalon:not(:last-child)::after {
  content: ""; position: absolute; top: 17px; left: calc(50% + 22px); right: calc(-50% + 22px);
  height: 1px; background: var(--gris);
}
.jalon--fait:not(:last-child)::after { background: var(--cuivre); }
.jalon__num {
  display: grid; place-items: center;
  width: 34px; height: 34px; margin: 0 auto .5rem;
  border: 1px solid var(--gris); border-radius: 50%;
  background: var(--creme); font-size: var(--t-s);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.jalon--actif .jalon__num { background: var(--cuivre); border-color: var(--cuivre); color: var(--blanc); }
.jalon--actif .jalon__nom { color: var(--ardoise); }
.jalon--fait  .jalon__num { border-color: var(--cuivre); color: var(--cuivre); }

/* etapes */
.assistant { border: 0; padding: 0; margin: 0 0 var(--section); }
.etape { border: 0; padding: 0; margin: 0; min-width: 0; }
.etape__titre { font-family: var(--titre); font-size: var(--t-xl); font-weight: 500; padding: 0; margin-bottom: .3rem; }
.etape__aide { color: var(--gris-texte); font-size: var(--t-s); margin-bottom: 2rem; }
.etape__nav { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: flex-end; margin-top: 2.5rem; }

/* cartes de choix */
.choix { display: grid; gap: 1rem; }
.choix--2 { grid-template-columns: 1fr; }
.choix--3 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
@media (min-width: 700px) { .choix--2 { grid-template-columns: repeat(2, 1fr); } }

.carte { position: relative; display: block; cursor: pointer; }
.carte input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: pointer;
}
.carte__corps {
  display: block; padding: 1.15rem 1.35rem;
  background: var(--blanc); border: 1px solid var(--gris); border-radius: var(--rayon);
  transition: border-color var(--transition), background var(--transition);
  height: 100%;
}
.carte:hover .carte__corps { border-color: var(--cuivre); }
.carte input:checked + .carte__corps { border-color: var(--cuivre); background: #FBF6F0; box-shadow: inset 0 0 0 1px var(--cuivre); }
.carte input:focus-visible + .carte__corps { outline: 2px solid var(--cuivre); outline-offset: 2px; }
.carte__nom { display: block; font-weight: 500; margin-bottom: .2rem; }
.carte__desc { display: block; font-size: var(--t-s); color: var(--gris-texte); line-height: 1.45; }
.carte--compacte .carte__corps { padding: .95rem 1rem; text-align: center; }
.carte--compacte .carte__nom { margin: 0; font-size: var(--t-s); }

.sous-champ { margin-bottom: 2.25rem; }
.sous-champ__label { display: block; font-size: var(--t-s); color: var(--ardoise-clair); margin-bottom: .75rem; }
.sous-champ__label em { color: var(--gris-texte); font-style: normal; }

/* recapitulatif */
.recap {
  background: #FBF6F0; border: 1px solid var(--creme-fonce);
  border-radius: var(--rayon); padding: 1.5rem 1.6rem; margin-bottom: 2.25rem;
}
.recap h3 { font-family: var(--texte); font-size: var(--t-s); font-weight: 500; color: var(--cuivre-fonce); margin-bottom: 1rem; }
.recap dl { margin: 0; }
.recap div { display: flex; justify-content: space-between; gap: 1.5rem; padding: .6rem 0; border-bottom: 1px solid rgba(166,124,82,.18); }
.recap div:last-child { border-bottom: 0; }
.recap dt { color: var(--gris-texte); font-size: var(--t-s); }
.recap dd { margin: 0; text-align: right; font-weight: 500; font-size: var(--t-s); }
.recap .recap--vide { font-weight: 400; color: var(--gris-texte); }

/* sans JavaScript : tout reste visible et utilisable */
.etape + .etape { margin-top: var(--section); }

.rappel-modele {
  background: #FBF6F0; border: 1px solid var(--creme-fonce); border-radius: var(--rayon);
  padding: .85rem 1.1rem; margin-bottom: 2rem; font-size: var(--t-s); max-width: none;
  display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: baseline;
}
.rappel-modele strong { font-weight: 500; }
.rappel-modele a { margin-left: auto; font-size: var(--t-xs); }

/* =========================================================================
   Page d'accueil
   ========================================================================= */

.hero--accueil .hero__contenu { padding-block: clamp(5rem, 16vw, 10rem); }

.sur-titre { font-size: var(--t-xs); color: var(--cuivre); letter-spacing: .04em; margin-bottom: .5rem; }
.section__chapo { color: var(--gris-texte); max-width: 46ch; margin-bottom: 2.5rem; }


/* bandeau de reassurance : fond ardoise, texte clair */
.bandeau { background: var(--ardoise); }
.bandeau__grille {
  display: grid; gap: 2rem; padding-block: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.bandeau h2 { font-family: var(--texte); font-size: var(--t-base); font-weight: 500;
  color: var(--blanc); margin-bottom: .3rem; }
.bandeau p { font-size: var(--t-s); color: var(--gris); margin: 0; max-width: none; }
.bandeau__grille { padding-block: 2.75rem; }


/* sections alternees */
.alterne { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 860px) {
  .alterne { grid-template-columns: 1fr 1fr; }
  .alterne--inverse .alterne__texte { order: 2; }
}
.alterne__media img { border-radius: var(--rayon); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.alterne__texte {
  background: var(--ardoise); color: var(--creme);
  border-radius: var(--rayon); padding: clamp(2rem, 4vw, 3.25rem);
}
.alterne__texte h2 { color: var(--blanc); }
.alterne__texte p { color: var(--gris); }
.alterne__texte .sur-titre { color: var(--cuivre); }
.alterne__texte .bouton { border-color: var(--creme); color: var(--creme); }
.alterne__texte .bouton:hover { background: var(--creme); color: var(--ardoise); }
.alterne__texte .bouton--plein { background: var(--cuivre); border-color: var(--cuivre); color: var(--blanc); }
.alterne__texte .bouton--plein:hover { background: var(--cuivre-fonce); border-color: var(--cuivre-fonce); }

.liste-check { list-style: none; padding: 0; margin: 0 0 2rem; }
.liste-check li { position: relative; padding-left: 1.6rem; margin-bottom: .5rem; }
.liste-check li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 9px; height: 5px; border-left: 1.5px solid var(--cuivre);
  border-bottom: 1.5px solid var(--cuivre); transform: rotate(-45deg);
}

/* avis */
.avis { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.avis blockquote {
  margin: 0; background: var(--blanc); border: var(--bordure); border-radius: var(--rayon);
  padding: 1.5rem 1.6rem; font-family: var(--titre); font-size: var(--t-m); line-height: 1.45;
}
.avis p { margin: 0; max-width: none; }

/* articles */
.articles { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.article-carte a { text-decoration: none; color: inherit; }
.article-carte img { border-radius: var(--rayon); aspect-ratio: 3/2; object-fit: cover; width: 100%; margin-bottom: 1rem; }
.article-carte h3 { font-size: var(--t-m); margin-bottom: .3rem; }
.article-carte a:hover h3 { color: var(--cuivre-fonce); }
.article-carte__date { font-size: var(--t-xs); color: var(--gris-texte); margin-bottom: .6rem; }
.article-carte p { font-size: var(--t-s); color: var(--ardoise-clair); }
.article-carte > a:last-child { font-size: var(--t-s); color: var(--cuivre-fonce); text-decoration: underline; }

/* barre d'annonce */
.annonce {
  margin: 0; background: var(--ardoise); color: var(--creme);
  text-align: center; font-size: var(--t-xs); padding: .6rem 1rem;
  max-width: none; letter-spacing: .01em;
}

/* bandeau de reassurance */
.bandeau__item { display: flex; gap: .9rem; align-items: flex-start; }
.bandeau__ico { color: var(--cuivre); font-size: 1.35rem; line-height: 1.2; flex: none; }

/* univers */
.univers-tete { text-align: center; max-width: 44rem; margin: 0 auto 3rem; }
.univers-tete h2 { margin-bottom: .4em; }
.univers-tete p { color: var(--gris-texte); margin: 0 auto; }

.univers { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.univers__carte {
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
  text-align: center; text-decoration: none;
  background: var(--ardoise); color: var(--creme);
  border: 0; border-radius: var(--rayon);
  padding: 2.5rem 1.25rem;
  transition: background var(--transition), transform var(--transition);
}
.univers__carte:nth-child(2) { background: var(--ardoise-clair); }
.univers__carte:nth-child(3) { background: var(--ardoise-moyen); }
.univers__carte:nth-child(4) { background: var(--cuivre); }
.univers__carte:nth-child(5) { background: var(--cuivre-sombre); }
.univers__carte:hover { background: var(--cuivre); transform: translateY(-3px); }
.univers__ico { color: var(--creme); }
.univers__ico svg { width: 48px; height: 48px; display: block; }
.univers__carte h3 { font-size: var(--t-base); font-family: var(--texte);
  font-weight: 500; margin: 0; color: var(--creme); }

/* pastilles de points cles */
.pastilles { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 2rem; }
.pastilles span {
  font-size: var(--t-xs); color: var(--ardoise-clair);
  background: transparent; border: 2px solid var(--cuivre);
  border-radius: 999px; padding: .45rem 1rem;
}
/* sur les panneaux sombres, le texte repasse en clair */
.alterne__texte .pastilles span,
.appel .pastilles span,
.hero .pastilles span { color: var(--creme); }

/* hero : accroche en capitales comme sur l'ancien site */
.hero__titre-capitales {
  text-transform: uppercase; letter-spacing: .02em;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
}

/* avis : cartes blanches sur creme */
.avis blockquote { border-color: rgba(31,41,51,.08); }
.avis blockquote::before { content: "★★★★★"; display: block; color: var(--cuivre);
  font-family: var(--texte); font-size: var(--t-s); letter-spacing: .12em; margin-bottom: .8rem; }

/* =========================================================================
   Vidéo
   ========================================================================= */

.video { margin: 0 0 2rem; }
.video__affiche {
  display: block; position: relative; width: 100%; padding: 0;
  border: 0; background: none; cursor: pointer; border-radius: var(--rayon); overflow: hidden;
}
.video__affiche img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.video__lecture {
  position: absolute; inset: 0; display: grid; place-items: center;
  transition: transform var(--transition);
}
.video__lecture svg { width: 74px; height: 74px; }
.video__affiche:hover .video__lecture { transform: scale(1.06); }
.video video { width: 100%; height: auto; border-radius: var(--rayon); display: block; background: var(--ardoise); }
.video figcaption { font-size: var(--t-s); color: var(--gris-texte); margin-top: .75rem; }
.alterne__texte + .alterne__media .video { margin: 0; }


/* =========================================================================
   PAGE MODÈLE — système graphique unique
   Règles tenues sur toute la page :
   · fonds : crème et blanc en alternance stricte ; ardoise seulement 2 fois
     (le panneau éditorial et l'appel final)
   · chaque section : surtitre cuivre + h2, alignés à gauche
   · une seule forme de liste (coche cuivre)
   · une seule forme de carte (fond blanc, filet fin, rayon 8px)
   ========================================================================= */

.pm h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.pm-eyebrow { font-size: var(--t-xs); color: var(--cuivre); letter-spacing: .06em;
  margin-bottom: .5rem; }
.pm-tete { max-width: 46rem; margin-bottom: 2.75rem; }
.pm-tete p { color: var(--gris-texte); margin: 0; }

/* liste unique */
.pm-liste { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.pm-liste li { position: relative; padding-left: 1.6rem; margin-bottom: .6rem;
  font-size: var(--t-s); }
.pm-liste li::before { content: ""; position: absolute; left: 0; top: .5em;
  width: 9px; height: 5px; border-left: 1.5px solid var(--cuivre);
  border-bottom: 1.5px solid var(--cuivre); transform: rotate(-45deg); }

/* carte unique */
.pm-carte { background: var(--blanc); border: 1px solid var(--creme-fonce);
  border-radius: var(--rayon); padding: clamp(1.35rem, 3vw, 2rem); }
.pm-carte h3 { font-size: var(--t-l); margin-bottom: .6em; }
.pm-carte p { font-size: var(--t-s); color: var(--ardoise-clair); }
.pm-carte .pm-liste { margin-top: 1.25rem; }

/* ---- hero -------------------------------------------------------------- */
.pm-hero { position: relative; min-height: min(70vh, 620px); display: flex; align-items: center; }
.pm-hero__img { position: absolute; inset: 0; }
.pm-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.pm-hero__voile { position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(31,41,51,.9) 0%, rgba(31,41,51,.74) 42%,
              rgba(31,41,51,.24) 70%, rgba(31,41,51,.05) 100%); }
.pm-hero__txt { position: relative; padding-block: 3.5rem; max-width: 40rem; }
.pm-hero h1 { color: #fff; font-size: clamp(2.6rem, 7vw, 4.4rem);
  letter-spacing: -.02em; margin-bottom: .15em; }
.pm-hero .pm-eyebrow { color: var(--cuivre); }
.pm-fil { font-size: var(--t-xs); color: rgba(248,246,242,.7); margin-bottom: 1.25rem; }
.pm-fil a { color: rgba(248,246,242,.7); }
.pm-hero__accroche { font-size: var(--t-m); color: rgba(248,246,242,.9);
  max-width: 32rem; margin-bottom: 2rem; }
.pm-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.pm-prix { margin: 0 0 1.75rem; max-width: none; line-height: 1.3; }
.pm-prix__lib { display: block; font-size: var(--t-xs); color: var(--cuivre);
  letter-spacing: .06em; margin-bottom: .15rem; }
.pm-prix strong { font-family: var(--titre); font-weight: 500; color: #fff;
  font-size: clamp(2rem, 4vw, 2.6rem); display: inline-block; }
.pm-prix__det { display: block; font-size: var(--t-xs);
  color: rgba(248,246,242,.68); margin-top: .3rem; }

/* ---- atouts (bande ardoise + pictos) ---------------------------------- */
.pm-atouts { background: var(--ardoise); color: var(--creme); }
.pm-atouts__grille { display: grid; gap: 2.25rem 2rem; padding-block: 3.25rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.pm-atout svg { width: 32px; height: 32px; color: var(--cuivre);
  margin-bottom: .9rem; display: block; }
.pm-atout h3 { font-family: var(--texte); font-size: var(--t-base); font-weight: 500;
  color: #fff; margin-bottom: .35rem; }
.pm-atout p { font-size: var(--t-s); color: var(--gris); margin: 0; max-width: 30ch; }

/* ---- panneau éditorial (le seul bloc sombre du corps) ------------------ */
.pm-split { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .pm-split { grid-template-columns: 1fr 1fr; } }
.pm-split__img { min-height: clamp(300px, 44vw, 540px); }
.pm-split__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-split__txt { background: var(--ardoise); color: var(--creme);
  display: flex; align-items: center;
  padding: clamp(2.25rem, 5vw, 4rem) clamp(1.5rem, 5vw, 3.75rem); }
.pm-split__txt h2 { color: #fff; margin-bottom: .6em; }
.pm-split__txt p { color: var(--gris); }
.pm-split__txt .pm-liste { margin: 1.75rem 0 2rem; }
.pm-split__txt .pm-liste li { color: var(--creme); }

/* ---- cotes ------------------------------------------------------------- */
.pm-cotes__grille { display: grid; gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); }
.pm-cote svg { width: 26px; height: 26px; color: var(--cuivre);
  margin-bottom: .6rem; display: block; }
.pm-cote__val { font-family: var(--titre); font-size: 1.65rem; line-height: 1.1;
  display: block; margin-bottom: .15rem; }
.pm-cote__lib { font-size: var(--t-xs); color: var(--gris-texte); display: block; }
.pm-cote__det { font-size: var(--t-xs); color: var(--gris-texte); display: block;
  margin-top: .3rem; }

/* ---- corps ------------------------------------------------------------- */
.pm-corps { display: grid; gap: clamp(2.5rem, 5vw, 4rem); grid-template-columns: 1fr;
  align-items: start; }
@media (min-width: 900px) { .pm-corps { grid-template-columns: 1.1fr .9fr; } }

/* nuancier */
.pm-ral { display: flex; flex-wrap: wrap; gap: 1.4rem; list-style: none;
  padding: 0; margin: 1.25rem 0 0; }
.pm-ral li { max-width: none; text-align: center; font-size: var(--t-xs);
  color: var(--gris-texte); line-height: 1.35; }
.pm-ral span { display: block; width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid rgba(31,41,51,.14); margin: 0 auto .5rem; }
.pm-ral strong { display: block; color: var(--ardoise); font-weight: 500; }

/* ---- options et galerie : même forme de vignette ----------------------- */
.pm-grille4 { display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); }
.pm-vign { margin: 0; }
.pm-vign img { width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--rayon); display: block; margin-bottom: .9rem; }
.pm-vign h3 { font-size: var(--t-m); margin-bottom: .3rem; }
.pm-vign p { font-size: var(--t-s); color: var(--ardoise-clair); line-height: 1.5;
  margin: 0 0 .6rem; max-width: none; }
.pm-vign em { font-style: normal; font-size: var(--t-xs); color: var(--cuivre-fonce); }
.pm-vign--picto img { display: none; }
.pm-vign--picto .pm-vign__ph { aspect-ratio: 4/3; border-radius: var(--rayon);
  margin-bottom: .9rem; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--ardoise-clair), var(--cuivre-sombre)); }
.pm-vign--picto svg { width: 50px; height: 50px; color: rgba(248,246,242,.92); }

.pm-gal { display: grid; gap: 1.25rem; }
.pm-gal img { width: 100%; border-radius: var(--rayon); object-fit: cover; display: block; }
.pm-gal__grand img { aspect-ratio: 16/9; }
.pm-gal__trio { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, 1fr); }
.pm-gal__trio img { aspect-ratio: 4/3; }
@media (max-width: 700px) { .pm-gal__trio { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .pm-gal__trio { grid-template-columns: 1fr; } }
.pm-credit { font-size: var(--t-xs); color: var(--gris-texte); margin-top: 1rem; }

/* ---- barre d'appel collante -------------------------------------------- */
.pm-barre { position: sticky; bottom: 0; z-index: 40;
  background: rgba(31,41,51,.96); border-top: 1px solid rgba(255,255,255,.12);
  padding: .8rem 0; }
.pm-barre__inner { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .75rem 1.5rem; }
.pm-barre__txt { color: var(--creme); font-size: var(--t-s); margin: 0; max-width: none; }
.pm-barre__txt strong { font-weight: 500; }
.pm-barre__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.pm-barre .bouton { padding: .7rem 1.25rem; }
@media (max-width: 620px) {
  .pm-barre__txt { display: none; }
  .pm-barre__inner { justify-content: center; }
  .pm-barre .bouton { flex: 1; text-align: center; }
}

/* ---- profils / finitions ----------------------------------------------- */
.pm-profils { display: grid; gap: 1.25rem; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) { .pm-profils { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
.pm-profil { margin: 0; }
.pm-profil img { width: 100%; aspect-ratio: 1/1; object-fit: cover;
  border-radius: var(--rayon); display: block; margin-bottom: .85rem;
  background: var(--creme-fonce); }
.pm-profil figcaption { font-size: var(--t-s); color: var(--ardoise-clair);
  line-height: 1.5; }
.pm-profil strong { display: block; font-family: var(--titre); font-size: var(--t-m);
  font-weight: 500; color: var(--ardoise); margin-bottom: .25rem; }

/* ---- vidéo dans une page modèle ---------------------------------------- */
.pm-video { max-width: 58rem; }
/* =========================================================================
   PAGE COLLECTION — l'image d'abord
   Principes : une photo par modèle en grand, le texte posé dessus,
   aucun bloc de prose avant que le visiteur ait vu les produits.
   ========================================================================= */

/* ---- hero : photo pleine hauteur, titre minimal --------------------- */
.cx-hero { position: relative; height: min(78vh, 660px); display: flex; align-items: flex-end; }
.cx-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cx-hero::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(31,41,51,.85) 0%, rgba(31,41,51,.3) 40%, transparent 70%); }
.cx-hero__txt { position: relative; z-index: 1; padding-block: 3.5rem; }
.cx-hero h1 { color: #fff; font-size: clamp(2.6rem, 7vw, 4.6rem);
  letter-spacing: -.025em; margin-bottom: .2em; }
.cx-hero p { color: rgba(248,246,242,.88); font-size: var(--t-m); max-width: 36rem; margin: 0; }
.cx-fil { font-size: var(--t-xs); color: rgba(248,246,242,.65); margin-bottom: 1rem; }
.cx-fil a { color: rgba(248,246,242,.65); }

/* ---- grille éditoriale : premier élément en grand -------------------- */
.cx-grille { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 720px)  { .cx-grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .cx-grille { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px)  { .cx-grille > :first-child { grid-column: span 2; } }

/* ---- carte : l'image porte tout ------------------------------------- */
.cx-carte { position: relative; display: block; overflow: hidden;
  border-radius: var(--rayon); text-decoration: none; color: inherit;
  background: var(--ardoise); }
.cx-carte img { width: 100%; height: 100%; object-fit: cover; display: block;
  aspect-ratio: 4/5; transition: transform 600ms cubic-bezier(.2,.7,.3,1); }
.cx-grille > :first-child img { aspect-ratio: 8/5; }
.cx-carte:hover img { transform: scale(1.04); }
.cx-carte::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(31,41,51,.9) 0%, rgba(31,41,51,.45) 32%,
              rgba(31,41,51,0) 62%); }

.cx-carte__txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 1.5rem 1.6rem 1.4rem; }
.cx-carte__tag { display: inline-block; font-size: var(--t-xs); color: var(--creme);
  border: 1px solid rgba(248,246,242,.5); border-radius: 999px;
  padding: .22rem .7rem; margin-bottom: .7rem; backdrop-filter: blur(4px); }
.cx-carte__nom { font-family: var(--titre); font-weight: 500; color: #fff;
  font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.1; display: block;
  margin-bottom: .3rem; }
.cx-carte__acc { color: rgba(248,246,242,.86); font-size: var(--t-s);
  line-height: 1.45; margin: 0 0 .9rem; max-width: 34ch; }
.cx-grille > :first-child .cx-carte__acc { max-width: 44ch; }
.cx-carte__prix { font-size: var(--t-xs); color: rgba(248,246,242,.72); margin: 0; }
.cx-carte__prix strong { font-family: var(--titre); font-size: var(--t-m);
  font-weight: 500; color: #fff; }

/* ---- bandeau photo pleine largeur ----------------------------------- */
.cx-bande { position: relative; height: clamp(280px, 40vw, 460px); overflow: hidden;
  display: flex; align-items: center; }
.cx-bande img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cx-bande::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(31,41,51,.88) 0%, rgba(31,41,51,.5) 48%, transparent 78%); }
.cx-bande__txt { position: relative; z-index: 1; max-width: 34rem; }
.cx-bande h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: .4em; }
.cx-bande p { color: rgba(248,246,242,.86); margin-bottom: 1.5rem; }

/* ---- comparatif, version compacte ----------------------------------- */
.cx-comp { overflow-x: auto; }
.cx-comp table { width: 100%; border-collapse: collapse; font-size: var(--t-s); min-width: 660px; }
.cx-comp thead th { text-align: left; font-weight: 500; color: var(--gris-texte);
  font-size: var(--t-xs); padding: 0 1rem .8rem 0; border-bottom: 2px solid var(--cuivre);
  white-space: nowrap; }
.cx-comp tbody th { text-align: left; font-family: var(--titre); font-weight: 500;
  font-size: var(--t-m); padding: .9rem 1rem .9rem 0; border-bottom: 1px solid var(--gris); }
.cx-comp tbody th a { text-decoration: none; color: var(--ardoise); }
.cx-comp tbody th a:hover { color: var(--cuivre-fonce); }
.cx-comp td { padding: .9rem 1rem; border-bottom: 1px solid var(--gris);
  color: var(--ardoise-clair); }
.cx-comp tbody tr:hover th, .cx-comp tbody tr:hover td { background: #FBF6F0; }
.cx-comp .fort { color: var(--ardoise); font-weight: 500; }
.cx-comp .prix { font-family: var(--titre); font-size: var(--t-m); color: var(--ardoise);
  white-space: nowrap; }

/* ---- autres familles : trois vignettes photo ------------------------ */
.cx-familles { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 800px) { .cx-familles { grid-template-columns: repeat(3, 1fr); } }
.cx-famille { position: relative; display: block; overflow: hidden;
  border-radius: var(--rayon); text-decoration: none; }
.cx-famille img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block;
  transition: transform 600ms cubic-bezier(.2,.7,.3,1); }
.cx-famille:hover img { transform: scale(1.05); }
.cx-famille::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(31,41,51,.88) 0%, rgba(31,41,51,.2) 55%, transparent 80%); }
.cx-famille__txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 1.25rem 1.35rem; }
.cx-famille h3 { color: #fff; font-size: var(--t-l); margin-bottom: .2rem; }
.cx-famille span { font-size: var(--t-xs); color: rgba(248,246,242,.78); }

/* ---- texte de bas de page, discret ---------------------------------- */
.cx-texte { max-width: 62ch; }
.cx-texte p { color: var(--ardoise-clair); font-size: var(--t-s); }

/* ---- lien « Devis gratuit » du menu ------------------------------------ */
.nav a.nav__devis { color: var(--cuivre-fonce); font-weight: 500; }
.nav a.nav__devis:hover { border-bottom-color: var(--cuivre); }
@media (min-width: 901px) {
  .nav a.nav__devis { border: 1px solid var(--cuivre); border-radius: var(--rayon);
    padding: .45rem .9rem; }
  .nav a.nav__devis:hover { background: var(--cuivre); color: #fff; border-color: var(--cuivre); }
}

/* ---- page À propos : zones d'intervention ------------------------------ */
.cx-hero--court { height: min(58vh, 480px); }

.ap-zones { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .ap-zones { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .ap-zones { grid-template-columns: repeat(4, 1fr); } }
.ap-zone { background: var(--blanc); border: 1px solid var(--creme-fonce);
  border-radius: var(--rayon); padding: 1.5rem 1.6rem; display: flex; flex-direction: column; }
.ap-zone--fort { background: var(--ardoise); border-color: var(--ardoise); }
.ap-zone h3 { font-size: var(--t-l); margin-bottom: .5em; }
.ap-zone--fort h3 { color: #fff; }
.ap-zone p { font-size: var(--t-s); color: var(--ardoise-clair); margin-bottom: 1rem;
  max-width: none; }
.ap-zone--fort p { color: var(--gris); }
.ap-zone span { margin-top: auto; font-size: var(--t-xs); color: var(--cuivre-fonce);
  border-top: 1px solid var(--creme-fonce); padding-top: .7rem; }
.ap-zone--fort span { color: var(--cuivre); border-top-color: rgba(255,255,255,.16); }

/* ---- accueil : les quatre étapes d'accompagnement ---------------------- */
.accueil-etapes { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .accueil-etapes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .accueil-etapes { grid-template-columns: repeat(4, 1fr); } }
.accueil-etape { border-top: 2px solid var(--cuivre); padding-top: 1.1rem; }
.accueil-etape__num { display: block; font-family: var(--titre); font-size: 1.8rem;
  color: var(--cuivre); line-height: 1; margin-bottom: .5rem; }
.accueil-etape h3 { font-family: var(--texte); font-size: var(--t-base);
  font-weight: 500; margin-bottom: .35rem; }
.accueil-etape p { font-size: var(--t-s); color: var(--gris-texte); margin: 0;
  max-width: 32ch; }

/* ---- ancres : compenser l'en-tête collant ----------------------------- */
[id] { scroll-margin-top: 110px; }

/* =========================================================================
   ACCUEIL — blocs de gamme : photo détourée / panneau sombre pleine largeur
   ========================================================================= */
.gamme { display: grid; grid-template-columns: 1fr; background: var(--creme); }
@media (min-width: 900px) { .gamme { grid-template-columns: 1fr 1fr; } }

/* la photo touche le panneau, et respire des trois autres côtés */
.gamme__media { display: flex; padding: clamp(1.5rem, 4vw, 3.5rem); }
@media (min-width: 900px) { .gamme__media { padding-right: 0; } }
.gamme__media img { width: 100%; height: 100%; object-fit: cover; display: block;
  aspect-ratio: 4/3; border-radius: var(--rayon) 0 0 var(--rayon); }
/* sur mobile, la photo se colle au panneau par le bas */
@media (max-width: 899px) {
  .gamme__media { padding-bottom: 0; }
  .gamme__media img { border-radius: var(--rayon) var(--rayon) 0 0; }
}

/* le panneau va jusqu'au bord de l'écran */
.gamme__panneau { background: var(--ardoise); color: var(--creme);
  display: flex; align-items: center;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3.5rem); }
.gamme__txt { max-width: 32rem; width: 100%; }

.gamme__sur { font-size: var(--t-xs); color: var(--cuivre);
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: .9rem; }
.gamme h2 { color: #fff; font-family: var(--titre); font-weight: 400;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem); text-transform: uppercase;
  letter-spacing: .02em; margin-bottom: .7em; }
.gamme__desc { color: rgba(248,246,242,.82); font-size: var(--t-s);
  line-height: 1.65; margin-bottom: 1.75rem; max-width: none; }

.gamme__points { list-style: none; padding: 0; margin: 0 0 2.25rem; }
.gamme__points li { position: relative; padding-left: 1rem; margin-bottom: .75rem;
  font-size: var(--t-s); color: var(--creme); max-width: none; }
.gamme__points li::before { content: ""; position: absolute; left: 0; top: .25em;
  bottom: .25em; width: 3px; background: var(--cuivre); border-radius: 2px; }

.gamme__actions { display: flex; flex-direction: column; gap: .75rem; }
.gamme__actions .bouton { width: 100%; text-align: center; }

/* une section sur deux, la photo passe à droite */
@media (min-width: 900px) {
  .gamme--inverse .gamme__media   { order: 2; padding-right: clamp(1.5rem, 4vw, 3.5rem);
                                    padding-left: 0; }
  .gamme--inverse .gamme__media img { border-radius: 0 var(--rayon) var(--rayon) 0; }
  .gamme--inverse .gamme__panneau { order: 1; }
  .gamme--inverse .gamme__txt     { margin-left: auto; }
}

/* respiration entre les sections de gamme */
.gamme + .gamme { margin-top: clamp(2.5rem, 6vw, 5rem); }
.gamme:first-of-type { margin-top: clamp(1.5rem, 4vw, 3rem); }
.gamme:last-of-type  { margin-bottom: clamp(2.5rem, 6vw, 5rem); }

/* =========================================================================
   ACCUEIL — grille des univers en rail horizontal sur mobile
   ========================================================================= */
@media (max-width: 720px) {
  .univers {
    display: flex;
    gap: .85rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* le rail déborde du conteneur : la 5e carte dépasse du bord */
    margin-inline: calc(-1 * max(1.25rem, (100vw - var(--largeur)) / 2));
    padding-inline: max(1.25rem, (100vw - var(--largeur)) / 2);
    padding-bottom: .75rem;
    scrollbar-width: none;
  }
  .univers::-webkit-scrollbar { display: none; }

  .univers__carte {
    flex: 0 0 auto;
    width: 46vw;
    max-width: 200px;
    scroll-snap-align: start;
    padding: 1.75rem 1rem;
    transform: none;
  }
  .univers__carte:hover { transform: none; }
  .univers__ico svg { width: 38px; height: 38px; }
  .univers__carte h3 { font-size: var(--t-s); }
}

/* =========================================================================
   PAGE CONTACT
   ========================================================================= */
.ct-voies { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 860px) { .ct-voies { grid-template-columns: repeat(3, 1fr); } }
.ct-voie { display: block; text-decoration: none; color: inherit;
  background: var(--blanc); border: 1px solid var(--creme-fonce);
  border-radius: var(--rayon); padding: clamp(1.5rem, 3vw, 2rem);
  transition: border-color var(--transition), transform var(--transition); }
.ct-voie:hover { border-color: var(--cuivre); transform: translateY(-2px); }
.ct-voie--fort { background: var(--ardoise); border-color: var(--ardoise); }
.ct-voie--fort:hover { background: var(--ardoise-clair); border-color: var(--cuivre); }
.ct-voie__ico { display: block; color: var(--cuivre); margin-bottom: 1rem; }
.ct-voie h2 { font-size: var(--t-l); margin-bottom: .4em; }
.ct-voie--fort h2 { color: #fff; }
.ct-voie p { font-size: var(--t-s); color: var(--ardoise-clair); margin-bottom: 1rem;
  max-width: none; }
.ct-voie--fort p { color: var(--gris); }
.ct-voie__lien { font-size: var(--t-s); color: var(--cuivre-fonce);
  border-bottom: 1px solid var(--cuivre); padding-bottom: .1rem; }
.ct-voie--fort .ct-voie__lien { color: var(--cuivre); }

.ct-grille { display: grid; gap: clamp(2.5rem, 5vw, 4rem); grid-template-columns: 1fr;
  align-items: start; }
@media (min-width: 960px) { .ct-grille { grid-template-columns: .8fr 1.2fr; } }

.ct-coord { margin: 0; }
.ct-coord > div { padding: 1rem 0; border-bottom: 1px solid var(--gris); }
.ct-coord > div:last-child { border-bottom: 0; }
.ct-coord dt { font-size: var(--t-xs); color: var(--gris-texte); margin-bottom: .25rem; }
.ct-coord dd { margin: 0; font-size: var(--t-s); line-height: 1.55; }
.ct-note { color: var(--gris-texte); font-size: var(--t-xs); }

/* =========================================================================
   PAGE MERCI
   ========================================================================= */
.merci { max-width: 44rem; text-align: center; }
.merci__coche { display: inline-block; color: var(--cuivre); margin-bottom: 1.5rem; }
.merci h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: .4em; }
.merci__intro { font-size: var(--t-m); color: var(--ardoise-clair);
  margin: 0 auto 3rem; }
.merci__suite { text-align: left; background: var(--blanc);
  border: 1px solid var(--creme-fonce); border-radius: var(--rayon);
  padding: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: 2.5rem; }
.merci__suite h2 { font-size: var(--t-l); margin-bottom: 1.25em; }
.merci__etapes { list-style: none; counter-reset: etape; padding: 0; margin: 0; }
.merci__etapes li { counter-increment: etape; position: relative;
  padding-left: 2.5rem; margin-bottom: 1.35rem; font-size: var(--t-s);
  color: var(--ardoise-clair); max-width: none; }
.merci__etapes li:last-child { margin-bottom: 0; }
.merci__etapes li::before { content: counter(etape); position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  background: var(--cuivre); color: #fff; font-family: var(--titre);
  font-size: var(--t-s); }
.merci__etapes strong { display: block; color: var(--ardoise); font-weight: 500;
  margin-bottom: .2rem; }
.merci__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center;
  margin-bottom: 2rem; }
.merci__note { font-size: var(--t-s); color: var(--gris-texte); }

/* =========================================================================
   PAGES LÉGALES
   ========================================================================= */
.legal { max-width: 46rem; margin-top: 1.5rem; }
.legal__tete { padding-bottom: 2rem; border-bottom: 2px solid var(--cuivre);
  margin-bottom: 2.5rem; }
.legal h1 { font-size: clamp(2rem, 4.5vw, 2.9rem); margin-bottom: .4em; }
.legal__chapo { color: var(--ardoise-clair); margin-bottom: 1rem; }
.legal__maj { font-size: var(--t-xs); color: var(--gris-texte); margin: 0; }

.legal__section { margin-bottom: 2.75rem; }
.legal__section h2 { font-size: var(--t-l); margin-bottom: .8em;
  display: flex; gap: .6rem; align-items: baseline; }
.legal__section h2 span { color: var(--cuivre); font-size: var(--t-m); flex: none; }
.legal__section p { font-size: var(--t-s); color: var(--ardoise-clair);
  line-height: 1.7; }

.legal__liste { list-style: none; padding: 0; margin: 0 0 1.1em; }
.legal__liste li { position: relative; padding-left: 1.3rem; margin-bottom: .6rem;
  font-size: var(--t-s); color: var(--ardoise-clair); line-height: 1.6; }
.legal__liste li::before { content: ""; position: absolute; left: .2rem; top: .65em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--cuivre); }
.legal__liste strong { color: var(--ardoise); font-weight: 500; }

.legal__defs { margin: 0 0 1.1em; }
.legal__defs > div { display: grid; gap: .2rem .5rem; padding: .65rem 0;
  border-bottom: 1px solid var(--gris); }
@media (min-width: 600px) { .legal__defs > div { grid-template-columns: 13rem 1fr; } }
.legal__defs dt { font-size: var(--t-s); color: var(--gris-texte); }
.legal__defs dd { margin: 0; font-size: var(--t-s); }

.legal__pied { margin-top: 3rem; padding-top: 1.75rem;
  border-top: 1px solid var(--gris); }
.legal__pied p { font-size: var(--t-s); color: var(--gris-texte); }
.legal__liens { font-size: var(--t-xs) !important; margin-bottom: 0 !important; }

/* =========================================================================
   PAGE MÉTHODE
   ========================================================================= */

/* les six étapes */
.mt-etapes { list-style: none; counter-reset: none; padding: 0; margin: 0;
  display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 760px)  { .mt-etapes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .mt-etapes { grid-template-columns: repeat(3, 1fr); } }

.mt-etape { background: var(--blanc); border: 1px solid var(--creme-fonce);
  border-radius: var(--rayon); padding: clamp(1.35rem, 3vw, 1.85rem);
  display: flex; flex-direction: column; max-width: none; }
.mt-etape__tete { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.1rem; }
.mt-etape__num { font-family: var(--titre); font-size: 2rem; line-height: 1;
  color: var(--creme-fonce); }
.mt-etape__ico { color: var(--cuivre); display: flex; }
.mt-etape__sur { font-size: var(--t-xs); color: var(--cuivre);
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: .35rem; }
.mt-etape h3 { font-size: var(--t-m); margin-bottom: .6em; }
.mt-etape p { font-size: var(--t-s); color: var(--ardoise-clair); max-width: none; }
.mt-etape__note { margin-top: auto !important; margin-bottom: 0 !important;
  padding-top: .9rem; border-top: 1px solid var(--creme-fonce);
  font-size: var(--t-xs) !important; color: var(--gris-texte) !important; }

/* schéma de mesure */
.mt-mesure { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr;
  align-items: center; }
@media (min-width: 960px) { .mt-mesure { grid-template-columns: 1fr 1fr; } }
.mt-schema { margin: 0; }
.mt-schema svg { width: 100%; height: auto; display: block;
  background: var(--creme); border-radius: var(--rayon); padding: 1rem; }
.mt-schema figcaption { font-size: var(--t-xs); color: var(--gris-texte);
  margin-top: .9rem; }

/* délais */
.mt-delais { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .mt-delais { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .mt-delais { grid-template-columns: repeat(5, 1fr); } }
.mt-delai { border-top: 2px solid var(--gris); padding-top: 1rem; }
.mt-delai--fort { border-top-color: var(--cuivre); }
.mt-delai__val { display: block; font-family: var(--titre); font-size: 1.7rem;
  line-height: 1.1; margin-bottom: .2rem; }
.mt-delai--fort .mt-delai__val { color: var(--cuivre-fonce); }
.mt-delai__lib { display: block; font-size: var(--t-s); font-weight: 500;
  margin-bottom: .4rem; }
.mt-delai p { font-size: var(--t-xs); color: var(--gris-texte); margin: 0;
  max-width: none; line-height: 1.5; }

/* =========================================================================
   GUIDE — page d'index
   ========================================================================= */
.gd-une { display: grid; grid-template-columns: 1fr; gap: 0; text-decoration: none;
  color: inherit; border-radius: var(--rayon); overflow: hidden;
  background: var(--ardoise); }
@media (min-width: 860px) { .gd-une { grid-template-columns: 1.15fr .85fr; } }
.gd-une__img { min-height: 260px; }
.gd-une__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gd-une__txt { padding: clamp(1.75rem, 4vw, 3rem); display: flex;
  flex-direction: column; justify-content: center; color: var(--creme); }
.gd-une__txt h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: .5em; }
.gd-une__txt p { color: rgba(248,246,242,.85); font-size: var(--t-s);
  max-width: none; margin-bottom: 1rem; }
.gd-une__lien { align-self: flex-start; font-size: var(--t-s); color: var(--cuivre);
  border-bottom: 1px solid var(--cuivre); padding-bottom: .15rem; }
.gd-meta { font-size: var(--t-xs) !important; color: var(--gris-texte) !important;
  margin-bottom: 1.25rem !important; }
.gd-une .gd-meta { color: rgba(248,246,242,.6) !important; }

.gd-grille { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .gd-grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .gd-grille { grid-template-columns: repeat(4, 1fr); } }
.gd-carte img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block;
  border-radius: var(--rayon); margin-bottom: 1rem; }
.gd-carte h3 { font-size: var(--t-m); margin-bottom: .4rem; line-height: 1.25; }
.gd-carte h3 a { text-decoration: none; color: var(--ardoise); }
.gd-carte h3 a:hover { color: var(--cuivre-fonce); }
.gd-carte p { font-size: var(--t-s); color: var(--ardoise-clair); max-width: none; }

/* =========================================================================
   ARTICLE
   ========================================================================= */
.art__tete { background: var(--blanc); border-bottom: var(--bordure);
  padding-block: 2.5rem 2.25rem; }
.art__tete h1 { font-size: clamp(2rem, 4.5vw, 3rem); max-width: 22ch;
  margin: 1rem 0 .5em; }
.art__chapo { font-size: var(--t-m); color: var(--ardoise-clair); max-width: 60ch; }
.art__meta { font-size: var(--t-xs); color: var(--gris-texte); margin: 1.25rem 0 0; }

.art__image { margin: 0; }
.art__image img { width: 100%; aspect-ratio: 21/9; object-fit: cover; display: block; }
@media (max-width: 700px) { .art__image img { aspect-ratio: 3/2; } }

.art__corps { max-width: 44rem; padding-block: clamp(2.5rem, 5vw, 4rem); }
.art__corps > * { max-width: none; }

.art__sommaire { background: var(--blanc); border: 1px solid var(--creme-fonce);
  border-radius: var(--rayon); padding: 1.35rem 1.5rem; margin-bottom: 3rem; }
.art__sommaire p { font-size: var(--t-xs); color: var(--gris-texte);
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: .8rem; }
.art__sommaire ol { margin: 0; padding-left: 1.2rem; }
.art__sommaire li { font-size: var(--t-s); margin-bottom: .45rem; max-width: none; }
.art__sommaire a { color: var(--ardoise); text-decoration: none; }
.art__sommaire a:hover { color: var(--cuivre-fonce); text-decoration: underline; }

.art__section { margin-bottom: 2.75rem; }
.art__section h2 { font-size: clamp(1.5rem, 2.8vw, 1.9rem); margin-bottom: .7em; }
.art__section p { font-size: var(--t-base); line-height: 1.75;
  color: var(--ardoise-clair); }
.art__section strong { color: var(--ardoise); font-weight: 500; }

.art__liste { list-style: none; padding: 0; margin: 0 0 1.2em; }
.art__liste li { position: relative; padding-left: 1.4rem; margin-bottom: .7rem;
  line-height: 1.65; color: var(--ardoise-clair); max-width: none; }
.art__liste li::before { content: ""; position: absolute; left: .2rem; top: .7em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--cuivre); }

.art__encart { background: var(--ardoise); color: var(--creme);
  border-radius: var(--rayon); padding: 1.5rem 1.6rem; margin: 2rem 0; }
.art__encart h3 { color: #fff; font-size: var(--t-m); margin-bottom: .4em; }
.art__encart p { color: var(--gris) !important; font-size: var(--t-s) !important;
  margin: 0; }

.art__tableau { overflow-x: auto; margin: 1.75rem 0; }
.art__tableau table { width: 100%; border-collapse: collapse; font-size: var(--t-s);
  min-width: 420px; }
.art__tableau th { text-align: left; font-weight: 500; padding: .8rem 1rem .8rem 0;
  border-bottom: 1px solid var(--gris); }
.art__tableau thead th { color: var(--gris-texte); font-size: var(--t-xs);
  border-bottom: 2px solid var(--cuivre); }
.art__tableau td { padding: .8rem 1rem .8rem 0; border-bottom: 1px solid var(--gris);
  color: var(--ardoise-clair); }

.art__avert { font-size: var(--t-xs); color: var(--gris-texte);
  border-left: 2px solid var(--gris); padding-left: 1rem; margin: 2.5rem 0; }

.art__appel { background: var(--blanc); border: 1px solid var(--creme-fonce);
  border-radius: var(--rayon); padding: clamp(1.75rem, 4vw, 2.5rem);
  margin-top: 3rem; }
.art__appel h2 { font-size: var(--t-l); margin-bottom: .5em; }
.art__appel p { font-size: var(--t-s); color: var(--ardoise-clair);
  margin-bottom: 1.5rem; }

.art__suite { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .art__suite { grid-template-columns: repeat(3, 1fr); } }
.art__lien { text-decoration: none; color: inherit; }
.art__lien img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block;
  border-radius: var(--rayon); margin-bottom: .85rem; }
.art__lien h3 { font-size: var(--t-base); line-height: 1.35; margin: 0; }
.art__lien:hover h3 { color: var(--cuivre-fonce); }

/* =========================================================================
   PAGES LOCALES
   ========================================================================= */
.vl-corps { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr;
  align-items: start; }
@media (min-width: 960px) { .vl-corps { grid-template-columns: 1.3fr .7fr; } }
.vl-corps .pm-carte h3 { font-size: var(--t-m); }

.vl-communes { list-style: none; padding: 0; margin: 0 0 1.25rem;
  display: flex; flex-wrap: wrap; gap: .6rem; }
.vl-communes li { max-width: none; font-size: var(--t-s); color: var(--ardoise-clair);
  background: var(--blanc); border: 1px solid var(--creme-fonce);
  border-radius: 999px; padding: .45rem 1rem; }

/* ---- page centrale des zones ------------------------------------------- */
.zi-angles { margin-top: 2rem; }
.zi-angles p { font-size: var(--t-s); color: var(--ardoise-clair);
  padding: .9rem 0; border-bottom: 1px solid var(--gris); max-width: none; }
.zi-angles p:last-child { border-bottom: 0; }
.zi-angles strong { color: var(--ardoise); font-weight: 500; }

.zi-secteur { margin-bottom: 2.25rem; }
.zi-secteur h3 { font-size: var(--t-m); margin-bottom: .9em;
  display: flex; align-items: center; gap: .6rem; }
.zi-secteur h3 span { color: var(--cuivre); display: flex; }

.vl-voisines { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  margin-top: 1.75rem; }
.vl-voisines p { font-size: var(--t-s); color: var(--gris-texte); margin: 0;
  max-width: none; }

/* ---- hub des zones : angle dans la carte, bloc partenaires -------------- */
.cx-famille__angle { color: rgba(248,246,242,.82) !important;
  font-size: var(--t-s) !important; line-height: 1.45; margin: .3rem 0 .6rem !important;
  max-width: none; }
.zi-secteur--partenaires { background: var(--blanc); border: 1px solid var(--creme-fonce);
  border-radius: var(--rayon); padding: clamp(1.35rem, 3vw, 2rem); margin-top: 2.5rem; }
.zi-secteur--partenaires p { font-size: var(--t-s); color: var(--ardoise-clair);
  margin-bottom: 1.25rem; max-width: none; }