/* == ADEXWEB - Socle. Remise a zero, elements nus, mouvement reduit ==  D-810 */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Toute ancre se pose SOUS la barre, jamais dessous. */
  scroll-padding-top: calc(var(--nav-h) + var(--e-4));
}

body {
  background: var(--pearl);
  color: var(--text);
  font-family: var(--font-texte);
  font-size: var(--t-0);
  line-height: var(--lh-0);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  /* Une page ne defile jamais lateralement, a aucune largeur. */
  overflow-x: hidden;
}

/* Les titres sont en serif, cadres a gauche, jamais en capitales.
   La graisse et la taille viennent des classes, pas du niveau : un h3 dans
   une carte n'a pas la meme voix qu'un h3 de section.  D-811 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-titre);
  font-weight: 440;
  line-height: var(--lh-3);
  letter-spacing: var(--ls-3);
  color: var(--navy-dark);
  text-wrap: balance;
}

/* L'italique du titre est le SEUL appui d'emphase du systeme. Un mot, jamais
   deux. Il ne change pas de couleur : c'est la forme qui parle.  D-812 */
h1 em, h2 em, h3 em { font-style: italic; font-weight: 420; }

p { text-wrap: pretty; }
p + p { margin-top: var(--e-2); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--champagne-dark); }

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

ul, ol { list-style: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
}
button { cursor: pointer; }

/* L'anneau de mise au point est visible sur TOUS les fonds, y compris le navy :
   deux traits, un clair et un fonce, jamais un seul.  D-813 */
:focus-visible {
  outline: var(--focus-w) solid var(--navy);
  outline-offset: var(--focus-offset);
  border-radius: var(--rayon);
}
/* `.sur-fonce` N'EXISTE SUR AUCUNE PAGE. La regle etait ecrite, elle avait
   raison, et elle ne s'appliquait a rien : tout element focalisable sur un
   fond navy — les boutons du pied, les six portes, les panneaux des bandes
   photographiques, le repli des conditions — recevait un anneau NAVY SUR
   NAVY, c'est-a-dire aucun anneau. Le seuil que le projet s'impose dit
   « arrets au clavier sans anneau : 0 ».
   On nomme donc les fonds sombres qui existent VRAIMENT.  D-910 */
/* L'ANNEAU SE DESSINE EN DEHORS DE LA BOITE : il doit donc contraster avec
   le fond du PARENT, jamais avec celui de l'element. Une carte navy posee
   sur du silk garde un anneau navy — lui donner du champagne clair, comme
   je l'ai fait d'abord, le fait tomber a 1,13:1 sur le silk, c'est-a-dire
   a rien. `tools/anneau-check.mjs` mesure exactement ca, en composant les
   couches translucides de la pile d'ancetres.  D-910 */
/* L'ANNEAU SUIT LE FOND PEINT, PAS LE NOM DE LA SECTION.  D-910 · D-927
   `.hero` s'ajoute : le premier ecran est passe au navy plein, et ses
   trois boutons rendaient 1,18:1 — un anneau navy sur du navy. Releve par
   `tools/anneau-check.mjs`, qui compose les couches translucides jusqu'au
   premier fond opaque. */
.sur-fonce :focus-visible,
.pied :focus-visible,
.hero :focus-visible,
.bande--navy :focus-visible,
.bande-photo-panneau :focus-visible { outline-color: var(--champagne-light); }

/* … ET UN PANNEAU CLAIR DANS UNE BANDE SOMBRE REPREND L'ANNEAU SOMBRE.
   Le cadre de la visite 360 est en silk : l'heritage de `.bande--navy` y
   posait du champagne clair sur du beige, 1,13:1. La regle ne se decide
   pas au niveau de la bande — elle se decide la ou la couleur est
   PEINTE, et le cadre de la visite est le seul endroit du site ou un
   panneau clair vit dans une bande sombre. */
.bande--navy .tour-cadre :focus-visible { outline-color: var(--navy); }
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--champagne-light); color: var(--text); }

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

/* Le lien d'evitement est le PREMIER arret au clavier, sur chaque page. */
.saut {
  position: fixed; top: var(--e-1); left: var(--e-1); z-index: var(--z-skip);
  transform: translateY(-200%);
  background: var(--navy); color: var(--pearl);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--rayon);
  font-size: var(--t-00); font-weight: 600;
  text-decoration: none;
}
.saut:focus-visible { transform: translateY(0); }

/* == LE MOUVEMENT REDUIT ==
   Tout s'arrete, et RIEN ne se perd : l'etat de repos d'une entree est
   toujours sa forme FINALE, donc couper l'animation la laisse visible.
   Aucun etat de depart ne vit dans le CSS.  D-814 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}