/* ==========================================================================
   TONTON CANIN — LE SOCLE
   Ce qui est vrai sur TOUTES les pages : la matière, la typographie, le
   loader, le curseur, l'en-tête, le pied de page, les boutons, la pop-up
   de contact.
   Chaque pièce a sa planche : socle-fond.html, socle-loader.html,
   socle-curseur.html, socle-transition.html, socle-header.html,
   socle-footer.html, socle-contact.html.
   ========================================================================== */

/* --- 1 · LES POLICES ------------------------------------------------------
   Deux familles, deux rôles. Nunito porte le rond du logo dans les titres ;
   Newsreader porte les textes longs, qui sont des lettres et non des fiches.
   Une police variable se déclare par son INTERVALLE de graisse : écrire
   font-weight: 400 perdrait l'axe. */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("/polices/nunito-variable-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/polices/newsreader-variable-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("/polices/newsreader-variable-latin-italic.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- 2 · LA PALETTE -------------------------------------------------------
   Mesurée sur la charte du client (le PDF « Tonton Canin — Logo et Charte »).
   Le brun de la charte, #9B6131, ne fait que 4,48:1 sur le crème : il porte
   donc les TITRES et les aplats, jamais un texte courant. Pour un texte ou un
   lien sur crème, c'est --brun-lisible (5,50:1) — la même famille, assombrie. */
:root {
  --creme:         #F6EFE6;
  --creme-fonce:   #EADCCB;
  --chair:         #E3C8AF;   /* la charte, employée SUR le noir */
  --truffe:        #0E0B09;
  --truffe-clair:  #1C1613;
  --brun:          #9B6131;   /* la charte : titres, filets, aplats */
  --brun-lisible:  #8A5227;   /* la charte assombrie : TEXTE et liens */
  --encre:         #33261C;   /* le texte courant, 10,3:1 sur le crème */
  --encre-douce:   #5A4635;

  --colonne:       66ch;      /* jamais plus de 80 caractères par ligne */
  --large:         1180px;
  --marge:         clamp(1.25rem, 5vw, 4rem);

  --rayon:         18px;
  --rayon-doux:    12px;

  /* LES COURBES — celles du barème du studio, et rien d'autre. Une courbe
     écrite « parce qu'elle a l'air familière » est un défaut système déguisé
     en décision. */
  --sortie:        cubic-bezier(0.23, 1, 0.32, 1);     /* le défaut de toute interface */
  --entre-deux:    cubic-bezier(0.77, 0, 0.175, 1);    /* d'un point à un autre de l'écran */
  --tiroir:        cubic-bezier(0.32, 0.72, 0, 1);     /* un panneau qui coulisse */

  /* LES DURÉES — la table du barème. Tout ce qui est INTERFACE reste sous
     300 ms ; seule la mise en page éditoriale (l'approche au défilement, le
     geste signature) a le droit d'être plus lente, et c'est déclaré. */
  --appui:         140ms;   /* retour d'appui sur un bouton : 100–160 */
  --interface:     240ms;   /* survol, bascule, filet qui court : < 300 */
  --menu:          230ms;   /* menu déroulant : 150–250 */
  --modale:        320ms;   /* fenêtre, tiroir : 200–500 */
  --editorial:     620ms;   /* dérogation déclarée : ce n'est pas de l'outillage */

  --ombre-proche:  0 2px 8px rgba(14, 11, 9, .06), 0 10px 24px rgba(14, 11, 9, .06);
  --ombre-levee:   0 6px 14px rgba(14, 11, 9, .09), 0 22px 48px rgba(14, 11, 9, .12);
}

/* --- 3 · LE VOILE DU LOADER ----------------------------------------------
   Il est écrit ICI, conditionné à une classe, pour couvrir dès la première
   image peinte — bien avant que le script n'existe. Sans script, pas de
   classe, et rien n'est caché : la page est simplement lisible. */
html.socle-loader-verrou,
html.socle-loader-verrou body { overflow: hidden; }

html.socle-loader-verrou::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  pointer-events: none;
  background: var(--creme);
}

.socle-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--creme);
  transition: opacity 420ms var(--sortie);
}
.socle-loader--sortie { opacity: 0; }

.socle-loader-truffe {
  width: clamp(96px, 18vw, 168px);
  height: auto;
  animation: socle-respire 1700ms var(--sortie) infinite;
}
.socle-loader-nom {
  margin-top: 1.1rem;
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.1rem, 3.4vw, 1.45rem);
  letter-spacing: .02em;
  color: var(--truffe);
  text-align: center;
}
.socle-loader-nom em {
  display: block;
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: .78em;
  color: var(--brun-lisible);
  letter-spacing: 0;
}

@keyframes socle-respire {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.055); }
}

/* --- 4 · LE FOND ---------------------------------------------------------
   Du papier crème, et un grain. Le grain est un bruit SVG en ligne : aucune
   requête, aucun raccord visible, et il donne à l'aplat la matière que la
   truffe du logo promet. La photographie de truffe, elle, ne se répète
   jamais : elle s'emploie EN GRAND (voir .signe-truffe). */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--creme);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.42'/%3E%3C/svg%3E");
  color: var(--encre);
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-size: clamp(1.02rem, .97rem + .28vw, 1.16rem);
  font-weight: 400;
  line-height: 1.68;
  overflow-x: hidden;
}

/* La signature du site : la truffe du client, en grand, coupée par le bord,
   derrière le texte. Jamais en motif répété — c'est une photographie. */
.signe-truffe {
  --parallaxe: 0px;              /* écrite par le socle sur CET élément — jamais sur :root */
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: .5;
  mix-blend-mode: multiply;
  filter: contrast(1.1);
  transform: translate3d(0, var(--parallaxe), 0);
}
.signe-truffe img { display: block; width: 100%; height: auto; }

/* --- 5 · LA TYPOGRAPHIE EN EMPLOI ---------------------------------------- */
h1, h2, h3, h4 {
  font-family: "Nunito", system-ui, -apple-system, sans-serif;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.012em;
  color: var(--truffe);
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.3rem + 3.6vw, 4rem); }
h2 { font-size: clamp(1.62rem, 1.15rem + 2.1vw, 2.65rem); }
h3 { font-size: clamp(1.18rem, 1.02rem + .7vw, 1.5rem); font-weight: 700; }
h4 { font-size: 1.04rem; font-weight: 700; }

p { margin: 0 0 1.15em; max-width: var(--colonne); }
p:last-child { margin-bottom: 0; }

a { color: var(--brun-lisible); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--truffe); }

strong { font-weight: 600; color: var(--truffe); }

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

/* Le filet brun de la charte, qui ouvre une section. */
.filet {
  display: block;
  width: 56px;
  height: 3px;
  border: 0;
  margin: 0 0 1.5rem;
  background: var(--brun);
  border-radius: 2px;
}

/* La phrase du client, dans l'italique de Newsreader : c'est sa voix. */
.voix {
  font-style: italic;
  font-size: clamp(1.18rem, 1rem + .9vw, 1.55rem);
  line-height: 1.5;
  color: var(--brun-lisible);
  max-width: 34ch;
}

.sur-titre {
  display: block;
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brun-lisible);
  margin-bottom: .9rem;
}

/* --- 6 · LES REPÈRES DE MISE EN PAGE ------------------------------------- */
.enveloppe { width: min(100% - 2 * var(--marge), var(--large)); margin-inline: auto; }
.colonne-lecture { max-width: var(--colonne); }
.section { position: relative; padding-block: clamp(3.5rem, 8vw, 7rem); }
.section--sombre { background: var(--truffe); color: var(--chair); }
.section--sombre h2, .section--sombre h3 { color: var(--creme); }
.section--sombre a { color: var(--chair); }
.section--sombre .sur-titre { color: var(--chair); }
.section--sombre .voix { color: var(--chair); }
.section--creme-fonce { background: var(--creme-fonce); }

/* Ce qui saute la navigation, pour qui entre au clavier. */
.saut {
  position: absolute;
  left: var(--marge);
  top: 0;
  transform: translateY(-140%);
  z-index: 1200;
  padding: .7rem 1.1rem;
  background: var(--truffe);
  color: var(--creme);
  border-radius: 0 0 var(--rayon-doux) var(--rayon-doux);
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--interface) var(--sortie);
}
.saut:focus { transform: translateY(0); color: var(--creme); }

/* --- 7 · LES BOUTONS -----------------------------------------------------
   L'approche : un bouton ne s'éclaire pas, il AVANCE d'un cran. Au doigt, il
   se presse — c'est la même idée sans survol, et c'est la forme tactile du
   geste. Le survol est gardé plus bas : au toucher, il serait faux. */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .82rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--appui) var(--sortie),
              box-shadow var(--interface) var(--sortie),
              background-color var(--interface) var(--sortie),
              color var(--interface) var(--sortie),
              border-color var(--interface) var(--sortie);
}
.bouton--plein { background: var(--truffe); color: var(--creme); box-shadow: var(--ombre-proche); }
.bouton--trait { background: transparent; color: var(--truffe); border-color: var(--brun); }
/* Sur un fond noir, un bouton « trait » couleur truffe est un bouton VIDE —
   mesuré : le libellé avait disparu dans l'ouverture de l'accueil. */
.section--sombre .bouton--trait,
.ouverture .bouton--trait,
.ouverture-service .bouton--trait,
.pied .bouton--trait { color: var(--creme); }
.bouton--clair { background: var(--chair); color: var(--truffe); }
.bouton:active { transform: scale(.97); }

/* Le focus est VISIBLE partout, et il ne dépend d'aucun survol. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--brun-lisible);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- 8 · L'EN-TÊTE -------------------------------------------------------
   Transparente en haut de page, elle prend le crème et une ombre dès qu'on
   défile : le contenu passe dessous, il faut qu'elle reste lisible. */
.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 700;
  padding-block: .8rem;
  background: transparent;
  transition: background-color var(--interface) var(--sortie),
              box-shadow var(--interface) var(--sortie),
              padding var(--interface) var(--sortie);
}
.entete--posee {
  background: rgba(246, 239, 230, .93);
  backdrop-filter: blur(9px);
  box-shadow: 0 1px 0 rgba(155, 97, 49, .18), 0 10px 30px rgba(14, 11, 9, .07);
  padding-block: .5rem;
}
/* Une page dont l'ouverture est NOIRE le déclare sur son en-tête : sinon le
   nom et les liens, qui sont couleur truffe, sont noirs sur noir — mesuré,
   « Tonton » et deux liens du menu avaient purement disparu. Dès que
   l'en-tête se pose sur le crème, elle retrouve ses couleurs normales. */
.entete--sur-sombre:not(.entete--posee) .marque,
.entete--sur-sombre:not(.entete--posee) .marque-nom { color: var(--creme); }
.entete--sur-sombre:not(.entete--posee) .marque-nom span { color: var(--chair); }
.entete--sur-sombre:not(.entete--posee) .marque-baseline { color: rgba(227, 200, 175, .8); }
.entete--sur-sombre:not(.entete--posee) .navigation a { color: var(--creme); }
.entete--sur-sombre:not(.entete--posee) .navigation a[aria-current="page"] { color: var(--chair); }
.entete--sur-sombre:not(.entete--posee) .bascule-menu { color: var(--creme); border-color: var(--chair); }

.entete-rang { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.marque { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--truffe); }
.marque-truffe { width: 46px; height: auto; flex: none; transition: transform var(--interface) var(--sortie); }
.marque-nom {
  display: block;
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.24rem;
  line-height: 1;
  letter-spacing: -.01em;
}
.marque-nom span { color: var(--brun-lisible); }
.marque-baseline {
  display: block;
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  font-size: .78rem;
  line-height: 1.3;
  color: var(--encre-douce);
  margin-top: .12rem;
}

.navigation { display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.9rem); }
.navigation a {
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 700;
  font-size: .98rem;
  color: var(--truffe);
  text-decoration: none;
  padding: .45rem .2rem;
  position: relative;
}
.navigation a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: .18rem;
  height: 2px;
  background: var(--brun);
  border-radius: 2px;
  transition: right var(--interface) var(--sortie);
}
.navigation a[aria-current="page"]::after { right: 0; }
.navigation a[aria-current="page"] { color: var(--brun-lisible); }

.bascule-menu {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 2px solid var(--brun);
  border-radius: 50%;
  background: transparent;
  color: var(--truffe);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: transform var(--appui) var(--sortie);
}
.bascule-menu:active { transform: scale(.97); }
.bascule-menu-traits { display: block; width: 19px; height: 13px; position: relative; }
.bascule-menu-traits::before,
.bascule-menu-traits::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2.2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--menu) var(--sortie);
}
.bascule-menu-traits::before { top: 0; }
.bascule-menu-traits::after  { bottom: 0; }
.bascule-menu[aria-expanded="true"] .bascule-menu-traits::before { transform: translateY(5.4px) rotate(45deg); }
.bascule-menu[aria-expanded="true"] .bascule-menu-traits::after  { transform: translateY(-5.4px) rotate(-45deg); }

@media (max-width: 860px) {
  .bascule-menu { display: inline-flex; }
  .navigation {
    position: fixed;
    inset: 0 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6.2rem var(--marge) 2rem;
    background: var(--creme);
    box-shadow: var(--ombre-levee);
    transform: translateY(-102%);
    /* Un tiroir : sa courbe et sa durée sont celles d'un tiroir. */
    transition: transform var(--modale) var(--tiroir);
    z-index: -1;
  }
  .navigation[data-ouvert="oui"] { transform: translateY(0); }
  .navigation a { padding: .95rem 0; font-size: 1.22rem; border-bottom: 1px solid rgba(155, 97, 49, .22); }
  .navigation a::after { display: none; }
  .marque-baseline { display: none; }
}

/* --- 9 · LE PIED DE PAGE ------------------------------------------------- */
.pied {
  position: relative;
  background: var(--truffe);
  color: var(--chair);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.pied a { color: var(--chair); text-decoration-color: rgba(227, 200, 175, .45); }
.pied a:hover { color: #fff; }
.pied h2, .pied h3 { color: var(--creme); }
.pied-rangs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.pied .marque, .pied .marque-nom { color: var(--creme); }
.pied .marque-nom span { color: var(--chair); }
.pied-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pied-bas {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.4rem;
  border-top: 1px solid rgba(227, 200, 175, .22);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.6rem;
  align-items: center;
  justify-content: space-between;
  font-size: .9rem;
  color: rgba(227, 200, 175, .8);
}
.a-remplir {
  font-style: italic;
  color: var(--brun-lisible);
  background: rgba(155, 97, 49, .14);
  padding: .05em .45em;
  border-radius: 4px;
}
.pied .a-remplir { color: var(--chair); background: rgba(227, 200, 175, .16); }

/* --- 10 · LE BOUTON FLOTTANT DE CONTACT ---------------------------------
   Le système de contact du site : il n'y a pas de page contact, il y a CE
   bouton, présent partout, qui ouvre la pop-up. */
.appel-flottant {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 800;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .85rem 1.35rem .85rem .95rem;
  /* Le liseré n'est pas un ornement : le bouton est FIXE, il ne sait pas ce
     qui passe dessous. Sur le crème il ne se voit presque pas ; sur les
     sections noires, c'est lui qui détache le bouton du fond. */
  border: 2px solid rgba(227, 200, 175, .55);
  border-radius: 999px;
  background: var(--truffe);
  color: var(--creme);
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(14, 11, 9, .22), 0 18px 44px rgba(14, 11, 9, .18);
  transition: transform var(--appui) var(--sortie), background-color var(--interface) var(--sortie);
}
.appel-flottant:active { transform: scale(.97); }
.appel-flottant img { width: 30px; height: auto; flex: none; }

@media (max-width: 560px) {
  .appel-flottant { padding: .8rem 1.15rem .8rem .8rem; font-size: .95rem; }
  .appel-flottant img { width: 26px; }
}

/* --- 11 · LA POP-UP DE CONTACT -------------------------------------------
   Une modale : elle arrive au centre de l'écran (les modales sont exemptées
   de la règle d'ancrage au déclencheur), depuis 0,975 — jamais depuis rien. */
.fenetre-contact {
  width: min(100% - 2rem, 560px);
  max-height: min(100dvh - 2rem, 860px);
  padding: 0;
  border: 0;
  border-radius: var(--rayon);
  background: var(--creme);
  color: var(--encre);
  box-shadow: 0 30px 90px rgba(14, 11, 9, .4);
  overflow: hidden;
}
.fenetre-contact::backdrop { background: rgba(14, 11, 9, .62); backdrop-filter: blur(3px); }
/* Ouverte SANS être modale : c'est le cas sur sa planche, où on la regarde
   posée dans la page au lieu de la faire surgir. Dans le site, elle est
   toujours ouverte par showModal(), donc toujours :modal. */
.fenetre-contact[open]:not(:modal) {
  position: static;
  margin: 0 auto;
  box-shadow: var(--ombre-levee);
  animation: none;
}
.fenetre-contact[open] { animation: socle-approche var(--modale) var(--sortie); }
@keyframes socle-approche {
  from { opacity: 0; transform: translateY(14px) scale(.975); }
  to   { opacity: 1; transform: none; }
}
.fenetre-corps { padding: clamp(1.5rem, 4vw, 2.3rem); overflow-y: auto; max-height: inherit; }
.fenetre-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.fenetre-tete h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); margin-bottom: .3rem; }
.fermer-fenetre {
  flex: none;
  width: 42px;
  height: 42px;
  border: 2px solid rgba(155, 97, 49, .4);
  border-radius: 50%;
  background: transparent;
  color: var(--truffe);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--interface) var(--sortie),
              color var(--interface) var(--sortie),
              transform var(--appui) var(--sortie);
}
.fermer-fenetre:active { transform: scale(.97); }

.champ { display: block; margin-top: 1.05rem; }
.champ-nom {
  display: block;
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 700;
  font-size: .9rem;
  color: var(--truffe);
  margin-bottom: .35rem;
}
.champ-nom .facultatif { font-weight: 400; color: var(--encre-douce); font-family: "Newsreader", Georgia, serif; font-style: italic; }
.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: .72rem .9rem;
  border: 1.5px solid rgba(155, 97, 49, .38);
  border-radius: var(--rayon-doux);
  background: #FFFCF8;
  color: var(--encre);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color var(--interface) var(--sortie), box-shadow var(--interface) var(--sortie);
}
.champ textarea { min-height: 116px; resize: vertical; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  border-color: var(--brun-lisible);
  box-shadow: 0 0 0 3px rgba(155, 97, 49, .16);
}
.champ input:user-invalid,
.champ textarea:user-invalid { border-color: #A6331F; }

.fenetre-pied { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.mention-donnees { font-size: .86rem; color: var(--encre-douce); max-width: 46ch; }

/* Les deux états de l'envoi sont ÉCRITS dans la page : le script bascule
   entre eux, il n'en fabrique aucun texte. */
.suite-envoi {
  display: none;
  margin-top: 1.4rem;
  padding: 1.2rem 1.3rem;
  border-radius: var(--rayon-doux);
  background: var(--creme-fonce);
  border-left: 4px solid var(--brun);
}
.suite-envoi[data-visible="oui"] { display: block; }
.formulaire-contact[data-envoye="oui"] { display: none; }

/* --- 12 · LE CURSEUR ------------------------------------------------------
   Une truffe : un disque noir, une petite luisance, et un halo brun qui
   arrive en retard. Les deux sont INTERPOLÉS — une valeur liée directement à
   la position n'a aucune inertie, et ça se voit. Il ne se montre qu'à la
   souris : au doigt il n'y a pas de survol, et le pointeur du système reste
   celui du système. */
.curseur, .curseur-halo { display: none; }

@media (hover: hover) and (pointer: fine) {
  .curseur, .curseur-halo {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2147483000;
    pointer-events: none;
    border-radius: 50%;
    will-change: transform;
  }
  .curseur {
    width: 15px;
    height: 15px;
    margin: -7.5px 0 0 -7.5px;
    background:
      radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .55) 0 12%, rgba(255, 255, 255, 0) 46%),
      var(--truffe);
    transition: width var(--interface) var(--sortie), height var(--interface) var(--sortie),
                margin var(--interface) var(--sortie), opacity var(--interface) var(--sortie);
  }
  .curseur-halo {
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 1.6px solid rgba(155, 97, 49, .55);
    transition: width var(--interface) var(--sortie), height var(--interface) var(--sortie),
                margin var(--interface) var(--sortie), background-color var(--interface) var(--sortie),
                border-color var(--interface) var(--sortie), opacity var(--interface) var(--sortie);
  }
  /* Il sent quelque chose : le halo s'ouvre, la truffe se resserre. */
  body[data-curseur="sent"] .curseur { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
  body[data-curseur="sent"] .curseur-halo {
    width: 62px; height: 62px; margin: -31px 0 0 -31px;
    background: rgba(155, 97, 49, .14);
    border-color: var(--brun);
  }
  /* Il renifle : une compression brève à l'appui. */
  body[data-curseur-appui="oui"] .curseur-halo { width: 46px; height: 46px; margin: -23px 0 0 -23px; }

  body[data-curseur-present="oui"],
  body[data-curseur-present="oui"] :where(a, button, summary, [role="button"]) { cursor: none; }
  /* Les champs gardent le curseur du système : on écrit dedans. */
  body[data-curseur-present="oui"] :where(input, textarea, select) { cursor: auto; }
}

/* --- 13 · LES SURVOLS ----------------------------------------------------
   Tous gardés : au tactile, un « survol » est déclenché par le premier
   toucher et reste collé — c'est un faux état, et il se voit. */
@media (hover: hover) and (pointer: fine) {
  .bouton--plein:hover { background: var(--brun-lisible); color: #fff; transform: translateY(-3px); box-shadow: var(--ombre-levee); }
  .bouton--trait:hover { background: var(--brun); color: #fff; transform: translateY(-3px); box-shadow: var(--ombre-proche); }
  .bouton--clair:hover { background: #fff; color: var(--truffe); transform: translateY(-3px); }
  .marque:hover .marque-truffe { transform: scale(1.09) rotate(-3deg); }
  .navigation a:hover::after { right: 0; }
  .fermer-fenetre:hover { background: var(--brun); color: #fff; }
  .appel-flottant:hover { transform: translateY(-4px) scale(1.03); background: var(--brun-lisible); }
}

/* --- 14 · L'APPROCHE AU DÉFILEMENT ---------------------------------------
   Rien n'apparaît : tout s'approche — une translation courte ET une échelle
   qui part de 0,994, jamais un fondu seul. C'est de l'éditorial, donc la
   dérogation au plafond de 300 ms s'applique et elle est déclarée.
   L'état de départ n'est posé QUE si le script a pris la main. */
.js .approche { opacity: 0; transform: translateY(26px) scale(.994); }
.approche { transition: opacity var(--editorial) var(--sortie), transform var(--editorial) var(--sortie); }
.approche[data-vue="oui"] { opacity: 1; transform: none; }

/* --- 15 · LA TRANSITION DE PAGE ------------------------------------------
   Native, sans un octet de bibliothèque : les navigateurs qui ne la
   connaissent pas changent de page comme avant, sans rien casser. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: socle-sortie 200ms var(--entre-deux) both; }
::view-transition-new(root) { animation: socle-entree 320ms var(--sortie) both; }
@keyframes socle-sortie { to { opacity: 0; transform: translateY(-10px); } }
@keyframes socle-entree { from { opacity: 0; transform: translateY(14px); } }

/* --- 16 · LE MOUVEMENT RÉDUIT -------------------------------------------
   Il part AVEC l'animation, jamais dans une passe d'après. On garde
   l'opacité et la couleur — ce sont elles qui disent qu'un bouton a répondu
   — et on retire tout DÉPLACEMENT. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .socle-loader-truffe { animation: none; }
  .js .approche { opacity: 1; transform: none; transition: none; }
  .curseur, .curseur-halo { display: none; }
  body[data-curseur-present="oui"] { cursor: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .fenetre-contact[open] { animation: none; }
  .bouton:hover, .bouton:active,
  .appel-flottant:hover, .appel-flottant:active,
  .marque:hover .marque-truffe,
  .bascule-menu:active, .fermer-fenetre:hover, .fermer-fenetre:active { transform: none; }
  .navigation { transition: none; }
}

/* --- 17 · CE QUI NE SE VOIT QUE D'UN LECTEUR D'ÉCRAN --------------------- */
.pour-l-oreille {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}