/* =====================================================================
   Anna Fradcourt — Architecte d'intérieur pour agences immobilières
   SARL LD Services — Paris
   Feuille de style unique
   ---------------------------------------------------------------------
   SOMMAIRE
   01. Variables & reset
   02. Typographie
   03. Utilitaires de mise en page
   04. Boutons & liens
   05. En-tête / navigation
   06. Hero
   07. Comparateur avant / après
   08. Propositions (onglets)
   09. Arguments agences
   10. Prestations & tarifs
   11. Bande de réassurance
   12. Réalisations
   13. Processus en 4 étapes
   14. Ressources / articles
   15. À propos
   16. Formulaires
   17. Blocs CTA
   18. Pied de page
   19. Barre mobile & bandeau cookies
   20. Animations & accessibilité
   21. Responsive
   ===================================================================== */

/* ---------------------------------------------------------------------
   01. VARIABLES & RESET
   --------------------------------------------------------------------- */

:root {
  /* Palette « Sable & laiton ».
     Trois rôles de fond, un texte, un accent — et les tons de service
     dont un site a besoin en pratique (texte secondaire, liens, filets,
     texte sur bouton) pour rester lisible partout où ils apparaissent. */
  --ivoire:         #F5F2ED;   /* fond général, sections claires */
  --ivoire-2:       #E4DFD7;   /* cartes, fonds alternés */
  --ivoire-2-douce: var(--ivoire);  /* sections texturées : même ton que le
                                       fond général, distinguées par la
                                       hachure plutôt que par la couleur */
  --ivoire-3:       #EFE4D4;   /* voile de laiton, très clair */
  --anthracite:     #363330;   /* texte, titres, navigation */
  --anthracite-2:   #4A4641;   /* texte courant */
  --pierre:         #6E6862;   /* texte secondaire, légendes */
  --pierre-clair:   #CBC4B8;
  --pierre-trait:   #CBC4B8;   /* bordures, séparateurs */
  --accent:         #B38A5A;   /* CTA, badges, pastilles, annotations de plan */
  --accent-texte:   #856032;   /* liens et texte sur fond clair */
  --accent-fonce:   #9C7444;
  --accent-clair:   #EFE4D4;
  --encre-laiton:   #282522;   /* texte sur aplat de laiton */
  --blanc:          #FFFFFF;

  /* Typographie — deux familles, trois usages :
     titres en didone, sous-titres en Lato italique, texte en Lato Light */
  --display: 'Antic Didone', Georgia, 'Times New Roman', serif;
  --sans:    'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Rythme */
  --page:       1240px;
  --page-etroit: 780px;
  --gouttiere:  clamp(20px, 5vw, 60px);
  --section-y:  clamp(64px, 9vw, 128px);

  /* Divers */
  --trait:   1px solid var(--pierre-trait);
  --rayon:        14px;   /* cartes, visuels, encadrés */
  --rayon-pilule: 50px;   /* boutons, badges, filtres */
  --rayon-champ:  10px;   /* champs de formulaire */
  /* Trois couches plutôt qu'une : contact, diffusion courte, diffusion
     longue. C'est l'empilement qui donne la profondeur, pas l'opacité. */
  --ombre:   0 1px 1px rgba(54, 51, 48, .06),
             0 3px 6px -2px rgba(54, 51, 48, .09),
             0 12px 26px -12px rgba(54, 51, 48, .18);
  --ombre-f: 0 1px 1px rgba(54, 51, 48, .07),
             0 6px 13px -3px rgba(54, 51, 48, .13),
             0 26px 50px -16px rgba(54, 51, 48, .26);
  --liseré:  inset 0 1px 0 rgba(255, 255, 255, .9);
  --transi:  .35s cubic-bezier(.22, .61, .36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  background: var(--ivoire);
  color: var(--anthracite-2);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 300;          /* Lato Light */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

/* ---------------------------------------------------------------------
   02. TYPOGRAPHIE
   --------------------------------------------------------------------- */

h1, h2 {
  font-family: var(--display);
  color: var(--anthracite);
  font-weight: 400;          /* Antic Didone n'a qu'une graisse */
  line-height: 1.08;
  letter-spacing: -.005em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

/* Sous-titres : Lato Regular 400 italique. */
h3, h4 {
  font-family: var(--sans);
  color: var(--anthracite);
  font-weight: 400;
  font-style: italic;
  line-height: 1.28;
  letter-spacing: -.005em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 3.7vw, 2.95rem); }
h2 { font-size: clamp(1.6rem, 2.7vw, 2.2rem); }
h3 { font-size: clamp(1.12rem, 1.6vw, 1.3rem); }
h4 { font-size: 1.02rem; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-texte); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--accent-fonce); }

strong, b { font-weight: 700; color: var(--anthracite); }

/* Surtitre : petites capitales espacées, marque de section */
.surtitre {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-texte);
  margin: 0 0 1.1rem;
}
.surtitre--pierre { color: var(--pierre); }

/* Numérotation discrète des sections */
.surtitre .num {
  color: var(--pierre-clair);
  margin-right: .7em;
  font-variant-numeric: tabular-nums;
}

.chapo {
  font-family: var(--sans);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  line-height: 1.6;
  color: var(--anthracite-2);
  max-width: 62ch;
}

.legende {
  font-size: .82rem;
  line-height: 1.5;
  color: var(--pierre);
  letter-spacing: .01em;
}

.tabulaire { font-variant-numeric: tabular-nums; }

/* Lato Light convient au texte courant, pas aux petits caractères gris :
   sous ~0,85 rem, on remonte en Regular pour rester lisible. */
.legende,
.reassurance__libelle,
.etiquette,
.article-meta,
.carte-article__pied,
.carte-projet__meta,
.champ .aide,
.depot__detail,
.fiche dd,
.pied__bas { font-weight: 400; }

/* ---------------------------------------------------------------------
   03. UTILITAIRES DE MISE EN PAGE
   --------------------------------------------------------------------- */

.enveloppe {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.enveloppe--etroite { max-width: var(--page-etroit); }

.section { padding-block: var(--section-y); }
.section--creme {
  background-color: var(--ivoire-2-douce);
  /* Hachure de coupe, en relief : un trait creusé suivi d'un trait de
     lumière. Adoucie pour rester lisible comme fond clair, pas comme
     trame appuyée. */
  background-image: repeating-linear-gradient(45deg,
      rgba(54, 51, 48, .06)      0    1px,
      rgba(255, 255, 255, .9)    1px  2px,
      transparent                2px  8px);
}
.section--sombre { background: var(--anthracite); color: var(--ivoire-3); }
.section--sombre h1, .section--sombre h2,
.section--sombre h3, .section--sombre h4 { color: var(--ivoire); }
.section--sombre .chapo { color: var(--pierre-clair); }
.section--filet { border-top: var(--trait); }

/* Structure « deux niveaux » : il n'y a pas de gris intermédiaire entre le
   clair et le sombre. Les repères du § 12 basculent donc en négatif — c'est
   ce qui donne son rythme à la page. */
.section--appuyee {
  background: var(--anthracite);
  padding-block: clamp(38px, 4.6vw, 66px);
}
.section--appuyee .reassurance {
  background: rgba(243, 240, 234, .22);
  border-color: transparent;
}
.section--appuyee .reassurance__bloc { background: var(--anthracite); }
.section--appuyee .reassurance__valeur { color: var(--ivoire); }
.section--appuyee .reassurance__libelle { color: var(--pierre-clair); }

.entete-section { max-width: 68ch; margin-bottom: clamp(38px, 5vw, 64px); }
.entete-section--centre { margin-inline: auto; text-align: center; }

.grille { display: grid; gap: clamp(20px, 2.6vw, 34px); }
.grille--2 { grid-template-columns: repeat(2, 1fr); }
.grille--3 { grid-template-columns: repeat(3, 1fr); }
.grille--4 { grid-template-columns: repeat(4, 1fr); }

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
.duo--texte-etroit { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }

.filet { border: 0; border-top: var(--trait); margin: 0; }

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

/* Toutes les cartes sont blanches, quelle que soit la section : un seul ton
   de carte, cohérent partout, qui n'a pas besoin de basculer sur les fonds
   clairs ou hachurés. */
.carte-presta,
.carte-projet,
.comparateur,
.formulaire,
.panneau__visuel,
.etape-sequence__vignette { background: var(--blanc); }

/* ---------------------------------------------------------------------
   04. BOUTONS & LIENS
   --------------------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: 1.05em 1.7em;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--rayon-pilule);
  cursor: pointer;
  transition: background var(--transi), color var(--transi),
              border-color var(--transi), transform var(--transi),
              box-shadow var(--transi);
}
.bouton:hover { transform: translateY(-2px); }
.bouton:active { transform: translateY(0); }

.bouton--primaire {
  background: var(--accent);
  color: var(--encre-laiton);
  box-shadow: var(--ombre);
}
.bouton--primaire:hover {
  background: var(--accent-fonce);
  color: var(--ivoire);
  box-shadow: var(--ombre-f);
}

.bouton--secondaire {
  background: transparent;
  color: var(--anthracite);
  border-color: var(--pierre-clair);
}
.bouton--secondaire:hover {
  border-color: var(--anthracite);
  background: var(--blanc);
  color: var(--anthracite);
}

.bouton--accent { background: var(--accent); color: var(--blanc); }
.bouton--accent:hover { background: var(--accent-fonce); color: var(--blanc); }

.bouton--clair {
  background: var(--ivoire);
  color: var(--anthracite);
}
.bouton--clair:hover { background: var(--accent); color: var(--blanc); }

.bouton--fantome-clair {
  background: transparent;
  color: var(--ivoire);
  border-color: rgba(243, 240, 234, .34);
}
.bouton--fantome-clair:hover {
  border-color: var(--ivoire);
  background: rgba(243, 240, 234, .08);
  color: var(--ivoire);
}

.bouton--large { width: 100%; }

/* Flèche circulaire sur les appels à l'action.
   Réservée aux liens : sur un bouton d'envoi, une flèche suggérerait
   à tort une navigation. */
a.bouton--primaire,
a.bouton--clair,
a.bouton--fantome-clair { padding-right: .45em; gap: .8em; }

a.bouton--primaire::after,
a.bouton--clair::after,
a.bouton--fantome-clair::after {
  content: '↗';
  display: grid;
  place-items: center;
  width: 1.95em;
  height: 1.95em;
  border-radius: 50%;
  font-size: .95em;
  line-height: 1;
  flex-shrink: 0;
  transition: transform var(--transi), background var(--transi);
}
a.bouton--primaire::after       { background: rgba(40, 37, 34, .16); }
a.bouton--clair::after          { background: rgba(54, 51, 48, .10); }
a.bouton--fantome-clair::after  { background: rgba(243, 240, 234, .14); }

a.bouton--primaire:hover::after,
a.bouton--clair:hover::after,
a.bouton--fantome-clair:hover::after { transform: translate(2px, -2px); }

/* Pas de flèche là où la place manque : en-tête, barre mobile,
   et boutons pleine largeur dans les cartes de prestation. */
.entete .bouton::after,
.barre-mobile .bouton::after,
.carte-presta .bouton::after { content: none; }
.entete .bouton,
.barre-mobile .bouton { padding-right: 1.4em; gap: .6em; }

/* Colonne étroite : l'intitulé doit tenir sur une seule ligne. */
.carte-presta .bouton {
  font-size: .75rem;
  letter-spacing: .02em;
  padding: 1em 1.1em;
}

.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* Lien fléché */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--anthracite);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--pierre-clair);
  transition: color var(--transi), border-color var(--transi), gap var(--transi);
}
.lien-fleche::after { content: '→'; transition: transform var(--transi); }
.lien-fleche:hover { color: var(--accent); border-color: var(--accent); gap: .85em; }
.lien-fleche:hover::after { transform: translateX(2px); }

/* Focus visible cohérent sur tout le site */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Lien d'évitement clavier */
.saut-contenu {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 200;
  background: var(--anthracite);
  color: var(--ivoire);
  padding: .8em 1.3em;
  font-size: .85rem;
  text-decoration: none;
  transition: top .2s;
}
.saut-contenu:focus { top: 16px; color: var(--ivoire); }

/* ---------------------------------------------------------------------
   05. EN-TÊTE / NAVIGATION
   --------------------------------------------------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(243, 240, 234, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transi), box-shadow var(--transi);
}
.entete.est-defilee {
  border-bottom-color: var(--pierre-trait);
  box-shadow: 0 1px 20px -12px rgba(54, 51, 48, .3);
}

.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 78px;
}

.logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
  color: var(--anthracite);
  flex-shrink: 0;
}
.logo__nom {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.42rem;
  letter-spacing: .005em;
}
.logo__role {
  font-size: .585rem;
  font-weight: 700;
  letter-spacing: .225em;
  text-transform: uppercase;
  color: var(--pierre);
  margin-top: 6px;
}

.nav { display: flex; align-items: center; gap: 30px; }

.nav__liste {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__lien {
  font-size: .87rem;
  font-weight: 400;
  color: var(--anthracite-2);
  text-decoration: none;
  padding: 4px 0;
  position: relative;
  white-space: nowrap;
  transition: color var(--transi);
}
.nav__lien::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transi);
}
.nav__lien:hover { color: var(--accent); }
.nav__lien:hover::after { transform: scaleX(1); }
.nav__lien[aria-current="page"] { color: var(--anthracite); font-weight: 700; }
.nav__lien[aria-current="page"]::after { transform: scaleX(1); background: var(--anthracite); }

.entete .bouton { padding: .85em 1.35em; font-size: .72rem; letter-spacing: .02em; }

/* Bascule de langue FR / EN : discrète, à côté du bouton d'action */
.langue {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--pierre);
  text-decoration: none;
  border: 1px solid var(--pierre-trait);
  border-radius: var(--rayon-pilule);
  padding: .4em .8em;
  transition: color var(--transi), border-color var(--transi);
}
.langue:hover { color: var(--accent-texte); border-color: var(--accent); }

/* Bouton hamburger */
.bascule-menu {
  display: none;
  width: 46px; height: 46px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--pierre-clair);
  border-radius: 12px;
  cursor: pointer;
}
.bascule-menu__barres,
.bascule-menu__barres::before,
.bascule-menu__barres::after {
  display: block;
  width: 19px; height: 1.5px;
  background: var(--anthracite);
  transition: transform var(--transi), opacity .2s;
}
.bascule-menu__barres { position: relative; }
.bascule-menu__barres::before,
.bascule-menu__barres::after { content: ''; position: absolute; left: 0; }
.bascule-menu__barres::before { top: -6px; }
.bascule-menu__barres::after  { top: 6px; }
.bascule-menu[aria-expanded="true"] .bascule-menu__barres { background: transparent; }
.bascule-menu[aria-expanded="true"] .bascule-menu__barres::before { transform: translateY(6px) rotate(45deg); }
.bascule-menu[aria-expanded="true"] .bascule-menu__barres::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---------------------------------------------------------------------
   06. HERO
   --------------------------------------------------------------------- */

.hero { padding-block: clamp(48px, 7vw, 96px) clamp(56px, 7vw, 104px); }

.hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.hero h1 { margin-bottom: .38em; }
/* Le titre reste d'un seul tenant : aucune mise en avant de
   « mètres carrés », ni italique, ni graisse, ni couleur. */
.hero h1 em {
  font-style: normal;
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
}

.hero__chapo {
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.06rem, 1.55vw, 1.24rem);
  line-height: 1.6;
  color: var(--anthracite-2);
  max-width: 46ch;
  margin-bottom: 2rem;
}

/* En-tête des pages intérieures */
.entete-page {
  padding-block: clamp(38px, 5vw, 72px) clamp(30px, 4vw, 54px);
  border-bottom: var(--trait);
}
.entete-page h1 { font-size: clamp(1.85rem, 3.4vw, 2.7rem); margin-bottom: .38em; }
.entete-page .chapo { max-width: 58ch; }
.entete-page__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}

.fil-ariane {
  font-size: .76rem;
  color: var(--pierre);
  margin-bottom: 1.5rem;
  letter-spacing: .03em;
}
.fil-ariane ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
  margin: 0;
  padding: 0;
}
.fil-ariane li:not(:last-child)::after { content: '/'; margin-left: .5em; color: var(--pierre-clair); }
.fil-ariane a { color: var(--pierre); text-decoration: none; }
.fil-ariane a:hover { color: var(--accent); }
.fil-ariane [aria-current="page"] { color: var(--anthracite-2); }

/* ---------------------------------------------------------------------
   07. COMPARATEUR AVANT / APRÈS
   --------------------------------------------------------------------- */

.comparateur {
  position: relative;
  background: var(--blanc);
  border: var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-f);
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  cursor: ew-resize;
}

.comparateur__cadre { position: relative; display: block; }
.comparateur__image { display: block; width: 100%; }

.comparateur__calque {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* le calque "après" est révélé de la gauche vers la droite */
  clip-path: inset(0 0 0 var(--position, 50%));
}
.comparateur__calque .comparateur__image {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}

.comparateur__poignee {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--position, 50%);
  width: 2px;
  background: var(--accent);
  transform: translateX(-1px);
  pointer-events: none;
  z-index: 3;
}
.comparateur__bouton {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--blanc);
  display: grid;
  place-items: center;
  font-size: .85rem;
  letter-spacing: -.05em;
  box-shadow: 0 4px 18px rgba(54, 51, 48, .28);
}

.comparateur__etiquette {
  position: absolute;
  top: 16px;
  z-index: 2;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .5em 1em;
  border-radius: 999px;
  background: rgba(54, 51, 48, .84);
  color: var(--ivoire);
  pointer-events: none;
}
.comparateur__etiquette--avant { left: 16px; }
/* Sans couleur d'accent, « après » se distingue par inversion. */
.comparateur__etiquette--apres {
  right: 16px;
  background: var(--ivoire);
  color: var(--anthracite);
  box-shadow: 0 0 0 1px var(--anthracite);
}

/* Curseur natif accessible, superposé au comparateur */
.comparateur__curseur {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 4;
}

.comparateur__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 14px 18px;
  border-top: var(--trait);
  background: var(--ivoire-2);
}

/* ---------------------------------------------------------------------
   08. PROPOSITIONS (ONGLETS)
   --------------------------------------------------------------------- */

.sequence {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 30px);
  align-items: start;
}

.etape-sequence { text-align: center; }
/* Regle permanente : dans une rangee de plans (vignettes, avant/apres,
   onglets, grille de realisations), toutes les images gardent le meme
   ratio — sans quoi une image plus courte ou plus large casse l'alignement
   de toute la rangee (legendes, notes, meta-donnees, etc.). S'applique a
   TOUTES les images de plan, qu'il s'agisse de documents reels (T3, plan
   atypique — photos/scans/exports PDF) ou de plans generes en SVG (T2, T4,
   maison). Ratio cible = 800/520, le ratio natif des plans generes en SVG
   (la majorite des images du site) : cadre exactement rempli pour ceux-ci,
   marge minimale pour les documents reels dont le ratio natif est proche
   sans etre identique. object-fit:contain evite tout recadrage du contenu
   — le fond du cadre est peint dans le meme ivoire que le fond du SVG (ou
   en blanc pour les documents reels, voir plus bas), si bien que la marge
   ajoutee reste invisible quel que soit son cote (haut/bas ou gauche/droite).
   .plan-cadre est un conteneur dedie autour de chaque <img> (voir HTML) :
   aspect-ratio et le positionnement de l'image vivent ici, jamais
   directement sur la balise img (qui, avec aspect-ratio, rend une image
   invisible dans l'outil d'apercu utilise pour ce projet — meme famille de
   bug que container-type deja rencontre) et jamais sur le conteneur parent
   (carte-projet__visuel etc.) qui porte aussi une legende/liste en flux
   normal : si l'image y est absolue, elle recouvre cette legende au lieu
   de la laisser s'afficher en dessous. */
.plan-cadre {
  position: relative;
  aspect-ratio: 800 / 520;
  background: var(--ivoire);
}
/* Documents reels (photos/scans/exports PDF) : fond de page blanc, pas
   ivoire — contrairement aux plans generes en SVG, dont le remplissage
   ivoire justifie le fond ivoire du cadre pour une marge invisible. Sans
   cette regle, la marge du cadre (object-fit:contain) tranche visiblement
   avec le blanc du document quand son ratio natif ne remplit pas le cadre. */
.plan-cadre:has(img[src*="plan-t3-"]),
.plan-cadre:has(img[src*="plan-atypique-"]),
.plan-cadre:has(img[src*="plan-t2-"]),
.plan-cadre:has(img[src*="plan-t4-"]),
.plan-cadre:has(img[src*="plan-maison-"]) {
  background: var(--blanc);
}
.plan-cadre img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Meme regle : quand une seule image de la paire porte des points-cles
   (plan-annote__liste ou plan-annote__note), l'autre reserve la meme
   hauteur pour que le texte sous la rangee d'images demarre a la meme
   ligne des deux cotes. */
.carte-projet__visuel:not(:has(.plan-annote__liste, .plan-annote__note))::after {
  content: "";
  display: block;
  height: 52px;
}

.etape-sequence__vignette {
  position: relative;
  border: var(--trait);
  background: var(--ivoire);
  border-radius: var(--rayon);
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: var(--ombre);
  transition: border-color var(--transi), box-shadow var(--transi);
}
.etape-sequence:hover .etape-sequence__vignette {
  border-color: var(--accent);
  box-shadow: var(--ombre-f);
}
.etape-sequence__titre {
  font-family: var(--sans);
  font-style: normal;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--anthracite);
  margin-bottom: .5rem;
}

.onglets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: var(--trait);
  margin-bottom: clamp(24px, 3vw, 40px);
  padding-bottom: 0;
}
.onglet {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: .85em 1.25em;
  font-size: .84rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--pierre);
  cursor: pointer;
  transition: color var(--transi), border-color var(--transi);
  margin-bottom: -1px;
}
.onglet:hover { color: var(--anthracite); }
.onglet[aria-selected="true"] {
  color: var(--anthracite);
  font-weight: 700;
  border-bottom-color: var(--accent);
}

.panneau[hidden] { display: none; }
.panneau {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  animation: apparait .45s cubic-bezier(.22, .61, .36, 1);
}
.panneau__visuel {
  position: relative;
  border: var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--ivoire);
  box-shadow: var(--liseré), var(--ombre-f);
}
.panneau__gains {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
}
.panneau__gains li {
  padding: .7em 0;
  border-bottom: var(--trait);
  font-size: .93rem;
  display: flex;
  gap: .8em;
  align-items: baseline;
}
.panneau__gains li:first-child { border-top: var(--trait); }
.panneau__gains li::before {
  content: '+';
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
}

@keyframes apparait {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Diaporama — galerie d'exemples (visualisation 3D) */
.diaporama__cadre {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--blanc);
}
.diaporama__pistes {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}
.diaporama__diapo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
}
.diaporama__diapo.est-active { opacity: 1; }
.diaporama__diapo img,
.diaporama__diapo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.diaporama__precedent,
.diaporama__suivant {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(54, 51, 48, .55);
  color: var(--ivoire);
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background var(--transi);
}
.diaporama__precedent:hover,
.diaporama__suivant:hover { background: var(--accent); }
.diaporama__precedent { left: 14px; }
.diaporama__suivant { right: 14px; }
.diaporama__puces {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 14px 18px 0;
  background: var(--ivoire-2);
  border-top: var(--trait);
}
.diaporama__puce {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--pierre-trait);
  cursor: pointer;
  transition: background var(--transi), transform var(--transi);
}
.diaporama__puce[aria-selected="true"] {
  background: var(--accent);
  transform: scale(1.3);
}
.diaporama__legende {
  display: block;
  margin: 0;
  padding: 8px 18px 14px;
  background: var(--ivoire-2);
  font-style: italic;
}

/* ---------------------------------------------------------------------
   09. ARGUMENTS AGENCES
   --------------------------------------------------------------------- */

.argument {
  padding-top: 26px;
  border-top: 1px solid var(--anthracite);
}
.argument__num {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--accent);
  display: block;
  margin-bottom: 1rem;
  font-variant-numeric: tabular-nums;
}
.argument h3 {
  font-family: var(--sans);
  font-size: 1.06rem;
  font-weight: 400;
  letter-spacing: -.005em;
  line-height: 1.35;
  margin-bottom: .6rem;
}
.argument p { font-size: .93rem; color: var(--anthracite-2); margin: 0; }

/* Variante sur fond sombre */
.section--sombre .argument { border-top-color: rgba(243, 240, 234, .28); }
.section--sombre .argument p { color: var(--pierre-clair); }

/* La palette n'a pas de couleur d'accent : --accent vaut le noir d'encre.
   Sur fond sombre, tout ce qui s'appuyait sur l'accent doit donc repasser
   en clair, sans quoi surtitres et numéros disparaissent. */
.section--sombre .surtitre,
.section--sombre .argument__num,
.section--sombre .bloc-detail__intitule,
.bandeau-cta .surtitre,
.encart-article .surtitre { color: var(--ivoire); }
.section--sombre .surtitre .num { color: var(--pierre); }
.section--sombre .liste-puces li::before,
.section--sombre .panneau__gains li::before { background: var(--ivoire); }
.section--sombre a:not(.bouton) { color: var(--ivoire); }

/* ---------------------------------------------------------------------
   10. PRESTATIONS & TARIFS
   --------------------------------------------------------------------- */

.carte-presta {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: var(--trait);
  border-radius: var(--rayon);
  padding: clamp(26px, 3vw, 38px);
  box-shadow: var(--liseré), var(--ombre);
  transition: border-color var(--transi), transform var(--transi), box-shadow var(--transi);
}
.carte-presta:hover {
  border-color: var(--anthracite);
  transform: translateY(-4px);
  box-shadow: var(--liseré), var(--ombre-f);
}
.carte-presta--vedette {
  border-color: var(--accent);
  background: var(--blanc);
  box-shadow: var(--ombre);
  position: relative;
}
.carte-presta--vedette::before {
  content: 'Recommandé';
  position: absolute;
  top: -11px; left: clamp(26px, 3vw, 38px);
  background: var(--accent);
  color: var(--blanc);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .38em .9em;
  border-radius: 999px;
}

.carte-presta__entete { margin-bottom: 1.2rem; }
/* Deux lignes réservées au titre : les prix des 4 cartes restent alignés
   même quand un intitulé passe sur une seconde ligne. */
.carte-presta h3 {
  margin-bottom: .35rem;
  min-height: 2.36em;          /* 2 lignes à line-height 1.18 */
}

.carte-presta__prix {
  font-family: var(--display);
  font-weight: 400;
  font-size: 2.15rem;
  color: var(--anthracite);
  line-height: 1.08;
  letter-spacing: -.03em;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1em .35em;
  margin-bottom: .2rem;
}
.carte-presta__prix .montant { white-space: nowrap; }
.carte-presta__prix .unite {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pierre);
  white-space: nowrap;
}

.carte-presta__resume {
  font-size: .93rem;
  color: var(--anthracite-2);
  margin-bottom: 1.3rem;
}

.liste-livrables {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  font-size: .89rem;
  flex-grow: 1;
}
.liste-livrables li {
  position: relative;
  padding: .42em 0 .42em 1.5em;
  color: var(--anthracite-2);
}
.liste-livrables li::before {
  content: '';
  position: absolute;
  left: 0; top: .95em;
  width: 8px; height: 1px;
  background: var(--accent);
}

.carte-presta__benefice {
  font-size: .86rem;
  line-height: 1.55;
  color: var(--anthracite-2);
  background: var(--ivoire-2);
  border-left: 2px solid var(--accent);
  padding: .85em 1em;
  margin-bottom: 1.5rem;
  border-radius: 0 var(--rayon) var(--rayon) 0;
}
.carte-presta--vedette .carte-presta__benefice { background: var(--accent-clair); }

/* Tableau récapitulatif */
.tableau-tarifs {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}
.tableau-tarifs caption {
  text-align: left;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pierre);
  padding-bottom: 1rem;
}
.tableau-tarifs th,
.tableau-tarifs td {
  text-align: left;
  padding: 1.05em .8em;
  border-bottom: var(--trait);
  vertical-align: top;
}
.tableau-tarifs thead th {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pierre);
  border-bottom: 1px solid var(--anthracite);
}
.tableau-tarifs tbody th {
  font-weight: 700;
  color: var(--anthracite);
}
.tableau-tarifs .cellule-prix {
  text-align: right;
  font-family: var(--display);
  font-size: 1.28rem;
  color: var(--anthracite);
  white-space: nowrap;
}
.tableau-tarifs tbody tr:hover { background: var(--ivoire-2); }

.zone-tableau { overflow-x: auto; }

/* ---------------------------------------------------------------------
   11. BANDE DE RÉASSURANCE
   --------------------------------------------------------------------- */

.reassurance {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--pierre-trait);
  border: var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
}
.reassurance__bloc {
  background: var(--ivoire);
  padding: clamp(26px, 3.4vw, 42px) clamp(16px, 2vw, 26px);
  text-align: center;
}
.reassurance__valeur {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.85rem, 3.1vw, 2.6rem);
  color: var(--anthracite);
  line-height: 1;
  letter-spacing: -.03em;
  margin-bottom: .55rem;
  display: block;
}
.reassurance__libelle {
  font-size: .82rem;
  color: var(--pierre);
  line-height: 1.45;
  margin: 0;
}

.section--sombre .reassurance { background: rgba(243, 240, 234, .18); border-color: transparent; }

/* Carte claire posée sur la bande CTA sombre : les libellés doivent
   repasser en anthracite, le gris pierre n'y contraste plus assez. */
.bandeau-cta .reassurance { border-color: transparent; box-shadow: var(--ombre-f); }
.bandeau-cta .reassurance__libelle { color: var(--anthracite-2); }
.section--sombre .reassurance__bloc { background: var(--anthracite); }
.section--sombre .reassurance__valeur { color: var(--ivoire); }
.section--sombre .reassurance__libelle { color: var(--pierre-clair); }

/* ---------------------------------------------------------------------
   12. RÉALISATIONS
   --------------------------------------------------------------------- */

.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: clamp(28px, 3.4vw, 48px);
}
.filtre {
  appearance: none;
  background: transparent;
  border: 1px solid var(--pierre-clair);
  border-radius: 999px;
  padding: .55em 1.15em;
  font-size: .8rem;
  font-weight: 400;
  color: var(--anthracite-2);
  cursor: pointer;
  transition: all var(--transi);
}
.filtre:hover { border-color: var(--anthracite); }
.filtre[aria-pressed="true"] {
  background: var(--anthracite);
  border-color: var(--anthracite);
  color: var(--ivoire);
}

.carte-projet {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
  transition: border-color var(--transi), transform var(--transi), box-shadow var(--transi);
}
.carte-projet:hover {
  border-color: var(--anthracite);
  transform: translateY(-4px);
  box-shadow: var(--liseré), var(--ombre-f);
}
.carte-projet[hidden] { display: none; }

.carte-projet__visuels {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 1px;
  margin-top: 10px;
  background: var(--pierre-trait);
  border-bottom: var(--trait);
}
/* Prolonge le trait vertical entre avant/apres jusqu'au bord du cadre, a
   travers la marge blanche ajoutee au-dessus des images (sinon le trait
   semble flotter, deconnecte du coin arrondi de la carte). */
.carte-projet__visuels::before {
  content: "";
  position: absolute;
  top: -10px;
  left: calc(50% - .5px);
  width: 1px;
  height: 10px;
  background: var(--pierre-trait);
}
.carte-projet__visuel { position: relative; background: var(--ivoire); }
.carte-projet__mention {
  position: absolute;
  top: 2px; left: 10px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .35em .7em;
  border-radius: 999px;
  background: rgba(54, 51, 48, .84);
  color: var(--ivoire);
}
.carte-projet__visuel:last-child .carte-projet__mention {
  background: var(--ivoire);
  color: var(--anthracite);
  box-shadow: 0 0 0 1px var(--anthracite);
}

/* Annotation sur plan reel (photo/scan) : reproduit en surcouche HTML le
   badge + la note dessines directement dans les plans generes en SVG, pour
   que les documents reels gardent le meme langage visuel. Un SVG charge via
   <img> ne peut pas atteindre les polices web de la page : ses libelles
   retombent sur la pile de repli (Helvetica, Arial). On reprend ici la meme
   pile, volontairement, pour que l'incrustation HTML rende a l'identique. */
.plan-annote__badge {
  position: absolute;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(9px, 1.6vw, 14px);
  font-weight: 600;
  letter-spacing: .04em;
  padding: .4em .85em;
  border-radius: 999px;
  background: var(--accent);
  color: var(--encre-laiton);
  white-space: nowrap;
  transform: translate(-50%, 0);
}
.plan-annote__note {
  display: block;
  padding: .6em .9em .9em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.3;
  color: var(--accent-texte);
  text-align: center;
  background: var(--blanc);
}

/* Liste de constats sous un plan avant/apres : points negatifs sous l'avant,
   points positifs sous l'apres — meme registre visuel que .plan-annote__note.
   Couleur/graisse volontairement discretes (--accent, laiton clair, 400) : ce sont des
   points d'appui secondaires, le texte ne doit pas concurrencer les titres
   de la fiche projet en dessous. */
.plan-annote__liste {
  display: block;
  margin: 0;
  padding: .3em .6em .5em .6em;
  list-style: none;
  background: var(--blanc);
}
.plan-annote__liste li {
  position: relative;
  padding-left: .9em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: .58rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.15;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plan-annote__liste li + li { margin-top: .16em; }
.plan-annote__liste li::before {
  content: "•";
  position: absolute;
  left: 0;
}

.carte-projet__corps { padding: clamp(22px, 2.6vw, 32px); flex-grow: 1; display: flex; flex-direction: column; }
.carte-projet__meta {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pierre);
  margin-bottom: .8rem;
}
.carte-projet h3 { font-size: 1.32rem; margin-bottom: .7rem; }

.bloc-detail { margin-bottom: 1rem; }
.bloc-detail__intitule {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .3rem;
}
.bloc-detail p { font-size: .91rem; margin: 0; }

.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 1.2rem; }
.etiquette {
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--pierre);
  border: 1px solid var(--pierre-trait);
  border-radius: 999px;
  padding: .3em .75em;
}

.message-vide {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 0;
  color: var(--pierre);
}

/* ---------------------------------------------------------------------
   13. PROCESSUS EN 4 ÉTAPES
   --------------------------------------------------------------------- */

.etapes { counter-reset: etape; }
.etape {
  counter-increment: etape;
  position: relative;
  padding-top: 30px;
  border-top: 1px solid var(--anthracite);
}
.etape::before {
  content: '0' counter(etape);
  font-family: var(--display);
  font-weight: 400;
  font-size: 2.5rem;
  color: var(--pierre-clair);
  line-height: 1;
  display: block;
  margin-bottom: 1rem;
  font-variant-numeric: tabular-nums;
  transition: color var(--transi);
}
.etape:hover::before { color: var(--accent); }
.etape h3 {
  font-family: var(--sans);
  font-size: 1.04rem;
  font-weight: 400;
  line-height: 1.35;
  margin-bottom: .55rem;
}
.etape p { font-size: .92rem; margin: 0; color: var(--anthracite-2); }

/* Version détaillée (page Le service) */
.etape-detail {
  display: grid;
  grid-template-columns: minmax(0, .34fr) minmax(0, .66fr);
  gap: clamp(20px, 4vw, 56px);
  padding-block: clamp(34px, 4.5vw, 58px);
  border-top: var(--trait);
  align-items: start;
}
.etape-detail:last-of-type { border-bottom: var(--trait); }
.etape-detail__num {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.6rem, 5vw, 4rem);
  color: var(--accent);
  line-height: .9;
  font-variant-numeric: tabular-nums;
}
.etape-detail h3 { margin-bottom: .6rem; }
.liste-puces { list-style: none; margin: 1.1rem 0 0; padding: 0; font-size: .93rem; }
.liste-puces li {
  position: relative;
  padding: .38em 0 .38em 1.4em;
}
.liste-puces li::before {
  content: '';
  position: absolute;
  left: 0; top: .92em;
  width: 7px; height: 1px;
  background: var(--accent);
}

/* Encadré d'information */
.encadre {
  background: var(--ivoire-2);
  border-left: 2px solid var(--accent);
  padding: clamp(20px, 2.6vw, 30px);
  border-radius: 0 var(--rayon) var(--rayon) 0;
}
.encadre h3, .encadre h4 { margin-bottom: .6rem; }
.encadre p:last-child { margin-bottom: 0; }

/* Questions fréquentes */
.question {
  border-bottom: var(--trait);
}
.question summary {
  cursor: pointer;
  list-style: none;
  padding: 1.35em 2.4em 1.35em 0;
  position: relative;
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--anthracite);
  transition: color var(--transi);
}
.question summary::-webkit-details-marker { display: none; }
.question summary:hover { color: var(--accent); }
.question summary::after {
  content: '+';
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.35rem;
  color: var(--accent);
  transition: transform var(--transi);
  line-height: 1;
}
.question[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.question__reponse { padding: 0 2.4em 1.6em 0; font-size: .95rem; color: var(--anthracite-2); }
.question__reponse p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   14. RESSOURCES / ARTICLES
   --------------------------------------------------------------------- */

.carte-article {
  display: flex;
  flex-direction: column;
  padding-top: 24px;
  border-top: 1px solid var(--anthracite);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transi);
}
.carte-article:hover { border-top-color: var(--accent); color: inherit; }
.carte-article__cat {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .85rem;
}
.carte-article h3 {
  font-family: var(--sans);
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1.38;
  margin-bottom: .6rem;
  transition: color var(--transi);
}
.carte-article:hover h3 { color: var(--accent); }
.carte-article p { font-size: .9rem; color: var(--anthracite-2); margin-bottom: 1.1rem; }
.carte-article__pied {
  margin-top: auto;
  font-size: .76rem;
  color: var(--pierre);
  letter-spacing: .04em;
}

.article-vedette {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  padding: clamp(28px, 3.4vw, 46px);
  background: var(--ivoire-2);
  border-radius: var(--rayon);
  margin-bottom: clamp(40px, 5vw, 72px);
}

/* Corps d'article — colonne de lecture */
.article-corps {
  font-size: 1.06rem;
  line-height: 1.72;
  max-width: 68ch;
}
.article-corps > * + * { margin-top: 1.15em; }
.article-corps h2 {
  font-size: clamp(1.3rem, 2.3vw, 1.7rem);
  margin-top: 2.4em;
  margin-bottom: .1em;
}
.article-corps h3 {
  font-family: var(--sans);
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1.4;
  margin-top: 1.9em;
  margin-bottom: .1em;
}
.article-corps ul, .article-corps ol { padding-left: 1.3em; margin-block: 1.1em; }
.article-corps li { margin-bottom: .5em; }
.article-corps li::marker { color: var(--accent); }
.article-corps blockquote {
  margin: 1.9em 0;
  padding: .2em 0 .2em 1.4em;
  border-left: 2px solid var(--accent);
  font-family: var(--display);
  font-size: 1.35rem;
  line-height: 1.36;
  color: var(--anthracite);
}
.article-corps figure { margin: 2.2em 0; }
.article-corps figure img {
  border: var(--trait);
  border-radius: var(--rayon);
  background: var(--ivoire);
  width: 100%;
}
.article-corps figcaption { margin-top: .7em; font-size: .84rem; color: var(--pierre); }
.article-corps .encadre { margin-block: 2em; }

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  font-size: .78rem;
  color: var(--pierre);
  letter-spacing: .04em;
  padding-bottom: 1.6rem;
  margin-bottom: 2rem;
  border-bottom: var(--trait);
}
.article-meta .cat {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Encart de conversion inséré dans un article */
.encart-article {
  margin-block: 2.6em;
  padding: clamp(24px, 3vw, 34px);
  background: var(--anthracite);
  color: var(--ivoire-3);
  border-radius: var(--rayon);
}
.encart-article h3 {
  font-family: var(--display);
  font-style: normal;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--ivoire);
  margin: 0 0 .5rem;
}
.encart-article p { color: var(--pierre-clair); font-size: .96rem; margin-bottom: 1.4rem; }

/* Navigation entre articles */
.nav-articles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.4vw, 30px);
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(28px, 3.4vw, 42px);
  border-top: var(--trait);
}
@media (max-width: 640px) {
  .nav-articles { grid-template-columns: 1fr; }
  .article-corps { font-size: 1rem; }
}

/* ---------------------------------------------------------------------
   15. À PROPOS
   --------------------------------------------------------------------- */

.portrait {
  border-radius: var(--rayon);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fiche {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--trait);
}
.fiche div {
  display: grid;
  grid-template-columns: minmax(120px, .38fr) minmax(0, 1fr);
  gap: 20px;
  padding: .95em 0;
  border-bottom: var(--trait);
  font-size: .92rem;
}
.fiche dt {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--pierre);
  padding-top: .25em;
}
.fiche dd { margin: 0; color: var(--anthracite-2); }

.citation {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.32;
  letter-spacing: -.02em;
  color: var(--anthracite);
  border-left: 2px solid var(--accent);
  padding-left: clamp(20px, 3vw, 36px);
  margin: 0;
  font-weight: 400;
}
.citation footer {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pierre);
  margin-top: 1.3rem;
}

/* ---------------------------------------------------------------------
   16. FORMULAIRES
   --------------------------------------------------------------------- */

.formulaire {
  background: var(--blanc);
  border: var(--trait);
  border-radius: var(--rayon);
  padding: clamp(24px, 3.4vw, 44px);
  box-shadow: var(--ombre);
}
.formulaire__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}
.champ { display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; }
.champ--pleine-largeur { grid-column: 1 / -1; }

.champ label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--anthracite-2);
}
.champ label .requis { color: var(--accent); }
.champ .aide { font-size: .78rem; color: var(--pierre); letter-spacing: 0; text-transform: none; font-weight: 400; }

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: .82em .95em;
  background: var(--blanc);
  border: 1px solid var(--pierre-clair);
  border-radius: var(--rayon-champ);
  font-size: .95rem;
  color: var(--anthracite);
  transition: border-color var(--transi), box-shadow var(--transi);
}
.champ input::placeholder, .champ textarea::placeholder { color: #B4AEA3; }
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--pierre); }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(54, 51, 48, .13);
}
.champ textarea { resize: vertical; min-height: 120px; }

.champ select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238A857C' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
  background-size: 11px;
  padding-right: 2.6em;
}

.champ__erreur {
  font-size: .78rem;
  color: #A6392C;
  min-height: 1.3em;
  visibility: hidden;
}
.champ.est-invalide input,
.champ.est-invalide select,
.champ.est-invalide textarea { border-color: #A6392C; }
.champ.est-invalide .consentement { color: #A6392C; }
.champ.est-invalide input[type="checkbox"] { outline: 2px solid #A6392C; outline-offset: 2px; }
.champ.est-invalide .champ__erreur { visibility: visible; }

/* Dépôt de fichier */
.depot {
  position: relative;
  border: 1px dashed var(--pierre-clair);
  border-radius: var(--rayon);
  background: var(--ivoire-2);
  padding: clamp(20px, 2.6vw, 30px);
  text-align: center;
  transition: border-color var(--transi), background var(--transi);
  cursor: pointer;
}
.depot:hover, .depot.est-survole {
  border-color: var(--accent);
  background: var(--accent-clair);
}
.depot input[type="file"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.depot__intitule { font-size: .94rem; font-weight: 700; color: var(--anthracite); display: block; margin-bottom: .3rem; }
.depot__detail { font-size: .8rem; color: var(--pierre); }
.depot__fichiers { margin-top: .9rem; font-size: .84rem; color: var(--accent); font-weight: 400; }

/* Consentement */
.consentement {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--anthracite-2);
}
.consentement input[type="checkbox"] {
  width: 17px; height: 17px;
  margin: 3px 0 0;
  accent-color: var(--accent);
  flex-shrink: 0;
}

/* Message de confirmation */
.confirmation {
  background: var(--accent-clair);
  border-left: 2px solid var(--accent);
  padding: clamp(20px, 2.6vw, 30px);
  border-radius: 0 var(--rayon) var(--rayon) 0;
}
.confirmation h3 { margin-bottom: .5rem; }
.confirmation[hidden] { display: none; }

.formulaire__erreur {
  background: #F7E9E7;
  border-left: 2px solid #A6392C;
  padding: clamp(16px, 2vw, 22px);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  margin-top: 1.4rem;
  font-size: .88rem;
  color: var(--anthracite-2);
}
.formulaire__erreur[hidden] { display: none; }

/* Coordonnées */
.coordonnees { list-style: none; margin: 0; padding: 0; }
.coordonnees li { padding: 1.05em 0; border-bottom: var(--trait); }
.coordonnees li:first-child { border-top: var(--trait); }
.coordonnees__intitule {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pierre);
  margin-bottom: .3rem;
}
.coordonnees a {
  font-size: 1.06rem;
  color: var(--anthracite);
  text-decoration: none;
  transition: color var(--transi);
}
.coordonnees a:hover { color: var(--accent); }

/* ---------------------------------------------------------------------
   17. BLOCS CTA
   --------------------------------------------------------------------- */

.bandeau-cta {
  background: var(--anthracite);
  color: var(--ivoire-3);
  padding-block: clamp(56px, 7.5vw, 108px);
}
.bandeau-cta h2 { color: var(--ivoire); margin-bottom: .5em; }
.bandeau-cta p { color: var(--pierre-clair); font-size: 1.06rem; max-width: 56ch; }
.bandeau-cta .groupe-boutons { margin-top: 2.2rem; }

.bandeau-cta__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

/* ---------------------------------------------------------------------
   18. PIED DE PAGE
   --------------------------------------------------------------------- */

.pied {
  background-color: var(--ivoire-2-douce);
  background-image: repeating-linear-gradient(45deg,
      rgba(54, 51, 48, .06)      0    1px,
      rgba(255, 255, 255, .9)    1px  2px,
      transparent                2px  8px);
  border-top: var(--trait);
  padding-block: clamp(48px, 6vw, 78px) 0;
  font-size: .89rem;
}
.pied__haut {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 52px);
  padding-bottom: clamp(36px, 4.5vw, 56px);
}
.pied__baseline {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--anthracite);
  line-height: 1.3;
  margin: 1.2rem 0 0;
  max-width: 26ch;
}
.pied h4 {
  font-family: var(--sans);
  font-style: normal;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pierre);
  margin-bottom: 1.1rem;
}
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: .62em; }
.pied a { color: var(--anthracite-2); text-decoration: none; transition: color var(--transi); }
.pied a:hover { color: var(--accent); }

.pied__bas {
  border-top: var(--trait);
  padding-block: 1.6rem 1.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  justify-content: space-between;
  font-size: .8rem;
  color: var(--pierre);
}
.pied__legaux { display: flex; flex-wrap: wrap; gap: 20px; }

/* ---------------------------------------------------------------------
   19. BARRE MOBILE & BANDEAU COOKIES
   --------------------------------------------------------------------- */

.barre-mobile {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(243, 240, 234, .95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: var(--trait);
}
.barre-mobile .bouton {
  flex: 1;
  padding: 1em .5em;
  font-size: .72rem;
  letter-spacing: .02em;
  text-align: center;
}
/* Le devis reste l'action dominante : il occupe plus de place que « Appeler ». */
.barre-mobile .bouton--primaire { flex: 1.6; }

.cookies {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 120;
  max-width: 620px;
  margin-inline: auto;
  background: var(--anthracite);
  color: var(--ivoire-3);
  border-radius: var(--rayon);
  box-shadow: 0 20px 50px -14px rgba(54, 51, 48, .5);
  padding: clamp(18px, 2.4vw, 26px);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  align-items: center;
  justify-content: space-between;
  font-size: .85rem;
  transform: translateY(140%);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.cookies.est-visible { transform: none; }
.cookies[hidden] { display: none; }
.cookies p { margin: 0; flex: 1 1 260px; color: var(--pierre-clair); line-height: 1.5; }
.cookies a { color: var(--ivoire); }
.cookies .groupe-boutons { flex-shrink: 0; }
.cookies .bouton { padding: .7em 1.15em; font-size: .74rem; }

/* ---------------------------------------------------------------------
   20. ANIMATIONS & ACCESSIBILITÉ
   --------------------------------------------------------------------- */

.revele {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
              transform .7s cubic-bezier(.22, .61, .36, 1);
}
.revele.est-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .revele { opacity: 1; transform: none; }
  .bouton:hover, .carte-presta:hover, .carte-projet:hover { transform: none; }
}

@media print {
  .entete, .barre-mobile, .cookies, .bandeau-cta, .filtres { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .revele { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
   21. RESPONSIVE
   --------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .pied__haut { grid-template-columns: 1fr 1fr; }

  /* Navigation repliée dès 1080 px : en dessous, les sept liens, la bascule
     de langue et le bouton d'action ne tiennent plus sur une ligne. */
  .bascule-menu { display: inline-flex; }
  .nav {
    position: fixed;
    inset: 78px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ivoire);
    border-bottom: var(--trait);
    padding: 12px var(--gouttiere) 26px;
    max-height: calc(100dvh - 78px);
    overflow-y: auto;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, transform .28s ease, visibility .28s;
    box-shadow: 0 18px 40px -22px rgba(54, 51, 48, .4);
  }
  .nav.est-ouverte { transform: none; opacity: 1; visibility: visible; }
  .nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__lien {
    display: block;
    padding: .95em 0;
    font-size: 1rem;
    border-bottom: var(--trait);
  }
  .nav__lien::after { display: none; }
  .entete .bouton { display: none; }
  .langue { align-self: flex-start; margin-top: 18px; }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 80px; }

  .hero__grille { grid-template-columns: 1fr; }
  .entete-page__grille { grid-template-columns: 1fr; align-items: start; }
  .duo, .duo--texte-etroit,
  .panneau, .article-vedette,
  .bandeau-cta__grille { grid-template-columns: 1fr; }
  .panneau__visuel { order: -1; }

  .grille--4 { grid-template-columns: 1fr 1fr; }
  .grille--3 { grid-template-columns: 1fr 1fr; }
  .reassurance { grid-template-columns: 1fr 1fr; }
  .etape-detail { grid-template-columns: 1fr; gap: 12px; }

  /* Barre d'action permanente en bas d'écran */
  .barre-mobile { display: flex; }
  body { padding-bottom: 74px; }
  .cookies { bottom: 84px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }

  .sequence { grid-template-columns: 1fr; }
  .grille--2, .grille--3, .grille--4 { grid-template-columns: 1fr; }
  .formulaire__grille { grid-template-columns: 1fr; }
  .carte-projet__visuels { grid-template-columns: 1fr; }
  .pied__haut { grid-template-columns: 1fr; }
  .pied__bas { flex-direction: column; align-items: flex-start; }

  .groupe-boutons { flex-direction: column; align-items: stretch; }
  .groupe-boutons .bouton { width: 100%; }

  .onglets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .onglets::-webkit-scrollbar { display: none; }
  .onglet { white-space: nowrap; }

  .fiche div { grid-template-columns: 1fr; gap: 4px; }
  .comparateur__etiquette { font-size: .6rem; padding: .4em .8em; }

  /* Un tableau à quatre colonnes ne tient pas sur un téléphone : chaque
     ligne devient un bloc, l'en-tête de colonne passe devant la valeur. */
  .tableau-tarifs { font-size: .9rem; }
  .tableau-tarifs caption { letter-spacing: .08em; font-size: .7rem; line-height: 1.5; }
  .tableau-tarifs thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .tableau-tarifs, .tableau-tarifs tbody,
  .tableau-tarifs tr, .tableau-tarifs th, .tableau-tarifs td { display: block; width: 100%; }
  .tableau-tarifs tr { padding: 1.15em 0; border-bottom: var(--trait); }
  .tableau-tarifs tr:hover { background: transparent; }
  .tableau-tarifs tbody th { padding: 0 0 .5em; border: 0; font-size: 1.05rem; }
  .tableau-tarifs td { border: 0; padding: .18em 0; color: var(--anthracite-2); }
  .tableau-tarifs td::before {
    content: attr(data-libelle) " · ";
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--pierre);
  }
  .tableau-tarifs .cellule-prix {
    text-align: left;
    font-size: 1.25rem;
    padding-top: .45em;
  }
  .tableau-tarifs .cellule-prix::before { font-size: .68rem; vertical-align: middle; }
}

@media (max-width: 420px) {
  .reassurance { grid-template-columns: 1fr; }
}