/* ==========================================================================
   main.css — Étude notariale Maître Eric Druelle
   Mobile-first. Points de rupture : 640px, 960px, 1200px.

   Parti pris : fond clair dominant, bleu nuit en blocs d'accentuation,
   filets plutôt que cartes, typographie serif de grand corps. Aucun style
   en ligne (la CSP interdit 'unsafe-inline' pour style-src).

   Sommaire
     01. Base et typographie
     02. Utilitaires et accessibilité
     03. Mise en page
     04. Boutons et liens d'action
     05. Bandeau utilitaire, en-tête, navigation
     06. Hero
     07. Domaines d'intervention (liste éditoriale)
     08. Blocs de repères
     09. Duo portrait / texte
     10. Bandeau d'informations pratiques
     11. Pages intérieures
     12. Formulaire de contact
     13. Carte Google Maps
     14. Pied de page
     15. Bouton WhatsApp flottant
     16. Page 404
     17. Animations au défilement
     18. Impression
   ========================================================================== */

/* ==========================================================================
   01. Base et typographie
   ========================================================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-header) + var(--e-sm));
}

body {
  margin: 0;
  background-color: var(--c-fond);
  color: var(--c-encre);
  font-family: var(--f-texte);
  font-size: var(--t-base);
  line-height: var(--lh-texte);
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: var(--f-titre);
  font-weight: var(--fw-semi);
  line-height: var(--lh-titre);
  letter-spacing: var(--ls-titre);
  color: var(--c-titre);
}

h1 {
  font-size: var(--t-2xl);
  line-height: var(--lh-serre);
}

h2 {
  font-size: var(--t-xl);
}

h3 {
  font-size: var(--t-lg);
  letter-spacing: -0.006em;
}

h4 {
  font-size: var(--t-md);
  letter-spacing: 0;
}

p + p {
  margin-top: var(--e-sm);
}

strong {
  font-weight: var(--fw-semi);
  color: var(--c-titre);
}

img {
  height: auto;
}

/* Surtitre : capitales espacées, signature institutionnelle */
.surtitre {
  display: block;
  margin-bottom: var(--e-sm);
  font-family: var(--f-texte);
  font-size: var(--t-2xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-sur);
  text-transform: uppercase;
  color: var(--c-accent-texte);
}

.sur-sombre .surtitre,
.section--sombre .surtitre {
  color: var(--c-or);
}

/* Paragraphe d'accroche, en serif : contraste de texture avec le corps */
.chapeau {
  max-width: 34em;
  font-family: var(--f-titre);
  font-size: var(--t-md);
  font-weight: var(--fw-normal);
  line-height: 1.5;
  color: var(--c-encre-doux);
}

.sur-sombre .chapeau,
.section--sombre .chapeau {
  color: var(--c-encre-inverse-doux);
}

.texte-mesure {
  max-width: var(--l-texte);
}

/* ==========================================================================
   02. Utilitaires et accessibilité
   ========================================================================== */

.visuellement-masque {
  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: absolute;
  top: 0;
  left: var(--e-sm);
  z-index: calc(var(--z-header) + 10);
  padding: var(--e-xs) var(--e-md);
  background-color: var(--c-bleu-nuit);
  color: var(--c-blanc);
  font-size: var(--t-sm);
  font-weight: var(--fw-semi);
  text-decoration: none;
  transform: translateY(-110%);
  transition: transform var(--tr-rapide);
}

.lien-evitement:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: 2px solid var(--c-or-texte);
  outline-offset: 3px;
}

.sur-sombre :focus-visible,
.section--sombre :focus-visible,
.bandeau-util :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--c-or);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ==========================================================================
   03. Mise en page
   ========================================================================== */

.conteneur {
  width: 100%;
  max-width: var(--l-contenu);
  margin-inline: auto;
  padding-inline: var(--l-gouttiere);
}

.conteneur--etroit {
  max-width: 54rem;
}

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

.section--alt {
  background-color: var(--c-fond-alt);
}

.section--sombre {
  background-color: var(--c-fond-sombre);
  color: var(--c-encre-inverse);
}

.section--sombre h2,
.section--sombre h3,
.section--sombre h4 {
  color: var(--c-blanc);
}

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

/* En-tête de section : surtitre, titre, filet, chapeau */
.section__entete {
  max-width: 44rem;
  margin-bottom: var(--e-xl);
}

.section__entete .chapeau {
  margin-top: var(--e-md);
}

/* Filet horizontal pleine largeur */
.filet {
  height: 1px;
  border: 0;
  margin: 0;
  background-color: var(--c-filet);
}

/* Filet doré court, sous les titres */
.filet--court {
  width: 56px;
  height: 2px;
  border: 0;
  margin: var(--e-md) 0 0;
  background-color: var(--c-accent);
}

.sur-sombre .filet--court,
.section--sombre .filet--court {
  background-color: var(--c-or);
}

/* ==========================================================================
   04. Boutons et liens d'action
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2xs);
  min-height: var(--cible-tactile);
  padding: var(--e-xs) var(--e-lg);
  font-family: var(--f-texte);
  font-size: var(--t-sm);
  font-weight: var(--fw-semi);
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: background-color var(--tr-base), border-color var(--tr-base),
    color var(--tr-base);
}

/* Bouton principal : bleu nuit plein */
.btn--principal {
  background-color: var(--c-bleu-nuit);
  color: var(--c-blanc);
  border-color: var(--c-bleu-nuit);
}

.btn--principal:hover {
  background-color: var(--c-bleu-nuit-clair);
  border-color: var(--c-bleu-nuit-clair);
}

/* Bouton or : texte bleu nuit sur or, 4.62:1 */
.btn--or {
  background-color: var(--c-or);
  color: var(--c-bleu-nuit-fonce);
  border-color: var(--c-or);
}

.btn--or:hover {
  background-color: var(--c-or-clair);
  border-color: var(--c-or-clair);
}

/* Contour sur fond clair */
.btn--contour {
  background-color: transparent;
  color: var(--c-bleu-nuit);
  border-color: var(--c-filet-fort);
}

.btn--contour:hover {
  border-color: var(--c-bleu-nuit);
  background-color: var(--c-bleu-nuit);
  color: var(--c-blanc);
}

/* Contour sur fond sombre */
.btn--fantome {
  background-color: transparent;
  color: var(--c-blanc);
  border-color: rgba(255, 255, 255, 0.4);
}

.btn--fantome:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--c-blanc);
}

.btn--whatsapp {
  background-color: var(--c-whatsapp);
  color: var(--c-blanc);
  border-color: var(--c-whatsapp);
}

.btn--whatsapp:hover {
  background-color: var(--c-whatsapp-survol);
  border-color: var(--c-whatsapp-survol);
}

.btn--large {
  width: 100%;
  min-height: 54px;
  font-size: var(--t-base);
}

.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn__icone {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* Bouton d'envoi du formulaire : l'icône suit le canal sélectionné.
   Les deux glyphes sont dans le DOM, un seul est affiché. */
#bouton-envoi .icone-courriel {
  display: none;
}

#bouton-envoi.est-courriel .icone-whatsapp {
  display: none;
}

#bouton-envoi.est-courriel .icone-courriel {
  display: block;
}

.groupe-btn {
  display: flex;
  flex-direction: column;
  gap: var(--e-xs);
}

@media (min-width: 640px) {
  .groupe-btn {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .btn--large {
    width: auto;
  }
}

/* Lien fléché : souligné fin qui s'affirme au survol */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2xs);
  min-height: var(--cible-tactile);
  font-size: var(--t-sm);
  font-weight: var(--fw-semi);
  letter-spacing: 0.03em;
  color: var(--c-accent-texte);
  text-decoration: none;
  border-bottom: 1px solid var(--c-filet-or);
  align-self: flex-start;
  transition: border-color var(--tr-base), gap var(--tr-base);
}

.lien-fleche::after {
  content: "\2192";
  transition: transform var(--tr-base);
}

.lien-fleche:hover {
  border-bottom-color: var(--c-or-texte);
}

.lien-fleche:hover::after {
  transform: translateX(4px);
}

.sur-sombre .lien-fleche,
.section--sombre .lien-fleche {
  color: var(--c-or);
  border-bottom-color: rgba(176, 141, 87, 0.5);
}

/* ==========================================================================
   05. Bandeau utilitaire, en-tête, navigation
   ========================================================================== */

/* Bandeau haut : horaires + rappel WhatsApp. Défile avec la page. */
.bandeau-util {
  background-color: var(--c-bleu-nuit-fonce);
  color: var(--c-encre-inverse-doux);
  font-size: var(--t-2xs);
  letter-spacing: 0.04em;
}

.bandeau-util__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-md);
  min-height: var(--h-bandeau);
  text-align: center;
}

.bandeau-util__item {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3xs);
}

/* Le premier item (horaires) disparaît sous 640px, faute de place */
.bandeau-util__item--secondaire {
  display: none;
}

.bandeau-util strong {
  color: var(--c-or);
  font-weight: var(--fw-semi);
}

.bandeau-util a {
  color: var(--c-encre-inverse-doux);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.bandeau-util a:hover {
  color: var(--c-or);
  border-bottom-color: var(--c-or);
}

.bandeau-util__sep {
  margin-inline: var(--e-2xs);
  color: rgba(255, 255, 255, 0.35);
}

@media (min-width: 640px) {
  .bandeau-util__inner {
    justify-content: space-between;
    text-align: left;
  }

  .bandeau-util__item--secondaire {
    display: inline-flex;
  }
}

/* --- En-tête principal : clair, sticky --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--c-blanc);
  border-bottom: 1px solid var(--c-filet);
  transition: box-shadow var(--tr-base);
}

.site-header.est-compact {
  box-shadow: 0 1px 14px rgba(27, 42, 65, 0.09);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-sm);
  min-height: var(--h-header);
  transition: min-height var(--tr-base);
}

.site-header.est-compact .site-header__inner {
  min-height: var(--h-header-compact);
}

/* --- Logo --- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-xs);
  text-decoration: none;
  color: var(--c-bleu-nuit);
}

.logo__marque {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  background-color: var(--c-bleu-nuit);
  border: 1px solid var(--c-or);
  font-family: var(--f-titre);
  font-size: 1rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  color: var(--c-or);
  transition: width var(--tr-base), height var(--tr-base);
}

.site-header.est-compact .logo__marque {
  width: 34px;
  height: 34px;
  font-size: 0.86rem;
}

.logo__texte {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.logo__nom {
  font-family: var(--f-titre);
  font-size: 1.22rem;
  font-weight: var(--fw-semi);
  letter-spacing: 0.005em;
  color: var(--c-bleu-nuit);
}

.logo__qualite {
  font-size: 0.62rem;
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-sur);
  text-transform: uppercase;
  color: var(--c-accent-texte);
}

/* --- Burger --- */
.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cible-tactile);
  height: var(--cible-tactile);
  flex: 0 0 auto;
  background-color: transparent;
  border: 1px solid var(--c-filet-fort);
  border-radius: var(--r-xs);
  color: var(--c-bleu-nuit);
}

.burger:hover {
  border-color: var(--c-bleu-nuit);
}

.burger__barres {
  position: relative;
  display: block;
  width: 19px;
  height: 1.5px;
  background-color: currentColor;
  transition: background-color var(--tr-rapide);
}

.burger__barres::before,
.burger__barres::after {
  content: "";
  position: absolute;
  left: 0;
  width: 19px;
  height: 1.5px;
  background-color: currentColor;
  transition: transform var(--tr-base), top var(--tr-base);
}

.burger__barres::before {
  top: -6px;
}

.burger__barres::after {
  top: 6px;
}

.burger[aria-expanded="true"] .burger__barres {
  background-color: transparent;
}

.burger[aria-expanded="true"] .burger__barres::before {
  top: 0;
  transform: rotate(45deg);
}

.burger[aria-expanded="true"] .burger__barres::after {
  top: 0;
  transform: rotate(-45deg);
}

/* --- Navigation ---
   Le panneau est positionné en ABSOLU par rapport à l'en-tête, et non en
   fixed par rapport au viewport : il se cale ainsi sous l'en-tête quelle
   que soit la position de celle-ci — bandeau utilitaire visible en haut
   de page, en-tête collée en haut après défilement, ou en-tête compactée.
   Une valeur fixe (top: var(--h-header)) ignorait le bandeau, et le
   panneau recouvrait le logo et le bouton burger. */
.nav-principale {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--h-header));
  overflow-y: auto;
  background-color: var(--c-blanc);
  border-bottom: 1px solid var(--c-filet);
  box-shadow: var(--o-lg);
  display: none;
}

.nav-principale.est-ouvert {
  display: block;
}

.nav-principale__liste {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: var(--e-2xs) var(--l-gouttiere) var(--e-lg);
}

.nav-principale__lien {
  display: flex;
  align-items: center;
  min-height: var(--cible-tactile);
  padding: var(--e-xs) 0;
  font-family: var(--f-titre);
  font-size: 1.2rem;
  font-weight: var(--fw-medium);
  color: var(--c-bleu-nuit);
  text-decoration: none;
  border-bottom: 1px solid var(--c-filet);
}

.nav-principale__lien:hover {
  color: var(--c-accent-texte);
}

.nav-principale__lien[aria-current="page"] {
  color: var(--c-accent-texte);
  font-weight: var(--fw-semi);
}

.nav-principale__cta {
  margin-top: var(--e-md);
}

/* Voile : volontairement SOUS l'en-tête (cf. note d'empilement dans
   variables.css). Au-dessus, il recouvrirait le menu — enfant de
   l'en-tête, donc prisonnier de son contexte d'empilement — et
   intercepterait les clics sur les liens de navigation. */
.voile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-voile);
  background-color: rgba(18, 29, 46, 0.42);
  border: 0;
  display: none;
}

.voile-menu.est-ouvert {
  display: block;
}

body.menu-ouvert {
  overflow: hidden;
}

@media (min-width: 960px) {
  .burger,
  .voile-menu {
    display: none !important;
  }

  .nav-principale {
    position: static;
    display: block;
    max-height: none;
    overflow: visible;
    background-color: transparent;
    border: 0;
    box-shadow: none;
  }

  .nav-principale__liste {
    flex-direction: row;
    align-items: center;
    gap: var(--e-lg);
    padding: 0;
  }

  .nav-principale__lien {
    min-height: auto;
    padding: var(--e-3xs) 0;
    font-family: var(--f-texte);
    font-size: var(--t-xs);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-nav);
    text-transform: uppercase;
    border-bottom: 0;
    position: relative;
  }

  /* Soulignement doré animé */
  .nav-principale__lien::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -6px;
    height: 1px;
    background-color: var(--c-or);
    transition: right var(--tr-base);
  }

  .nav-principale__lien:hover::after,
  .nav-principale__lien[aria-current="page"]::after {
    right: 0;
  }

  .nav-principale__cta {
    margin-top: 0;
    margin-left: var(--e-2xs);
  }

  body.menu-ouvert {
    overflow: auto;
  }
}

/* ==========================================================================
   06. Hero
   ========================================================================== */

.hero {
  position: relative;
  background-color: var(--c-fond-alt);
  border-bottom: 1px solid var(--c-filet);
  padding-block: var(--e-xl) 0;
  overflow: hidden;
}

.hero__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-xl);
  align-items: end;
}

.hero__texte {
  padding-bottom: var(--e-xl);
}

.hero h1 {
  margin-top: var(--e-2xs);
  font-size: var(--t-3xl);
  font-weight: var(--fw-light);
}

/* Le nom en deux temps : prénom léger, patronyme affirmé */
.hero__nom-fort {
  display: block;
  font-weight: var(--fw-semi);
}

.hero__accroche {
  max-width: 32em;
  margin-top: var(--e-lg);
  font-size: var(--t-md);
  color: var(--c-encre-doux);
}

.hero .groupe-btn {
  margin-top: var(--e-xl);
}

/* Mentions sous les boutons */
.hero__mention {
  margin-top: var(--e-md);
  font-size: var(--t-xs);
  color: var(--c-encre-doux);
}

/* Portrait : cadre doré décalé, l'image mord sur le bas de la section */
.hero__portrait {
  position: relative;
  margin: 0;
  justify-self: center;
  width: min(100%, 24rem);
}

.hero__portrait::before {
  content: "";
  position: absolute;
  inset: var(--e-sm) calc(var(--e-sm) * -1) calc(var(--e-sm) * -1)
    var(--e-sm);
  border: 1px solid var(--c-or);
  pointer-events: none;
}

.hero__portrait img {
  position: relative;
  width: 100%;
  display: block;
  filter: contrast(1.02) saturate(0.97);
}

@media (min-width: 960px) {
  .hero {
    padding-block: var(--e-2xl) 0;
  }

  .hero__grille {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--e-2xl);
  }

  .hero__texte {
    padding-bottom: var(--e-2xl);
  }

  .hero__portrait {
    width: 100%;
    max-width: 26rem;
    justify-self: end;
  }
}

/* ==========================================================================
   07. Domaines d'intervention (liste éditoriale)
   ========================================================================== */

.domaines {
  display: grid;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-filet);
}

@media (min-width: 768px) {
  .domaines {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--e-2xl);
  }
}

.domaine-item {
  border-bottom: 1px solid var(--c-filet);
}

.domaine-lien {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--e-md);
  padding-block: var(--e-lg);
  text-decoration: none;
  color: inherit;
  transition: padding-inline var(--tr-base);
}

.domaine-num {
  font-family: var(--f-titre);
  font-size: var(--t-md);
  font-weight: var(--fw-semi);
  line-height: 1.3;
  color: var(--c-accent-texte);
  font-variant-numeric: tabular-nums;
}

.domaine-corps {
  min-width: 0; /* autorise la troncature du texte dans la grille */
}

/* <h3> : réinitialisé pour ne pas hériter des marges de titre */
.domaine-titre {
  display: block;
  margin: 0;
  font-family: var(--f-titre);
  font-size: var(--t-lg);
  font-weight: var(--fw-semi);
  line-height: 1.2;
  letter-spacing: -0.006em;
  color: var(--c-titre);
  /* Soulignement doré révélé au survol */
  background-image: linear-gradient(var(--c-or), var(--c-or));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--tr-lente);
}

.domaine-desc {
  display: block;
  margin-top: var(--e-2xs);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--c-encre-doux);
}

.domaine-fleche {
  font-size: var(--t-md);
  line-height: 1.2;
  color: var(--c-filet-fort);
  transition: transform var(--tr-base), color var(--tr-base);
}

.domaine-lien:hover .domaine-titre {
  background-size: 100% 1px;
}

.domaine-lien:hover .domaine-fleche {
  color: var(--c-accent-texte);
  transform: translateX(4px);
}

/* ==========================================================================
   08. Blocs de repères
   ========================================================================== */

/* Chapô serif de grand corps, au-dessus de la grille */
.lead-serif {
  max-width: 30em;
  font-family: var(--f-titre);
  font-size: var(--t-lg);
  font-weight: var(--fw-light);
  line-height: 1.38;
  color: var(--c-blanc);
}

.reperes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-lg);
  list-style: none;
  margin: var(--e-xl) 0 0;
  padding: 0;
}

@media (min-width: 640px) {
  .reperes {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--e-xl);
  }
}

@media (min-width: 1200px) {
  .reperes {
    grid-template-columns: repeat(4, 1fr);
  }
}

.repere {
  padding-top: var(--e-md);
  border-top: 1px solid var(--c-filet-sombre);
}

.repere__num {
  display: block;
  margin-bottom: var(--e-xs);
  font-family: var(--f-titre);
  font-size: var(--t-md);
  font-weight: var(--fw-semi);
  color: var(--c-or);
  font-variant-numeric: tabular-nums;
}

.repere h3 {
  font-size: var(--t-md);
  margin-bottom: var(--e-2xs);
}

.repere p {
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--c-encre-inverse-doux);
}

/* Variante sur fond clair */
.section--alt .repere,
.section .repere {
  border-top-color: var(--c-filet);
}

.section--alt .repere__num,
.section .repere__num {
  color: var(--c-accent-texte);
}

.section--alt .repere p,
.section .repere p {
  color: var(--c-encre-doux);
}

.section--sombre .repere {
  border-top-color: var(--c-filet-sombre);
}

.section--sombre .repere__num {
  color: var(--c-or);
}

.section--sombre .repere p {
  color: var(--c-encre-inverse-doux);
}

/* ==========================================================================
   09. Duo portrait / texte
   ========================================================================== */

.duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-xl);
  align-items: center;
}

@media (min-width: 960px) {
  .duo {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--e-2xl);
  }

  .duo--texte-dabord {
    grid-template-columns: 1.15fr 0.85fr;
  }

  .duo--texte-dabord .duo__media {
    order: 2;
  }
}

.duo__media {
  position: relative;
  margin: 0;
  width: min(100%, 26rem);
  justify-self: center;
}

.duo__media::before {
  content: "";
  position: absolute;
  inset: calc(var(--e-sm) * -1) var(--e-sm) var(--e-sm)
    calc(var(--e-sm) * -1);
  border: 1px solid var(--c-or);
  pointer-events: none;
}

.duo__media img {
  position: relative;
  width: 100%;
  display: block;
}

@media (min-width: 960px) {
  .duo__media {
    width: 100%;
  }
}

/* Signature manuscrite-like : le nom en serif, précédé d'un filet */
.signature {
  display: flex;
  align-items: center;
  gap: var(--e-sm);
  margin-top: var(--e-lg);
  font-family: var(--f-titre);
  font-size: var(--t-md);
  color: var(--c-titre);
}

.signature::before {
  content: "";
  width: 36px;
  height: 1px;
  flex: 0 0 auto;
  background-color: var(--c-or);
}

.signature span {
  font-size: var(--t-xs);
  font-family: var(--f-texte);
  letter-spacing: var(--ls-sur);
  text-transform: uppercase;
  color: var(--c-accent-texte);
}

/* ==========================================================================
   10. Bandeau d'informations pratiques
   ========================================================================== */

.pratique {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-lg);
}

@media (min-width: 768px) {
  .pratique {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }

  /* Filets verticaux de séparation, façon colonnes imprimées */
  .pratique > * + * {
    border-left: 1px solid var(--c-filet-sombre);
    padding-left: var(--e-xl);
  }

  .pratique > * {
    padding-right: var(--e-xl);
  }
}

.info-bloc h3 {
  font-family: var(--f-texte);
  font-size: var(--t-2xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-sur);
  text-transform: uppercase;
  color: var(--c-or);
  margin-bottom: var(--e-sm);
}

.info-bloc p,
.info-bloc address {
  font-size: var(--t-sm);
  font-style: normal;
  line-height: 1.7;
  color: var(--c-encre-inverse-doux);
}

/* Numéro affiché en texte simple : jamais de lien tel: */
.info-bloc__numero {
  font-family: var(--f-titre);
  font-size: var(--t-lg);
  font-weight: var(--fw-semi);
  color: var(--c-blanc);
  letter-spacing: 0.01em;
}

/* Adresse de courriel : même rang typographique que le numéro, mais en
   corps plus petit car la chaîne est longue. */
.info-bloc__courriel {
  font-family: var(--f-titre);
  font-size: var(--t-md);
  font-weight: var(--fw-semi);
  word-break: break-word;
}

.info-bloc a {
  color: var(--c-blanc);
  text-decoration: none;
  border-bottom: 1px solid var(--c-filet-or);
}

.info-bloc a:hover {
  color: var(--c-or);
  border-bottom-color: var(--c-or);
}

.pratique--clair .info-bloc a {
  color: var(--c-titre);
}

.pratique--clair .info-bloc a:hover {
  color: var(--c-accent-texte);
}

.info-bloc .btn {
  margin-top: var(--e-md);
}

.info-bloc .groupe-btn {
  margin-top: var(--e-md);
}

.info-bloc .groupe-btn .btn {
  margin-top: 0;
}

/* Variante claire (page contact) */
.pratique--clair .info-bloc h3 {
  color: var(--c-accent-texte);
}

.pratique--clair .info-bloc p,
.pratique--clair .info-bloc address {
  color: var(--c-encre-doux);
}

.pratique--clair .info-bloc__numero {
  color: var(--c-titre);
}

@media (min-width: 768px) {
  .pratique--clair > * + * {
    border-left-color: var(--c-filet);
  }
}

/* ==========================================================================
   11. Pages intérieures
   ========================================================================== */

.entete-page {
  background-color: var(--c-fond-alt);
  border-bottom: 1px solid var(--c-filet);
  padding-block: var(--e-xl);
}

.entete-page h1 {
  max-width: 18em;
}

.entete-page .chapeau {
  margin-top: var(--e-md);
}

@media (min-width: 960px) {
  .entete-page {
    padding-block: var(--e-2xl);
  }
}

/* Fil d'Ariane */
.fil-ariane {
  margin-bottom: var(--e-md);
  font-size: var(--t-2xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-encre-doux);
}

.fil-ariane ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.fil-ariane li + li::before {
  content: "/";
  margin-right: var(--e-2xs);
  color: var(--c-or);
}

.fil-ariane a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.fil-ariane a:hover {
  border-bottom-color: var(--c-or);
}

/* --- Sommaire d'ancres --- */
.sommaire {
  padding: var(--e-lg);
  background-color: var(--c-fond-alt);
  border-left: 2px solid var(--c-or);
  margin-bottom: var(--e-2xl);
}

.sommaire h2 {
  font-family: var(--f-texte);
  font-size: var(--t-2xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-sur);
  text-transform: uppercase;
  color: var(--c-accent-texte);
  margin-bottom: var(--e-md);
}

.sommaire ol {
  display: grid;
  gap: var(--e-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: som;
}

@media (min-width: 768px) {
  .sommaire ol {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--e-xl);
  }
}

.sommaire li {
  counter-increment: som;
}

.sommaire a {
  display: inline-flex;
  gap: var(--e-2xs);
  min-height: 32px;
  align-items: center;
  font-size: var(--t-sm);
  color: var(--c-titre);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.sommaire a::before {
  content: counter(som, decimal-leading-zero);
  font-family: var(--f-titre);
  font-weight: var(--fw-semi);
  color: var(--c-accent-texte);
}

.sommaire a:hover {
  border-bottom-color: var(--c-or);
}

/* --- Section de domaine --- */
.domaine {
  padding-block: var(--e-2xl);
  border-top: 1px solid var(--c-filet);
}

.domaine:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.domaine__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-md);
}

@media (min-width: 960px) {
  .domaine__grille {
    grid-template-columns: 18rem 1fr;
    gap: var(--e-2xl);
  }
}

.domaine__entete {
  display: flex;
  align-items: flex-start;
  gap: var(--e-sm);
}

.domaine__icone {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
}

.domaine__entete h2 {
  font-size: var(--t-lg);
}

.domaine__corps p {
  max-width: 42em;
}

.liste-puces {
  margin: var(--e-lg) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--e-2xs);
}

@media (min-width: 640px) {
  .liste-puces {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--e-lg);
  }
}

.liste-puces > li {
  position: relative;
  padding-left: var(--e-md);
  padding-block: var(--e-3xs);
  font-size: var(--t-sm);
  border-bottom: 1px solid var(--c-filet);
}

.liste-puces > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 6px;
  height: 1px;
  background-color: var(--c-or);
}

.domaine__renvoi {
  margin-top: var(--e-md);
}

/* --- Parcours en quatre étapes --- */
.etapes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .etapes {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--e-xl);
  }
}

@media (min-width: 1200px) {
  .etapes {
    grid-template-columns: repeat(4, 1fr);
  }
}

.etape {
  padding-top: var(--e-md);
  border-top: 2px solid var(--c-or);
}

.etape__num {
  display: block;
  margin-bottom: var(--e-2xs);
  font-family: var(--f-titre);
  font-size: var(--t-md);
  font-weight: var(--fw-semi);
  font-variant-numeric: tabular-nums;
  color: var(--c-accent-texte);
}

.etape__titre {
  margin-bottom: var(--e-2xs);
  font-size: var(--t-md);
}

.etape p {
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--c-encre-doux);
}

/* --- FAQ : filets seuls, aucune boîte --- */

/* Thème : un intertitre, puis le bloc de questions */
.faq-theme + .faq-theme {
  margin-top: var(--e-2xl);
}

.faq-theme__titre {
  max-width: 52rem;
  margin-bottom: var(--e-md);
  padding-bottom: var(--e-2xs);
  font-size: var(--t-lg);
  border-bottom: 2px solid var(--c-or);
}

.faq {
  max-width: 52rem;
  border-top: 1px solid var(--c-filet);
}

/* Le <h3> porté par le <summary> ne doit pas réintroduire de marges ni
   de style propre : le résumé reste la ligne cliquable. */
.faq__question h3 {
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

.faq__item {
  border-bottom: 1px solid var(--c-filet);
}

.faq__question {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-md);
  min-height: var(--cible-tactile);
  padding-block: var(--e-md);
  font-family: var(--f-titre);
  font-size: var(--t-md);
  font-weight: var(--fw-semi);
  color: var(--c-titre);
  cursor: pointer;
  list-style: none;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question::marker {
  content: "";
}

.faq__question:hover {
  color: var(--c-accent-texte);
}

/* Indicateur + / − construit en CSS */
.faq__question::after {
  content: "";
  position: relative;
  top: -0.15em;
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  background-image: linear-gradient(var(--c-or-texte), var(--c-or-texte)),
    linear-gradient(var(--c-or-texte), var(--c-or-texte));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 1px, 1px 100%;
  transition: transform var(--tr-base);
}

/* Ouvert : la barre verticale disparaît, il reste un « moins ».
   La rotation de 180° anime le passage sans redresser la barre — une
   rotation de 90° transformerait le moins en barre verticale. */
.faq__item[open] .faq__question::after {
  transform: rotate(180deg);
  background-size: 100% 1px, 0 100%;
}

.faq__reponse {
  padding-bottom: var(--e-lg);
  max-width: 44em;
  font-size: var(--t-sm);
  color: var(--c-encre-doux);
}

.faq__reponse > * + * {
  margin-top: var(--e-xs);
}

/* --- Encadré --- */
.encadre {
  padding: var(--e-lg);
  background-color: var(--c-fond-alt);
  border-left: 2px solid var(--c-or);
}

.encadre--sombre {
  background-color: var(--c-bleu-nuit-clair);
  color: var(--c-encre-inverse-doux);
}

.encadre h3 {
  font-size: var(--t-md);
  margin-bottom: var(--e-2xs);
}

.encadre--sombre h3 {
  color: var(--c-blanc);
}

.encadre p {
  font-size: var(--t-sm);
  max-width: 46em;
}

/* --- Contenu légal --- */
.contenu-legal {
  max-width: 44rem;
}

.contenu-legal h2 {
  font-size: var(--t-lg);
  margin-top: var(--e-2xl);
  padding-top: var(--e-md);
  border-top: 1px solid var(--c-filet);
}

.contenu-legal h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.contenu-legal h3 {
  font-size: var(--t-md);
  margin-top: var(--e-lg);
}

.contenu-legal h2 + p,
.contenu-legal h3 + p {
  margin-top: var(--e-sm);
}

.contenu-legal p,
.contenu-legal li {
  font-size: var(--t-sm);
}

.contenu-legal ul {
  margin-top: var(--e-sm);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--e-2xs);
}

.contenu-legal ul > li {
  position: relative;
  padding-left: var(--e-md);
}

.contenu-legal ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 6px;
  height: 1px;
  background-color: var(--c-or);
}

.contenu-legal a {
  color: var(--c-titre);
  text-decoration-color: var(--c-filet-or);
  text-underline-offset: 3px;
}

.contenu-legal a:hover {
  text-decoration-color: var(--c-or-texte);
}

.maj-date {
  margin-bottom: var(--e-xl);
  font-size: var(--t-2xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-encre-doux);
}

/* ==========================================================================
   12. Formulaire de contact
   ========================================================================== */

.bloc-formulaire {
  padding: var(--e-lg);
  background-color: var(--c-blanc);
  border: 1px solid var(--c-filet);
}

@media (min-width: 640px) {
  .bloc-formulaire {
    padding: var(--e-xl);
  }
}

.formulaire {
  display: grid;
  gap: var(--e-lg);
}

.champ {
  display: grid;
  gap: var(--e-3xs);
}

.champ__label {
  font-size: var(--t-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-titre);
}

.champ__obligatoire {
  color: var(--c-erreur);
  margin-left: 0.15em;
}

.champ__aide {
  font-size: var(--t-xs);
  color: var(--c-encre-doux);
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--fw-normal);
}

.champ__controle {
  width: 100%;
  min-height: var(--cible-tactile);
  padding: var(--e-2xs) var(--e-xs);
  background-color: var(--c-blanc);
  color: var(--c-encre);
  font-size: var(--t-base);
  border: 1px solid var(--c-filet-fort);
  border-radius: var(--r-xs);
  transition: border-color var(--tr-rapide), box-shadow var(--tr-rapide);
}

.champ__controle:hover {
  border-color: var(--c-encre-doux);
}

.champ__controle:focus {
  border-color: var(--c-bleu-nuit);
  box-shadow: inset 0 -2px 0 var(--c-or);
  outline: none;
}

.champ__controle:focus-visible {
  outline: 2px solid var(--c-or-texte);
  outline-offset: 2px;
}

textarea.champ__controle {
  min-height: 10rem;
  resize: vertical;
  line-height: 1.65;
}

select.champ__controle {
  cursor: pointer;
}

.champ__controle[aria-invalid="true"] {
  border-color: var(--c-erreur);
}

.champ__erreur {
  display: none;
  font-size: var(--t-xs);
  font-weight: var(--fw-medium);
  color: var(--c-erreur);
}

.champ__erreur.est-visible {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3xs);
}

.champ__erreur.est-visible::before {
  content: "\26A0";
  flex: 0 0 auto;
}

.compteur {
  justify-self: end;
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  color: var(--c-encre-doux);
}

.compteur.est-limite {
  color: var(--c-erreur);
  font-weight: var(--fw-semi);
}

/* Choix du canal d'envoi : WhatsApp ou courriel */
.champ--choix {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0; /* sans quoi le fieldset refuse de rétrécir */
}

.champ--choix .champ__label {
  padding: 0;
  margin-bottom: var(--e-2xs);
}

.choix {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2xs);
}

.choix__item {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2xs);
  min-height: var(--cible-tactile);
  padding: var(--e-2xs) var(--e-md);
  font-size: var(--t-sm);
  font-weight: var(--fw-medium);
  color: var(--c-titre);
  border: 1px solid var(--c-filet-fort);
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: border-color var(--tr-rapide), background-color var(--tr-rapide);
}

.choix__item:hover {
  border-color: var(--c-encre-doux);
}

/* L'option retenue est signalée par un cadre doré et un fond ivoire */
.choix__item:has(input:checked) {
  border-color: var(--c-or);
  background-color: var(--c-fond-alt);
  font-weight: var(--fw-semi);
}

.choix__item input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--c-bleu-nuit);
  flex: 0 0 auto;
}

.champ--case {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--e-xs);
}

.champ--case .champ__erreur {
  grid-column: 1 / -1;
}

.case {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--c-bleu-nuit);
  flex: 0 0 auto;
}

.champ--case label {
  font-size: var(--t-sm);
  line-height: 1.55;
  padding-block: 2px;
}

.champ--case a {
  color: var(--c-titre);
  text-decoration-color: var(--c-filet-or);
  text-underline-offset: 3px;
}

/* Honeypot : hors écran, surtout pas display:none */
.pot-de-miel {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.alerte {
  display: none;
  padding: var(--e-md);
  font-size: var(--t-sm);
  border-left: 2px solid transparent;
}

.alerte.est-visible {
  display: block;
}

.alerte--erreur {
  background-color: #fbf1f1;
  border-left-color: var(--c-erreur);
  color: #7d1c1f;
}

.alerte--succes {
  background-color: #f0f6f2;
  border-left-color: var(--c-succes);
  color: #174a31;
}

.mention-formulaire {
  font-size: var(--t-xs);
  color: var(--c-encre-doux);
}

/* ==========================================================================
   13. Carte Google Maps
   ========================================================================== */

.carte-geo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--c-ivoire-fonce);
  border: 1px solid var(--c-filet);
  overflow: hidden;
}

@media (min-width: 640px) {
  .carte-geo {
    aspect-ratio: 16 / 10;
  }
}

.carte-geo iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ==========================================================================
   14. Pied de page
   ========================================================================== */

.site-footer {
  background-color: var(--c-bleu-nuit-fonce);
  color: var(--c-encre-inverse-doux);
  font-size: var(--t-sm);
  padding-block: var(--e-2xl) var(--e-md);
  padding-bottom: calc(var(--e-md) + var(--espace-flottant));
  border-top: 2px solid var(--c-or);
}

@media (min-width: 640px) {
  .site-footer {
    padding-bottom: var(--e-xl);
  }
}

.site-footer__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-xl);
}

@media (min-width: 640px) {
  .site-footer__grille {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .site-footer__grille {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--e-2xl);
  }
}

.site-footer h2 {
  font-family: var(--f-texte);
  font-size: var(--t-2xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-sur);
  text-transform: uppercase;
  color: var(--c-or);
  margin-bottom: var(--e-md);
}

.site-footer address {
  font-style: normal;
  line-height: 1.7;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e-3xs);
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  color: var(--c-encre-inverse-doux);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.site-footer a:hover {
  color: var(--c-or);
  border-bottom-color: var(--c-or);
}

.site-footer__marque {
  display: flex;
  align-items: center;
  gap: var(--e-xs);
  margin-bottom: var(--e-md);
}

.site-footer .logo__marque {
  background-color: transparent;
}

.site-footer .logo__nom {
  color: var(--c-blanc);
}

.site-footer__bas {
  margin-top: var(--e-2xl);
  padding-top: var(--e-md);
  border-top: 1px solid var(--c-filet-sombre);
  display: grid;
  gap: var(--e-md);
  font-size: var(--t-2xs);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
}

.site-footer__mention-legale {
  max-width: 52em;
}

.site-footer__bas ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-md);
}

@media (min-width: 960px) {
  .site-footer__bas {
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: var(--e-2xl);
  }
}

/* ==========================================================================
   15. Bouton WhatsApp flottant
   ========================================================================== */

.flottant-whatsapp {
  position: fixed;
  right: var(--e-sm);
  bottom: var(--e-sm);
  z-index: var(--z-flottant);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2xs);
  min-width: 52px;
  min-height: 52px;
  padding: var(--e-2xs);
  background-color: var(--c-whatsapp);
  color: var(--c-blanc);
  border-radius: var(--r-pilule);
  box-shadow: var(--o-lg);
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: var(--fw-semi);
  transition: background-color var(--tr-base);
}

.flottant-whatsapp:hover {
  background-color: var(--c-whatsapp-survol);
}

.flottant-whatsapp__icone {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

.flottant-whatsapp__texte {
  display: none;
}

@media (min-width: 640px) {
  .flottant-whatsapp {
    right: var(--e-lg);
    bottom: var(--e-lg);
    padding-inline: var(--e-md);
  }

  .flottant-whatsapp__texte {
    display: inline;
  }
}

/* ==========================================================================
   16. Page 404
   ========================================================================== */

.page-404 {
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--e-3xl);
  background-color: var(--c-fond-alt);
}

.page-404__code {
  font-family: var(--f-titre);
  font-size: clamp(5rem, 3rem + 14vw, 11rem);
  font-weight: var(--fw-light);
  line-height: 0.9;
  color: var(--c-or-texte);
  margin-bottom: var(--e-md);
}

.page-404__contenu {
  max-width: 36rem;
}

.page-404 .filet--court {
  margin-inline: auto;
}

.page-404 .groupe-btn {
  margin-top: var(--e-xl);
  justify-content: center;
}

/* ==========================================================================
   17. Animations au défilement
   ========================================================================== */

.js .revele {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--tr-lente), transform var(--tr-lente);
}

.js .revele.est-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .revele {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   18. Impression
   ========================================================================== */

@media print {
  .bandeau-util,
  .site-header,
  .site-footer,
  .flottant-whatsapp,
  .voile-menu,
  .bloc-formulaire,
  .carte-geo,
  .hero__portrait,
  .duo__media {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  .hero,
  .entete-page,
  .section--sombre,
  .section--alt {
    background: #fff !important;
    color: #000 !important;
  }

  .section--sombre h2,
  .section--sombre h3,
  .lead-serif,
  .info-bloc__numero {
    color: #000 !important;
  }

  .repere p,
  .info-bloc p,
  .info-bloc address {
    color: #333 !important;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}