/* ============================================================================
   OPAQ — base.css
   ----------------------------------------------------------------------------
   La base commune aux six pages et les composants, en direction claire (plan,
   révision R). Utilise les jetons de jetons.css, chargé juste avant.
      1. Réinitialisation              9. Pied de page
      2. Page et typographie          10. Formulaire de base
      3. Grille                       11. Accordéon de base
      4. Accessibilité                12. Apparitions (data-app)
      5. Liens, repères, filets       13. Défilement adouci (Lenis)
      6. Feuilles, bloc sombre        14. Transitions entre pages
      7. Boutons pilule               15. Réduire les animations
      8. Barre du haut, menu          16. Impression
   Règles : seuls transform, opacity et clip-path s'animent ; les couleurs
   changent d'un coup ; tout survol est sous @media (hover:hover) and
   (pointer:fine) ; aucune ombre, aucun flou, aucun dégradé ; jamais de texte
   cuivre sur crème (le cuivre en texte n'existe que dans .bloc-sombre, par
   le rôle --accent). Les composants n'emploient que les rôles de jetons.css.
   ============================================================================ */

/* 1. Réinitialisation ------------------------------------------------------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote{ margin:0; }
ul, ol{ padding:0; list-style:none; }
img, svg, video, canvas, picture{ display:block; max-width:100%; }
img, video{ height:auto; }
button, input, select, textarea{ font:inherit; color:inherit; letter-spacing:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; }
table{ border-collapse:collapse; }
[hidden]{ display:none !important; }

/* 2. Page et typographie ------------------------------------------------------ */
html{
  color-scheme:light;
  background:var(--fond);
  scrollbar-gutter:stable;
  scroll-padding-top:calc(var(--nav-h) + 16px);
  -webkit-tap-highlight-color:transparent;
}
/* Menu ouvert : la page ne défile plus (le panneau, lui, défile). */
html:has(.nav-menu[open]){ overflow:hidden; }

body{
  min-height:100vh;
  background:var(--fond);
  color:var(--texte);
  font-family:var(--sans);
  font-size:var(--fs-corps);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}

/* Titres : Inter très gras, serré, sûr de lui. */
h1, h2, h3{
  font-family:var(--sans);
  color:var(--texte);
  text-wrap:balance;
}
h1{
  font-size:var(--fs-tete); font-weight:var(--g-une);
  line-height:var(--il-une); letter-spacing:var(--ap-une);
}
h2{
  font-size:var(--fs-h2); font-weight:var(--g-h2);
  line-height:var(--il-h2); letter-spacing:var(--ap-h2);
}
h3{
  font-size:var(--fs-h3); font-weight:var(--g-h3);
  line-height:var(--il-h3); letter-spacing:var(--ap-h3);
}
/* Le plus grand titre (h1 de l'accueil, « Parlons de… » des fins de page). */
.une{
  font-size:var(--fs-une); font-weight:var(--g-une);
  line-height:var(--il-une); letter-spacing:var(--ap-une);
}
/* L'accent : Fraunces italique, fine, à l'encre sur crème et cuivre sur
   bloc sombre (rôle --em). La force du grotesque, la finesse de l'italique. */
:is(h1, h2, h3, .une) em{
  font-family:var(--serif);
  font-style:italic;
  font-weight:var(--g-em);
  font-optical-sizing:auto;
  letter-spacing:var(--ap-em);
  color:var(--em);
}
p{ text-wrap:pretty; }

a{ color:inherit; text-decoration-thickness:1px; text-underline-offset:.22em; }
/* Liens dans le texte : soulignés d'un filet cuivre (un trait, pas du texte). */
:is(p, li, dd) a:not(.btn){ text-decoration-color:var(--trait); }
@media (hover:hover) and (pointer:fine){
  :is(p, li, dd) a:not(.btn):hover{ text-decoration-thickness:2px; }
}
::selection{ background:var(--anthracite); color:var(--creme); }
.bloc-sombre::selection, .bloc-sombre ::selection{ background:var(--cuivre); color:var(--anthracite); }

/* 3. Grille --------------------------------------------------------------------
   .wrap : la largeur utile (1312 px au plus), centrée, avec la marge latérale.
   .grille : 4, 8 ou 12 colonnes selon la largeur, gouttière comprise. */
.wrap{
  width:100%;
  max-width:calc(var(--largeur-utile) + 2 * var(--marge));
  margin-inline:auto;
  padding-left:max(var(--marge), env(safe-area-inset-left));
  padding-right:max(var(--marge), env(safe-area-inset-right));
}
.grille{
  display:grid;
  grid-template-columns:repeat(var(--colonnes), minmax(0, 1fr));
  column-gap:var(--gouttiere);
}

/* 4. Accessibilité --------------------------------------------------------------
   Focus : anneau de 2 px décalé de 3 px, anthracite sur crème, cuivre sur
   bloc sombre (rôle --focus). Il suit l'arrondi des pilules et des champs. */
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
.sr{
  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;
}
.skip{
  position:fixed; left:max(var(--marge), env(safe-area-inset-left)); top:8px; z-index:100;
  display:inline-flex; align-items:center; min-height:44px; padding:0 20px;
  border-radius:var(--rayon-pilule);
  background:var(--anthracite); color:var(--creme);
  font-size:var(--fs-petit); font-weight:500; text-decoration:none;
  transform:translateY(calc(-100% - 16px));
}
.skip:focus{ transform:none; }

/* 5. Liens, repères, filets -------------------------------------------------------- */
/* Lien hors du texte courant : 44 px de haut au moins, souligné d'un filet cuivre. */
.lien{
  display:inline-flex; align-items:center; min-height:44px;
  font-weight:500; color:var(--texte);
  text-decoration:underline; text-decoration-color:var(--trait);
  text-decoration-thickness:1px; text-underline-offset:.22em;
}
@media (hover:hover) and (pointer:fine){
  .lien:hover{ text-decoration-thickness:2px; }
}

/* Repères : sur-titres et numéros de section (« 01 En bref »). Anthracite à
   72 % sur crème, cuivre sur bloc sombre (rôle --reperes). */
.reperes{
  display:flex; align-items:baseline; flex-wrap:wrap; column-gap:.9em;
  font-family:var(--sans); font-size:var(--fs-reperes); font-weight:500;
  line-height:1.4; letter-spacing:.14em; text-transform:uppercase;
  color:var(--reperes);
  font-variant-numeric:lining-nums tabular-nums;
}

/* Filets : 1 px, nets. Le filet cuivre est une variante (permise sur crème :
   c'est un trait, pas du texte). */
.filet{
  display:block; height:1px; border:0; margin:0;
  background:var(--filet-fort);
  transform-origin:left center;
}
.filet-doux{ background:var(--filet); }
.filet-cuivre{ background:var(--cuivre); }

/* Coins arrondis des images, fenêtres et cartes (plan R.3). */
.arrondi{ border-radius:var(--rayon); overflow:hidden; overflow:clip; }

/* 6. Feuilles, bloc sombre ------------------------------------------------------------
   Feuilles : surfaces opaques qui portent le texte au-dessus de la scène 3D.
   Elles prennent le fond du rôle en cours (crème, ou anthracite dans un bloc
   sombre) ; .feuille-creme force le clair (rôles redéfinis dans jetons.css).
   Leur filet haut est un .filet posé en premier enfant, qui peut se tracer. */
.feuille, .feuille-creme{ position:relative; background:var(--fond); color:var(--texte); }

/* La devise d'OPAQ (10/10) : en italique serif, petite et atténuée. Deux
   places seulement : sous les boutons de l'ouverture de l'accueil, et sous
   « Parlons de votre site. » (accueil, mentions, 404). */
.devise{
  font-family:var(--serif); font-optical-sizing:auto; font-style:italic; font-weight:400;
  font-size:.9375rem; line-height:1.4; letter-spacing:.01em;
  color:var(--texte-3);
}
.fin-devise{ margin-top:var(--e-4); }
:is(.feuille, .feuille-creme) > .filet:first-child{ position:absolute; inset:0 0 auto 0; }

/* Bloc sombre (plan R.1) : seulement la fin de page + le pied de page, et le
   menu du téléphone ouvert. Les rôles s'inversent (jetons.css). */
.bloc-sombre{ background:var(--fond); color:var(--texte); color-scheme:dark; }

/* La fin de page et le pied de page ne font qu'un bloc : la dernière section
   de <main>, si elle est sombre, se poursuit sans couture dans le pied de
   page. Le bloc arrondit ses coins du haut, comme une feuille posée sur la
   page ; sur les pages sans section de fin, c'est le pied qui les arrondit. */
main > .bloc-sombre:last-child{ border-radius:var(--rayon) var(--rayon) 0 0; overflow:clip; } /* une image à fond perdu suit l'arrondi */
main:not(:has(> .bloc-sombre:last-child)) + .pied{ border-radius:var(--rayon) var(--rayon) 0 0; }

/* 7. Boutons pilule ---------------------------------------------------------------------
   Primaire (.btn-plein) : aplat anthracite et texte crème sur crème ; aplat
   cuivre et texte anthracite sur bloc sombre. Secondaire (.btn-trait) : trait
   de 1,5 px et texte à l'encre (crème sur bloc sombre). Au survol, un voile
   se déroule (clip-path) et le trait final s'allonge ; le libellé ne bouge
   jamais. À l'appui, scale(.98). Les fermetures durent 60 % de l'ouverture. */
.btn{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:56px; min-width:44px; padding:0 28px;
  font-family:var(--sans); font-size:var(--fs-bouton); font-weight:550;
  line-height:1.2; letter-spacing:-.005em; text-align:center; text-decoration:none;
  border:1.5px solid transparent; border-radius:var(--rayon-pilule);
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--d-appui) var(--sortie);
}
.btn::before{ /* le voile */
  content:''; position:absolute; inset:0; z-index:-1;
  clip-path:inset(0 100% 0 0);
  transition:clip-path calc(var(--d-voile) * .6) var(--sortie);
}
.btn::after{ /* le trait final, 18 × 1,5 px */
  content:''; flex:none; width:18px; height:1.5px; background:currentColor;
  transform:scaleX(.6); transform-origin:left center;
  transition:transform calc(var(--d-voile) * .6) var(--sortie);
}
.btn-plein{ background:var(--btn-plein-fond); color:var(--btn-plein-texte); border-width:0; } /* le voile couvre tout */
.btn-plein::before{ background:var(--btn-plein-voile); }
.btn-plein::after{ background:var(--btn-plein-trait); }
.btn-trait{ border-color:var(--btn-trait-bord); color:var(--btn-trait-texte); }
.btn-trait::before{ background:var(--btn-trait-voile); }

.btn:focus-visible::before{ clip-path:inset(0); transition-duration:var(--d-voile); }
.btn:focus-visible::after{ transform:scaleX(1); transition-duration:var(--d-voile); }
@media (hover:hover) and (pointer:fine){
  .btn:hover::before{ clip-path:inset(0); transition-duration:var(--d-voile); }
  .btn:hover::after{ transform:scaleX(1); transition-duration:var(--d-voile); }
}
.btn:active{ transform:scale(.98); }
.btn-plein:active{ background:var(--btn-plein-appui); }
.btn:disabled, .btn[aria-disabled="true"]{ opacity:.6; cursor:progress; }
.btn:disabled:active{ transform:none; }
@media (max-width:859.98px){
  .btn{ min-height:52px; }
}

/* Un groupe de boutons. Sur téléphone, pleine largeur, empilés à 12 px. */
.actions{ display:flex; flex-wrap:wrap; gap:12px; }
@media (max-width:767.98px){
  .actions{ flex-direction:column; align-items:stretch; }
  .actions > .btn{ width:100%; }
}

/* 8. Barre du haut (.nav) et menu du téléphone (.nav-menu) ------------------------------
   Elle ne se cache jamais, sur aucun écran (plan R.4). 72 px à partir de
   860 px de large : logo, trois liens, « Prendre rendez-vous ». En dessous,
   60 px : logo, « Prendre rendez-vous » et « Menu ». Sous 390 px de large, le
   libellé devient « Rendez-vous » : mesuré, le libellé complet, le logo à sa
   taille et « Menu » demandent 386 px avec les marges de 20 px (le plan
   disait 380 : ils déborderaient de la grille entre 380 et 386 px). Sous
   360 px, « Menu » ne garde que son icône.
   Son fond crème à 96 % et son filet bas apparaissent après 8 px de
   défilement (.est-opaque, barres.js) ; sans JavaScript, ils sont là
   d'emblée. Menu ouvert : la barre et le panneau passent en bloc sombre. */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  height:var(--nav-h);
  display:flex; align-items:center; gap:var(--e-2);
  /* Mêmes bords que .wrap, à toutes les largeurs. */
  padding-left:max(var(--marge), env(safe-area-inset-left), (100% - var(--largeur-utile)) / 2);
  padding-right:max(var(--marge), env(safe-area-inset-right), (100% - var(--largeur-utile)) / 2);
  color:var(--texte);
}
.nav::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--barre);
  border-bottom:1px solid var(--filet);
  opacity:0;
  transition:opacity calc(var(--d-ui) * .6) var(--douce);
}
.nav.est-opaque::before{ opacity:1; transition-duration:var(--d-ui); }
html:not(.js) .nav::before{ opacity:1; }
html:has(.nav-menu[open]) .nav::before{ opacity:1; transition:none; }

/* Le logo : tracés du logo, dans la couleur du texte (anthracite, ou crème
   menu ouvert), point cuivre. */
.nav-logo{
  flex:none;
  display:flex; align-items:center; min-height:48px;
  margin-left:-13px; margin-right:auto; /* le « o » s'aligne sur la marge */
  color:var(--texte);
}
.nav-logo svg{ width:94px; height:40px; }

.nav-liens{ display:none; }
.nav-liens a{
  position:relative;
  display:inline-flex; align-items:center; min-height:44px; padding:0 14px;
  font-size:.9375rem; font-weight:500; color:var(--texte-2); text-decoration:none;
}
/* Sous le lien, un trait cuivre de 2 px : tracé sur la page courante, il se
   déroule au survol (s'orienter). */
.nav-liens a::after{
  content:''; position:absolute; left:14px; right:14px; bottom:8px; height:2px;
  background:var(--trait);
  transform:scaleX(0); transform-origin:left center;
  transition:transform calc(var(--d-voile) * .6) var(--sortie);
}
.nav-liens a[aria-current="page"]{ color:var(--texte); }
.nav-liens a[aria-current="page"]::after{ transform:none; }
@media (hover:hover) and (pointer:fine){
  .nav-liens a:hover{ color:var(--texte); }
  .nav-liens a:hover::after{ transform:none; transition-duration:var(--d-voile); }
}

/* « Prendre rendez-vous » : toujours visible, à toutes les largeurs. */
.nav-rdv{ flex:none; min-height:44px; padding:0 14px; font-size:.875rem; white-space:nowrap; }
.nav-rdv::after{ display:none; }
.nav-rdv-court{ display:none; }
@media (max-width:389.98px){
  .nav-rdv{ padding:0 16px; }
  .nav-rdv-long{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  .nav-rdv-court{ display:inline; }
}
/* Menu ouvert : le panneau porte déjà « Prendre rendez-vous ». */
html:has(.nav-menu[open]) .nav-rdv{ visibility:hidden; }

@media (min-width:860px){
  .nav-liens{ display:flex; gap:4px; margin-right:var(--e-4); }
  .nav-rdv{ min-height:48px; padding:0 24px; font-size:.9375rem; }
  .nav-rdv::after{ display:block; }
  .nav-menu{ display:none; }
}

/* Menu du téléphone : un <details>, utilisable sans JavaScript. */
.nav-menu{ flex:none; }
.nav-menu > summary{
  display:flex; align-items:center; gap:8px;
  min-height:48px; min-width:48px; margin-right:-12px; padding:0 12px;
  font-size:.875rem; font-weight:500; color:var(--texte);
  list-style:none; cursor:pointer; user-select:none;
  -webkit-tap-highlight-color:transparent;
}
/* Très petits écrans (moins de 360 px) : le mot « Menu » ne se lit plus qu'à
   la voix ; l'icône reste, cible de 48 × 48. */
@media (max-width:359.98px){
  .nav-menu > summary{ justify-content:center; }
  .nav-menu > summary > span:first-child{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
}
.nav-menu > summary::-webkit-details-marker{ display:none; }
.nav-menu > summary::marker{ content:''; }
/* Deux traits qui deviennent une croix. */
.nav-menu-icone{ position:relative; width:22px; height:10px; }
.nav-menu-icone::before, .nav-menu-icone::after{
  content:''; position:absolute; left:0; width:100%; height:1.5px; background:currentColor;
  transition:transform calc(var(--d-ui) * .6) var(--sortie);
}
.nav-menu-icone::before{ top:0; }
.nav-menu-icone::after{ bottom:0; }
.nav-menu[open] .nav-menu-icone::before{ transform:translateY(4.25px) rotate(45deg); transition-duration:var(--d-ui); }
.nav-menu[open] .nav-menu-icone::after{ transform:translateY(-4.25px) rotate(-45deg); transition-duration:var(--d-ui); }

/* Fermé, le panneau n'a aucune boîte (le navigateur lui en garderait une invisible). */
.nav-menu:not([open]) > .nav-menu-panneau{ display:none; }
.nav-menu-panneau{
  position:fixed; inset:var(--nav-h) 0 0 0;
  display:flex; flex-direction:column;
  padding:var(--e-2) max(var(--marge), env(safe-area-inset-right)) calc(var(--e-7) + env(safe-area-inset-bottom)) max(var(--marge), env(safe-area-inset-left));
  background:var(--fond); color:var(--texte);
  overflow-y:auto; overscroll-behavior:contain;
}
.nav-menu-liens a{
  display:flex; align-items:center; min-height:64px;
  border-bottom:1px solid var(--filet-fort);
  font-family:var(--sans);
  font-size:var(--fs-menu); font-weight:800; line-height:1; letter-spacing:-.035em;
  color:var(--texte); text-decoration:none;
}
.nav-menu-liens a[aria-current="page"]{ color:var(--accent); }
@media (hover:hover) and (pointer:fine){
  .nav-menu-liens a:hover{ color:var(--accent); }
}
.nav-menu-actions{ display:grid; gap:12px; margin-top:var(--e-6); }
@media (min-width:600px){ .nav-menu-actions{ grid-template-columns:1fr 1fr; } }
.nav-menu-actions .btn{ min-height:56px; }
.nav-menu-courriel{
  align-self:flex-start;
  display:inline-flex; align-items:center; min-height:44px; margin-top:var(--e-4);
  color:var(--texte-2);
  text-decoration:underline; text-decoration-color:var(--trait); text-underline-offset:.22em;
}
/* Ouverture : le panneau se découvre, puis ses éléments arrivent, 40 ms d'écart.
   Fermeture instantanée (le <details> masque son contenu d'un coup). */
.nav-menu[open] .nav-menu-panneau{ animation:menu-panneau var(--d-voile) var(--sortie) both; }
.nav-menu[open] :is(.nav-menu-liens a, .nav-menu-actions, .nav-menu-courriel){
  animation:menu-element var(--d-ui) var(--sortie) both;
  animation-delay:calc(var(--i, 0) * 40ms);
}
.nav-menu-liens a:nth-child(2){ --i:1; }
.nav-menu-liens a:nth-child(3){ --i:2; }
.nav-menu-liens a:nth-child(4){ --i:3; }
.nav-menu-liens a:nth-child(5){ --i:4; }
.nav-menu-actions{ --i:5; }
.nav-menu-courriel{ --i:6; }
@keyframes menu-panneau{ from{ clip-path:inset(0 0 100% 0); } to{ clip-path:inset(0); } }
@keyframes menu-element{ from{ opacity:0; transform:translateY(12px); } }

/* 9. Pied de page ------------------------------------------------------------------------
   Toujours dans le bloc sombre (class="pied bloc-sombre"), à la suite de la
   section de fin de la page quand elle existe. Opaque, au-dessus de la scène.
   En bas, le logo « opaq. » géant, de la largeur de la grille. */
.pied{
  position:relative; z-index:2;
  padding-top:var(--e-8);
  padding-bottom:max(var(--e-5), env(safe-area-inset-bottom));
  font-size:var(--fs-corps); line-height:1.5; color:var(--texte-2);
}
/* Seul, sans section de fin au-dessus : il respire comme une section, et
   le filet de raccord ne sert à rien. */
main:not(:has(> .bloc-sombre:last-child)) + .pied{ padding-top:var(--section); }
main:not(:has(> .bloc-sombre:last-child)) + .pied .pied-filet{ display:none; }

.pied-grille{ padding-top:var(--e-8); row-gap:var(--e-7); }
.pied-grille > *{ grid-column:1 / -1; }
.pied-phrase{
  max-width:20em;
  font-size:var(--fs-h3); font-weight:var(--g-h3); line-height:1.2; letter-spacing:var(--ap-h3);
  color:var(--texte);
}
.pied-liens{ display:grid; align-content:start; justify-items:start; }
.pied-liens a, .pied-courriel{
  display:inline-flex; align-items:center; min-height:44px;
  font-weight:500; color:var(--texte); text-decoration:none;
}
.pied-liens a[aria-current="page"]{ color:var(--accent); }
.pied-courriel{ text-decoration:underline; text-decoration-color:var(--trait); text-underline-offset:.22em; }
.pied-contact p{ margin-top:var(--e-2); max-width:22em; font-size:var(--fs-petit); color:var(--texte-3); }
@media (hover:hover) and (pointer:fine){
  .pied-liens a:hover, .pied-courriel:hover{ color:var(--accent); }
}
.pied-base{
  margin-top:var(--e-8); padding-top:var(--e-4);
  border-top:1px solid var(--filet);
  font-size:.8125rem; color:var(--texte-3);
}
/* Le logo géant : tracés du logo, crème, point cuivre ; le « o » sur la marge. */
.pied-logo{ width:100%; height:auto; margin-top:var(--e-7); }
@media (min-width:768px){
  .pied-liens{ grid-column:1 / span 4; }
  .pied-contact{ grid-column:5 / span 4; }
}
@media (min-width:1200px){
  .pied-phrase{ grid-column:1 / span 5; }
  .pied-liens{ grid-column:7 / span 3; }
  .pied-contact{ grid-column:10 / span 3; }
}

/* 10. Formulaire de base ------------------------------------------------------------------
   Étiquette au-dessus ; champ arrondi (14 px) de 56 px, fond à peine plus
   clair que la page, bord anthracite à 60 % (4,2:1). Au focus : bord
   anthracite plein, d'un coup, et anneau de focus qui suit l'arrondi. En
   erreur : message précédé d'un filet cuivre vertical, jamais de rouge ni de
   secousse. */
.formulaire{ display:grid; gap:var(--e-5); }
.champ{ display:grid; gap:var(--e-2); }
.champ label{ font-size:var(--fs-petit); font-weight:500; color:var(--texte); }
.facultatif{ margin-left:.4em; font-weight:400; color:var(--texte-3); }
.champ :is(input, select, textarea){
  width:100%; min-height:56px;
  padding:14px 18px;
  font-size:1.0625rem; line-height:1.5; color:var(--texte);
  background-color:rgb(255 255 255 / .45);
  border:1px solid var(--bord-controle); border-radius:var(--rayon-champ);
  appearance:none; -webkit-appearance:none;
}
.champ textarea{ min-height:calc(6 * 1.5em + 30px); resize:vertical; }
.champ select{
  padding-right:48px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231c1c1a' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 20px center;
}
.champ :is(input, select, textarea):focus{ border-color:var(--texte); }
.champ [aria-invalid="true"]{ border-color:var(--texte); }
.champ-erreur{ display:flex; gap:10px; font-size:var(--fs-petit); color:var(--texte); }
.champ-erreur::before{ content:''; flex:none; width:2px; background:var(--cuivre); }
.champ-erreur:empty{ display:none; }
.formulaire .btn{ justify-self:start; }
@media (max-width:767.98px){ .formulaire .btn{ justify-self:stretch; } } /* au pouce, pleine largeur */
.formulaire-note{ font-size:var(--fs-petit); color:var(--texte-3); }
.envoye:not([hidden]){ animation:apparait var(--d-ui) var(--sortie) both; }
.envoye:focus{ outline:none; }

/* 11. Accordéon de base (<details class="question">) -----------------------------------------
   Sur filets. Pas d'animation de hauteur : la réponse apparaît en fondu, le
   « + » devient « − » (la barre verticale tourne de 90°). */
.question{ border-bottom:1px solid var(--filet-fort); }
.question > summary{
  position:relative;
  display:flex; align-items:center; min-height:72px;
  padding:var(--e-5) 56px var(--e-5) 0;
  font-family:var(--sans);
  font-size:var(--fs-question); font-weight:600; line-height:1.3; letter-spacing:-.015em;
  color:var(--texte);
  list-style:none; cursor:pointer;
}
.question > summary::-webkit-details-marker{ display:none; }
.question > summary::marker{ content:''; }
.question > summary::before, .question > summary::after{
  content:''; position:absolute; right:8px; top:50%;
  width:16px; height:1.5px; margin-top:-.75px;
  background:var(--texte);
}
.question > summary::after{ transform:rotate(90deg); transition:transform calc(450ms * .6) var(--douce); }
.question[open] > summary::after{ transform:rotate(180deg); transition-duration:450ms; }
@media (hover:hover) and (pointer:fine){
  .question > summary:hover{
    text-decoration:underline; text-decoration-thickness:1px;
    text-decoration-color:var(--trait); text-underline-offset:.2em;
  }
}
.reponse{ padding:0 56px var(--e-6) 0; color:var(--texte-2); max-width:var(--mesure-corps); }
.question[open] > .reponse{ animation:apparait var(--d-ui) var(--sortie) both; }

@keyframes apparait{ from{ opacity:0; transform:translateY(8px); } }

/* 12. Apparitions (apparitions.js) ----------------------------------------------------------
   L'état masqué (.app-attente) n'est posé que par le script, seulement sous
   l'écran. .app-entree porte la transition le temps de l'entrée ;
   .app-immediat révèle sans transition. Décalage : --app-rang (data-app-rang)
   × 80 ms, plus --app-delai si la page en fixe un. */
.mot{
  display:inline-block; vertical-align:top;
  padding:0 .06em .14em 0; margin:0 -.06em -.14em 0;
}
.mot > span{ display:inline-block; }
/* Le masque ne sert que pendant l'attente et l'entrée : ensuite, rien n'est rogné. */
:is(.app-attente, .app-entree) .mot{ overflow:hidden; }
[data-app="filet"]{ transform-origin:left center; }
[data-app="image"]{ overflow:hidden; overflow:clip; }

/* 140 % et non 105 % : avec un interligne de 0,92, le haut des lettres dépasse
   de la boîte de ligne et resterait visible dans le masque. */
.app-attente[data-app="lignes"] .mot > span{ transform:translateY(140%); }
.app-attente[data-app="bloc"]{ opacity:0; transform:translateY(16px); }
.app-attente[data-app="filet"]{ transform:scaleX(0); }
.app-attente[data-app="image"]{ transform:translateY(101%); }
.app-attente[data-app="image"] > *{ transform:translateY(-101%); }

.app-entree{ --app-retard:calc(var(--app-rang, 0) * var(--decalage) + var(--app-delai, 0ms)); }
.app-entree[data-app="lignes"] .mot > span{
  transition:transform var(--d-texte) var(--sortie);
  transition-delay:calc(var(--app-retard) + min(var(--l, 0), 6) * var(--decalage));
}
.app-entree[data-app="bloc"]{
  transition:opacity 700ms var(--sortie), transform 700ms var(--sortie);
  transition-delay:var(--app-retard);
}
.app-entree[data-app="filet"]{ transition:transform var(--d-filet) var(--sortie) var(--app-retard); }
.app-entree[data-app="image"], .app-entree[data-app="image"] > *{
  transition:transform 1100ms var(--sortie) var(--app-retard);
}
.app-immediat, .app-immediat *{ transition:none !important; }

/* Pose : les images d'en-tête arrivent à 103,5 % et se posent (jamais masquées).
   Leur cadre les rogne : agrandie, une image de toute la largeur déborderait
   de l'écran, et un téléphone élargirait la page pour la montrer entière.
   (overflow: clip ne crée pas de zone de défilement : position: sticky
   reste possible à l'intérieur.) */
:where(:has(> [data-app="pose"])){ overflow:clip; }
.js [data-app="pose"]{ transform:scale(1.035); }
.js [data-app="pose"].app-posee{ transform:none; transition:transform var(--d-pose) var(--sortie); }

/* 13. Défilement adouci (Lenis, ordinateur seulement) ---------------------------------------- */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

/* 14. Transitions entre pages ----------------------------------------------------------------
   Ancienne page en fondu (160 ms), nouvelle page en fondu et 10 px de montée
   (260 ms). La barre du haut reste en place (groupe de durée nulle). Aucun
   clic n'est intercepté ; les navigateurs qui ne savent pas faire naviguent
   sans. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{ navigation:auto; }
  .nav{ view-transition-name:nav; }
  ::view-transition-old(root){ animation:vt-sortie 160ms linear both; }
  ::view-transition-new(root){ animation:vt-entree 260ms var(--sortie) both; }
  ::view-transition-group(nav), ::view-transition-old(nav), ::view-transition-new(nav){
    animation-duration:0s;
  }
}
@keyframes vt-sortie{ to{ opacity:0; } }
@keyframes vt-entree{ from{ opacity:0; transform:translateY(10px); } }

/* 15. Réduire les animations : rien ne bouge, tout est là. ------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
  .js [data-app="pose"]{ transform:none; }
}

/* 16. Impression : noir sur blanc, tout est révélé, rien de fixe. ----------------------------- */
@media print{
  :root, .feuille-creme, .bloc-sombre{
    --fond:#fff; --texte:#000; --texte-2:#333; --texte-3:#555;
    --filet:#ccc; --filet-fort:#999; --bord-controle:#666;
    --em:#000; --accent:#000; --reperes:#333; --trait:#000; --focus:#000;
  }
  html, body, .bloc-sombre, .feuille, .feuille-creme{ background:#fff !important; color:#000; }
  .bloc-sombre{ border-radius:0 !important; }
  body{ padding:0 !important; }
  .nav, .nav-menu, .skip, .scene-couche, .pied-logo{ display:none !important; }
  .btn, .btn-plein, .btn-trait{ background:none; color:#000; border:1px solid #000; }
  .btn::before, .btn::after{ display:none; }
  [data-app], [data-app] *, .mot > span{
    opacity:1 !important; transform:none !important; clip-path:none !important;
  }
}