/* ==========================================================================
   Daniel Villeneuve, psychologue à Longueuil
   Feuille de style principale. Mobile d'abord.
   Palette et typographie fixées dans docs/brief.md (section 5).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Polices auto-hébergées (sous-ensemble latin, fichiers variables)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-italic-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Jetons
   -------------------------------------------------------------------------- */
:root {
  --ardoise: #263442;
  --papier: #f5f4f0;
  --brume: #e4e7ea;
  --brique: #9e3b2b;
  --brique-sombre: #7f2f22;
  --vert: #2f6b4f;            /* survols : vert forêt, 5,7:1 sur Papier, 6,3:1 sous du blanc (8 septembre 2026) */
  --encre: #4a5563;
  --trait: #cfd4d9;

  --serif: "Literata", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Public Sans", "Segoe UI", Helvetica, Arial, sans-serif;

  --corps: 1.125rem;          /* 18 px */
  --interligne: 1.6;
  --mesure: 36em;             /* colonne de lecture, sous 75 caractères */
  --rayon: 4px;

  --gouttiere: 1.25rem;
  --gouttiere-large: clamp(1.25rem, 4vw, 5.5rem);   /* pages à photo plein cadre : pleine largeur */
  --bloc: clamp(3rem, 8vw, 6rem);   /* espace vertical entre sections */
  --barre-basse: 4.25rem;           /* hauteur de la barre mobile */
  --tiroir: min(86vw, 22rem);       /* largeur du tiroir de navigation mobile */
  --onglet-haut: 30%;               /* hauteur de l'onglet Menu, en part de l'écran */

  --focus: 0 0 0 3px var(--papier), 0 0 0 6px var(--brique);
}

@media (min-width: 48em) {
  :root {
    --corps: 1.1875rem;       /* 19 px */
    --gouttiere: 2rem;
  }
}
@media (min-width: 64em) {
  :root {
    --corps: 1.25rem;         /* 20 px */
    --gouttiere: 3rem;
  }
}

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

html {
  color-scheme: light;
  background: var(--papier);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Les images qui filent jusqu'au bord ne doivent jamais créer de défilement horizontal. */
  overflow-x: clip;
  /* Barre de défilement masquée : les photos vont jusqu'au bord droit de l'écran.
     Le défilement reste possible à la molette, au clavier, au doigt. */
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  display: none;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--corps);
  line-height: var(--interligne);
  color: var(--ardoise);
  background: var(--papier);
  font-feature-settings: "kern", "liga";
  /* place pour la barre basse fixe sur mobile */
  padding-bottom: calc(var(--barre-basse) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 64em) {
  body {
    padding-bottom: 0;
  }
}

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

p,
li,
dd,
figcaption,
summary {
  text-wrap: pretty;
}

p {
  margin: 0 0 1.1em;
  max-width: var(--mesure);
}

ul,
ol {
  padding-left: 1.25em;
  max-width: var(--mesure);
}

li + li {
  margin-top: 0.35em;
}

strong {
  font-weight: 650;
}

a {
  color: var(--brique);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--vert);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: var(--rayon);
}

::selection {
  background: var(--ardoise);
  color: var(--papier);
}

hr {
  border: 0;
  border-top: 1px solid var(--trait);
  margin: var(--bloc) 0;
}

/* --------------------------------------------------------------------------
   Titres
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-variation-settings: "opsz" 24;
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--ardoise);
  margin: 0 0 0.5em;
  text-wrap: balance;
  max-width: 22ch;
}

h1 {
  font-size: clamp(2.5rem, 2rem + 2.6vw, 3.5rem);   /* 40 à 56 px */
  margin-bottom: 0.6em;
}

h2 {
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  margin-top: 0;
}

h3 {
  font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.6rem);
  line-height: 1.25;
}

h4 {
  font-family: var(--sans);
  font-size: 1em;
  font-weight: 650;
  max-width: none;
}

.sous-titre {
  font-size: 1.15em;
  color: var(--encre);
  max-width: var(--mesure);
}

/* --------------------------------------------------------------------------
   Utilitaires
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

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


/* --------------------------------------------------------------------------
   Lien d'évitement
   -------------------------------------------------------------------------- */
.evitement {
  position: absolute;
  left: var(--gouttiere);
  top: -100%;
  z-index: 100;
  padding: 0.6em 1em;
  background: var(--ardoise);
  color: var(--papier);
  border-radius: 0 0 var(--rayon) var(--rayon);
  text-decoration: none;
}

.evitement:focus {
  top: 0;
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 3rem;
  padding: 0.65em 1.4em;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: var(--brique);
  border: 2px solid var(--brique);
  border-radius: var(--rayon);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.bouton:hover {
  color: #fff;
  background: var(--vert);
  border-color: var(--vert);
}

.bouton--secondaire {
  color: var(--ardoise);
  background: transparent;
  border-color: var(--ardoise);
}

.bouton--secondaire:hover {
  color: var(--papier);
  background: var(--ardoise);
  border-color: var(--ardoise);
}

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

.lien-suite {
  font-weight: 600;
  text-decoration-thickness: 1.5px;
}

/* --------------------------------------------------------------------------
   En-tête et navigation
   -------------------------------------------------------------------------- */
.entete {
  position: relative;
  background: var(--ardoise);
  color: var(--papier);
}

/* Sur mobile, l'en-tête reste visible au défilement. */
@media (max-width: 63.99em) {
  .entete {
    position: sticky;
    top: 0;
    z-index: 60;
  }

  .entete__barre {
    min-height: 4rem;
  }
}

.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
}

.marque {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--papier);
  line-height: 1.15;
  padding-block: 0.6rem;
}

.marque__nom {
  font-family: var(--serif);
  font-variation-settings: "opsz" 18;
  font-size: 1.45rem;
  font-weight: 550;
  white-space: nowrap;
}

.marque__titre {
  font-size: 0.85rem;
  color: var(--brume);
}

.entete .marque:hover {
  color: var(--papier);
}

.marque:hover .marque__nom {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.entete :focus-visible {
  box-shadow: 0 0 0 3px var(--ardoise), 0 0 0 6px var(--papier);
}

/* Bouton Menu (mobile) : un onglet vertical accroché au bord droit de l'écran,
   visible à tout moment, hors de la colonne de lecture. Ouvert, il suit le
   tiroir et lit « Fermer ». Sa zone de toucher déborde vers l'intérieur
   (48 px en tout pour 36 px visibles). */
.menu-bouton {
  position: fixed;
  top: var(--onglet-haut);
  right: 0;
  z-index: 71;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  padding: 1rem 0;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--papier);
  background: var(--ardoise);
  border: 1px solid rgba(245, 244, 240, 0.55);
  border-right: 0;
  border-radius: var(--rayon) 0 0 var(--rayon);
  cursor: pointer;
  transition: right 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.menu-bouton::before {
  content: "";
  position: absolute;
  top: -0.5rem;
  right: 0;
  bottom: -0.5rem;
  width: 3rem;
}

.menu-bouton[aria-expanded="true"] {
  right: var(--tiroir);
}

/* Le texte se lit de bas en haut, comme le dos d'un livre français. */
.menu-bouton__contenu {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.menu-bouton__icone {
  flex: none;
  width: 1.05em;
  height: 1.05em;
}

.menu-bouton[aria-expanded="true"] .menu-bouton__icone--ouvrir,
.menu-bouton[aria-expanded="false"] .menu-bouton__icone--fermer,
.menu-bouton[aria-expanded="true"] .menu-bouton__libelle--ouvrir,
.menu-bouton[aria-expanded="false"] .menu-bouton__libelle--fermer {
  display: none;
}

/* Voile sur la page pendant que le menu est ouvert ; un toucher dessus le ferme. */
.voile {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgba(38, 52, 66, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms ease, visibility 0s linear 280ms;
}

body.menu-ouvert {
  overflow: hidden;
}

body.menu-ouvert .voile {
  opacity: 1;
  visibility: visible;
  transition: opacity 280ms ease;
}

/* Navigation mobile : un tiroir qui glisse depuis la droite, par-dessus la page. */
@media (max-width: 63.99em) {
  .nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    width: var(--tiroir);
    padding: calc(1.25rem + env(safe-area-inset-top, 0px)) 1.5rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
    background: var(--ardoise);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 280ms;
  }

  .nav.est-ouvert {
    transform: none;
    visibility: visible;
    transition: transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
}

/* La marque en tête du tiroir. */
.tiroir__marque {
  margin: 0 0 0.75rem;
  padding: 0 0.25rem 1rem;
  font-family: var(--serif);
  font-variation-settings: "opsz" 18;
  font-size: 1.45rem;
  font-weight: 550;
  line-height: 1.15;
  color: var(--papier);
  border-bottom: 1px solid rgba(228, 231, 234, 0.25);
  max-width: none;
}

.tiroir__marque small {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--brume);
}

.nav__liste {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  list-style: none;
  margin: 0;
  padding: 0 0 1rem;
  max-width: none;
}

.nav__liste li + li {
  margin-top: 0;
}

.nav__lien {
  display: block;
  padding: 0.9rem 0.25rem;
  font-family: var(--serif);
  font-variation-settings: "opsz" 18;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--papier);
  text-decoration: none;
  border-bottom: 1px solid rgba(228, 231, 234, 0.18);
}

.nav__lien:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.nav__lien[aria-current="page"] {
  color: #fff;
  font-weight: 600;
}

.nav__lien--secondaire {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 500;
  padding: 0.7rem 0.25rem 0.7rem 1.5rem;
  color: var(--brume);
}

/* Prendre contact ferme le tiroir, tout en bas : la barre basse est sous le voile. */
.nav__action {
  margin-top: auto;
  padding-top: 1.5rem;
}

.nav__action .bouton {
  width: 100%;
}

@media (min-width: 64em) {
  /* Une seule rangée : marque à gauche, navigation et bouton à droite. */
  .entete__conteneur {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    min-height: 5rem;
  }

  .entete__barre {
    min-height: 0;
  }

  .menu-bouton,
  .voile,
  .tiroir__marque {
    display: none;
  }

  .nav {
    display: block;
  }

  .nav__liste {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1.75rem;
    padding: 0;
  }

  .nav__lien {
    white-space: nowrap;
    padding: 0.5rem 0;
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 650;
    color: var(--brume);
    border-bottom: 2px solid transparent;
  }

  .nav__lien:hover {
    text-decoration: none;
    border-bottom-color: rgba(228, 231, 234, 0.4);
  }

  .nav__lien[aria-current="page"] {
    color: #fff;
    font-weight: 600;
    border-bottom-color: var(--papier);
  }

  .nav__item--secondaire {
    display: none;
  }

  .nav__lien--parent {
    border-bottom-color: rgba(228, 231, 234, 0.4);
  }

  .nav__action {
    margin: 0 0 0 0.5rem;
    padding-top: 0;
  }

  .nav__action .bouton {
    width: auto;
  }
}

/* --------------------------------------------------------------------------
   Barre basse fixe (mobile)
   -------------------------------------------------------------------------- */
.barre-basse {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  padding: 0.6rem var(--gouttiere) calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(245, 244, 240, 0.94);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--trait);
}

@media (min-width: 64em) {
  .barre-basse {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section {
  padding-block: var(--bloc);
}

.section--brume {
  background: var(--brume);
}

.section--ardoise {
  background: var(--ardoise);
  color: var(--papier);
}

.section--ardoise h2,
.section--ardoise h3 {
  color: var(--papier);
}

.section--ardoise a {
  color: var(--papier);
}

.section--ardoise .bouton {
  background: var(--papier);
  color: var(--ardoise);
  border-color: var(--papier);
}

.section--ardoise .bouton:hover {
  background: #fff;
  border-color: #fff;
}

.section--serree {
  padding-block: calc(var(--bloc) * 0.6);
}

/* Filet entre deux sections claires, sauf après les panneaux et autour des sections photo. */
.section + .section:not(.section--brume):not(.section--ardoise):not(.section--photo):not(.section--panneaux + .section) {
  border-top: 1px solid var(--trait);
}

/* --------------------------------------------------------------------------
   Premier écran
   -------------------------------------------------------------------------- */
.accroche {
  padding-block: clamp(2rem, 5vw, 4rem) calc(var(--bloc) * 0.5);
}

/* Le premier écran et la section qui suit ne cumulent pas deux grands espaces. */
.accroche + .section {
  padding-top: calc(var(--bloc) * 0.6);
}

/* Titre, filet et chapeau forment un seul groupe serré. */
.accroche h1 {
  margin-bottom: 0.6rem;
}

.accroche .filet {
  margin-bottom: 0.9rem;
}

/* Le chapeau est en serif, plus grand et plus dense que le corps : il prolonge le titre. */
.accroche .filet + p {
  font-family: var(--serif);
  font-variation-settings: "opsz" 20;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ardoise);
  max-width: 30em;
  margin-bottom: 1.25rem;
}

.accroche__grille {
  display: grid;
  gap: 2.5rem;
}

/* ---- Variante plein cadre : la photo occupe tout le premier écran.
   L'en-tête flotte par-dessus (voir .entete-flottante). Sur mobile, la photo
   remplit le haut de l'écran et le texte suit, sous un fondu Ardoise, pour ne
   jamais couvrir le visage. Sur grand écran, la photo file jusqu'au bord droit
   et le titre, en bas à gauche, chevauche la couture entre le bloc Ardoise et
   la photo. C'est l'assise visuelle du site. ---- */
.accroche--plein {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding: 0 0 calc(var(--barre-basse) + 1.5rem);
  background: var(--ardoise);
  color: var(--papier);
}

.accroche--plein .accroche__media {
  position: relative;
  height: 58svh;
  min-height: 18rem;
  overflow: hidden;
}

.accroche--plein .accroche__media picture {
  display: contents;
}

.accroche--plein .accroche__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

/* Variante large : sur mobile, la photo garde ses proportions 4:3 au lieu d'être
   recadrée en hauteur (accueil : les deux fauteuils restent dans le cadre). */
.accroche--plein-large .accroche__media {
  height: auto;
  min-height: 0;
  aspect-ratio: 4 / 3;
}

/* Fondu du bas de la photo vers le bloc Ardoise. */
.accroche--plein .accroche__media::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 40%;
  background: linear-gradient(to top, var(--ardoise), rgba(38, 52, 66, 0));
  pointer-events: none;
}

/* Le premier écran occupe toute la largeur : pas de bande vide sur les grands écrans. */
.accroche--plein > .conteneur {
  max-width: none;
  padding-inline: var(--gouttiere-large);
}

/* Voile léger en haut, pour que l'en-tête flottant reste lisible sur la photo. */
.accroche--plein::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 1;
  height: 8rem;
  background: linear-gradient(to bottom, rgba(38, 52, 66, 0.72), rgba(38, 52, 66, 0));
  pointer-events: none;
}

.accroche--plein .conteneur {
  position: relative;
  z-index: 2;
  margin-top: -2rem;
}

.accroche--plein .accroche__cadre {
  max-width: 44rem;
}

.accroche--plein .accroche__lieu {
  color: var(--brume);
  margin-bottom: 1rem;
}

/* Un filet sur toute la largeur du cadre sépare le surtitre du titre. */
.accroche--plein .accroche__texte {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(245, 244, 240, 0.4);
}

.accroche--plein h1 {
  font-size: clamp(2.75rem, 1.6rem + 4.2vw, 5.25rem);
  line-height: 1.05;
  color: var(--papier);
  max-width: 14ch;
  margin-bottom: 0.4em;
}

/* Accueil : le H1 porte le nom (« Daniel Villeneuve, psychologue »). 18ch laisse
   « Daniel Villeneuve, » sur une ligne à l'écran, donc deux lignes au lieu de trois
   (décision du 8 septembre 2026). Les autres premiers écrans gardent 14ch. */
.accroche--plein.accroche--nom h1 {
  max-width: 18ch;
}

.accroche--plein h1 + p {
  font-family: var(--serif);
  font-variation-settings: "opsz" 20;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--papier);
  max-width: 30em;
  margin-bottom: 1.25rem;
}

.accroche--plein .accroche__actions {
  margin-top: 1.5rem;
}

.accroche--plein .bouton {
  color: var(--ardoise);
  background: var(--papier);
  border-color: var(--papier);
}

.accroche--plein .bouton:hover {
  background: #fff;
  border-color: #fff;
}

.accroche--plein .lien-suite {
  color: var(--papier);
}

.accroche--plein :focus-visible {
  box-shadow: 0 0 0 3px var(--ardoise), 0 0 0 6px var(--papier);
}

.accroche--plein + .section:not(.section--panneaux) {
  padding-top: var(--bloc);
}

/* Sur mobile aussi, la liste des rubriques suit directement le premier écran.
   Sous les panneaux, seul l'espace de la section suivante sépare. */
.accroche + .section--panneaux {
  padding-top: 0;
}

.section--panneaux {
  padding-bottom: 0;
}

.section--panneaux .portes {
  margin-top: 0;
}

@media (min-width: 64em) {
  .accroche--plein {
    padding: 8rem 0 clamp(3rem, 6vw, 5rem);
  }

  /* La photo prend toute la hauteur et part du cinquième de l'écran vers la droite. */
  .accroche--plein .accroche__media,
  .accroche--plein-large .accroche__media {
    position: absolute;
    inset: 0;
    left: 20vw;
    z-index: -2;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
  }

  .accroche--plein .accroche__media img {
    object-position: 50% 45%;
  }

  /* Le fondu passe à gauche : la photo se fond dans le bloc Ardoise. */
  .accroche--plein .accroche__media::after {
    inset: 0;
    height: auto;
    width: 42%;
    background: linear-gradient(to right, var(--ardoise), rgba(38, 52, 66, 0.55) 45%, rgba(38, 52, 66, 0));
  }

  /* Voile du bas, pour le texte posé sur la photo. */
  .accroche--plein::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: -1;
    height: 62%;
    background: linear-gradient(to top, rgba(38, 52, 66, 0.9), rgba(38, 52, 66, 0.5) 50%, rgba(38, 52, 66, 0));
    pointer-events: none;
  }

  .accroche--plein > .conteneur {
    margin-top: auto;
  }
}

/* --------------------------------------------------------------------------
   En-tête flottant : sur les pages qui s'ouvrent sur une photo plein cadre,
   l'en-tête se pose par-dessus, sans fond. Le menu mobile est un tiroir à
   part, avec son propre fond (voir « En-tête et navigation »).
   -------------------------------------------------------------------------- */
.entete-flottante .entete {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 60;
  background: transparent;
}

/* L'en-tête flottant s'étend lui aussi d'un bord à l'autre, aligné sur le premier écran. */
.entete-flottante .entete .conteneur {
  max-width: none;
  padding-inline: var(--gouttiere-large);
}

/* --------------------------------------------------------------------------
   Tuile du jour : la date et l'état d'ouverture, remplis par le script.
   Sans script, il reste un lien texte vers les disponibilités.
   -------------------------------------------------------------------------- */
.jour {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  padding: 0.85rem 0.25rem;
  color: var(--papier);
  text-decoration: none;
  line-height: 1.25;
}

.jour:hover {
  color: #fff;
}

.jour:hover .jour__etat {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.jour__date {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  padding: 0.35rem 0.5rem 0.4rem;
  background: #fff;
  color: var(--ardoise);
  border-radius: var(--rayon);
  line-height: 1;
}

.jour.est-rempli .jour__date {
  display: flex;
}

.jour__numero {
  font-family: var(--serif);
  font-variation-settings: "opsz" 18;
  font-size: 1.4rem;
  font-weight: 500;
}

.jour__mois {
  margin-top: 0.2rem;
  font-size: 0.7rem;
  font-weight: 650;
}

.jour__etat {
  font-size: 1rem;
  font-weight: 500;
}

.nav__jour {
  border-bottom: 1px solid rgba(228, 231, 234, 0.18);
}

@media (min-width: 64em) {
  .nav__jour {
    border-bottom: 0;
    margin-left: 0.5rem;
  }

  .jour {
    flex-wrap: nowrap;
    gap: 0.6rem;
    padding: 0.25rem 0;
  }

  /* Entre 64 et 80 em, la place manque : seule la date reste visible. */
  .jour__etat {
    display: none;
  }
}

@media (min-width: 80em) {
  .jour__etat {
    display: block;
    max-width: 11rem;
    font-size: 0.8rem;
    line-height: 1.2;
  }
}

/* ---- Variante trait : l'illustration en grand, derrière le titre, débordant à droite. ---- */
.accroche--trait {
  position: relative;
  overflow: hidden;
  padding-bottom: calc(var(--bloc) * 0.7);
}

.accroche--trait .accroche__grille {
  display: block;
}

.accroche--trait .accroche__texte {
  position: relative;
  z-index: 1;
  max-width: 38rem;
}

/* Sur mobile, l'illustration vient se glisser sous les dernières lignes du texte. */
.accroche--trait .accroche__media {
  position: relative;
  z-index: 0;
  width: 130%;
  margin: -3.5rem 0 -1rem -8%;
  pointer-events: none;
}

.accroche--trait .illustration {
  width: 100%;
  max-width: none;
  opacity: 0.85;
}

.accroche__texte p {
  font-size: 1.05em;
}

.accroche__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 1.75rem;
}

/* Surtitre : court, gras, petit corps, collé au titre. Pas de capitales espacées. */
.accroche__lieu {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--encre);
  margin-bottom: 0.75rem;
  max-width: 30em;
}

/* Fil d'Ariane visible des pages de service (Accueil, Services, page), en tête du premier
   écran, sur la même ligne de base que le surtitre. Séparateur en CSS, invisible aux lecteurs
   d'écran ; le chemin complet est aussi dans le BreadcrumbList de la page. */
.ariane {
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--encre);
}

.ariane__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

.ariane__liste li + li {
  margin-top: 0;
}

.ariane__item + .ariane__item::before {
  content: "\203A" / "";
  margin-right: 0.55rem;
  color: inherit;
}

.ariane__lien {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

/* Sur le fond ardoise du premier écran, le fil d'Ariane garde sa couleur au survol. */
.ariane__lien:hover {
  color: inherit;
  text-decoration-thickness: 2px;
}

.ariane__item[aria-current="page"] {
  font-weight: 700;
}

/* Sur un premier écran plein cadre, le fil d'Ariane prend la couleur du surtitre. */
.accroche--plein .ariane {
  color: var(--brume);
}

.filet {
  display: block;
  width: 3rem;
  height: 2px;
  background: var(--brique);
  margin: 0 0 1.5rem;
}

@media (min-width: 48em) {
  .accroche__grille {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
  }

  /* Sur grand écran, elle occupe le flanc droit, derrière la fin du texte, et déborde du cadre. */
  .accroche--trait .accroche__media {
    position: absolute;
    top: 55%;
    right: -7vw;
    width: 60vw;
    margin: 0;
    transform: translateY(-50%);
  }

  .accroche--trait .illustration {
    opacity: 0.75;
  }
}

/* --------------------------------------------------------------------------
   Images : photos et illustrations
   Les fichiers WebP de images/ sont des gabarits qui portent leur propre nom.
   On les écrase avec les images définitives, mêmes noms, mêmes proportions.
   -------------------------------------------------------------------------- */
.figure {
  margin: 0;
  width: 100%;
}

.figure img {
  width: 100%;
  background: var(--brume);
}

.figure figcaption {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--encre);
}

.figure--petite {
  max-width: 16rem;
}

/* Plan Google Maps intégré (page Contact). Service externe, signalé dans la
   politique de confidentialité. */
.carte {
  margin-top: var(--bloc);
}

.carte iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 0;
  background: var(--brume);
}

@media (min-width: 48em) {
  .carte iframe,
  .carte__facade img {
    aspect-ratio: 16 / 9;
    max-height: 36rem;
  }
}

.carte__note {
  margin: 0.75rem 0 0;
  font-size: 0.95rem;
}

/* Façade du plan (10 septembre 2026) : image fixe du quartier, bouton par-dessus ; l’iframe Google Maps
   la remplace au clic (js/main.js) et reprend les règles de .carte iframe. */
.carte__facade {
  position: relative;
}

.carte__facade img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--brume);
}

.carte__bouton {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  box-shadow: 0 0.25rem 1rem rgba(38, 52, 66, 0.35);
}

.carte__credit {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
}

.illustration {
  width: 100%;
  max-width: 24rem;
}

/* Dans un bloc Ardoise, le trait passe en Papier par simple inversion. */
.section--ardoise .illustration,
.appel .illustration {
  filter: invert(1) hue-rotate(180deg);
}

/* --------------------------------------------------------------------------
   Portes d'entrée (trois colonnes égales, sans cartes)
   -------------------------------------------------------------------------- */
.portes {
  display: grid;
  gap: 2.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: none;
}

.portes li + li {
  margin-top: 0;
}

.porte {
  padding-top: 1.25rem;
  border-top: 2px solid var(--ardoise);
}

.porte h3 {
  margin-bottom: 0.6em;
}

.porte p {
  margin-bottom: 0.8em;
  color: var(--encre);
}

/* Porte avec photo : l'image d'abord, puis le filet et le texte. Aucun cadre. */
.porte--photo {
  padding-top: 0;
  border-top: 0;
}

.porte--photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--brume);
}

.porte__texte {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 2px solid var(--ardoise);
}

/* Version courte : le paragraphe reste dans la page (lecteurs d'écran, moteurs
   de recherche) mais n'est pas affiché ; seuls le titre et le lien sont visibles. */
.porte__texte--court h3 {
  margin-bottom: 0.5em;
}

/* La photo et le titre mènent à la page, comme le lien « En savoir plus ».
   Seule la photo réagit au survol (léger agrandissement) ; le titre, jamais.
   La photo est retirée de la tabulation : le lien texte suffit au clavier. */
.porte__lien {
  display: block;
  overflow: hidden;
}

.porte__lien img {
  transition: transform 300ms ease, opacity 300ms ease;
}

.porte__lien:hover img,
.porte:hover .porte__lien img {
  transform: scale(1.03);
  opacity: 0.94;
}

@media (prefers-reduced-motion: reduce) {
  .porte__lien:hover img,
  .porte:hover .porte__lien img {
    transform: none;
  }
}

.porte__titre,
.porte__titre:hover,
.porte__titre:focus-visible,
.porte:hover .porte__titre {
  color: inherit;
  text-decoration: none;
}

@media (min-width: 48em) {
  .portes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 3.5rem);
  }
}

/* Panneaux : sur grand écran, les trois rubriques quittent la colonne de lecture
   et couvrent toute la largeur de l'écran, bord à bord, sans gouttière. Le titre
   et le lien se posent sur le bas de chaque photo, sur un voile Ardoise, comme
   sur les premiers écrans. Sur mobile, la grille empilée reste inchangée. */
@media (min-width: 48em) {
  .portes--panneaux {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: 2.5rem;
    gap: 0;
  }

  /* Page Services : les panneaux suivent directement le premier écran, sans vide. */
  .section--panneaux,
  .accroche + .section--panneaux {
    padding-top: 0;
  }

  .section--panneaux .portes--panneaux {
    margin-top: 0;
  }

  .portes--panneaux .porte {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 0;
    border: 0;
    background: var(--ardoise);
  }

  .portes--panneaux .porte--photo img {
    height: clamp(26rem, 58vh, 40rem);
    aspect-ratio: auto;
  }

  .portes--panneaux .porte__texte {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    margin: 0;
    padding: 5rem clamp(1.5rem, 3vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
    border: 0;
    color: var(--papier);
    background: linear-gradient(to top, rgba(38, 52, 66, 0.94), rgba(38, 52, 66, 0.6) 55%, rgba(38, 52, 66, 0));
    pointer-events: none;
  }

  .portes--panneaux .porte__texte > * {
    pointer-events: auto;
  }

  .portes--panneaux .porte h3 {
    font-size: clamp(1.4rem, 1.2rem + 0.9vw, 2rem);
    color: var(--papier);
    margin-bottom: 0.45em;
  }

  .portes--panneaux .lien-suite {
    color: var(--papier);
  }

  .portes--panneaux .lien-suite:hover {
    color: #fff;
  }

  .portes--panneaux :focus-visible {
    box-shadow: 0 0 0 3px var(--ardoise), 0 0 0 6px var(--papier);
  }
}

/* --------------------------------------------------------------------------
   Grille deux colonnes générique (texte + réserve)
   -------------------------------------------------------------------------- */
.duo {
  display: grid;
  gap: 2rem;
  align-items: start;
}

/* Photo dans une section : bord à bord sur mobile, jusqu'au bord droit de l'écran ensuite. */
.duo--photo .figure {
  width: calc(100% + 2 * var(--gouttiere));
  margin-inline: calc(-1 * var(--gouttiere));
}

.duo--photo .figure img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.duo--photo .figure--carree img {
  aspect-ratio: 1;
}

/* Photo verticale (la patère) : proportions 4:5 gardées sur mobile, haut de la
   photo privilégié quand la boîte est moins haute que l'image. */
.duo--photo .figure--haute img {
  aspect-ratio: 4 / 5;
  object-position: 50% 10%;
}

.duo--trait .illustration {
  max-width: none;
}

@media (min-width: 48em) {
  .duo {
    --duo-ecart: clamp(2rem, 5vw, 5rem);
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--duo-ecart);
  }

  .duo--inverse {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }

  .duo--inverse .duo__media {
    order: -1;
  }

  .duo--photo,
  .duo--trait {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }

  .duo--photo .figure {
    width: calc(100% + var(--gouttiere) + max(0px, (100vw - 72rem) / 2));
    margin: 0;
  }

  .duo--photo .figure img {
    aspect-ratio: 5 / 4;
  }

  .duo--photo .figure--carree img {
    aspect-ratio: 1;
  }

  /* Variante inversée : la photo à gauche, jusqu'au bord gauche de l'écran. */
  .duo--photo.duo--inverse .figure {
    width: calc(100% + var(--gouttiere) + max(0px, (100vw - 72rem) / 2));
    margin-left: calc(-1 * (var(--gouttiere) + max(0px, (100vw - 72rem) / 2)));
  }

  .duo--trait .illustration {
    width: calc(100% + 3rem);
    margin-left: -3rem;
  }
}

/* --------------------------------------------------------------------------
   Section photo : la photo occupe toute la hauteur de la section, bord à bord,
   et le texte garde l'espace vertical. Deux sections photo qui se suivent
   (photo à gauche puis à droite) se touchent par les coins, sans vide entre elles.
   -------------------------------------------------------------------------- */
@media (min-width: 48em) {
  .section--photo {
    padding-block: 0;
  }

  .section--photo .duo--photo {
    align-items: stretch;
  }

  .section--photo .duo--photo > :first-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--bloc);
  }

  .section--photo .duo--photo .duo__media,
  .section--photo .duo--photo .figure {
    height: 100%;
  }

  .section--photo .duo--photo .figure img {
    height: 100%;
    min-height: 26rem;
    aspect-ratio: auto;
    object-fit: cover;
  }

  /* Les photos avancent jusqu'au milieu de la gouttière : deux sections qui se
     suivent se touchent exactement par les coins. Le texte garde une demi-gouttière. */
  .section--photo .duo--photo:not(.duo--inverse) .figure {
    width: calc(100% + var(--gouttiere) + max(0px, (100vw - 72rem) / 2) + var(--duo-ecart) / 2);
    margin-left: calc(-1 * var(--duo-ecart) / 2);
  }

  .section--photo .duo--photo.duo--inverse .figure {
    width: calc(100% + var(--gouttiere) + max(0px, (100vw - 72rem) / 2) + var(--duo-ecart) / 2);
  }
}

/* --------------------------------------------------------------------------
   Trois colonnes de texte (Comment je travaille)
   -------------------------------------------------------------------------- */
.trio {
  display: grid;
  gap: 2rem;
  margin-top: 2rem;
}

.trio h3 {
  font-family: var(--sans);
  font-size: 1.05em;
  font-weight: 650;
  max-width: none;
  margin-bottom: 0.4em;
}

.trio p {
  color: var(--encre);
}

@media (min-width: 48em) {
  .trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 3.5rem);
  }
}

/* --------------------------------------------------------------------------
   Liste de définitions (infos en bref, coordonnées)
   -------------------------------------------------------------------------- */
.bref {
  display: grid;
  gap: 1.25rem;
  margin: 1.5rem 0 0;
  max-width: var(--mesure);
}

.bref div {
  padding-top: 1rem;
  border-top: 1px solid var(--trait);
}

.bref dt {
  font-weight: 650;
  margin-bottom: 0.2em;
}

.bref dd {
  margin: 0;
  color: var(--encre);
}

@media (min-width: 48em) {
  .bref--large {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
    gap: 2rem;
  }
}

/* --------------------------------------------------------------------------
   Séquence réelle (déroulement en étapes)
   -------------------------------------------------------------------------- */
.etapes {
  list-style: none;
  counter-reset: etape;
  padding: 0;
  margin: 1.5rem 0 0;
  max-width: var(--mesure);
}

.etapes li {
  counter-increment: etape;
  position: relative;
  padding-left: 3rem;
  padding-bottom: 1.5rem;
  margin: 0;
}

.etapes li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-variation-settings: "opsz" 12;
  font-size: 1.1rem;
  color: var(--papier);
  background: var(--ardoise);
  border-radius: 50%;
}

.etapes li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(1rem - 0.5px);
  top: 2.3rem;
  bottom: 0.3rem;
  width: 1px;
  background: var(--trait);
}

.etapes h3 {
  font-family: var(--sans);
  font-size: 1.05em;
  font-weight: 650;
  max-width: none;
  margin-bottom: 0.3em;
}

.etapes p {
  margin-bottom: 0;
  color: var(--encre);
}

/* --------------------------------------------------------------------------
   FAQ en accordéon (details natif)
   -------------------------------------------------------------------------- */
.faq {
  max-width: 44rem;
  border-top: 1px solid var(--ardoise);
}

.faq details {
  border-bottom: 1px solid var(--trait);
}

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0.25rem;
  font-family: var(--serif);
  font-variation-settings: "opsz" 18;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  margin-top: 0.35em;
  border-right: 2px solid var(--brique);
  border-bottom: 2px solid var(--brique);
  transform: rotate(45deg);
  transition: transform 150ms ease;
}

.faq details[open] summary::after {
  transform: rotate(-135deg);
  margin-top: 0.6em;
}

.faq summary:hover {
  color: var(--vert);
}

.faq .faq__reponse {
  padding: 0 0.25rem 1.5rem;
  color: var(--encre);
}

.faq .faq__reponse p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Formulaire
   L'ancre #formulaire est la cible de tous les boutons « Prendre contact ».
   -------------------------------------------------------------------------- */
#formulaire,
#approche {
  scroll-margin-top: 1.5rem;
}

.formulaire {
  max-width: 34rem;
}

.champ {
  margin-bottom: 1.4rem;
}

.champ label {
  display: block;
  font-weight: 650;
  margin-bottom: 0.4rem;
}

.champ__aide {
  display: block;
  font-size: 0.92em;
  color: var(--encre);
  margin-bottom: 0.5rem;
}

.champ input,
.champ textarea {
  display: block;
  width: 100%;
  font: inherit;
  color: var(--ardoise);
  background: #fff;
  border: 1.5px solid var(--encre);
  border-radius: var(--rayon);
  padding: 0.7em 0.85em;
}

.champ textarea {
  min-height: 9rem;
  resize: vertical;
}

.champ input:focus-visible,
.champ textarea:focus-visible {
  border-color: var(--brique);
  box-shadow: var(--focus);
}

.champ--piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulaire__etat {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--ardoise);
  background: var(--brume);
}

.formulaire__etat:empty {
  display: none;
}

.formulaire__etat--erreur {
  border-left-color: var(--brique);
}

.formulaire__note {
  font-size: 0.92em;
  color: var(--encre);
}

/* --------------------------------------------------------------------------
   Avis d'urgence
   -------------------------------------------------------------------------- */
.urgence {
  max-width: var(--mesure);
  padding: 1rem 1.25rem;
  border: 1px solid var(--ardoise);
  border-radius: 0;
}

.urgence p {
  margin: 0;
}

.urgence p + p {
  margin-top: 0.5em;
}

/* --------------------------------------------------------------------------
   Appel final
   -------------------------------------------------------------------------- */
.appel {
  position: relative;
  isolation: isolate;
  padding-block: var(--bloc);
  background: var(--ardoise) url("../images/fond-bois-1600.webp") center / cover no-repeat;
  color: var(--papier);
}

/* Le bois gris du bureau passe sous un voile Ardoise : la texture reste, le contraste aussi. */
.appel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(38, 52, 66, 0.86);
}

.appel h2 {
  color: var(--papier);
}

.appel p {
  color: var(--brume);
}

.appel a {
  color: var(--papier);
}

.appel .bouton {
  color: var(--ardoise);
  background: var(--papier);
  border-color: var(--papier);
}

.appel .bouton:hover {
  background: #fff;
  border-color: #fff;
}

.appel :focus-visible {
  box-shadow: 0 0 0 3px var(--ardoise), 0 0 0 6px var(--papier);
}

.appel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
  margin-top: 1.5rem;
}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.pied {
  background: var(--ardoise);
  color: var(--brume);
  padding-block: 3rem 2.5rem;
  font-size: 0.95rem;
  border-top: 1px solid rgba(228, 231, 234, 0.25);
}

.pied :focus-visible {
  box-shadow: 0 0 0 3px var(--ardoise), 0 0 0 6px var(--papier);
}

.pied a {
  color: var(--papier);
}

.pied a:hover {
  color: #fff;
}

.pied__grille {
  display: grid;
  gap: 2rem;
}

.pied h2 {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brume);
  margin-bottom: 0.75rem;
  max-width: none;
}

.pied p {
  margin-bottom: 0.5em;
}

.pied ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pied__nom {
  font-family: var(--serif);
  font-variation-settings: "opsz" 18;
  font-size: 1.35rem;
  color: var(--papier);
  margin-bottom: 0.15em;
}

.pied__urgence {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(228, 231, 234, 0.25);
}

.pied__urgence p {
  max-width: none;
}

.pied__credit {
  margin-top: 1.75rem;
  margin-bottom: 0;
  font-size: 0.85rem;
  max-width: none;
}

@media (min-width: 48em) {
  .pied__grille {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 3rem;
  }
}

/* --------------------------------------------------------------------------
   Contenu de page longue (politique, accessibilité)
   -------------------------------------------------------------------------- */
.prose h2 {
  margin-top: 2em;
}

.prose h3 {
  margin-top: 1.5em;
}

/* --------------------------------------------------------------------------
   Mouvement : un seul moment, à l'arrivée sur l'accueil
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* Le texte seulement (10 septembre 2026) : une photo qui nait a opacite zero n'est pas retenue comme
     element LCP par Chrome, qui se rabattait sur le nom de l'en-tete. La photo s'affiche des qu'elle arrive. */
  .accroche--anime .accroche__cadre {
    animation: apparition 700ms ease-out both;
  }

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Impression
   -------------------------------------------------------------------------- */
@media print {
  .entete,
  .barre-basse,
  .menu-bouton,
  .voile,
  .evitement {
    display: none;
  }

  body {
    padding-bottom: 0;
    background: #fff;
    color: #000;
  }

  a {
    color: #000;
  }
}

/* --------------------------------------------------------------------------
   Bloc « Les autres services » (bas des pages de service) : les deux autres
   services, puis le retour vers la page Services. Texte seulement, sans photo.
   Aucun effet de survol sur les titres, comme dans la rubrique « Pour quoi consulter ».
   -------------------------------------------------------------------------- */
.autres-services__liste {
  display: grid;
  gap: 1.5rem 2.5rem;
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  max-width: none;
}

.autres-services__liste li + li {
  margin-top: 0;
}

.autres-services__item {
  padding-top: 1rem;
  border-top: 2px solid var(--ardoise);
}

.autres-services__titre {
  margin-bottom: 0.4em;
}

.autres-services__titre a,
.autres-services__titre a:hover {
  color: inherit;
  text-decoration: none;
}

.autres-services__titre a:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.autres-services__item p {
  margin-bottom: 0;
  color: var(--encre);
}

.autres-services__tous {
  margin-bottom: 0;
}

@media (min-width: 48em) {
  .autres-services__liste {
    grid-template-columns: 1fr 1fr;
  }
}