/* ============================================================
   Norm'Alp rénovation — Julien Casset, Claix (38)
   Charte : blanc de chaux, vert sapin, ocre terre cuite.
   Typo : Archivo (titres), Public Sans (texte) — auto-hébergées.
   ============================================================ */

/* ------------------------------------------------ polices */

@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('/assets/fonts/publicsans-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  /* Bellota Text = police de SUBSTITUTION officielle d'Asterisk Sans (brandboard Pigment des Bois) */
  font-family: 'Bellota Text';
  src: url('/assets/fonts/BellotaText-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bellota Text';
  src: url('/assets/fonts/BellotaText-Bold.ttf') format('truetype');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  /* manuscrite — substitution de Duffy Script, écho du lettrage du logo */
  font-family: 'Caveat';
  src: url('/assets/fonts/caveat-var.woff2') format('woff2');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------ variables */

:root {
  /* ── LA CHARTE OFFICIELLE — guide couleurs Norm'Alp, 6 teintes, rien d'autre ── */
  --terracotta: #B56347;
  --sauge: #737B5B;
  --lichen: #B3BFA5;
  --dore: #D4A568;
  --sable: #E2CDAE;
  --ivoire: #FCF2DE;
  --blanc: #FFFFFF;
  /* ── Dérivées fonctionnelles : MÊMES teintes, seule la luminosité change (lisibilité).
        Chacune = la couleur officielle multipliée par un facteur, pas une teinte inventée. */
  --sauge-sombre: #5E654B;      /* sauge ×0,82 — l'unique fond des bandes sombres */
  --encre: #363A2B;             /* sauge ×0,47 — texte courant */
  --encre-2: #545A42;           /* sauge ×0,73 — texte secondaire */
  --terracotta-sombre: #94513A; /* terracotta ×0,82 — liens et petits textes terracotta */
  --papier-2: #EFE0C6;          /* mi-chemin exact ivoire/sable — fonds « chaux » */
  /* états de formulaire (hors charte, volontairement : succès/erreur doivent se voir) */
  --ok: #2E6B46;
  --erreur: #A03B2E;
  /* alias historiques — les règles existantes continuent de pointer sur la charte */
  --papier: var(--ivoire);
  --sauge-claire: var(--lichen);
  --ocre: var(--terracotta-sombre);
  --ocre-vif: var(--terracotta);
  --ligne: var(--sable);
  --ombre: 0 18px 40px -24px rgba(54, 58, 43, .35);
  --titres: 'Bellota Text', 'Archivo', 'Segoe UI', Arial, sans-serif;
  --texte: 'Bellota Text', 'Public Sans', 'Segoe UI', Arial, sans-serif;
  --rayon: 2px;             /* angles quasi vifs, comme le relevé du modèle */
  --entete-h: 72px;
}

/* ------------------------------------------------ reset (correctifs stack inclus) */

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(var(--entete-h) + 12px); }
/* sur ordinateur, tout le site est grossi de 10 % (demande Lucas 01/10) :
   la racine passe à 110 %, toutes les tailles en rem suivent */
@media (min-width: 901px) {
  html { font-size: 110%; }
}
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1.0625rem;   /* 17 px à la racine standard, ≈18,7 px sur ordinateur */
  line-height: 1.65;
  /* clip et non hidden : hidden ferait du body un conteneur de défilement
     et casserait le position:sticky de l'en-tête */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { font-family: var(--titres); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.015em; font-weight: 640; }
p { margin: 0 0 1em; }
a { color: var(--ocre); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--encre); }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--ocre-vif); color: var(--blanc); }
:focus-visible { outline: 2px solid var(--ocre); outline-offset: 2px; }

/* accents dans les titres : *mot* passé en ocre par site.js */
.accent { color: var(--ocre); font-style: normal; }

/* ------------------------------------------------ structure générale */

.cadre { width: min(1160px, calc(100% - 2.5rem)); margin-inline: auto; }
main { display: block; }
section { padding: clamp(3.2rem, 8vw, 5.5rem) 0; }
.section-chaux { background: var(--papier-2); }
/* deux bandes « chaux » qui se suivent (engagements puis partenaires) : un seul espacement,
   pas deux — l'écart était devenu énorme après le retrait du carrousel (retour Lucas 13/10) */
.section-chaux + .section-chaux { padding-top: 0; }
.section-sombre { background: var(--sauge-sombre); color: var(--ivoire); }
.section-sombre h2 { color: var(--blanc); }

.surtitre {
  display: inline-block;
  font-family: var(--titres);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--ocre);
  margin-bottom: 1rem;
}
.section-sombre .surtitre { color: var(--dore); }

h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); max-width: 22ch; }
.intro-section { color: var(--encre-2); max-width: 58ch; margin-bottom: 2.2rem; }
.section-sombre .intro-section { color: rgba(252, 242, 222, .85); }

/* titre manuscrit centré + filet, comme le modèle qu'aime Julien */
.titre-script {
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: clamp(2.5rem, 5.5vw, 3.6rem);
  letter-spacing: 0;
  color: var(--ocre);
  text-align: center;
  max-width: none;
  margin: 0 auto .4rem;
  line-height: 1.1;
}
.filet { border: none; width: 120px; border-top: 1px solid currentColor; opacity: .45; margin: .8rem auto 2rem; }
/* un mot manuscrit dans un titre — la signature du modèle */
.mot-script {
  font-family: 'Caveat', cursive; font-weight: 600;
  font-size: 1.4em; line-height: .9;
  color: var(--ocre); letter-spacing: 0;
}
.section-ocre .mot-script { color: var(--sable); }
.section-sombre .mot-script { color: var(--dore); }
h1, h2, h3 { text-wrap: balance; }
.centre { text-align: center; }
.titre-caps {
  font-family: var(--titres);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ocre);
  max-width: none;
}

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

.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.5rem;
  border: 1px solid var(--encre);
  border-radius: var(--rayon);
  background: var(--encre);
  color: var(--blanc);
  font-family: var(--titres); font-weight: 600; font-size: .95rem;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover { background: var(--ocre); border-color: var(--ocre); color: var(--blanc); transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.99); }
/* boutons pleins : le terracotta EXACT du logo (#B56347) — Marjorie avait repéré
   que le bouton du téléphone n'était pas la même teinte que le nom (visio 11/11) */
.btn-ocre { background: var(--ocre-vif); border-color: var(--ocre-vif); }
.btn-ocre:hover { background: var(--encre); border-color: var(--encre); }
.btn-contour { background: transparent; color: var(--encre); }
.btn-contour:hover { background: var(--encre); color: var(--blanc); }
.section-sombre .btn-contour { color: var(--papier); border-color: var(--papier); }
.section-sombre .btn-contour:hover { background: var(--papier); color: var(--encre); }

/* ------------------------------------------------ en-tête
   Fond OPAQUE : un backdrop-filter ferait de l'en-tête le bloc conteneur
   du panneau mobile position:fixed (piège vu sur Reynaud/GK Elec). */

.entete {
  position: sticky; top: 0; z-index: 50;
  background: var(--papier);
  /* pas de liseré sous l'en-tête : le changement de teinte suffit (retour Marjorie, visio 11/11) */
}
.entete-int {
  display: flex; align-items: center; gap: 1rem;
  min-height: var(--entete-h);
}
.marque {
  flex: 0 1 auto; min-width: 0;              /* piège Pizza Nostra : ne pas pousser le burger hors écran */
  display: flex; align-items: center; gap: .7rem;
  color: var(--encre); text-decoration: none;
}
.marque svg { flex: none; }
.marque-logo { flex: none; width: auto; height: 46px; object-fit: contain; }
.marque > span { min-width: 0; }   /* autorise l'ellipse du nom : jamais de collision avec le burger */
.marque-nom { display: block; font-family: var(--titres); font-weight: 700; font-size: 1.12rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marque-sous { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-2); white-space: nowrap; }

.nav-principale { margin-left: auto; display: flex; align-items: center; gap: 1.6rem; }
.nav-principale a {
  font-family: var(--titres); font-weight: 600; font-size: .82rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--encre); text-decoration: none;
  padding: .4rem 0; border-bottom: 2px solid transparent;
}
.nav-principale a:hover { color: var(--ocre); }
.nav-principale a[aria-current="page"] { color: var(--ocre); border-bottom-color: var(--ocre); }

/* le bouton d'appel vit HORS du <nav> : enfermé dans le burger, le numéro
   disparaîtrait sur mobile (piège La Casa) */
.entete-tel { margin-left: 1.2rem; }

/* pas de boîte blanche autour du burger : « le carré est trop gros par
   rapport au logo » (retours Julien du 12/10) — l'icône seule suffit */
.burger {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  border: none; border-radius: var(--rayon);
  background: transparent;
  position: relative;
}
.burger span, .burger span::before, .burger span::after {
  content: ''; position: absolute; left: 11px; right: 11px; height: 2px;
  background: var(--encre); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.burger span { top: 21px; }
.burger span::before { top: -7px; }
.burger span::after { top: 7px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------ héro */

/* Héro : retour le 13/10 à la version validée (deux colonnes + église en arche),
   la bannière-logo du 12/10 est abandonnée. Le texte = présentation de Julien. */
.hero {
  position: relative;
  padding: clamp(1.8rem, 3.2vw, 2.6rem) 0 clamp(1.8rem, 4vw, 3rem);
  overflow: clip;
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(181, 99, 71, .10), transparent 55%),
    linear-gradient(180deg, var(--blanc), var(--papier));
}
.hero-grille {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero-arche { margin: 0; justify-self: center; width: min(400px, 100%); }
.hero-arche img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 42% 30%;
  border-radius: 999px 999px 6px 6px;
  box-shadow: 0 34px 60px -34px rgba(54, 58, 43, .5);
}
.hero-arche figcaption { text-align: center; font-size: .8rem; color: var(--encre-2); margin-top: .8rem; }
.hero-motif {                     /* le SIGLE officiel en filigrane — a remplacé les lignes
                                     de niveau le 11/11 (« à la place on met des sigles ») */
  position: absolute; left: -2%; bottom: -8%; width: min(26vw, 320px); height: auto;
  opacity: .08; pointer-events: none;
}
.hero h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.4rem);
  font-weight: 680;
  letter-spacing: -.025em;
  max-width: 17ch;
}
.hero::after {                    /* grain de chaux */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.32 0 0 0 0 0.26 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}
.hero-int { position: relative; z-index: 1; }
/* bannière d'accroche façon LinkedIn — téléphone UNIQUEMENT (décision Lucas 13/10) */
.bandeau-accroche { display: none; }
@media (max-width: 560px) {
  .bandeau-accroche {
    display: block;
    background: var(--terracotta);
    color: var(--ivoire);
    text-align: center;
    padding: 1.5rem 1rem 1.7rem;
    margin-bottom: 1.6rem;
  }
  .accroche-script { font-family: 'Caveat', cursive; font-weight: 600; font-size: 1.3rem; color: var(--sable); margin: 0 0 .5rem; line-height: 1; }
  .accroche-caps {
    color: var(--blanc); text-transform: uppercase; letter-spacing: .14em;
    font-family: var(--titres); font-weight: 640; font-size: 1.02rem; line-height: 1.45;
    margin: 0 0 .9rem; max-width: none;
  }
  .accroche-caps span { display: block; font-weight: 400; letter-spacing: .2em; font-size: .85em; color: var(--ivoire); text-transform: none; margin-top: .25rem; }
  .accroche-pastilles { display: flex; justify-content: center; flex-wrap: wrap; gap: .45rem .55rem; }
  .accroche-pastilles li {
    background: var(--lichen); color: var(--encre);
    font-family: 'Caveat', cursive; font-weight: 600;
    font-size: 1.05rem; line-height: 1;
    padding: .4rem .9rem .5rem; border-radius: 999px;
  }
  /* le h1 sort de l'écran (ses mots sont dans la bannière) tout en restant lisible par les robots */
  .hero h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
  .hero { padding-top: 0; }
}

.hero-presentation { margin-top: .4rem; }
.hero-presentation p { color: var(--encre-2); max-width: 52ch; font-size: clamp(.98rem, 1.5vw, 1.08rem); margin-bottom: .75em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }

/* ------------------------------------------------ manifeste : arche + texte (décalqué du modèle) */

.manifeste { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.arche {
  width: min(300px, 76%); aspect-ratio: 3 / 4.3; margin-inline: auto;
  border-radius: 999px 999px var(--rayon) var(--rayon);
  /* la maison forte de Montmayeur, enduit chaux et chaîne de pierre
     (photo changée le 13/10 — demande Lucas, l'intérieur terracotta ne plaisait pas) */
  background:
    linear-gradient(180deg, rgba(181, 99, 71, .06), rgba(54, 58, 43, .18)),
    url('/photos/projet-montmayeur-1.jpg') 42% center / cover no-repeat;
  box-shadow: 0 30px 55px -32px rgba(54, 58, 43, .45);
  position: relative; overflow: clip;
}
.arche::after {
  content: ''; position: absolute; inset: 0; opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.28 0 0 0 0 0.16 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}
.manifeste .filet { margin: 1rem 0 1.6rem; width: 90px; color: var(--ocre); }
.manifeste p { max-width: 60ch; }
.manifeste p:last-child {
  font-family: var(--titres); font-weight: 600; font-size: 1.12rem; line-height: 1.5;
  color: var(--encre); margin-bottom: 0;
}

/* ------------------------------------------------ « Mon métier » sur bande sombre, 3 colonnes */

/* 13/11 : retour au vert foncé d'origine, à la demande de Lucas (essai Lichen de la
   visio du 11/11 annulé). */
.section-photo-sombre {
  position: relative; overflow: clip;
  background:
    radial-gradient(90% 130% at 85% 10%, rgba(212, 165, 104, .18), transparent 55%)
    var(--sauge-sombre);
  color: rgba(252, 242, 222, .9);
}
.section-photo-sombre::before {
  content: ''; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.8 0 0 0 0 0.75 0 0 0 0 0.6 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}
.section-photo-sombre .cadre { position: relative; }
.section-photo-sombre .titre-script { color: var(--dore); }
.phrase-centrale {
  text-align: center; max-width: 62ch; margin: 0 auto;
  font-size: clamp(1rem, 1.7vw, 1.18rem); line-height: 1.7; color: var(--ivoire);
}
.colonnes-approche { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: clamp(2rem, 5vw, 3.4rem); }
.colonne-approche { text-align: center; color: inherit; text-decoration: none; display: block; }
.colonne-approche svg { color: var(--dore); margin-bottom: .7rem; }
.colonne-approche h3 { font-size: 1.1rem; color: var(--blanc); margin-bottom: .45rem; }
.colonne-approche p { color: rgba(252, 242, 222, .78); font-size: .93rem; margin: 0 0 .7rem; }
.colonne-approche .bulle-lien {
  font-family: var(--titres); font-weight: 600; font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dore);
  border-bottom: 1px solid transparent;
}
.colonne-approche:hover .bulle-lien { border-bottom-color: var(--dore); }
.colonne-approche:hover h3 { color: var(--dore); }

/* ------------------------------------------------ bande d'appel sur texture chaux */

.bande-cta {
  text-align: center;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(252, 242, 222, .55), transparent 60%),
    radial-gradient(100% 120% at 85% 90%, rgba(226, 205, 174, .55), transparent 55%),
    linear-gradient(180deg, var(--papier-2), var(--sable));
  position: relative; overflow: clip;
}
.bande-cta::before {
  /* le motif officiel de l'identité (version sable), en mosaïque discrète */
  content: ''; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background: url('/identite/motif-sable.svg') center / 560px auto repeat;
}
.bande-cta .cadre { position: relative; }
.bande-cta .titre-script { margin-bottom: 1.2rem; }

/* ------------------------------------------------ missions — liste éditoriale numérotée */

.grille-missions {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 clamp(2.5rem, 6vw, 5rem);
  max-width: 1020px; margin-inline: auto;
}
.mission {
  border-top: 1px solid var(--ligne);
  padding: 1.7rem .2rem 1.9rem;
  display: grid; grid-template-columns: auto 1fr; gap: .15rem 1.4rem;
  align-items: start;
}
.mission .numero {
  grid-row: 1 / span 2;
  font-family: var(--titres); font-weight: 700; font-size: 1.7rem; line-height: 1.15;
  color: var(--ocre-vif);
  font-variant-numeric: tabular-nums;
}
.mission h3 { font-size: 1.1rem; margin-bottom: .35rem; display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.sigle {
  font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ocre); background: rgba(212, 165, 104, .18);
  padding: .18rem .5rem; border-radius: var(--rayon);
  font-family: var(--titres);
}
.mission p { grid-column: 2; color: var(--encre-2); font-size: .94rem; margin: 0; max-width: 46ch; }

/* --------- carrousel des missions, façon modèle : photo à gauche, texte à droite --------- */
.carrousel-missions { position: relative; max-width: 1080px; margin-inline: auto; padding: 0 66px; }
.rail-missions {
  display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.rail-missions::-webkit-scrollbar { display: none; }
.diapo-mission {
  flex: 0 0 100%; min-width: 0;
  scroll-snap-align: start;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: center;
  padding: .5rem .3rem;
}
.diapo-mission img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 88px 6px 88px 6px;      /* le galbe du modèle, en plus sobre */
  box-shadow: var(--ombre);
}
.diapo-mission .numero {
  display: block;
  font-family: var(--titres); font-weight: 700; font-size: .82rem;
  letter-spacing: .14em; color: var(--ocre-vif);
  margin-bottom: .5rem;
  font-variant-numeric: tabular-nums;
}
.diapo-mission h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.diapo-mission > div > p { color: var(--encre-2); max-width: 52ch; margin: .6rem 0 0; }
/* détail d'une mission en puces (textes de Julien, 12/10) */
.points-mission { margin: .7rem 0 0; padding-left: 1.1rem; list-style: disc; max-width: 52ch; }
.points-mission li { font-size: .92rem; color: var(--encre-2); margin-bottom: .3rem; }
.points-mission li::marker { color: var(--ocre); }
.note-mission { font-size: .82rem; font-style: italic; }
.fleche-abs { position: absolute; top: 40%; transform: translateY(-50%); z-index: 2; }
.fleche-g { left: 0; }
.fleche-d { right: 0; }
.points { display: flex; justify-content: center; gap: .55rem; margin-top: 1.7rem; }
.point { width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; background: var(--ligne); transition: background .2s ease, transform .2s ease; }
.point[aria-current="true"] { background: var(--ocre); transform: scale(1.25); }

/* ------------------------------------------------ parcours */

.parcours { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 4.5rem); }
.frise { position: relative; padding-left: 1.6rem; }
.frise::before { content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--ligne); }
.etape { position: relative; padding-bottom: 1.6rem; }
.etape:last-child { padding-bottom: 0; }
.etape::before {
  content: ''; position: absolute; left: calc(-1.6rem + 1px); top: 7px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ocre); box-shadow: 0 0 0 4px var(--papier-2);
}
section:not(.section-chaux) .etape::before { box-shadow: 0 0 0 4px var(--papier); }
/* bande terracotta du parcours — écho direct du modèle, dans notre palette */
.section-ocre { background: var(--terracotta); color: var(--ivoire); }
.section-ocre h2 { color: var(--blanc); }
.section-ocre .surtitre { color: var(--sable); }
.section-ocre .intro-section { color: rgba(252, 242, 222, .92); }
.section-ocre .frise::before { background: rgba(252, 242, 222, .35); }
.section-ocre .etape::before { background: var(--blanc); box-shadow: 0 0 0 4px rgba(252, 242, 222, .25); }
.section-ocre .etape-date { color: var(--sable); }
.section-ocre .etape h3 { color: var(--blanc); }
.section-ocre .etape p { color: rgba(252, 242, 222, .92); }
.section-ocre .certif { border-color: transparent; }

/* « Mon parcours » vit sur l'ACCUEIL depuis la visio du 21/10.
   Réagencé le 22/10 : photo à gauche centrée verticalement, titre + texte à droite
   (l'ancienne version laissait un grand vide en bas de la bande terracotta). */
.parcours-accueil {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.portrait-accueil { margin: 0 auto; max-width: none; width: min(280px, 72%); }
.bio-parcours { margin-top: .4rem; margin-bottom: 0; }
.bio-parcours p { color: rgba(252, 242, 222, .92); max-width: 56ch; font-size: .95rem; margin-bottom: .8em; }

/* portrait en ROND — demande de Julien (12/10) : « un rond, pas un rectangle courbé » */
.portrait { margin-top: 1.4rem; max-width: 220px; }
.portrait img {
  border-radius: 50%;
  aspect-ratio: 1 / 1; object-fit: cover; object-position: top;
  border: none; background: var(--blanc);
  padding: 0;
}
.portrait figcaption { font-size: .8rem; color: var(--sable); margin-top: .6rem; text-align: center; }
.etape-date { font-family: var(--titres); font-weight: 700; font-size: .82rem; letter-spacing: .08em; color: var(--ocre); }
.etape h3 { font-size: 1.08rem; margin: .1rem 0 .3rem; }
.etape p { color: var(--encre-2); font-size: .93rem; margin: 0; max-width: 58ch; }

/* ------------------------------------------------ certifications */

.grille-certifs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.certif {
  display: flex; gap: .9rem; align-items: flex-start;
  /* plus de pavé blanc à contour : carte sable de la charte (retour Marjorie, visio 11/11) */
  background: var(--sable); border: none; border-radius: var(--rayon);
  padding: 1.1rem 1.2rem;
  color: var(--encre);   /* la carte fixe sa couleur : ne jamais hériter du crème de la bande ocre */
}
.certif svg { flex: none; color: var(--ocre); margin-top: .15rem; }
/* vrais logos d'organismes (RGE OPQIBI, Bâtiment Passif, RFCP) — fond blanc des cartes */
.certif .certif-logo { flex: none; width: 52px; height: 44px; object-fit: contain; margin-top: .1rem; }
.certif strong { font-family: var(--titres); font-weight: 640; font-size: .97rem; display: block; }
.certif span { color: var(--encre-2); font-size: .85rem; }

/* ------------------------------------------------ engagements */

/* Réagencé le 13/11 (retour de Lucas) : deux colonnes en « mur de cartes » — chaque
   carte a la hauteur de son texte, calée sous la précédente, plus aucun trou ni carte
   étirée. Les numéros restent (Marjorie y tient). */
.liste-engagements { columns: 2; column-gap: 1.1rem; max-width: 1020px; }
.liste-engagements li {
  display: flex; gap: 1rem; align-items: baseline;
  background: var(--ivoire);
  border-left: 3px solid var(--ocre-vif);
  border-radius: var(--rayon);
  padding: 1rem 1.2rem 1.1rem;
  font-size: 1.02rem;
  font-family: var(--titres); font-weight: 500;
  break-inside: avoid;
  margin-bottom: .9rem;
}
.liste-engagements li:nth-child(even) { border-left-color: var(--dore); }
.liste-engagements .num { font-family: var(--titres); font-weight: 700; color: var(--ocre); font-size: .85rem; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
/* engagements détaillés : intitulé + explication (retours Julien 12/10) */
.liste-engagements strong { display: block; font-weight: 640; }
.liste-engagements p { margin: .25rem 0 0; font-family: var(--texte); font-weight: 400; font-size: .86rem; line-height: 1.55; color: var(--encre-2); max-width: 52ch; }
.section-sombre .liste-engagements li { border-bottom-color: rgba(252, 242, 222, .18); }
.section-sombre .liste-engagements .num { color: var(--ocre-vif); }

/* ------------------------------------------------ carrousel de projets (accueil) */

.carrousel-tete { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; }
.carrousel-tete h2 { max-width: none; text-wrap: initial; }          /* titre sur une seule ligne */
.carrousel-tete .mot-script { white-space: nowrap; }
@media (max-width: 760px) {
  .carrousel-tete .mot-script { white-space: normal; }               /* petit écran : on laisse plier */
}
.carrousel-fleches { display: flex; gap: .5rem; }
.fleche {
  width: 46px; height: 46px; border-radius: var(--rayon);
  border: 1px solid var(--ligne); background: var(--blanc); color: var(--encre);
  display: grid; place-items: center;
  transition: background .18s ease, color .18s ease;
}
.fleche:hover { background: var(--encre); color: var(--blanc); }
.fleche:disabled { opacity: .35; pointer-events: none; }
.carrousel {
  display: flex; gap: 1.1rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: .6rem;
  scrollbar-width: none;
}
.carrousel::-webkit-scrollbar { display: none; }
.carrousel > * { scroll-snap-align: start; flex: 0 0 min(360px, 82vw); }

/* ------------------------------------------------ cartes projet (partagées accueil + page projets) */

.carte-projet {
  background: none; border: none; border-radius: 0;
  overflow: visible; text-align: left; padding: 0; display: flex; flex-direction: column;
  color: inherit; width: 100%;
  text-decoration: none;
  transition: transform .18s ease;
}
.carte-projet:hover { color: inherit; }
.carte-projet:hover { transform: translateY(-4px); }
.carte-visuel {
  position: relative; aspect-ratio: 3 / 2; overflow: clip;
  border-radius: 4px;
  box-shadow: 0 14px 30px -20px rgba(54, 58, 43, .45);
}
/* image en absolu : une photo portrait ne peut plus étirer la case au-delà du ratio 3:2
   (l'aspect-ratio n'est qu'une préférence, le contenu peut le dépasser) */
.carte-visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.carte-projet:hover .carte-visuel img { transform: scale(1.045); }
.carte-projet:hover h3 { color: var(--ocre); }
.carte-visuel .motif {
  width: 100%; height: 100%;
  display: grid; place-items: center;
}
.carte-visuel .motif svg { width: 44%; height: auto; opacity: .8; }
.motif-patrimoine { background: var(--sable); color: var(--terracotta-sombre); }
.motif-maisons { background: var(--lichen); color: var(--encre-2); }
.motif-agricole { background: var(--dore); color: var(--encre-2); }
.carte-badges { position: absolute; top: .7rem; left: .7rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.badge {
  font-family: var(--titres); font-weight: 600; font-size: .66rem;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--encre); color: var(--papier);
  padding: .28rem .55rem; border-radius: var(--rayon);
}
.badge-avec { background: var(--papier); color: var(--encre); border: 1px solid var(--ligne); }
.badge-statut { background: var(--ocre); }
.carte-corps { padding: .9rem .15rem 0; display: flex; flex-direction: column; gap: .3rem; }
.carte-lieu { font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ocre); }
.carte-projet h3 { font-size: 1.06rem; margin: 0; }
.carte-chiffre { color: var(--encre-2); font-size: .86rem; }
.note-photo { font-size: .72rem; color: var(--encre-2); position: absolute; right: .7rem; bottom: .55rem; letter-spacing: .04em; }

/* ------------------------------------------------ partenaires */

#partenaires h2 { max-width: none; }   /* laisse « bureaux d'études et réseaux engagés » sur la même ligne */
.liste-partenaires { display: flex; flex-wrap: wrap; gap: .6rem; }
.liste-partenaires li {
  font-family: var(--titres); font-weight: 600; font-size: .88rem;
  color: var(--encre-2);
  border: 1px solid var(--ligne); border-radius: var(--rayon);
  background: var(--blanc);
  padding: .55rem 1rem;
}

/* ------------------------------------------------ bandeau d'appel final */

.cta-final { text-align: left; }
.cta-final .cadre { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem; align-items: center; }
.cta-final h2 { max-width: 18ch; }
.cta-final p { color: rgba(252, 242, 222, .85); max-width: 46ch; }
.cta-tel {
  font-family: var(--titres); font-weight: 700;
  font-size: clamp(1.6rem, 3.5vw, 2.3rem); letter-spacing: .01em;
  color: var(--blanc); text-decoration: none; white-space: nowrap;
}
.cta-tel:hover { color: var(--dore); }
.cta-final .colonne-droite { display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; }

/* --------- page « Nos missions » : les quatre à la suite (visio 21/10) --------- */
.mission-pleine {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.8rem, 4vw, 2.8rem) 0;
  border-top: 1px solid var(--ligne);
}
.mission-pleine:first-child { border-top: none; padding-top: .6rem; }
.mission-pleine figure { margin: 0; }
.mission-pleine img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 6px;
  box-shadow: var(--ombre);
}
.mission-pleine h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; max-width: none; }
.mission-pleine > div > p { color: var(--encre-2); max-width: 58ch; margin: .5rem 0 0; }
.mission-pleine .points-mission { max-width: 58ch; }
/* sans photo : le texte prend toute la largeur */
.mission-pleine > div:only-child { grid-column: 1 / -1; }

/* en-tête de « Nos valeurs & nos engagements » : titre | citation (22/10) */
.valeurs-tete {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
.valeurs-tete h2 { margin-bottom: 0; }

/* citation « L'homme construit… » dans Nos valeurs & nos engagements */
.citation-valeurs { margin: 0 0 1.6rem; }
.citation-valeurs p { font-style: italic; color: var(--encre-2); max-width: 62ch; margin-bottom: .7em; }
.citation-valeurs p:last-child { font-family: var(--titres); font-weight: 600; font-style: normal; color: var(--encre); }

/* ------------------------------------------------ page projets */

.tete-page { padding: clamp(2.6rem, 6vw, 4rem) 0 1.4rem; }
.tete-page h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
.tete-page .intro-section { margin-bottom: 0; }

/* bandeau texturé sous l'en-tête (page projets), titre manuscrit centré */
.bande-texture {
  text-align: center;
  padding: clamp(2.4rem, 6vw, 4rem) 0;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(252, 242, 222, .55), transparent 60%),
    radial-gradient(100% 120% at 85% 90%, rgba(226, 205, 174, .55), transparent 55%),
    linear-gradient(180deg, var(--papier-2), var(--sable));
  position: relative; overflow: clip;
}
.bande-texture::before {
  /* le motif officiel de l'identité (version sable) — renforcé le 11/11 :
     Julien le voulait plus visible (sans gêner la lecture du titre) */
  content: ''; position: absolute; inset: 0; opacity: .85; pointer-events: none;
  background: url('/identite/motif-sable.svg') center / 560px auto repeat;
}
.bande-texture .cadre { position: relative; }
.bande-texture h1 { font-family: 'Caveat', cursive; font-weight: 600; font-size: clamp(2.6rem, 6vw, 4rem); color: var(--ocre); margin: 0; }
.bande-texture .filet { color: var(--ocre); margin-bottom: 0; }

.filtres { display: flex; flex-direction: column; gap: .7rem; margin: 1.6rem 0 2rem; }
.groupe-filtres { display: flex; align-items: baseline; flex-wrap: wrap; gap: .45rem; }
.groupe-filtres .libelle {
  font-family: var(--titres); font-weight: 600; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--encre-2);
  min-width: 90px;
}
.pastille {
  border: 1px solid var(--ligne); border-radius: var(--rayon);
  background: var(--blanc); color: var(--encre);
  font-family: var(--titres); font-weight: 600; font-size: .82rem;
  padding: .42rem .85rem;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pastille:hover { border-color: var(--ocre); color: var(--ocre); }
.pastille[aria-pressed="true"] { background: var(--ocre); border-color: var(--ocre); color: var(--blanc); }
.compteur-projets { color: var(--encre-2); font-size: .9rem; margin-bottom: 1.2rem; }
.note-savoir-faire {
  border-left: 3px solid var(--ocre); background: var(--blanc);
  padding: .9rem 1.2rem; color: var(--encre-2); font-size: .9rem;
  max-width: 760px; margin-bottom: 2rem;
}

.grille-projets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem 1.6rem; }

/* --------- page projet (une page par chantier, comme le modèle) --------- */
.projet-detail {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.projet-texte { position: sticky; top: calc(var(--entete-h) + 1.5rem); }
/* 13/11 (retour de Lucas) : plus d'empilement vertical — les photos défilent de
   gauche à droite, une par une, avec les flèches dessous (même esprit que l'accueil). */
.projet-photos {
  display: flex; gap: 1.2rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.projet-photos::-webkit-scrollbar { display: none; }
.projet-photos > * { flex: 0 0 100%; scroll-snap-align: center; }
.projet-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; box-shadow: var(--ombre); }
.fleches-photos { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .9rem; }
.projet-photos .motif {
  aspect-ratio: 3 / 2; border-radius: 4px;
  display: grid; place-items: center;
}
.projet-photos .motif svg { width: 34%; height: auto; opacity: .8; }
/* photos de chantier : légende sur la photo + clic pour agrandir (visio 11/11) */
.photo-projet { position: relative; margin: 0; }
.photo-projet img { cursor: zoom-in; }
.photo-projet figcaption {
  position: absolute; left: .7rem; bottom: .6rem;
  font-family: var(--titres); font-weight: 600; font-size: .68rem;
  letter-spacing: .08em; text-transform: uppercase;
  background: rgba(54, 58, 43, .72); color: var(--ivoire);
  padding: .3rem .6rem; border-radius: var(--rayon);
  pointer-events: none;
}
.visionneuse { border: none; padding: 0; background: transparent; max-width: min(96vw, 1100px); }
.visionneuse::backdrop { background: rgba(54, 58, 43, .85); }
.visionneuse img { width: 100%; max-height: 86vh; object-fit: contain; border-radius: 4px; }
.visionneuse-legende { text-align: center; color: var(--ivoire); font-size: .9rem; margin: .7rem 0 0; }
.visionneuse-fermer {
  position: fixed; top: 1rem; right: 1rem; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%; border: none;
  background: var(--ivoire); color: var(--encre);
  font-size: 1.05rem; line-height: 1;
}

.nav-projets { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.nav-projets a span { max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
  .projet-detail { grid-template-columns: 1fr; }
  .projet-texte { position: static; }
}

/* fiche projet (boîte de dialogue) */
.fiche {
  border: none; border-radius: var(--rayon); padding: 0;
  width: min(680px, calc(100vw - 2rem));
  background: var(--blanc); color: var(--encre);
  box-shadow: 0 30px 80px -30px rgba(54, 58, 43, .5);
}
.fiche::backdrop { background: rgba(54, 58, 43, .55); }
.fiche-int { padding: 1.8rem clamp(1.2rem, 4vw, 2.2rem) 2rem; }
.fiche-fermer {
  position: sticky; top: .8rem; margin-left: auto; margin-right: .8rem;
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--ligne); background: var(--blanc); color: var(--encre);
  float: right;
}
.fiche-fermer:hover { background: var(--encre); color: var(--blanc); }
.fiche h3 { font-size: 1.5rem; max-width: 20ch; }
.fiche .carte-lieu { display: block; margin-bottom: .3rem; }
.fiche-galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .5rem; margin: 1rem 0; }
.fiche-galerie img { border-radius: var(--rayon); aspect-ratio: 3/2; object-fit: cover; }
.fiche-chiffres { display: flex; flex-wrap: wrap; gap: .5rem 1.8rem; margin: 1rem 0; }
.fiche-chiffres div { font-size: .85rem; color: var(--encre-2); }
.fiche-chiffres strong { display: block; font-family: var(--titres); font-size: 1.15rem; color: var(--encre); }
.fiche-etiquettes { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.fiche-etiquettes span {
  font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  /* étiquettes sable au lieu de blanc cerclé (visio 11/11) */
  background: var(--sable); border: none; border-radius: var(--rayon);
  padding: .3rem .65rem; color: var(--encre);
}

/* --------- fiche projet structurée « comme le book » (retours Julien 12/10) --------- */
.fiche-projet { margin: 0 0 1.5rem; border-top: 1px solid var(--ligne); }
.fiche-projet > div {
  display: grid; grid-template-columns: 140px 1fr; gap: 1rem;
  padding: .5rem 0; border-bottom: 1px solid var(--ligne);
}
.fiche-projet dt {
  font-family: var(--titres); font-weight: 600; font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--encre-2);
  padding-top: .2rem;
}
.fiche-projet dd { margin: 0; font-size: .92rem; }
.fiche-projet:empty, .fiche-projet[hidden] { display: none; }

/* les trois publics de la page contact (mail Julien 06/11) */
.blocs-audience { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.bloc-audience {
  /* cartes sable, plus de blanc (retour Marjorie, visio 11/11) */
  background: var(--sable); border: none; border-radius: var(--rayon);
  border-top: 3px solid var(--ocre-vif);
  padding: 1.2rem 1.3rem 1.3rem;
}
.bloc-audience h2 { font-size: 1.05rem; max-width: none; margin-bottom: .45rem; }
.bloc-audience p { font-size: .9rem; color: var(--encre-2); margin: 0; }

/* ------------------------------------------------ page contact */

.contact-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 4.5rem); align-items: start; }
.contact-tel {
  display: block; font-family: var(--titres); font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  color: var(--encre); text-decoration: none; letter-spacing: .01em;
  margin: .4rem 0 .2rem;
}
.contact-tel:hover { color: var(--ocre); }
.contact-bloc { margin-bottom: 1.6rem; }
.contact-bloc .libelle {
  font-family: var(--titres); font-weight: 600; font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ocre);
  display: block; margin-bottom: .2rem;
}
.formulaire {
  /* plus de grand carré blanc autour du formulaire (visio 11/11) : seuls les champs
     restent nettement délimités — on doit voir où écrire (Julien + Lucas d'accord) */
  background: none; border: none; border-radius: 0;
  padding: 0;
  display: grid; gap: 1rem;
}
.champ { display: grid; gap: .35rem; }
.champ label { font-family: var(--titres); font-weight: 600; font-size: .85rem; }
.champ input, .champ select, .champ textarea {
  font: inherit; color: var(--encre);
  /* 13/11 : l'intérieur des cases en Lichen (demande de Lucas), plus de blanc */
  background: var(--lichen);
  border: 1px solid var(--sauge); border-radius: var(--rayon);
  padding: .7rem .85rem;
  width: 100%;
}
.champ input::placeholder, .champ textarea::placeholder { color: var(--encre-2); opacity: .75; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 2px solid var(--ocre); outline-offset: 0; border-color: var(--ocre); }
.champ textarea { min-height: 130px; resize: vertical; }
.deux-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-note { font-size: .8rem; color: var(--encre-2); margin: 0; }
.form-retour { font-weight: 600; margin: 0; }
.form-retour.ok { color: var(--ok); }
.form-retour.ko { color: var(--erreur); }
/* pot de miel : hors écran, pas display:none (certains robots le détectent) */
.champ-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------ pied de page */

/* plus sombre que la bande d'appel + filet : on voit où la page se termine */
.pied { background: var(--encre); border-top: 1px solid rgba(252, 242, 222, .22); color: rgba(252, 242, 222, .8); padding: 3rem 0 5.5rem; }
.pied a { color: var(--papier); }
.pied a:hover { color: var(--dore); }
.pied-grille { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; margin-bottom: 2.4rem; }
.pied h4 { color: var(--blanc); font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .8rem; }
.pied li { margin-bottom: .45rem; font-size: .92rem; }
.pied-marque { font-family: var(--titres); font-weight: 700; font-size: 1.2rem; color: var(--blanc); }
.pied-bas {
  border-top: 1px solid rgba(252, 242, 222, .18); padding-top: 1.4rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.8rem;
  font-size: .8rem;
}

/* ------------------------------------------------ bulle WhatsApp */

.bulle-whatsapp {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 55;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  /* plus claire qu'avant (elle était encre) : terracotta du logo, survol doré — visio 11/11 */
  background: var(--ocre-vif); color: var(--blanc);
  box-shadow: 0 14px 30px -14px rgba(54, 58, 43, .55);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.bulle-whatsapp:hover { background: var(--dore); color: var(--encre); transform: translateY(-2px); }
@media (max-width: 900px) {
  .bulle-whatsapp { bottom: calc(64px + 1rem + env(safe-area-inset-bottom)); width: 50px; height: 50px; }
}

.actions-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: .7rem; }

/* ------------------------------------------------ barre d'appel mobile */

.barre-appel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none;
  background: var(--encre);
  padding: .55rem .8rem calc(.55rem + env(safe-area-inset-bottom));
  gap: .6rem;
}
.barre-appel a {
  flex: 1; text-align: center;
  font-family: var(--titres); font-weight: 600; font-size: .92rem;
  color: var(--blanc); text-decoration: none;
  border: 1px solid rgba(252, 242, 222, .35); border-radius: var(--rayon);
  padding: .7rem .5rem;
}
.barre-appel a.appel { background: var(--ocre); border-color: var(--ocre); }

/* ------------------------------------------------ révélation au défilement
   Trois directions : .rev (monte), .rev-g (arrive de gauche), .rev-d (de droite).
   Masquage conditionné à html.js : si le script échoue, rien n'est caché. */

html.js .rev { opacity: 0; transform: translateY(26px); }
html.js .rev-g { opacity: 0; transform: translateX(-48px); }
html.js .rev-d { opacity: 0; transform: translateX(48px); }
html.js :is(.rev, .rev-g, .rev-d) {
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
}
html.js :is(.rev, .rev-g, .rev-d).visible { opacity: 1; transform: none; }

/* décalages en cascade */
html.js .hero [data-hero-titre] { transition-delay: .08s; }
html.js .hero .hero-presentation { transition-delay: .18s; }
html.js .hero .hero-actions { transition-delay: .28s; }
html.js .grille-missions > :nth-child(3n+2) { transition-delay: .1s; }
html.js .grille-missions > :nth-child(3n) { transition-delay: .2s; }
html.js .colonnes-approche > :nth-child(2) { transition-delay: .14s; }
html.js .colonnes-approche > :nth-child(3) { transition-delay: .28s; }
html.js .grille-certifs > :nth-child(3n+2) { transition-delay: .08s; }
html.js .grille-certifs > :nth-child(3n) { transition-delay: .16s; }
html.js .grille-projets > :nth-child(3n+2) { transition-delay: .08s; }
html.js .grille-projets > :nth-child(3n) { transition-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
  html.js :is(.rev, .rev-g, .rev-d) { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------ 404 */

.page-404 { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 4rem 1rem; }
.page-404 h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); }

/* ================================================ responsive */

@media (max-width: 900px) {
  .nav-principale {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 86vw);
    background: var(--papier);
    border-left: 1px solid var(--ligne);
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: calc(var(--entete-h) + 1.5rem) 1.6rem 2rem;
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 45;
  }
  .nav-principale.ouverte { transform: none; box-shadow: -30px 0 60px -30px rgba(54, 58, 43, .4); }
  .nav-principale a { padding: .9rem 0; font-size: 1rem; width: 100%; border-bottom: 1px solid var(--ligne); }
  .burger { display: block; z-index: 46; }
  .entete-tel { display: none; }
  .barre-appel { display: flex; }
  body { padding-bottom: 64px; }

  .grille-certifs { grid-template-columns: 1fr 1fr; }
  .grille-missions, .colonnes-approche, .manifeste, .parcours, .parcours-accueil, .mission-pleine, .valeurs-tete, .blocs-audience, .contact-grille, .cta-final .cadre, .hero-grille, .diapo-mission { grid-template-columns: 1fr; }
  .carrousel-missions { padding: 0; }
  .carrousel-missions .fleche-abs { display: none; }   /* au doigt : on balaye, les points guident */
  .arche { width: min(240px, 70%); }
  .hero-arche { width: min(320px, 88%); }
  .hero-arche img { aspect-ratio: 4 / 4.4; }
  .grille-projets { grid-template-columns: 1fr 1fr; }
  .liste-engagements { columns: 1; }
  .pied-grille { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .grille-missions, .grille-certifs, .grille-projets, .deux-champs { grid-template-columns: 1fr; }
  .marque-sous { display: none; }        /* piège Pizza Nostra : le sous-titre poussait le burger hors écran */
  /* téléphone : le SIGLE seul (triangle officiel), en plus grand — demande Julien/Lucas 12-13/10 */
  .marque-logo { width: auto; height: 46px; }
  .marque-nom { font-size: 1rem; }
  /* sur la page projets : photo + titre seulement, le lieu disparaît (il prend trop de place) */
  .carte-lieu { display: none; }
  .pied-grille { grid-template-columns: 1fr; }
  .carrousel > * { flex-basis: 86vw; }
}