/* Base commune à tous les blocs et gabarits de l'atelier. Aucune couleur ni police en dur :
   tout passe par les jetons de jetons.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  font-weight: var(--graisse-texte);
  font-size: var(--t-m);
  line-height: var(--interligne-texte);
  overflow-wrap: break-word;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--police-titres);
  font-weight: var(--graisse-titres);
  font-stretch: var(--etirement-titres);
  line-height: var(--interligne-titres);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-l); }
p, ul, ol, dl, figure, blockquote { margin: 0; }
p { text-wrap: pretty; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }
/* L'attribut hidden doit toujours l'emporter sur un display posé par une classe. */
[hidden] { display: none !important; }

/* Le focus apparaît tout de suite, sans transition. */
:focus-visible { outline: 2px solid var(--texte); outline-offset: 3px; }

/* Conteneurs */
.contenu { width: min(100% - 2 * var(--gouttiere), var(--largeur-page)); margin-inline: auto; }
.mesure { max-width: var(--largeur-texte); }

/* Texte */
.texte-doux { color: var(--texte-doux); }
.chiffres { font-family: var(--police-donnees); font-variant-numeric: tabular-nums; }
.interface { font-family: var(--police-interface); font-weight: var(--graisse-interface); }
/* Un téléphone, un montant ou une heure ne se coupe pas en fin de ligne. */
.insecable { white-space: nowrap; }

/* Bouton et lien : les mêmes dans tous les blocs. */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--cible); padding: var(--e-3) var(--e-6);
  background: var(--bouton-fond); color: var(--bouton-texte);
  border: max(var(--epaisseur-filet), 1px) solid var(--bouton-bord); border-radius: var(--rayon-action);
  font-family: var(--police-interface); font-weight: var(--graisse-interface); font-size: var(--t-m);
  line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.bouton:hover { background: var(--texte); border-color: var(--texte); color: var(--fond); }
.bouton:active { transform: translateY(1px); }
.bouton[disabled], .bouton[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.bouton--contour { background: transparent; color: var(--texte); border-color: var(--texte); }
.bouton--contour:hover { background: var(--texte); color: var(--fond); }
.lien { font-family: var(--police-interface); font-weight: var(--graisse-interface); text-decoration: underline; }
.lien:hover { text-decoration-thickness: 0.14em; }
/* Un lien isolé (nom de l'entreprise, téléphone) qui doit offrir une cible de 44 px. */
.cible { display: inline-flex; align-items: center; min-height: var(--cible); }

/* Lien « Aller au contenu » : caché jusqu'à ce qu'il reçoive le focus au clavier. */
.evitement {
  position: absolute; left: var(--e-2); top: var(--e-2); z-index: 100;
  padding: var(--e-3) var(--e-4); background: var(--texte); color: var(--fond);
  font-family: var(--police-interface); font-weight: var(--graisse-interface);
  transform: translateY(-200%);
}
.evitement:focus { transform: none; }

/* Zone posée sur la couleur d'accent : le texte, le texte secondaire, les filets et le focus s'y adaptent seuls. */
.sur-accent {
  background: var(--accent); color: var(--sur-accent);
  --texte: var(--sur-accent);
  --texte-doux: color-mix(in srgb, var(--sur-accent) 86%, var(--accent));
  --bordure: color-mix(in srgb, var(--sur-accent) 45%, var(--accent));
}

/* Champs de formulaire. Structure : .champ > label.champ__libelle + contrôle + .champ__aide + .message-erreur */
.champ { display: grid; gap: var(--e-2); }
.champ__libelle { font-family: var(--police-interface); font-weight: var(--graisse-interface); }
.champ__aide { color: var(--texte-doux); font-size: var(--t-s); }
.champ input:not([type="checkbox"], [type="radio"]), .champ select, .champ textarea {
  width: 100%; min-height: var(--champ); padding: var(--e-2) var(--e-3);
  background: var(--surface); color: var(--texte);
  border: var(--epaisseur-filet) solid var(--texte-doux); border-radius: min(var(--rayon-action), calc(var(--champ) / 2));
}
.champ textarea { min-height: calc(var(--champ) * 3); resize: vertical; }
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--texte); }
.champ [aria-invalid="true"] { border-color: var(--erreur); border-width: 2px; }
.champ input:disabled, .champ select:disabled, .champ textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.message-erreur { color: var(--erreur); font-size: var(--t-s); font-family: var(--police-interface); font-weight: var(--graisse-interface); }
.message-reussite { color: var(--reussite); font-family: var(--police-interface); font-weight: var(--graisse-interface); }
.sommaire-erreurs { padding: var(--e-4); border: 2px solid var(--erreur); border-radius: var(--rayon); }

/* Emplacement d'une vraie photo du client. Il dit ce qu'il faut photographier ; on n'y met jamais d'image de banque. */
.photo-a-venir {
  display: grid; place-items: center; text-align: center;
  aspect-ratio: var(--format, 4 / 3); padding: var(--e-4);
  background: repeating-linear-gradient(135deg, transparent 0 11px, color-mix(in srgb, var(--texte) 16%, transparent) 11px 12px), var(--surface);
  border: var(--epaisseur-filet) solid color-mix(in srgb, var(--texte) 34%, transparent); border-radius: var(--rayon);
  color: var(--texte-doux); font-family: var(--police-interface); font-size: var(--t-s);
}
/* Variante qui remplit tout son contenant (fond de section, page de présentation). */
.photo-a-venir--plein { aspect-ratio: auto; height: 100%; min-height: 100%; border: 0; border-radius: 0; }

/* Lecteurs d'écran seulement */
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Filet de sécurité. Chaque animation garde en plus son propre repli. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
}