/* ==========================================================================
   Cabinet Arborescence — Elsa Huc
   Feuille de style unique. Aucune dépendance externe.
   Organisation : 1. Polices  2. Variables  3. Base  4. Mise en page
                  5. Composants  6. Sections  7. En-tête / pied de page
                  8. Responsive  9. Animations
   ========================================================================== */

/* 1. Polices (auto-hébergées : aucune requête vers Google, conforme RGPD) ---- */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/nunito-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/nunito-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Police calligraphique, utilisée seulement pour la phrase d'accroche de
   l'accueil. Déclarée en « italic » : c'est une écriture penchée par nature,
   et ainsi la police de secours (Georgia) s'affiche elle aussi en vraie
   italique pendant le chargement, sans que le navigateur penche une seconde
   fois la calligraphie. */
@font-face {
  font-family: 'Parisienne';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/parisienne-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Parisienne';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/parisienne-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2. Variables --------------------------------------------------------------- */

:root {
  /* Palette reprise du site actuel : beige sable + terracotta */
  --sable-50: #fbf8f6;
  --sable-100: #f4ede8;
  --sable-200: #eaded5;
  --sable-300: #ddcbbe;

  --terre: #8c5537;        /* accent principal : boutons, liens (contraste AA) */
  --terre-fonce: #6f412a;  /* survol */
  --terre-clair: #c08a68;  /* décoratif uniquement, jamais du texte */
  --terre-voile: #f6ebe3;  /* fonds de badges */

  --encre: #2b2724;        /* titres */
  --encre-texte: #4a433d;  /* corps de texte */
  --encre-doux: #6e655d;   /* texte secondaire */

  --blanc: #ffffff;
  --or: #e0a742;           /* étoiles des avis */

  /* Typographie */
  --police-titre: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --police-texte: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --police-calligraphie: 'Parisienne', Georgia, 'Times New Roman', serif;

  /* Rythme */
  --contenu: 1140px;
  --gouttiere: clamp(1.25rem, 5vw, 2.5rem);
  --section-y: clamp(3.5rem, 8vw, 6.5rem);

  --rayon: 14px;
  --rayon-lg: 22px;
  --ombre: 0 1px 2px rgba(43, 39, 36, .04), 0 8px 28px rgba(43, 39, 36, .07);
  --ombre-forte: 0 2px 4px rgba(43, 39, 36, .06), 0 18px 45px rgba(43, 39, 36, .12);

  --entete-h: 100px;
}

/* 3. Base -------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--sable-50);
  color: var(--encre-texte);
  font-family: var(--police-texte);
  font-size: 1.0625rem;
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  color: var(--encre);
  font-family: var(--police-titre);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .6em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); }
h2 { font-size: clamp(1.9rem, 1.3rem + 2.1vw, 2.75rem); }
h3 {
  font-family: var(--police-texte);
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.35;
  letter-spacing: 0;
}
h4 {
  font-family: var(--police-texte);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.4;
  letter-spacing: 0;
}

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

a {
  color: var(--terre);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--terre-fonce); }

img { max-width: 100%; height: auto; display: block; }

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

ul, ol { margin: 0 0 1.15em; padding-left: 1.3em; }
li { margin-bottom: .45em; }

hr {
  border: 0;
  border-top: 1px solid var(--sable-200);
  margin: 2.5rem 0;
}

/* Accessibilité : focus toujours visible */
:focus-visible {
  outline: 3px solid var(--terre);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--terre-voile); color: var(--encre); }

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--terre);
  color: #fff;
  padding: .85rem 1.4rem;
  border-radius: 0 0 var(--rayon) 0;
  font-weight: 600;
}
.saut-contenu:focus { left: 0; color: #fff; }

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

/* 4. Mise en page ------------------------------------------------------------ */

.contenu {
  width: 100%;
  max-width: var(--contenu);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.contenu--etroit { max-width: 780px; }

.section { padding-block: var(--section-y); }
.section--sable { background: var(--sable-100); }
.section--blanc { background: var(--blanc); }

.section-entete {
  max-width: 760px;
  margin: 0 auto clamp(2.25rem, 5vw, 3.5rem);
  text-align: center;
}
.section-entete p {
  color: var(--encre-doux);
  font-size: 1.0625rem;
}

.surtitre {
  display: block;
  font-family: var(--police-texte);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--terre);
  margin-bottom: .9rem;
}

.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.4em; }
.prose h3 { margin-top: 2em; }
.prose > :first-child { margin-top: 0; }

/* Grilles réutilisables.
   Le min() évite qu'une colonne reste plus large que l'écran sur les très
   petits mobiles : la largeur minimale ne dépasse jamais 100 % du conteneur. */
.grille { display: grid; gap: clamp(1.1rem, 2.5vw, 1.75rem); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }

/* 5. Composants -------------------------------------------------------------- */

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .9rem 1.6rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: var(--terre);
  color: #fff;
  font-family: var(--police-texte);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:hover {
  background: var(--terre-fonce);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(140, 85, 55, .25);
}
.btn:active { transform: translateY(0); }

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

.btn--clair {
  background: var(--blanc);
  color: var(--terre);
  border-color: var(--sable-200);
}
.btn--clair:hover { background: var(--sable-100); color: var(--terre-fonce); }

.btn--large { padding: 1.05rem 2rem; font-size: 1.0625rem; }
.btn .ic { width: 18px; height: 18px; flex: none; }

.boutons {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
}
.boutons--centre { justify-content: center; }

/* Badge / pastille */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .95rem;
  border-radius: 999px;
  background: var(--terre-voile);
  color: var(--terre-fonce);
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.4;
  text-wrap: balance;
}

/* Cartes */
.carte {
  background: var(--blanc);
  border: 1px solid var(--sable-200);
  border-radius: var(--rayon-lg);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  box-shadow: var(--ombre);
  transition: transform .25s ease, box-shadow .25s ease;
}
.carte--lien {
  position: relative; /* support du lien étiré ci-dessous */
}
.carte--lien:hover,
.carte--lien:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--ombre-forte);
}

/* Carte entièrement cliquable.
   Quand le titre de la carte est un lien, on l'étire sur toute la surface :
   l'image, le résumé et le « Lire l'article » deviennent cliquables, sans
   créer plusieurs liens vers la même page pour les lecteurs d'écran. */
.carte--lien h2 > a::after,
.carte--lien h3 > a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.carte h3 { margin-bottom: .7rem; }
.carte p { color: var(--encre-texte); font-size: 1rem; }

.carte__icone {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--terre-voile);
  color: var(--terre);
  margin-bottom: 1.1rem;
}
.carte__icone svg { width: 24px; height: 24px; }

.carte__lien {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1.1rem;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
}
.carte__lien::after { content: '→'; transition: transform .2s ease; }
.carte--lien:hover .carte__lien::after { transform: translateX(4px); }

/* Liste à puces cochées */
.liste-check { list-style: none; padding: 0; margin: 0; }
.liste-check li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: .85rem;
}
.liste-check li::before {
  content: '';
  position: absolute;
  left: 0; top: .45em;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: var(--terre-voile) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c5537' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / .72rem no-repeat;
}
.liste-croix li::before {
  background: #f3e9e6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a4564a' stroke-width='3.5' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center / .68rem no-repeat;
}

/* Accordéon natif (<details>) — accessible sans JavaScript */
.accordeon { border-top: 1px solid var(--sable-200); }
.accordeon details {
  border-bottom: 1px solid var(--sable-200);
  background: transparent;
}
.accordeon summary {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.35rem .25rem;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--encre);
  transition: color .2s ease;
}
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon summary:hover { color: var(--terre); }
.accordeon summary::after {
  content: '';
  flex: none;
  width: 1.4rem; height: 1.4rem;
  margin-left: auto;
  margin-top: .2rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c5537' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .25s ease;
}
.accordeon details[open] summary::after { transform: rotate(180deg); }
.accordeon .accordeon__corps {
  padding: 0 2.6rem 1.6rem .25rem;
  color: var(--encre-texte);
}
.accordeon .accordeon__corps > :first-child { margin-top: 0; }

/* Avis clients */
.avis {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.avis__etoiles {
  display: flex;
  gap: 2px;
  color: var(--or);
  margin-bottom: 1rem;
}
.avis__etoiles svg { width: 18px; height: 18px; }
.avis blockquote {
  margin: 0 0 1.25rem;
  font-size: 1rem;
  color: var(--encre-texte);
  flex: 1;
}
.avis blockquote p:first-child::before { content: '« '; }
.avis blockquote p:last-child::after { content: ' »'; }
.avis figcaption {
  font-weight: 700;
  color: var(--terre);
  font-size: .95rem;
}
.avis figcaption span {
  display: block;
  font-weight: 400;
  color: var(--encre-doux);
  font-size: .85rem;
}

/* Étapes numérotées */
.etapes { counter-reset: etape; list-style: none; padding: 0; margin: 0; }
.etapes > li {
  counter-increment: etape;
  position: relative;
  padding-left: 3.75rem;
  margin-bottom: 1.75rem;
}
.etapes > li::before {
  content: counter(etape);
  position: absolute;
  left: 0; top: -.15rem;
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--terre-voile);
  color: var(--terre);
  font-family: var(--police-titre);
  font-size: 1.35rem;
  font-weight: 600;
}
.etapes h3 { margin-bottom: .35rem; }

/* Étiquettes (domaines d'intervention) */
.etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.etiquettes li { margin: 0; }
.etiquettes span {
  display: inline-block;
  padding: .7rem 1.35rem;
  border: 1px solid var(--sable-300);
  border-radius: 999px;
  background: var(--blanc);
  color: var(--encre);
  font-weight: 600;
  font-size: .98rem;
  line-height: 1.3;
}

/* Bloc d'information (tarifs, coordonnées…) */
.infos { list-style: none; padding: 0; margin: 0; }
.infos li {
  display: flex;
  gap: .9rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--sable-200);
  margin: 0;
}
.infos li:last-child { border-bottom: 0; }
.infos svg { width: 20px; height: 20px; flex: none; margin-top: .3rem; color: var(--terre); }
.infos strong { display: block; }
.infos a { text-decoration: none; }
.infos a:hover { text-decoration: underline; }

/* Horaires */
.horaires { list-style: none; padding: 0; margin: 0; font-size: .98rem; }
.horaires li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .45rem 0;
  border-bottom: 1px dashed var(--sable-200);
  margin: 0;
}
.horaires li:last-child { border-bottom: 0; }
.horaires .ferme { color: var(--encre-doux); }

/* Formulaire */
.formulaire { display: grid; gap: 1.1rem; }
.champ { display: grid; gap: .4rem; }
.champ label {
  font-weight: 700;
  font-size: .92rem;
  color: var(--encre);
}
.champ input,
.champ textarea,
.champ select {
  width: 100%;
  padding: .85rem 1rem;
  border: 1.5px solid var(--sable-300);
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--encre-texte);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.champ input:focus,
.champ textarea:focus,
.champ select:focus {
  outline: none;
  border-color: var(--terre);
  box-shadow: 0 0 0 3px rgba(140, 85, 55, .15);
}
.champ textarea { min-height: 150px; resize: vertical; }
.champ__aide { font-size: .85rem; color: var(--encre-doux); }
.champ--pot { position: absolute; left: -9999px; }

.rgpd {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: .9rem;
  color: var(--encre-doux);
}
.rgpd input { margin-top: .35rem; width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--terre); }

/* Encart chargement différé (Calendly) */
.encart-externe {
  border: 1px dashed var(--sable-300);
  border-radius: var(--rayon-lg);
  background: var(--sable-100);
  padding: clamp(2rem, 5vw, 3.25rem);
  text-align: center;
}
.encart-externe p { color: var(--encre-doux); font-size: .95rem; max-width: 48ch; margin-inline: auto; }
.encart-externe iframe { width: 100%; min-height: 1050px; border: 0; border-radius: var(--rayon); }

/* Avertissement / note */
.note {
  border-left: 3px solid var(--terre-clair);
  background: var(--terre-voile);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  padding: 1.15rem 1.4rem;
  font-size: .95rem;
  color: var(--encre-texte);
}

/* Fil d'Ariane */
.fil {
  font-size: .88rem;
  color: var(--encre-doux);
  padding-top: 1.5rem;
}
.fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.fil li { margin: 0; }
.fil li + li::before { content: '›'; margin-right: .4rem; color: var(--sable-300); }
.fil a { color: var(--encre-doux); text-decoration: none; }
.fil a:hover { color: var(--terre); text-decoration: underline; }

/* 6. Sections ---------------------------------------------------------------- */

/* Bannière d'en-tête des pages intérieures */
.banniere {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5rem);
  background: var(--sable-100);
  border-bottom: 1px solid var(--sable-200);
  text-align: center;
}
.banniere h1 { margin-bottom: .4rem; }
.banniere p {
  max-width: 62ch;
  margin-inline: auto;
  color: var(--encre-doux);
  font-size: 1.0625rem;
}

/* Héros de la page d'accueil */
.heros {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(82vh, 720px);
  padding-block: clamp(3.5rem, 9vw, 6rem);
  background: var(--sable-100);
  overflow: hidden;
}
/* L'image de fond d'origine a une fine bordure noire en bas. On la pose sur
   un calque légèrement plus haut que le bandeau : cette bordure tombe dans la
   partie masquée (overflow: hidden) au lieu d'apparaître en bande grise. */
.heros::before {
  content: '';
  position: absolute;
  inset: 0 0 -4% 0;
  background: url('../img/img_5315-2.webp') center top / cover no-repeat;
}
.heros::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(251, 248, 246, .92) 0%, rgba(251, 248, 246, .8) 45%, rgba(251, 248, 246, .55) 100%);
}
.heros .contenu { position: relative; z-index: 1; }
.heros__texte { max-width: 700px; }
.heros h1 { margin-bottom: .25rem; }
/* Le nom est dimensionné par rapport au titre (em) : il grandit et rétrécit
   avec « Psychopraticienne ». À .78em, des majuscules espacées ont la même
   présence visuelle que le mot en minuscules juste en dessous. */
.heros__nom {
  display: block;
  font-family: var(--police-texte);
  font-size: .78em;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--terre);
  margin-bottom: .15em;
}
.heros__sous {
  font-family: var(--police-titre);
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  color: var(--encre);
  line-height: 1.3;
  margin-bottom: 1.1rem;
  text-wrap: balance;
}
.heros__accroche {
  font-family: var(--police-calligraphie);
  font-style: italic;
  font-weight: 400;
  /* une écriture manuscrite paraît plus petite à taille égale : on compense */
  font-size: clamp(1.7rem, 1.35rem + 1.3vw, 2.35rem);
  line-height: 1.35;
  color: var(--terre-fonce); /* brun sépia, comme une encre */
  max-width: 30ch;
  margin-bottom: 2rem;
  text-wrap: balance; /* répartit les lignes, évite un mot seul à la fin */
}
.heros .boutons { margin-bottom: 1.75rem; }

/* Bandeau de réassurance */
.reassurance {
  background: var(--blanc);
  border-bottom: 1px solid var(--sable-200);
}
.reassurance ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem 2rem;
  list-style: none;
  padding: 1.5rem 0;
  margin: 0;
}
.reassurance li {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0;
  font-size: .97rem;
  font-weight: 600;
  color: var(--encre);
}
.reassurance svg { width: 22px; height: 22px; flex: none; color: var(--terre); }

/* Bloc deux colonnes image + texte */
.duo {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
.duo__media { position: relative; }
.duo__media img {
  width: 100%;
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-forte);
}
.duo__media figcaption {
  margin-top: .85rem;
  font-size: .85rem;
  color: var(--encre-doux);
  text-align: center;
}

/* Citation mise en avant */
.citation {
  position: relative;
  text-align: center;
  max-width: 820px;
  margin-inline: auto;
}
.citation blockquote {
  margin: 0;
  font-family: var(--police-titre);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.35rem);
  line-height: 1.35;
  color: var(--encre);
}
.citation cite {
  display: block;
  margin-top: 1.25rem;
  font-family: var(--police-texte);
  font-size: .9rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--terre);
}

/* Appel à l'action pleine largeur */
.cta {
  background: var(--encre);
  color: var(--sable-100);
  text-align: center;
}
.cta h2 { color: var(--blanc); }
.cta p { color: rgba(244, 237, 232, .82); max-width: 56ch; margin-inline: auto; }
.cta .btn--secondaire { border-color: var(--sable-300); color: var(--sable-100); }
.cta .btn--secondaire:hover { background: var(--sable-100); color: var(--encre); }

/* Liste d'articles du blog */
.articles { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); }
.article-carte {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.article-carte img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.article-carte__corps { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.article-carte__date {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--terre);
  margin-bottom: .6rem;
}
.article-carte h2,
.article-carte h3 {
  font-family: var(--police-texte);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.35;
  letter-spacing: 0;
  margin-bottom: .6rem;
}
.article-carte h2 a,
.article-carte h3 a { color: var(--encre); text-decoration: none; }
.article-carte h2 a:hover,
.article-carte h3 a:hover { color: var(--terre); }
.article-carte p { font-size: .96rem; color: var(--encre-doux); flex: 1; }
.article-carte .carte__lien { margin-top: 1rem; }

/* En-tête d'article */
.article-entete { text-align: center; max-width: 760px; margin-inline: auto; }
.article-entete h1 { font-size: clamp(1.9rem, 1.3rem + 2.3vw, 3rem); }
.article-meta {
  font-size: .88rem;
  color: var(--encre-doux);
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .9rem;
  justify-content: center;
}
.article-image {
  margin: clamp(2rem, 4vw, 3rem) 0;
  border-radius: var(--rayon-lg);
  overflow: hidden;
  box-shadow: var(--ombre);
}
.sommaire {
  background: var(--sable-100);
  border-radius: var(--rayon);
  padding: 1.4rem 1.6rem;
  margin-bottom: 2.5rem;
}
.sommaire p { font-weight: 700; color: var(--encre); margin-bottom: .6rem; font-size: .95rem; }
.sommaire ol { margin: 0; padding-left: 1.2rem; font-size: .96rem; }
.sommaire li { margin-bottom: .3rem; }

/* 7. En-tête / pied de page -------------------------------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 248, 246, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.entete.est-defile {
  border-bottom-color: var(--sable-200);
  box-shadow: 0 4px 20px rgba(43, 39, 36, .05);
}
.entete__barre {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--entete-h);
}
.logo {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  flex: none;
  margin-right: auto;
}
/* Recadrage du logo sur le monogramme.
   L'image d'origine (500×500) entoure la marque d'une large zone vide : le
   monogramme n'occupe que la région 214×214 située en (146, 105). On affiche
   uniquement cette zone, ce qui rend la marque 2,3 fois plus grande à taille
   de bandeau égale. Le nom « Cabinet Arborescence » figure déjà en texte à
   côté, la partie textuelle de l'image est donc redondante. */
.logo__marque {
  --marque: 72px;
  flex: none;
  display: block;
  width: var(--marque);
  height: var(--marque);
  overflow: hidden;
  border-radius: 14px;
  background: #e5e2e5; /* fond identique à celui de l'image */
}
.logo__marque img {
  width: 233.6%;   /* 500 / 214 */
  height: 233.6%;
  max-width: none;
  margin-left: -68.2%; /* -146 / 214 */
  margin-top: -49.1%;  /* -105 / 214 */
  border-radius: 0;
}
.logo__texte { display: flex; flex-direction: column; line-height: 1.15; }
.logo__nom {
  font-family: var(--police-titre);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--encre);
  white-space: nowrap;
}
.logo__role {
  white-space: nowrap;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--terre);
}

.nav ul {
  display: flex;
  align-items: center;
  gap: .25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav li { margin: 0; }
.nav a {
  display: block;
  padding: .55rem .8rem;
  border-radius: 8px;
  color: var(--encre-texte);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap; /* un libellé ne doit jamais se couper en deux lignes */
  transition: background-color .2s ease, color .2s ease;
}
.nav a:hover { background: var(--sable-100); color: var(--terre); }
.nav a[aria-current='page'] { color: var(--terre); }
.nav a[aria-current='page']::after {
  content: '';
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--terre);
  margin-top: 3px;
}

.entete .btn { flex: none; padding: .7rem 1.25rem; font-size: .93rem; white-space: nowrap; }

/* Le bouton placé DANS le menu ne sert qu'au menu déroulant mobile.
   Sur grand écran il ferait doublon avec le bouton du bandeau. */
.nav > .btn { display: none; }

/* .nav a impose la couleur du texte des liens du menu ; il faut la rétablir
   ici, sinon le bouton se retrouve avec du texte sombre sur fond terracotta. */
.nav > .btn { color: #fff; }
.nav > .btn:hover { color: #fff; }

/* Bouton d'en-tête en blanc : il se détache du bandeau beige sans l'assombrir.
   Texte terracotta sur blanc = contraste 5,7:1 (conforme AA). */
.entete .btn--entete {
  background: var(--blanc);
  color: var(--terre);
  border-color: var(--sable-300);
  box-shadow: 0 1px 2px rgba(43, 39, 36, .06);
}
.entete .btn--entete:hover {
  background: var(--blanc);
  color: var(--terre-fonce);
  border-color: var(--terre);
  box-shadow: 0 8px 20px rgba(140, 85, 55, .18);
}

.burger {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--sable-200);
  border-radius: 10px;
  background: var(--blanc);
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.burger span {
  display: block;
  width: 20px; height: 2px;
  background: var(--encre);
  border-radius: 2px;
  position: relative;
  transition: background-color .2s ease;
}
.burger span::before,
.burger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px; height: 2px;
  background: var(--encre);
  border-radius: 2px;
  transition: transform .25s ease;
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded='true'] span { background: transparent; }
.burger[aria-expanded='true'] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] span::after { transform: translateY(-6px) rotate(-45deg); }

/* Pied de page */
.pied {
  background: var(--encre);
  color: rgba(244, 237, 232, .78);
  padding-block: clamp(3rem, 6vw, 4.5rem) 0;
  font-size: .95rem;
}
.pied a { color: rgba(244, 237, 232, .78); text-decoration: none; }
.pied a:hover { color: var(--blanc); text-decoration: underline; }
.pied h2, .pied h3 { color: var(--blanc); }
.pied h2, .pied h3 {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
  color: var(--terre-clair);
}
.pied__grille {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  padding-bottom: 3rem;
}
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: .6rem; }
.pied .horaires li { border-bottom-color: rgba(244, 237, 232, .12); }
.pied .horaires .ferme { color: rgba(244, 237, 232, .5); }
.pied__logo { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.pied__logo .logo__marque--pied { --marque: 60px; }
.pied__bas {
  border-top: 1px solid rgba(244, 237, 232, .14);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  justify-content: space-between;
  font-size: .85rem;
  color: rgba(244, 237, 232, .55);
}
.pied__bas ul { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; }
.pied__bas li { margin: 0; }
.pied__social { display: flex; gap: .7rem; margin-top: 1.2rem; }
.pied__social a {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid rgba(244, 237, 232, .2);
  border-radius: 50%;
  transition: background-color .2s ease, border-color .2s ease;
}
.pied__social a:hover { background: var(--terre); border-color: var(--terre); }
.pied__social svg { width: 19px; height: 19px; }

/* 8. Responsive -------------------------------------------------------------- */

@media (min-width: 900px) {
  .duo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .duo--media-droite .duo__media { order: 2; }
}

/* Entre 1200 et 1340 px le bandeau complet tient tout juste : on resserre. */
@media (max-width: 1340px) {
  .nav a { padding: .55rem .6rem; font-size: .9rem; }
  .logo__nom { font-size: 1.1rem; }
}

/* Le bandeau complet (logo + 5 rubriques + bouton) réclame environ 1190 px.
   En dessous, on passe au menu burger plutôt que de tasser ou faire déborder. */
@media (max-width: 1199px) {
  /* Bandeau un peu plus compact sur petit écran, le logo reste bien lisible */
  :root { --entete-h: 84px; }
  .logo__marque { --marque: 60px; }

  .burger { display: grid; }

  .nav {
    position: fixed;
    inset: var(--entete-h) 0 0;
    background: var(--sable-50);
    padding: 1.5rem var(--gouttiere) 3rem;
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .nav.est-ouvert { opacity: 1; visibility: visible; transform: none; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav li { border-bottom: 1px solid var(--sable-200); }
  .nav a {
    padding: 1.05rem .25rem;
    font-size: 1.05rem;
    border-radius: 0;
  }
  .nav a[aria-current='page']::after { display: none; }
  .nav > .btn {
    display: inline-flex;
    margin-top: 1.5rem;
    width: 100%;
    padding: 1rem 1.5rem;
    font-size: 1rem;
  }
  body.nav-ouverte { overflow: hidden; }
}

/* Entre 700 et 1199 px le menu est replié dans le burger, mais le bouton de
   prise de rendez-vous reste visible à côté : c'est l'action principale du
   site, elle ne doit pas être cachée derrière un menu. En dessous de 700 px,
   la place manque et le bouton reste accessible dans le menu déroulant. */
@media (max-width: 699px) {
  .entete .btn--entete { display: none; }

  /* Téléphone : le bandeau d'accueil est centré, comme les autres titres
     du site. Tout le bloc suit le titre, sinon l'alignement serait bancal. */
  .heros { text-align: center; }
  .heros__texte,
  .heros__accroche { margin-inline: auto; }
  .heros .boutons { justify-content: center; }
  /* voile uniforme : le texte occupe toute la largeur, plus seulement la gauche */
  .heros::after { background: rgba(251, 248, 246, .85); }
}

/* Très petits écrans : le nom complet ne tient pas sur une ligne à côté du
   logo et du burger. On retire la ligne de rôle et on laisse le nom passer
   sur deux lignes. */
@media (max-width: 420px) {
  .logo__marque { --marque: 52px; }
  .logo__role { display: none; }
  .logo__nom {
    font-size: 1rem;
    line-height: 1.15;
    white-space: normal;
  }
}

@media (max-width: 560px) {
  .boutons .btn { width: 100%; }
  .heros { min-height: 0; }
  .pied__bas { flex-direction: column; }
}

/* 9. Animations -------------------------------------------------------------- */

/* L'état masqué n'est appliqué que si JavaScript est disponible (classe .js
   ajoutée par le script en-tête). Sans JS, le contenu reste visible. */
.js .reveler {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.js .reveler.est-visible { opacity: 1; transform: none; }

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

/* Impression */
@media print {
  .entete, .pied, .cta, .burger, .boutons { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .section { padding-block: 1rem; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}