/* /assets/css/style.css
   ---------------------------------------------------------------------------
   Intérieur Révélé — feuille de styles unique.

   Organisation :
     1. Tokens          (couleurs, typo, espacements — extraits du logo)
     2. Reset & base
     3. Utilitaires de mise en page
     4. Typographie éditoriale
     5. Composants réutilisables (boutons, cartes, accordéon, slider…)
     6. En-tête / pied de page
     7. Blocs de page
     8. Animations & responsive

   Convention : classes plates, une seule couche de spécificité.
   Aucune règle ne dépend de l'ordre du DOM ; les marges verticales sont
   portées par les sections (.section) et jamais par les composants internes,
   pour éviter les annulations de padding.
   --------------------------------------------------------------------------- */

/* ========================================================================
   1. TOKENS — toutes les couleurs proviennent du logo (tourbillon + wordmark)
   ======================================================================== */
:root {
  /* Couleurs */
  --vert:        #1E4034;   /* vert forêt du wordmark : texte fort, boutons */
  --vert-mid:    #2F6B54;
  --vert-clair:  #E4EDE7;
  --teal:        #4A8A85;   /* filets, dégradé intérieur du tourbillon */
  --terre:       #C0522A;   /* terracotta du tourbillon : accents, eyebrows */
  --corail:      #E9695C;   /* script « Delphine » : citations, survols */
  --creme:       #FBF7F1;   /* fond principal */
  --sable:       #F3EAE0;   /* fond alterné */
  --encre:       #2B2723;   /* texte courant */
  --gris:        #6E675F;   /* texte secondaire */
  --ligne:       #E0D5C7;   /* filets discrets */
  --blanc:       #FFFFFF;

  /* Typographie */
  --serif:  "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:   "Jost", "Helvetica Neue", Arial, sans-serif;
  --script: "Sacramento", cursive;

  /* Échelle fluide */
  --t-hero:  clamp(2.6rem, 1.6rem + 4.4vw, 5.2rem);
  --t-h1:    clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem);
  --t-h2:    clamp(1.75rem, 1.35rem + 1.7vw, 2.7rem);
  --t-h3:    clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  --t-body:  clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  --t-small: 0.875rem;
  --t-eyebrow: 0.72rem;

  /* Rythme */
  --shell:    1180px;
  --shell-tight: 860px;
  --gutter:   clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4rem, 8vw, 7.5rem);
  --radius:   14px;

  /* Divers */
  --header-h: 104px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--vert);
  color: var(--blanc);
  padding: .75rem 1.25rem;
  z-index: 999;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ========================================================================
   3. UTILITAIRES DE MISE EN PAGE
   ======================================================================== */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--tight { max-width: var(--shell-tight); }

.section { padding-block: var(--section-y); }
.section--sable { background: var(--sable); }
.section--vert  { background: var(--vert); color: #EFE7DC; }
.section--tight { padding-block: calc(var(--section-y) * .6); }

.center { text-align: center; }
.stack > * + * { margin-top: 1.1em; }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

/* ========================================================================
   4. TYPOGRAPHIE ÉDITORIALE
   ======================================================================== */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  color: var(--vert);
  margin: 0 0 .5em;
  letter-spacing: -0.005em;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.25; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* Eyebrow : petites capitales espacées, reprises du sous-titre du logo
   « PROFESSIONNELLE DE L'ORGANISATION ». */
.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-eyebrow);
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--terre);
  margin-bottom: 1.1rem;
}
.eyebrow--teal { color: var(--teal); }
.eyebrow--pale { color: #A9BDAF; }

.lead {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.05rem + .6vw, 1.55rem);
  line-height: 1.55;
  color: var(--vert);
}

/* Le script du logo, réservé aux citations. Un seul usage par écran. */
.script {
  font-family: var(--script);
  font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem);
  line-height: 1.25;
  color: var(--corail);
  font-weight: 400;
}

.rule {
  width: 62px; height: 1px;
  background: var(--ligne);
  border: 0;
  margin: 2rem auto;
  position: relative;
}
.rule::after {
  content: "";
  position: absolute;
  inset: -3px 0 auto 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--terre);
  transform: translateX(-50%);
}
.rule--left { margin-inline: 0; }

/* ========================================================================
   5. COMPOSANTS
   ======================================================================== */

/* --- Boutons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .95rem 1.9rem;
  border: 1px solid var(--vert);
  border-radius: 999px;
  background: var(--vert);
  color: var(--creme);
  cursor: pointer;
  transition: background .28s var(--ease), color .28s var(--ease),
              border-color .28s var(--ease), transform .28s var(--ease);
}
.btn:hover { background: var(--vert-mid); border-color: var(--vert-mid); transform: translateY(-2px); }

.btn--outline { background: transparent; color: var(--vert); }
.btn--outline:hover { background: var(--vert); color: var(--creme); }

.btn--terre { background: var(--terre); border-color: var(--terre); }
.btn--terre:hover { background: #A9451F; border-color: #A9451F; }

.btn--ghost { background: transparent; border-color: #8FA79A; color: #EFE7DC; }
.btn--ghost:hover { background: #EFE7DC; color: var(--vert); border-color: #EFE7DC; }

/* Fond blanc, texte vert : même famille chromatique que les autres boutons,
   utilisé quand le bouton se pose sur un fond sable ou photographique. */
.btn--blanc { background: var(--blanc); border-color: var(--blanc); color: var(--vert); }
.btn--blanc:hover { background: var(--vert); border-color: var(--vert); color: var(--creme); }

.btn--sm { padding: .7rem 1.4rem; font-size: .74rem; }

/* Lien texte souligné à l'animation */
.link {
  color: var(--terre);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .3s var(--ease);
  padding-bottom: 2px;
}
.link:hover { background-size: 0% 1px; }

/* --- Cartes ------------------------------------------------------------- */
.card {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.card:hover { border-color: var(--teal); transform: translateY(-3px); }
.card__price {
  font-family: var(--serif);
  font-size: 2.1rem;
  color: var(--vert);
  line-height: 1;
  margin: .35rem 0 0;
}
.card__price s { color: var(--gris); font-size: 1.05rem; margin-left: .5rem; }
.card__meta { font-size: var(--t-small); color: var(--gris); }
.card > .btn { margin-top: auto; align-self: flex-start; }

.card--illustree { padding-top: 0; overflow: hidden; }
.card--illustree > img {
  width: calc(100% + 2 * clamp(1.5rem, 3vw, 2.25rem));
  margin: 0 calc(-1 * clamp(1.5rem, 3vw, 2.25rem)) clamp(1.5rem, 3vw, 2.25rem);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.card__citation {
  font-family: var(--serif);
  font-style: italic;
  color: var(--terre);
  font-size: 1.05rem;
}

/* --- Liste « check » ---------------------------------------------------- */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: .85rem;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--teal);
}
.checklist--terre li::before { background: var(--terre); }
.checklist--pale li::before { background: #8FA79A; }

/* --- Étapes numérotées (séquence réelle : trier → ranger) ---------------- */
.steps { counter-reset: step; }
.step__num {
  counter-increment: step;
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--terre);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid var(--terre);
  border-radius: 50%;
  margin-bottom: 1rem;
}
.step__num::before { content: counter(step); }
.step { border-top: 1px solid var(--ligne); padding-top: 1.5rem; }
.step__kicker {
  font-family: var(--serif);
  font-style: italic;
  color: var(--teal);
  font-size: 1.02rem;
}

/* --- Témoignages -------------------------------------------------------- */
.quote {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-top: 3px solid var(--terre);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: .97rem;
}
.quote__author {
  margin-top: auto;
  padding-top: 1.2rem;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--vert);
}

/* --- Accordéon FAQ ------------------------------------------------------ */
.accordion { border-top: 1px solid var(--ligne); }
.accordion__item { border-bottom: 1px solid var(--ligne); }
.accordion__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
  background: none;
  border: 0;
  padding: 1.4rem 0;
  cursor: pointer;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem);
  color: var(--vert);
  transition: color .25s var(--ease);
}
.accordion__btn:hover { color: var(--terre); }
.accordion__icon {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border: 1px solid var(--terre);
  border-radius: 50%;
  position: relative;
  transition: transform .35s var(--ease), background .25s var(--ease);
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  background: var(--terre);
  transform: translate(-50%, -50%);
  transition: opacity .25s var(--ease);
}
.accordion__icon::before { width: 11px; height: 1px; }
.accordion__icon::after  { width: 1px; height: 11px; }
.accordion__btn[aria-expanded="true"] .accordion__icon { transform: rotate(180deg); }
.accordion__btn[aria-expanded="true"] .accordion__icon::after { opacity: 0; }
.accordion__panel {
  overflow: hidden;
  height: 0;
  transition: height .38s var(--ease);
}
.accordion__panel > div { padding: 0 0 1.6rem; max-width: 62ch; color: var(--gris); }

/* --- Réalisations avant / après ----------------------------------------
   Deux rangées alignées (avant, puis après) plutôt qu'un curseur glissant :
   les photos réelles n'ont pas le même cadrage d'une prise à l'autre, et un
   curseur qui superpose deux cadrages différents donne un résultat bancal.
   Le nombre de photos par rangée est piloté par --n, posé côté PHP.
   ---------------------------------------------------------------------- */
.realisations {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3rem, 6vw, 4.5rem);
}
.realisation--large { grid-column: 1 / -1; }

.realisation__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding-bottom: .7rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--ligne);
}
.realisation__titre { font-size: var(--t-h3); margin: 0; }
.realisation__duree {
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--terre);
}

/* Chaque vue est une paire : l'avant à gauche, l'après à droite, toujours.
   Empiler tous les « avant » puis tous les « après » obligeait à faire défiler
   entre les deux pour comparer - donc à ne pas comparer. Une réalisation à
   trois vues affiche trois paires les unes sous les autres, jamais six photos
   en enfilade. */
.realisation__paires {
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
}

.paire {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  align-items: start;
}
.paire__vue { margin: 0; }
.paire__vue img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10px;
  background: var(--ligne);
}

/* Séries à plusieurs vues : deux niveaux plutôt que trois paires empilées.
   Tous les « avant » sur la première ligne, tous les « après » sur la seconde,
   chaque colonne restant la même zone photographiée.

   `display: contents` fait remonter les figures dans la grille du parent :
   le PHP continue de produire des paires, seul l'agencement change. Pas de
   balisage dupliqué, pas de condition supplémentaire côté serveur. */
.realisation--large .realisation__paires {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem .55rem;
}
.realisation--large .paire { display: contents; }
.realisation--large .paire__vue:first-of-type { grid-row: 1; }
.realisation--large .paire__vue:last-of-type  { grid-row: 2; }

.realisation__tag {
  display: table;   /* figcaption : largeur au contenu, mais sur sa propre ligne */
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: .28em .85em;
  border-radius: 999px;
  margin-bottom: .55rem;
  border: 1px solid;
}
.realisation__tag--avant { color: var(--terre); border-color: var(--terre); background: rgba(192,82,42,.06); }
.realisation__tag--apres { color: var(--vert); border-color: var(--teal);  background: rgba(74,138,133,.1); }

.realisation__texte {
  margin-top: 1.2rem;
  color: var(--gris);
  font-size: .95rem;
  max-width: 68ch;
}

/* --- Formulaire --------------------------------------------------------- */
.form { display: grid; gap: 1.35rem; }
.form__row { display: grid; gap: 1.35rem; grid-template-columns: 1fr 1fr; }
.field { display: grid; gap: .45rem; }
.field label {
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris);
}
.field input,
.field textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--encre);
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: 8px;
  padding: .85rem 1rem;
  transition: border-color .25s var(--ease);
}
.field input:focus,
.field textarea:focus { border-color: var(--teal); outline-offset: 1px; }
.field textarea { min-height: 170px; resize: vertical; }
.field--error input,
.field--error textarea { border-color: var(--corail); }
.field__error { color: var(--corail); font-size: var(--t-small); }

.consent {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  font-size: .92rem;
  color: var(--gris);
}
.consent input { margin-top: .35rem; accent-color: var(--vert); width: 18px; height: 18px; }

.honeypot {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
}

.alert {
  border-radius: var(--radius);
  padding: 1.1rem 1.35rem;
  font-size: .95rem;
  border: 1px solid;
}
.alert--ok  { background: var(--vert-clair); border-color: var(--vert-mid); color: var(--vert); }
.alert--ko  { background: #FBECEA; border-color: var(--corail); color: #92352C; }

/* ========================================================================
   6. EN-TÊTE / PIED DE PAGE
   ======================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251,247,241,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), padding .3s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--ligne); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: .85rem;
}
.brand img {
  width: auto;
  height: 74px;
  transition: height .3s var(--ease);
}
.site-header.is-scrolled .brand img { height: 56px; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 1.7vw, 1.9rem);
  list-style: none;
  margin: 0; padding: 0;
}
.nav__link {
  text-decoration: none;
  font-size: .92rem;
  color: var(--vert);
  padding: .35rem 0;
  position: relative;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--terre);
  transition: width .3s var(--ease);
}
.nav__link:hover::after,
.nav__link.is-active::after { width: 100%; }
.nav__link.is-active { color: var(--terre); }

.social { display: flex; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.social a {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  color: var(--terre);
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.social a:hover { color: var(--vert); transform: translateY(-2px); }
.social svg { width: 21px; height: 21px; fill: currentColor; }
.social--footer a { color: #A9BDAF; }
.social--footer a:hover { color: var(--creme); }

.burger {
  display: none;
  background: none;
  border: 0;
  width: 44px; height: 44px;
  padding: 10px;
  cursor: pointer;
}
.burger span {
  display: block;
  height: 1.5px;
  background: var(--vert);
  margin: 5px 0;
  transition: transform .3s var(--ease), opacity .25s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.site-footer {
  background: var(--vert);
  color: #C9D6CC;
  padding-top: clamp(3rem, 6vw, 5rem);
  font-size: .95rem;
}
.site-footer a { color: #C9D6CC; text-decoration: none; transition: color .25s var(--ease); }
.site-footer a:hover { color: var(--creme); }
.site-footer__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  padding-bottom: 3rem;
}
.site-footer__brand img { height: 96px; width: auto; filter: brightness(0) invert(1); opacity: .92; }
.site-footer__claim {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--creme);
  margin-top: 1.2rem;
}
.site-footer__title {
  font-family: var(--sans);
  font-size: var(--t-eyebrow);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #8FA79A;
  margin-bottom: 1.1rem;
}
.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list li { margin-bottom: .55rem; }
.site-footer__note { font-size: .82rem; color: #8FA79A; margin-top: 1.2rem; }
.site-footer__legal {
  border-top: 1px solid rgba(201,214,204,.18);
  padding-block: 1.4rem 1.8rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: .82rem;
  color: #8FA79A;
}
.site-footer__legal p { margin: 0; }
.site-footer__legal ul { display: flex; flex-wrap: wrap; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }

/* ========================================================================
   7. BLOCS DE PAGE
   ======================================================================== */

/* --- Bannière photo avec texte en surimpression -------------------------
   Reprend le bandeau de tête des maquettes : une photo pleine largeur, le
   texte par-dessus. Le voile en dégradé n'est pas décoratif : sans lui, le
   contraste du texte dépend de la photo et passe sous le seuil lisible dès
   qu'une zone claire tombe derrière un mot.
   ---------------------------------------------------------------------- */
.banniere {
  position: relative;
  display: grid;
  align-items: center;
  /* Le conteneur adopte EXACTEMENT le ratio des images de bandeau (16:6).
     Avant : min-height + object-fit:cover -> le conteneur était plus large que
     l'image en proportion, donc `cover` re-rognait le haut et le bas. C'est ce
     qui coupait les vases, les pétales, le coeur et les podiums. */
  aspect-ratio: 16 / 6;
  min-height: 260px;
  overflow: hidden;
}
.banniere__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banniere::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(30,64,52,.72) 0%, rgba(30,64,52,.45) 45%, rgba(30,64,52,.12) 100%);
}
.banniere__contenu {
  position: relative;
  z-index: 1;
  color: var(--creme);
  padding-block: clamp(2rem, 5vw, 3.5rem);
  max-width: var(--shell);
}
.banniere__contenu--droite { text-align: right; }
.banniere__contenu--droite .banniere__texte { margin-left: auto; }

/* Voile inversé quand le texte est à droite : sans ça le texte crème tombait
   sur la zone la plus claire de la photo et devenait illisible. Effet de bord
   voulu : le sujet (le vase) reste dans la zone lumineuse. */
.banniere--texte-droite::after {
  background: linear-gradient(260deg,
    rgba(30,64,52,.74) 0%, rgba(30,64,52,.44) 46%, rgba(30,64,52,.06) 100%);
}

.banniere__sur {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.6rem);
  line-height: 1.15;
  color: #fff;
  margin: 0 0 1rem;
}
.banniere__texte {
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  line-height: 1.65;
  color: #EFE7DC;
  max-width: 52ch;
  margin: 0 0 1.8rem;
}
.banniere .btn {
  background: var(--creme);
  border-color: var(--creme);
  color: var(--vert);
}
.banniere .btn:hover { background: #fff; border-color: #fff; }

/* --- Bandeau citation --------------------------------------------------- */
.pull {
  text-align: center;
  padding-block: clamp(3rem, 6vw, 5rem);
}
.pull p { margin: 0; }

/* --- Situations (« vous reconnaissez-vous ») ---------------------------- */
.situations {
  columns: 2;
  column-gap: clamp(2rem, 5vw, 4rem);
  list-style: none;
  margin: 0; padding: 0;
}
.situations li {
  break-inside: avoid;
  padding: 1.05rem 0 1.05rem 1.9rem;
  border-bottom: 1px solid var(--ligne);
  position: relative;
}
.situations li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.6em;
  width: 10px; height: 1px;
  background: var(--terre);
}

/* --- Bloc portrait / texte --------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
/* Sans `min-width:0`, une colonne dont le contenu est en `nowrap` impose sa
   largeur min-content à la grille et fait déborder la page horizontalement.
   Le plancher par défaut de `1fr` est `auto`, pas zéro. */
.split > * { min-width: 0; }
.split--reverse .split__media { order: 2; }
.split__media img {
  border-radius: var(--radius);
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.split__media--frame {
  position: relative;
}
.split__media--frame::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid var(--terre);
  border-radius: var(--radius);
  z-index: -1;
}

/* --- Bandeau illustré --------------------------------------------------- */
.banner { margin: 0; }
.banner img {
  width: 100%;
  aspect-ratio: 16 / 6;
  object-fit: cover;
  border-radius: var(--radius);
}
.banner--cadeau { margin: 1.4rem 0 0; }
.banner--cadeau img { aspect-ratio: 16 / 9; }
@media (max-width: 640px) { .banner img { aspect-ratio: 16 / 9; } }

/* --- Tableau de prix ---------------------------------------------------- */
.pricing {
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  background: var(--blanc);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.pricing__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px dashed var(--ligne);
}
.pricing__row:last-of-type { border-bottom: 0; }
.pricing__label { font-family: var(--serif); font-size: 1.2rem; color: var(--vert); }
.pricing__detail { display: block; font-family: var(--sans); font-size: .85rem; color: var(--gris); }
.pricing__value { font-family: var(--serif); font-size: 1.55rem; color: var(--terre); white-space: nowrap; }
.pricing__value s { color: var(--gris); font-size: .95rem; margin-right: .5rem; }
.pricing__note { font-size: .82rem; color: var(--gris); margin-top: 1.2rem; }

/* --- Article / pages légales -------------------------------------------- */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 2.6rem; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); }
.prose h3 { margin-top: 1.9rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .5rem; }
.prose a { color: var(--terre); }
.prose__meta {
  font-size: var(--t-small);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 2rem;
}

/* --- Cartes d'articles -------------------------------------------------- */
.post {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  overflow: hidden;
  height: 100%;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.post:hover { transform: translateY(-4px); border-color: var(--teal); }
.post img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.post__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.post__date { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--terre); }
.post__title { font-size: 1.35rem; margin: .6rem 0 .7rem; }
.post__title a { text-decoration: none; }
.post__excerpt { color: var(--gris); font-size: .95rem; flex: 1; }

/* --- Bandeau CTA final -------------------------------------------------- */
.cta-band { text-align: center; }
.cta-band h2 { color: var(--creme); }
.cta-band p { color: #C9D6CC; max-width: 52ch; margin-inline: auto; }
.cta-band .btn { margin-top: 2rem; }

/* --- Titres contraints sur une seule ligne ------------------------------
   Demande cliente : certains titres ne doivent pas passer à la ligne.
   Tenable au-dessus de 860 px seulement : sous cette largeur, forcer une
   ligne unique sur un titre de 49 caractères le réduirait à ~9 px. En
   dessous, le titre reprend donc son comportement normal. */
.titre--une-ligne { font-size: clamp(1.55rem, 3.9vw, 2.9rem); }
/* Variante pour un titre placé dans une demi-colonne (page Contact) :
   la largeur disponible y est deux fois moindre, la taille suit. */
.titre--une-ligne--colonne { font-size: clamp(1.4rem, 3.1vw, 2.3rem); }
@media (min-width: 861px) {
  .titre--une-ligne,
  .titre--une-ligne--colonne { white-space: nowrap; }
}

.script--une-ligne { font-size: clamp(1.45rem, 3.4vw, 2.5rem); }
@media (min-width: 861px) { .script--une-ligne { white-space: nowrap; } }

.nowrap { white-space: nowrap; }

/* Mise en valeur d'un fragment de phrase en vert forêt. */
.vert { color: var(--vert); }

/* --- Rose verte (élément graphique de la charte) ------------------------ */
.titre-rose {
  display: flex;
  align-items: center;
  gap: clamp(.6rem, 1.4vw, 1.1rem);
}
.titre-rose > img {
  flex: 0 0 auto;
  height: clamp(46px, 5.5vw, 76px);
  width: auto;
}
.titre-rose > :last-child { margin-bottom: 0; }
.titre-rose--centre { justify-content: center; }

/* --- Portraits affichés sans recadrage ---------------------------------
   `.split__media img` impose un 4:5 en object-fit:cover. Ces photos sont en
   2:3 ou en 3:2 : le 4:5 leur coupait le cadre du miroir, le bureau, la
   plante. `--libre` rend la main au ratio natif du fichier. */
.split__media--libre img {
  aspect-ratio: auto;
  object-fit: contain;
  height: auto;
}
.split__media--petit  { max-width: 330px; margin-inline: auto; }
.split__media--moyen  { max-width: 420px; margin-inline: auto; }

/* Le liseré décoratif suit la photo réduite, pas la colonne entière. */
.split__media--petit.split__media--frame::before,
.split__media--moyen.split__media--frame::before { inset: 14px -14px -14px 14px; }

.media-legende {
  display: block;
  margin-top: 1.1rem;
  text-align: center;
}

/* --- Section avec photo de fond ----------------------------------------
   Le sac de dons devient le fond du bloc « Mes valeurs ». Le voile en
   dégradé n'est pas décoratif : sans lui le texte passe sous le seuil de
   contraste dès qu'un pli clair du tissu arrive derrière un mot. */
.section--fond { position: relative; isolation: isolate; background: var(--sable); }
.section--fond__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: left center;
  z-index: -2;
}
.section--fond::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    rgba(251,247,241,.10) 0%, rgba(251,247,241,.55) 38%,
    rgba(251,247,241,.92) 58%, rgba(251,247,241,.97) 100%);
}
.section--fond .split { align-items: center; }
.section--fond__texte {
  background: rgba(251,247,241,.72);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}

/* --- Élément graphique « Mon engagement » ------------------------------- */
.bloc-engagement {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.bloc-engagement__deco { width: 100%; height: auto; }

/* --- Carrousel de témoignages ------------------------------------------
   Défilement horizontal natif (scroll-snap) plutôt qu'un translateX piloté
   en JS : le geste tactile, la molette, la navigation clavier et la barre de
   défilement fonctionnent sans une ligne de script. Le JS n'ajoute que
   l'avance automatique et les flèches, et le composant reste utilisable s'il
   ne s'exécute pas. */
.carrousel { position: relative; }
.carrousel__piste {
  /* --carrousel-gap sert deux fois : la gouttière ET le calcul de la largeur
     de carte. Une seule valeur, donc pas de dérive entre les deux. */
  --carrousel-gap: clamp(1.5rem, 3vw, 2.75rem);
  display: flex;
  gap: var(--carrousel-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 1.1rem;
  /* La barre de défilement reste VISIBLE, discrètement stylée. La masquer
     rendait la piste muette : rien n'indiquait qu'il restait des témoignages
     à droite, et si le script ne tourne pas (fichier en cache, erreur JS),
     les flèches sont inertes et les avis suivants deviennent inatteignables.
     Une barre visible garde le composant utilisable en toutes circonstances. */
  scrollbar-width: thin;
  scrollbar-color: var(--terre) transparent;
}
.carrousel__piste::-webkit-scrollbar { height: 6px; }
.carrousel__piste::-webkit-scrollbar-track {
  background: var(--ligne);
  border-radius: 3px;
}
.carrousel__piste::-webkit-scrollbar-thumb {
  background: var(--terre);
  border-radius: 3px;
}

/* Flex et non grid : sur une piste en `overflow-x`, `grid-auto-columns` est
   ignoré et les tracks retombent en largeur automatique — chaque témoignage
   se retrouvait alors sur une colonne d'un mot de large. Un `flex-basis` en
   pourcentage, lui, se résout de façon fiable sur la largeur intérieure du
   conteneur. `flex: 0 0` interdit toute compression : c'est ce débordement
   qui rend le défilement possible. */
.carrousel__piste > * {
  flex: 0 0 calc((100% - 2 * var(--carrousel-gap)) / 3);
  scroll-snap-align: start;
  /* `margin: 0` obligatoire : la feuille de style par défaut du navigateur
     applique `margin: 1em 40px` aux <blockquote>. Ces 40 px décalaient toute
     la piste et rognaient la troisième carte. */
  margin: 0;
}

/* Flèches et pastilles masquées par défaut, révélées par le script via
   `.is-ready`. Sans ce garde-fou, un main.js absent ou servi depuis le cache
   laisse des flèches bien visibles mais totalement inertes : le pire des
   états, parce que rien n'indique à la visiteuse que le clic ne marchera
   jamais. La barre de défilement, elle, reste toujours là. */
.carrousel__nav {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--terre);
  border-radius: 50%;
  background: var(--creme);
  color: var(--terre);
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.carrousel__nav:hover { background: var(--terre); color: var(--creme); }
.carrousel__nav svg { width: 17px; height: 17px; fill: currentColor; }
.carrousel__nav--prec { left: calc(-1 * clamp(.5rem, 2vw, 1.6rem)); }
.carrousel__nav--suiv { right: calc(-1 * clamp(.5rem, 2vw, 1.6rem)); }
.carrousel.is-ready .carrousel__nav { display: grid; }
.carrousel__nav[hidden] { display: none; }

.carrousel__points {
  display: none;
  justify-content: center;
  gap: .55rem;
  margin-top: 1.8rem;
  list-style: none;
  padding: 0;
}
.carrousel__point {
  width: 9px; height: 9px;
  padding: 0;
  border: 1px solid var(--terre);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background .25s var(--ease);
}
.carrousel__point.is-active { background: var(--terre); }
.carrousel.is-ready .carrousel__points { display: flex; }

/* Le diviseur reste un nombre écrit en clair : une division calc() par une
   var() n'est pas fiable partout, et le symptôme est silencieux (la piste
   retombe en largeur automatique). D'où une règle par palier. */
@media (max-width: 980px) {
  .carrousel__piste > * { flex-basis: calc((100% - var(--carrousel-gap)) / 2); }
}
@media (max-width: 640px) {
  .carrousel__piste > * { flex-basis: 100%; }
  /* Sélecteur aligné sur celui de `.is-ready`, sinon il ne gagne pas. */
  .carrousel.is-ready .carrousel__nav { display: none; }
}

/* --- Offres alignées côte à côte, hauteur égale ------------------------- */
.offres-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: stretch;
}
.offre {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.4rem);
}
/* Les tableaux de prix perdent leur cadre : ils sont déjà dans une carte. */
.offre .pricing { background: transparent; border: 0; padding: 0; }
.offre__cta { margin-top: auto; padding-top: 1.8rem; }

/* --- Numéro de téléphone ----------------------------------------------- */
.telephone {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--terre);
  text-decoration: none;
}
.telephone:hover { color: var(--vert); }

/* ========================================================================
   8. ANIMATIONS & RESPONSIVE
   ======================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Filet de sécurité : sans JavaScript, `is-in` n'est jamais posée et TOUT le
   contenu du site reste à opacité 0 — page blanche. `scripting: none` couvre
   le cas où le script est désactivé ou bloqué. Ça ne couvre pas une erreur
   JS en cours d'exécution, mais ça évite le pire des scénarios. */
@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
}

@media (max-width: 980px) {
  .split, .split--reverse { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* Sous 700 px, le bandeau n'est plus une photo de fond mais une photo suivie
   d'un bloc de texte vert. Un conteneur de 380x260 ne peut pas afficher une
   image 16:6 sans en rogner les deux tiers : autant montrer la photo entière
   et poser le texte dessous, où il est vraiment lisible. */
@media (max-width: 700px) {
  .banniere { display: block; aspect-ratio: auto; min-height: 0; }
  .banniere__img { position: static; width: 100%; height: auto; }
  .banniere::after { display: none; }
  .banniere__contenu {
    background: var(--vert);
    padding-block: 2.2rem;
    text-align: left;
  }
  .banniere__contenu--droite { text-align: left; }
  .banniere__contenu--droite .banniere__texte { margin-left: 0; }
  .banniere__texte { max-width: none; }

  .bloc-engagement { grid-template-columns: 1fr; }
  .bloc-engagement__deco { max-width: 220px; margin-inline: auto; }

  .section--fond::before {
    background: linear-gradient(180deg,
      rgba(251,247,241,.20) 0%, rgba(251,247,241,.86) 42%, rgba(251,247,241,.97) 100%);
  }
  .section--fond__img { object-position: center top; }
}

@media (max-width: 860px) {
  :root { --header-h: 84px; }

  .burger { display: block; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--creme);
    border-bottom: 1px solid var(--ligne);
    padding: 1rem var(--gutter) 2rem;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-120%);
    transition: transform .38s var(--ease);
    visibility: hidden;
  }
  .nav.is-open { transform: none; visibility: visible; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    display: block;
    padding: 1rem 0;
    border-bottom: 1px solid var(--ligne);
    font-size: 1.05rem;
  }
  .nav__link::after { display: none; }
  .nav__cta { margin-top: 1.5rem; justify-content: center; }
  .social--header { margin-top: 1.5rem; justify-content: center; }

  .brand img, .site-header.is-scrolled .brand img { height: 56px; }

  .situations { columns: 1; }
  .form__row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__legal { flex-direction: column; }
  .btn { width: auto; }

  /* Trois colonnes de photos 3:4 deviennent illisibles sous 640 px :
     les séries reviennent à des paires avant/après empilées. */
  .realisation--large .realisation__paires { grid-template-columns: 1fr 1fr; }
  .realisation--large .paire { display: grid; }
  .realisation--large .paire__vue:first-of-type,
  .realisation--large .paire__vue:last-of-type { grid-row: auto; }
}

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

@media print {
  .site-header, .site-footer, .cta-band, .burger { display: none !important; }
  body { background: #fff; color: #000; }
}