/* ==========================================================================
   JustiComm · thème « luxe discret » · maquette de l’accueil
   Octave (direction artistique) · v2 de l’accueil, 14/10/2026 · v3 le même jour (retours du regard de Raoudha et de Pauline) · à valider par Raoudha
   v3 : marges entre sections −30 %, six maquettes en carrousel pleine largeur au téléphone, familles sans listes de liens,
   bande du coup de marteau, papeterie à la place du cadre vide, une seule question, légendes qui ne se chevauchent plus,
   cartouche « Appeler » sur deux lignes au téléphone (WCAG 1.4.12).
   v2 (retour de Raoudha du 13/10/2026) : sous l’en-tête animé (inchangé), beaucoup moins de texte, écrit beaucoup plus grand,
   une image par section (photo de Raoudha, maquettes de cabinets fictifs, visuels en points d’or). Plan : structure-v2.md ;
   textes : textes-v2.md (Hélène). Rien sous 16 px hors de la barre du menu (inchangée) et des images.
   Charte : 06-charte/couleurs.md et 06-charte/logo/notes.md
   Mode d’emploi pour le thème WordPress : ../notes.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs de la charte (06-charte/couleurs.md) */
  --petrole: #0A393A;
  --petrole-profond: #062A2B;
  --petrole-600: #205051;
  --petrole-900: #021818;
  --halo: #11403F;            /* halo de l’en-tête */
  --or: #E0BD8E;
  --or-clair: #F2D9AC;
  --or-200: #EFDBBD;
  --or-400: #CDA675;
  --bronze: #9C7952;
  --or-texte: #7B5C3C;        /* or 700 : petit texte doré sur fond clair, 5,5:1 sur papier */
  --creme: #EEEAE1;
  --papier: #F6F2EA;
  --encre: #172425;
  --taupe: #6E6862;
  --lin: #E2DCD0;
  --cuivre: #B06339;          /* touche rare (< 5 %) */
  --sauge: #A1BFB6;           /* touche rare */
  --creme-doux: #C0C7C0;      /* texte secondaire sur pétrole : 7,3:1 sur pétrole, 8,9:1 sur pétrole profond (inchangé : le menu s’en sert) */
  --succes: #2C6C47;
  --erreur: #A8372E;
  --attention: #965F14;

  /* Polices (SIL Open Font License) */
  --f-titre: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --f-titre-2: var(--f-titre);
  --f-texte: "Jost", "Futura", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  /* Échelle typographique v2, fluide de 375 à 1440 px (structure-v2.md). Rien sous 16 px. */
  --t-xs: 0.75rem;                                        /* 12 · barre du menu seulement (inchangée) */
  --t-s: 0.875rem;                                        /* 14 · méga-menu seulement (inchangé) */
  --t-legende: clamp(1rem, 0.97rem + 0.1vw, 1.0625rem);   /* 16 → 17 · légendes, étiquettes, surtitres */
  --t-corps: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);   /* 18 → 20 · lignes, réponses */
  --t-question: clamp(1.375rem, 1.3rem + 0.3vw, 1.625rem);/* 22 → 26 · questions repliées */
  --t-carte: clamp(1.5rem, 1.36rem + 0.6vw, 2rem);        /* 24 → 32 · professions, familles, étapes */
  --t-phrase: clamp(1.875rem, 1.2rem + 2.6vw, 3.5rem);    /* 30 → 56 · la phrase de « Qui nous sommes » */
  --t-h2: clamp(2.5rem, 1.94rem + 2.4vw, 4rem);           /* 40 → 64 · titres de section */
  --t-slogan: clamp(3rem, 1.4rem + 5vw, 5.5rem);          /* 48 → 88 · le slogan sous l’en-tête */
  --t-slogan-final: clamp(3.25rem, 1.5rem + 6vw, 7.5rem); /* 52 → 120 · le slogan avant le pied de page */
  --t-m: var(--t-corps);

  /* Espacements, base 4 px */
  --e-1: 0.25rem;  /* 4 */
  --e-2: 0.5rem;   /* 8 */
  --e-3: 0.75rem;  /* 12 */
  --e-4: 1rem;     /* 16 */
  --e-5: 1.5rem;   /* 24 */
  --e-6: 2rem;     /* 32 */
  --e-7: 3rem;     /* 48 */
  --e-8: 4rem;     /* 64 */
  --e-9: 6rem;     /* 96 */
  --e-10: 8rem;    /* 128 */
  --e-section: clamp(3.5rem, 2rem + 4vw, 5.5rem);  /* v3 : 56 → 88 (v2 : 80 → 152 ; −40 % à 1 440 px, −30 % à 375 px) */

  /* Grille */
  --conteneur: 80rem;                       /* 1280 px de contenu */
  --marge: clamp(1.25rem, 4vw, 4rem);       /* 20 → 64 */
  --gouttiere: clamp(1.25rem, 2.2vw, 2rem); /* 20 → 32 */
  --h-entete: 4rem;

  /* Formes et mouvements */
  --rayon: 2px;
  --rayon-pilule: 999px;
  --rayon-bouton: var(--rayon);
  --pan: 16px;                    /* coins coupés à 45°, comme la plaque gravée (photo, cadres) */
  --ombre-panneau: 0 2.5rem 4rem -1.5rem rgba(2, 24, 24, 0.38);
  --ease-sortie: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-douce: cubic-bezier(0.65, 0, 0.35, 1);
  --d-courte: 200ms;
  --d: 320ms;
  --d-longue: 900ms;

  /* Flèche des liens (dessinée en CSS : aucune police d’icônes de plus) */
  --fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10h13M11 5l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");

  interpolate-size: allow-keywords;
}

@media (min-width: 74em) {
  :root { --h-entete: 4.75rem; }
}
.titres-eb { --f-titre-2: "EB Garamond", Georgia, "Times New Roman", serif; }

/* Surfaces : chaque section choisit la sienne, les composants suivent.
   Le mode sombre se branchera ici (voir notes.md). */
.surface-claire,
.surface-creme {
  --fond: var(--papier);
  --texte: var(--encre);
  --texte-doux: var(--taupe);
  --titre: var(--petrole);
  --accent: var(--or-texte);
  --accent-deco: var(--bronze);
  --filet-couleur: var(--lin);
  --focus: var(--petrole);
  background-color: var(--fond);
  color: var(--texte);
}
.surface-creme {
  --fond: var(--creme);
  --filet-couleur: #D6CFC1;
}
.surface-sombre,
.surface-nuit {
  --fond: var(--petrole);
  --texte: var(--creme);
  --texte-doux: var(--creme-doux);
  --titre: var(--creme);
  --accent: var(--or);
  --accent-deco: var(--or);
  --filet-couleur: rgba(224, 189, 142, 0.22);
  --focus: var(--or);
  background-color: var(--fond);
  color: var(--texte);
}
.surface-nuit { --fond: var(--petrole-profond); }

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

html {
  background: var(--petrole-profond);   /* rebond du défilement en haut : pétrole continu */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--h-entete) + 1rem);
}
/* Téléphone et tablette : la barre fixe « Appeler · WhatsApp » ne cache plus l’élément atteint au clavier (Pauline, 23/10/2026) */
@media (max-width: 63.99em) { html { scroll-padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 400 var(--t-corps) / 1.6 var(--f-texte);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-titre-2);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--titre, inherit);
  text-wrap: balance;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

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

::selection { background: var(--or); color: var(--petrole-profond); }

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

.lien-evitement {
  position: fixed;
  top: var(--e-3);
  left: var(--e-3);
  z-index: 100;
  padding: var(--e-3) var(--e-5);
  border-radius: var(--rayon);
  background: var(--or);
  color: var(--petrole-profond);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--d) var(--ease-sortie);
}
.lien-evitement:focus { transform: none; }

/* Repère de maquette : ce qui reste à fournir ou à valider (à retirer en production) */
.a-valider {
  display: inline-block;
  padding: 0.0625rem 0.5rem;
  border: 1px dashed currentColor;
  border-radius: var(--rayon);
  font: 500 1rem / 1.5 var(--f-texte);
  letter-spacing: 0.04em;
  color: var(--accent);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Mise en page
   -------------------------------------------------------------------------- */
.conteneur {
  width: 100%;
  max-width: calc(var(--conteneur) + 2 * var(--marge));
  margin-inline: auto;
  padding-inline: var(--marge);
}

.section { padding-block: var(--e-section); }

.entete-section {
  display: grid;
  gap: var(--e-5);
  margin-bottom: clamp(2rem, 3.5vw, 3.5rem);     /* v3 : 32 → 56 (v2 : 48 → 80) */
}

.section__suite { margin-top: clamp(2rem, 3.5vw, 3rem); }   /* v3 : 32 → 48 (v2 : 48 → 72) */
/* v3 : sur ordinateur, le cartouche « Toutes les professions » ou « Voir tous les services » remonte dans la rangée du titre,
   à droite (un écran de défilement en moins). Il reste après les cartes dans le code : au clavier, on le trouve après elles. */
@media (min-width: 64em) {
  .conteneur--titre-et-suite { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--e-7); }
  .conteneur--titre-et-suite > .entete-section { grid-column: 1; grid-row: 1; }
  .conteneur--titre-et-suite > :not(.entete-section, .section__suite) { grid-column: 1 / -1; grid-row: 2; }
  .conteneur--titre-et-suite > .section__suite { grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 clamp(2rem, 3.5vw, 3.5rem); }
}

/* --------------------------------------------------------------------------
   4. Composants
   -------------------------------------------------------------------------- */

/* 4.1 Surtitre : capitales espacées, précédées d’un filet (16 px) */
.surtitre {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font: 500 1rem / 1.4 var(--f-texte);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texte-doux);             /* taupe 4,9:1 sur papier ; le filet porte la couleur */
}
.surtitre::before {
  content: "";
  flex: none;
  width: 2.5rem;
  height: 1px;
  background: var(--accent-deco);
}

.titre-section {
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.012em;
  max-width: 24ch;
}
.titre-section--large { max-width: none; }
.titre-section .phrase { display: inline-block; }

/* 4.2 Point de lumière (celui du logo) */
.point-lumiere {
  display: block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFF1D8, var(--or) 55%, var(--bronze));
  box-shadow: 0 0 0 4px rgba(224, 189, 142, 0.14), 0 0 18px 2px rgba(224, 189, 142, 0.35);
}

/* 4.3 Boutons : css/boutons.css (copie de hero-marteau/css/boutons.css), chargée après ce fichier.
   .btn-plaque (plaque gravée) : action principale ; .btn-cartouche (cartouche) : action secondaire ;
   .btn-plaque-petite : barre du haut et bouton Menu. Sur clair, .sur-clair (posée sur la section).
   v2 : .btn--grand (60 px de haut, plaque 16 px, cartouche 22 px) pour le contact direct sous le slogan ;
   .btn-appel : le cartouche « Appeler l’agence · 04 93 26 00 41 » (numéro en Jost, chiffres alignés). */
.btn-plaque.btn--grand,
.btn-cartouche.btn--grand { --plaque-hauteur: 60px; --cartouche-hauteur: 60px; }
.btn-plaque.btn--grand { padding-inline: 38px; font-size: 16px; }
.btn-cartouche.btn--grand { padding-inline: 34px; font-size: 22px; }
/* rien sous 16 px : la plaque passe de 14,5 à 16 px dans le contenu (boutons.css, chargée après, reste une copie exacte) */
main .btn-plaque { font-size: 16px; }
.btn-appel { gap: 0; }
.btn-appel__sep { margin-inline: 0.55em; opacity: 0.7; }
.btn-appel__numero {
  font: 500 0.82em / 1 var(--f-texte);   /* 18 px dans le grand cartouche */
  font-style: normal;
  letter-spacing: 0.04em;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}

/* 4.4 Lien fléché (navigation : méga-menu, menu du téléphone, réponse de la FAQ) */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: var(--titre);
  font: 500 0.9375rem / 1.3 var(--f-texte);
  letter-spacing: 0.01em;
  text-decoration: none;
}
.lien-fleche span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.45em;
  text-decoration-color: var(--accent-deco);
  transition: text-decoration-color var(--d) var(--ease-sortie), color var(--d) var(--ease-sortie);
}
.lien-fleche .ti {
  color: var(--accent-deco);
  font-size: 1.125rem;
  transition: transform var(--d) var(--ease-sortie);
}
@media (hover: hover) {
  .lien-fleche:hover span { text-decoration-color: currentColor; }
  .lien-fleche:hover .ti { transform: translateX(3px); }
}

/* 4.5 Encadré (offre de l’audit) */
.encadre {
  position: relative;
  display: grid;
  gap: var(--e-4);
  align-content: start;
  padding: clamp(var(--e-6), 4vw, var(--e-8));
  border: 1px solid var(--filet-couleur);
  border-radius: var(--rayon);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(224, 189, 142, 0.07), transparent 60%),
    rgba(2, 24, 24, 0.18);
}
.encadre::before {
  content: "";
  position: absolute;
  top: -1px;
  left: clamp(var(--e-6), 4vw, var(--e-8));
  width: 3rem;
  height: 1px;
  background: var(--or);
}

/* 4.6 Questions repliées (details / summary) */
.faq__item { border-top: 1px solid var(--filet-couleur); }
.faq__item:last-child { border-bottom: 1px solid var(--filet-couleur); }
.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  min-height: 3.5rem;
  padding-block: 1.25rem;
  font: 500 var(--t-question) / 1.2 var(--f-titre-2);
  color: var(--titre);
  cursor: pointer;
  list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
/* le « + » dessiné en CSS : deux filets, qui tournent en « × » quand la réponse est ouverte */
.faq__plus {
  position: relative;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  transition: transform var(--d) var(--ease-sortie);
}
.faq__plus::before,
.faq__plus::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1.5px;
  margin-top: -0.75px;
  background: var(--accent-deco);
}
.faq__plus::after { transform: rotate(90deg); }
.faq__item[open] .faq__plus { transform: rotate(45deg); }
.faq__item::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size var(--d) var(--ease-sortie), content-visibility var(--d) allow-discrete;
}
.faq__item[open]::details-content { block-size: auto; }
.faq__reponse {
  padding-bottom: var(--e-6);
  max-width: 40rem;
  color: var(--texte);
}
.faq__reponse a {
  color: var(--titre);
  font-weight: 500;
  text-decoration-color: var(--accent-deco);
  text-underline-offset: 0.3em;
}
.faq__reponse .a-valider { white-space: normal; }

/* 4.7 Formulaire (pour la page Contact ; non utilisé sur l’accueil) */
.champ { display: grid; gap: var(--e-2); }
.champ__libelle { font: 500 1rem / 1.4 var(--f-texte); color: var(--titre); }
.champ__aide { font-size: 1rem; color: var(--texte-doux); }
.champ__saisie {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--taupe);          /* 4,9:1 sur papier, au-delà des 3:1 exigés */
  border-radius: var(--rayon);
  background: #FFFDF9;
  color: var(--encre);
  font: 400 var(--t-corps) / 1.4 var(--f-texte);
  transition: border-color var(--d-courte), box-shadow var(--d-courte);
}
.champ__saisie:hover { border-color: var(--petrole); }
.champ__saisie:focus-visible {
  outline: none;
  border-color: var(--petrole);
  box-shadow: 0 0 0 3px rgba(10, 57, 58, 0.18);
}
.champ--erreur .champ__saisie { border-color: var(--erreur); }
.champ__erreur {
  display: flex;
  gap: var(--e-2);
  align-items: center;
  font-size: 1rem;
  color: var(--erreur);
}

/* 4.8 Étiquette posée sur une maquette : « Maquette · cabinet fictif » (16 px, écrite en toutes lettres, jamais une simple teinte) */
.etiquette-maquette {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: max-content;
  max-width: calc(100% - 1.5rem);
  padding: 0.3125rem 0.75rem 0.375rem;
  border: 1px solid rgba(224, 189, 142, 0.4);
  border-radius: var(--rayon);
  background: rgba(6, 42, 43, 0.88);
  color: var(--creme);                    /* 12,7:1 sur pétrole profond */
  font: 500 1rem / 1.3 var(--f-texte);
  letter-spacing: 0.01em;
  text-wrap: balance;                     /* v3 : passe à la ligne dans sa carte au lieu de dépasser (320 px, WCAG 1.4.12) */
}
.etiquette-maquette::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--or);
}

/* 4.9 Emplacement d’une vraie photo à fournir : un cadre soigné, jamais un aplat gris */
.photo-a-fournir__cadre {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 15rem;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  background:
    radial-gradient(ellipse 60% 70% at 50% 50%, rgba(255, 253, 249, 0.9), rgba(255, 253, 249, 0) 75%),
    var(--papier);
  /* double filet bronze, comme le cartouche */
  box-shadow: inset 0 0 0 1px rgba(156, 121, 82, 0.55), inset 0 0 0 6px var(--papier), inset 0 0 0 7px rgba(156, 121, 82, 0.28);
}
/* les quatre coins d’un viseur, en bronze */
.photo-a-fournir__coin {
  position: absolute;
  inset: clamp(1.25rem, 3vw, 2rem);
  pointer-events: none;
  background:
    linear-gradient(var(--bronze), var(--bronze)) top left / 28px 1px,
    linear-gradient(var(--bronze), var(--bronze)) top left / 1px 28px,
    linear-gradient(var(--bronze), var(--bronze)) top right / 28px 1px,
    linear-gradient(var(--bronze), var(--bronze)) top right / 1px 28px,
    linear-gradient(var(--bronze), var(--bronze)) bottom left / 28px 1px,
    linear-gradient(var(--bronze), var(--bronze)) bottom left / 1px 28px,
    linear-gradient(var(--bronze), var(--bronze)) bottom right / 28px 1px,
    linear-gradient(var(--bronze), var(--bronze)) bottom right / 1px 28px;
  background-repeat: no-repeat;
}
.photo-a-fournir figcaption { position: relative; display: grid; justify-items: center; gap: var(--e-4); max-width: 44rem; }
.photo-a-fournir__libelle {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font: 500 1rem / 1.4 var(--f-texte);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
}
.photo-a-fournir__libelle::before,
.photo-a-fournir__libelle::after { content: ""; width: 1.75rem; height: 1px; background: var(--bronze); }
.photo-a-fournir__sujet {
  font: italic 400 clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem) / 1.2 var(--f-titre);
  color: var(--petrole);
  text-wrap: balance;
}
.photo-a-fournir__consignes { font-size: var(--t-legende); color: var(--taupe); text-wrap: balance; }

/* --------------------------------------------------------------------------
   5. En-tête, méga-menu, menu mobile
   -------------------------------------------------------------------------- */
.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  color: var(--creme);
  --titre: var(--creme);
  --accent-deco: var(--or);
  --focus: var(--or);
}
/* Bouton d’en-tête : petite plaque au trait (css/boutons.css), toujours visible à partir de 640 px :
   le bouton principal de l’en-tête marteau est sous l’animation, rarement dans le premier écran. */
main:focus { outline: none; }
.entete__fond {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(6, 42, 43, 0.9);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid rgba(224, 189, 142, 0.16);
  opacity: 0;
  transition: opacity var(--d) var(--ease-sortie);
}
.entete[data-defile] .entete__fond,
.entete[data-panneau] .entete__fond,
.entete[data-menu] .entete__fond { opacity: 1; }
.entete[data-menu] .entete__fond { background: var(--petrole-profond); }

.entete__barre {
  display: flex;
  align-items: stretch;
  gap: var(--e-5);
  height: var(--h-entete);
}
.entete__logo {
  display: grid;
  align-items: center;
  flex: none;
  margin-right: auto;
  padding-block: var(--e-2);
}
/* Deux fichiers de la charte superposés : dorure sur le haut de page, or quand l’en-tête se remplit */
.entete__logo img {
  grid-area: 1 / 1;
  width: 127px;
  height: 30px;
  transition: opacity var(--d) var(--ease-sortie);
}
.entete__logo-or { opacity: 0; }
.entete:is([data-defile], [data-panneau], [data-menu]) .entete__logo-or { opacity: 1; }
.entete:is([data-defile], [data-panneau], [data-menu]) .entete__logo-dorure { opacity: 0; }
@media (min-width: 74em) {
  .entete__logo img { width: 156px; height: 37px; }
}
/* Sélecteurs à deux classes : boutons.css est chargée après ce fichier et pose display: inline-flex */
.entete .entete__cta { align-self: center; display: none; }
/* Menu (téléphone, tablette) : petite plaque au trait, trait plein quand le menu est ouvert */
.entete__menu { align-self: center; min-width: 2.75rem; }
.entete__menu[aria-expanded="true"]::before { border-image-source: var(--petite-trait-survol); }

@media (min-width: 40em) {
  .entete .entete__cta { display: inline-flex; }
}
/* « Réserver un créneau » (Cal.com, 10/11/2026). Largeurs mesurées sans débordement de la barre :
   « Réserver » seul sous 44em et entre 74em et 82,5em (menu complet), texte long ailleurs ; masqué sous 360 px (reste dans le menu) */
.entete .entete__rdv { align-self: center; }
.entete__rdv-long { display: none; }
@media (max-width: 22.49em) {
  .entete .entete__rdv { display: none; }
}
@media (max-width: 39.99em) {
  .entete__barre { gap: var(--e-3); }
  .entete .entete__rdv, .entete .entete__menu { padding-inline: 14px; }
  /* Menu ouvert : « Fermer » a besoin de la place, et le menu montre « Réserver votre créneau » */
  .entete[data-menu] .entete__rdv { display: none; }
}
@media (min-width: 40em) {
  .entete .entete__rdv { margin-left: calc(var(--e-3) - var(--e-5)); }
}
@media (min-width: 44em) and (max-width: 73.99em), (min-width: 82.5em) {
  .entete__rdv-court { display: none; }
  .entete__rdv-long { display: inline; }
}
@media (min-width: 74em) and (max-width: 82.49em) {
  .entete__barre { gap: var(--e-4); }
  .entete .entete__cta { margin-left: 0; }
  .entete .entete__rdv { margin-left: calc(var(--e-3) - var(--e-4)); }
}

/* Navigation bureau */
.nav { display: none; }

@media (min-width: 74em) {
  .entete__menu,
  .menu-mobile { display: none !important; }
  .entete__logo { margin-right: 0; }
  .nav {
    display: flex;
    align-items: stretch;
    margin-left: auto;
  }
  .entete__cta { margin-left: var(--e-4); }
}

.nav__liste { display: flex; align-items: stretch; }
.nav__item { display: flex; align-items: stretch; }
.nav__item--liste { position: relative; }
.nav__lien,
.nav__bouton {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding-inline: 0.9rem;
  font: 400 0.8125rem / 1 var(--f-texte);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--creme);
  text-decoration: none;
  white-space: nowrap;
}
.nav__lien::after,
.nav__bouton::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: calc(50% - 1.1rem);
  height: 1px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d) var(--ease-sortie);
}
.nav__bouton::after { right: 2.15rem; }
.nav__lien:hover::after,
.nav__bouton:hover::after,
.nav__bouton[aria-expanded="true"]::after { transform: scaleX(1); }
.nav__bouton .ti {
  font-size: 1rem;
  color: var(--or);
  transition: transform var(--d) var(--ease-sortie);
}
.nav__bouton[aria-expanded="true"] .ti { transform: rotate(180deg); }
.nav__lien:focus-visible,
.nav__bouton:focus-visible { outline-offset: -6px; }

/* Panneaux (méga-menu et liste) : cachés par visibility pour rester animables
   et hors de l’ordre de tabulation quand ils sont fermés. */
.panneau {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity var(--d-courte) var(--ease-sortie),
    transform var(--d-courte) var(--ease-sortie),
    visibility 0s linear var(--d-courte);
}
[data-ouvert="true"] > .panneau {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition:
    opacity var(--d) var(--ease-sortie),
    transform var(--d) var(--ease-sortie),
    visibility 0s;
}

.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border-top: 1px solid var(--lin);
  box-shadow: var(--ombre-panneau);
}
.mega__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.15fr);
  gap: var(--e-7);
  padding-block: var(--e-7) var(--e-6);
}
.mega__groupe {
  padding-bottom: var(--e-3);
  margin-bottom: var(--e-2);
  border-bottom: 1px solid var(--lin);
  font: 400 var(--t-xs) / 1.5 var(--f-texte);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
}
.mega__groupe ~ .mega__groupe { margin-top: var(--e-6); }
.mega__col a,
.liste-pro a {
  display: block;
  padding-block: 0.625rem;
  text-decoration: none;
}
.mega__lien {
  display: block;
  font: 500 1rem / 1.3 var(--f-texte);
  color: var(--petrole);
  transition: color var(--d-courte);
}
.mega__ligne {
  display: block;
  margin-top: 0.125rem;
  font-size: var(--t-s);
  line-height: 1.45;
  color: var(--taupe);
}
.mega__col a:hover .mega__lien,
.liste-pro a:hover { color: var(--or-texte); }

.mega__encart {
  display: grid;
  align-content: start;
  gap: var(--e-4);
  padding: var(--e-6);
  border-radius: var(--rayon);
  background:
    radial-gradient(90% 80% at 100% 0%, #205051, transparent 70%),
    var(--petrole);
}
.mega__encart-titre {
  font: 400 1.875rem / 1.1 var(--f-titre-2);
  color: var(--creme);
}
.mega__encart p:not(.mega__encart-titre) { color: var(--creme-doux); font-size: 0.9375rem; }
.mega__pied {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-7);
  padding-block: var(--e-3) var(--e-4);
  /* filet aligné sur la grille, pas sur les marges */
  background: linear-gradient(var(--lin), var(--lin)) top center / calc(100% - 2 * var(--marge)) 1px no-repeat;
}

.liste-pro {
  position: absolute;
  top: 100%;
  left: -0.5rem;
  min-width: 23rem;
  padding: var(--e-4) var(--e-6) var(--e-3);
  border-top: 1px solid var(--lin);
  box-shadow: var(--ombre-panneau);
}
.liste-pro li a {
  border-bottom: 1px solid var(--lin);
  font: 500 0.9375rem / 1.4 var(--f-texte);
  color: var(--petrole);
  transition: color var(--d-courte);
}
.liste-pro .lien-fleche { margin-top: var(--e-2); }

/* Menu mobile */
.menu-mobile {
  position: fixed;
  inset: var(--h-entete) 0 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--e-3) var(--marge) var(--e-8);
  background: var(--petrole-profond);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity var(--d) var(--ease-sortie),
    transform var(--d) var(--ease-sortie),
    visibility 0s linear var(--d);
}
.menu-mobile[data-ouvert="true"] {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity var(--d) var(--ease-sortie), transform var(--d) var(--ease-sortie), visibility 0s;
}
.mm__liste > li { border-bottom: 1px solid rgba(224, 189, 142, 0.16); }
.mm__accordeon,
.mm__lien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 4rem;
  font: 400 1.875rem / 1.1 var(--f-titre-2);
  color: var(--creme);
  text-align: left;
  text-decoration: none;
}
.mm__accordeon .ti {
  font-size: 1.375rem;
  color: var(--or);
  transition: transform var(--d) var(--ease-sortie);
}
.mm__accordeon[aria-expanded="true"] .ti { transform: rotate(45deg); }
.mm__panneau { padding-bottom: var(--e-5); }
.mm__groupe {
  margin-top: var(--e-4);
  margin-bottom: var(--e-1);
  font: 400 var(--t-xs) / 1.5 var(--f-texte);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--creme-doux);
}
.mm__panneau a:not(.lien-fleche) {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  font: 400 1.0625rem / 1.3 var(--f-texte);
  color: var(--creme);
  text-decoration: none;
}
.mm__panneau .lien-fleche { margin-top: var(--e-2); }
.menu-mobile .mm__cta { display: flex; width: 100%; margin-top: var(--e-6); }
.menu-mobile .mm__rdv { display: flex; width: 100%; margin-top: var(--e-3); }
.mm__whatsapp {
  display: flex;
  justify-content: center;
  margin-top: var(--e-3);
}
.mm__whatsapp .ti { font-size: 1.25rem; color: var(--or); }

html.menu-ouvert { overflow: hidden; }

/* --------------------------------------------------------------------------
   6. Haut de page : en-tête animé « Le coup de marteau » (intégré par Basile, v7)
      L’en-tête vient de hero-marteau/ (section .marteau, classes .marteau__…) : voir notes.md, « En-tête marteau ».
      Le haut de page « portrait » est abandonné (il reste dans theme-accueil/).
      Le C, son halo et le point servent encore à l’encadré Audit (7.6).
   -------------------------------------------------------------------------- */
@property --balaye {
  syntax: "<angle>";
  inherits: false;
  initial-value: 280deg;
}

/* En-tête animé « Le coup de marteau » (v7, Basile) : composant autonome, css/hero-marteau.css et js/hero-marteau.js
   (toutes ses classes commencent par .marteau, aucun conflit avec le thème). La page ne règle que deux choses :
   - la hauteur de sa barre du haut, posée par-dessus la scène (fixe, transparente en haut de page) : le script la lit
     pour garder le marteau levé sous la barre et de l’air entre la barre et les pictogrammes ;
   - les marges de la page, pour que la scène et les textes s’alignent sur la barre et les sections.
   Fond : pétrole continu de la barre transparente jusqu’à la fin de la rangée de textes (pétrole profond uni) ; v2 : puis le papier de « Qui nous sommes ».
   « main .marteau » : plus précis que les valeurs par défaut de hero-marteau.css (chargée après), à toutes les tailles. */
main .marteau {
  --m-entete: var(--h-entete);   /* 64 px, 76 px à partir de 1 184 px (le prototype : 68 et 88 px) */
  --m-marge: var(--marge);       /* 20 à 64 px */
}

/* Le C ouvert, son halo et le point de lumière (encadré Audit) */
.orbite {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  width: 0;
  height: 0;
}
.orbite__arc {
  position: absolute;
  left: calc(var(--R) * -1);
  top: calc(var(--R) * -1);
  width: calc(var(--R) * 2);
  height: calc(var(--R) * 2);
  /* Ouverture de 80° à droite, comme le C du logo */
  -webkit-mask-image: conic-gradient(from 130deg, #000 0deg var(--balaye), transparent var(--balaye) 360deg);
  mask-image: conic-gradient(from 130deg, #000 0deg var(--balaye), transparent var(--balaye) 360deg);
}
.orbite__arc span {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid transparent;
  border-radius: 50%;
  background: conic-gradient(from 200deg, #8E6C47, #F2D9AC 20%, #B8915E 40%, #E9CB98 62%, #8E6C47 84%, #CDA675) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
  opacity: 0.85;
}
.orbite__point {
  position: absolute;
  left: var(--R);
  top: 0;
  width: var(--point);
  height: var(--point);
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFF3DD, var(--or) 58%, #B8915E);
  box-shadow: 0 0 10px 2px rgba(242, 217, 172, 0.6), 0 0 34px 8px rgba(224, 189, 142, 0.24);
}
/* Un éclat de bijou autour du point, pas une brume */
.orbite__halo {
  position: absolute;
  left: var(--R);
  top: 0;
  width: calc(var(--R) * 0.7);
  height: calc(var(--R) * 0.7);
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 236, 205, 0.35), rgba(224, 189, 142, 0.1) 35%, transparent 70%);
}


/* v4 (Basile, 14/10/2026) : parties 6 bis et 7 (sections de l’accueil v2 et v3) retirées.
   La page sous l’en-tête animé est dans css/accueil-v4.css. Parties 1 à 6, 8 et 9 inchangées. */

/* --------------------------------------------------------------------------
   8. Pied de page (v2 : liens 17 px, ligne du bas 16 px ; le téléphone sous l’e-mail ; aucune icône sans lien)
   -------------------------------------------------------------------------- */
.pied {
  padding-top: clamp(var(--e-7), 5vw, 4.5rem);           /* v3 : 48 → 72 (v2 : 64 → 96) */
  border-top: 1px solid rgba(224, 189, 142, 0.18);
  font-size: 1.0625rem;
}
.pied__grille { display: grid; gap: var(--e-7); }
.pied__marque { display: grid; gap: var(--e-3); align-content: start; }
.pied__marque img { width: 170px; height: 40px; margin-bottom: var(--e-2); }
.pied__slogan { font: italic 500 1.5rem / 1.3 var(--f-titre); color: var(--or); }
.pied__descripteur { color: var(--creme-doux); max-width: 20rem; }
.pied__contact { display: grid; justify-items: start; margin-top: var(--e-2); }
.pied__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--creme);
  text-underline-offset: 0.3em;
  text-decoration-color: rgba(224, 189, 142, 0.6);
  transition: color var(--d-courte);
}
.pied__contact a:hover { color: var(--or); }
.pied__a-relier { margin-top: var(--e-2); font-size: 1rem; color: var(--creme-doux); }
.pied__nav { display: grid; gap: var(--e-6); }
.pied__titre {
  margin-bottom: var(--e-3);
  font: 500 1rem / 1.5 var(--f-texte);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--creme-doux);
}
.pied__nav a {
  display: inline-block;
  padding-block: 0.3rem;
  color: var(--creme);
  text-decoration: none;
  transition: color var(--d-courte);
}
.pied__nav a:hover { color: var(--or); text-decoration: underline; text-underline-offset: 0.3em; }
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-3) var(--e-6);
  margin-top: var(--e-7);
  padding-block: var(--e-5) var(--e-6);
  border-top: 1px solid rgba(224, 189, 142, 0.16);
  font-size: 1rem;
  color: var(--creme-doux);
}
.pied__legal { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-5); }
.pied__legal a {
  display: inline-block;
  padding-block: 0.25rem;
  color: var(--creme-doux);
  text-decoration: none;
}
.pied__legal a:hover { color: var(--creme); text-decoration: underline; text-underline-offset: 0.3em; }
/* 25/10/2026 : à partir de 64em, le rond WhatsApp fixe (4rem, à 1,75rem du bord) cachait à moitié « Cookies » */
@media (min-width: 64em) { .pied__bas { padding-right: 6.5rem; } }

@media (min-width: 40em) {
  .pied__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .pied__grille { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gouttiere); }
  .pied__nav { grid-template-columns: 1.25fr 1.35fr 0.8fr; }
}

/* --------------------------------------------------------------------------
   9. Apparition au défilement (douce, désactivée si moins d’animations)
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  transition: opacity 1s var(--ease-sortie), translate 1s var(--ease-sortie);
}
.js [data-reveal]:not(.est-visible) {
  opacity: 0;
  translate: 0 18px;
}


/* --------------------------------------------------------------------------
   10. Moins d’animations : état final immédiat (barre du haut, menus, apparitions).
       Les animations de la page v4 ont leurs propres règles dans css/accueil-v4.css.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal]:not(.est-visible) { opacity: 1; translate: none; }
  .js [data-reveal] { transition: none; }
  .panneau,
  .menu-mobile { transform: none !important; }
  .faq__plus,
  .faq__item::details-content,
  .lien-evitement,
  .entete__logo img { transition: none; }
}

/* Contraste élevé (Windows) : les filets dessinés passent aux couleurs du système */
@media (forced-colors: active) {
  .faq__plus::before,
  .faq__plus::after { background: CanvasText; }
}

/* Icônes en SVG dans la page (remplacent la police Tabler chargée depuis jsDelivr) */
.ti {
  display: inline-block; width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.125em;
  fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Contact toujours à portée (16/10/2026, demande de Raoudha) ----------
   Téléphone : barre fixe en bas (Appeler · WhatsApp), visible après le premier écran, cachée pendant la saisie.
   Ordinateur : bouton WhatsApp rond en bas à droite, pulsation douce toutes les quelques secondes. */
.action-fixe__barre {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--creme);
  box-shadow: 0 -0.75rem 2rem rgba(2, 24, 24, 0.35);
  transform: translateY(110%); transition: transform var(--d) var(--ease-sortie);
}
.action-fixe[data-visible] .action-fixe__barre { transform: none; }
.action-fixe[data-saisie] .action-fixe__barre { transform: translateY(110%); }
.action-fixe__bouton {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 3.5rem;
  background: linear-gradient(180deg, var(--or-clair), var(--or)); color: var(--petrole-profond); text-decoration: none;
  font: 500 1rem / 1 var(--f-texte); letter-spacing: 0.08em; text-transform: uppercase;
}
.action-fixe__bouton svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: var(--petrole-profond); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.action-fixe__bouton:active { background: var(--or-400); }
.action-fixe__bouton:focus-visible { outline: 2px solid var(--petrole-profond); outline-offset: -4px; }

.action-fixe__rond { display: none; }

@media (max-width: 63.99em) {
  body { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); }
}
@media (min-width: 64em) {
  .action-fixe__barre { display: none; }
  .action-fixe__rond {
    position: fixed; right: 1.75rem; bottom: 1.75rem; z-index: 90;
    display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--petrole-600), var(--petrole-profond));
    border: 1px solid var(--or); color: var(--or); text-decoration: none;
    box-shadow: 0 1rem 2rem -0.5rem rgba(2, 24, 24, 0.55);
    transition: transform var(--d) var(--ease-sortie), box-shadow var(--d) var(--ease-sortie);
  }
  .action-fixe__rond svg { width: 1.9rem; height: 1.9rem; stroke-width: 1.3; }
  .action-fixe__rond::after {
    content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--or);
    animation: action-pouls 4.5s var(--ease-sortie) infinite; pointer-events: none;
  }
  .action-fixe__rond:hover { transform: translateY(-2px); box-shadow: 0 1.25rem 2.5rem -0.5rem rgba(2, 24, 24, 0.65); }
  .action-fixe__rond:focus-visible { outline: 2px solid var(--or); outline-offset: 4px; }
  .action-fixe__bulle {
    position: absolute; right: calc(100% + 0.75rem); top: 50%; transform: translateY(-50%) translateX(6px);
    padding: 0.45rem 0.85rem; white-space: nowrap; background: var(--petrole-profond); color: var(--creme);
    border: 1px solid rgba(224, 189, 142, 0.4); font: 400 0.9375rem / 1.2 var(--f-texte);
    opacity: 0; pointer-events: none; transition: opacity var(--d), transform var(--d) var(--ease-sortie);
  }
  .action-fixe__rond:hover .action-fixe__bulle, .action-fixe__rond:focus-visible .action-fixe__bulle { opacity: 1; transform: translateY(-50%); }
}
@keyframes action-pouls {
  0%, 70% { transform: scale(1); opacity: 0; }
  75% { opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .action-fixe__rond::after { animation: none; }
  .action-fixe__barre { transition: none; }
}