/* ==========================================================================
   MyPC Particuliers — composants (refonte « C mixte », validée le 7 octobre 2026)
   Source : maquettes/c-mixte/style.css, sans la planche de composants
   (section 14 de la maquette), sans les classes d'états forcés de la planche
   (.is-hover, .is-focus, .is-active, .is-current, .is-disabled, .is-invalid)
   et sans la section « Accueil général », qui vit dans site/assets/style.css.
   Ajout propre au site : section 14 « Pages de texte » (À propos, Conditions
   de vente), non maquettées, construites avec les mêmes jetons.
   Disposition de B (« Atelier de proximité »), allure de A (« Continuité ») :
   palette, Red Hat, boutons en pilule sans relief, cartes blanches à bordure
   fine et ombre légère, titres de section à filet orange, encadrés gris
   bleuté à filet marine, pied marine foncé, voiles sur photos.
   Règle : aucune couleur ni taille écrite en dur, tout vient de tokens.css.
   Seules exceptions : les seuils des @media / @container (les variables CSS
   n'y sont pas permises), les valeurs neutres 0 / 100 % / 1fr / auto, et
   les icônes de la zone d'état du formulaire en data-URI SVG (masques, sans
   couleur : seule la silhouette compte, la teinte vient du jeton).
   Mobile d'abord. Seuils : 40em (640 px), 48em (768 px), 64em (1024 px) ;
   en-tête : requêtes de conteneur (48em, 56em, 64em).
   Classes posées par assets/site.js : .js (sur <html>), .is-open (menu),
   .is-loading (bouton Envoyer), .is-sending / .is-success / .is-error
   (zone d'état du formulaire).
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--hauteur-entete) + var(--esp-4));
}

body {
  margin: 0;
  background: var(--c-fond);
  color: var(--c-texte);
  font-family: var(--police-texte);
  font-size: var(--fs-2);
  font-weight: var(--graisse-normale);
  line-height: var(--lh-texte);
  font-kerning: normal;
  overflow-wrap: break-word;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: var(--graisse-forte);
  line-height: var(--lh-titre);
  color: var(--c-marque);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
p + p { margin-top: var(--esp-4); }
address { font-style: normal; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; margin: 0; padding: 0; }

a {
  color: var(--c-marque);
  text-decoration-thickness: var(--trait-fin);
  text-underline-offset: var(--soulignement-decalage);
}
a:hover { text-decoration-thickness: var(--trait-moyen); }

:focus-visible {
  outline: var(--focus-largeur) solid var(--c-focus);
  outline-offset: var(--focus-decalage);
}

/* Zones sombres (bandeau photo, pied) : l'anneau passe à l'orange du logo */
.page-head,
.footer-bar,
.zone-sombre { --c-focus: var(--c-focus-inverse); }

.sr-only {
  position: absolute;
  width: var(--trait-fin);
  height: var(--trait-fin);
  margin: calc(var(--trait-fin) * -1);
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Lien d'évitement : pastille marine ; au focus, anneau orange
   (visible sur le blanc comme sur la vidéo). */
.skip-link {
  position: absolute;
  inset-inline-start: var(--esp-4);
  top: var(--esp-2);
  z-index: var(--z-evitement);
  padding: var(--esp-2) var(--esp-4);
  background: var(--c-marque);
  color: var(--c-texte-inverse);
  border-radius: var(--rayon-2);
  font-weight: var(--graisse-forte);
  transform: translateY(calc(-100% - var(--esp-4)));
}
.skip-link:focus {
  --c-focus: var(--c-focus-inverse);
  transform: none;
  color: var(--c-texte-inverse);
}

.container {
  width: 100%;
  max-width: calc(var(--conteneur) + 2 * var(--gouttiere-large));
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
@media (min-width: 48em) {
  .container { padding-inline: var(--gouttiere-large); }
}

.icon {
  width: var(--icone-1);
  height: var(--icone-1);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icone-trait);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--lg { width: var(--icone-2); height: var(--icone-2); }

/* Surtitre en petites capitales (A) */
.eyebrow {
  color: var(--c-texte-2);
  font-size: var(--fs-1);
  font-weight: var(--graisse-forte);
  letter-spacing: var(--interlettre-label);
  text-transform: uppercase;
  line-height: var(--lh-titre);
}

/* Filet orange des titres de section (A), aligné à gauche (disposition B) */
.section-head::before,
.infos__title::before {
  content: "";
  display: block;
  width: var(--filet-titre);
  height: var(--trait-fort);
  margin-bottom: var(--esp-4);
  border-radius: var(--rayon-pilule);
  background: var(--c-accent);
}

.muted { color: var(--c-texte-2); }
.nowrap { white-space: nowrap; }

/* --- 2. En-tête et menu ------------------------------------------------------ */
.site-header {
  container: header / inline-size;
  position: sticky;
  top: 0;
  z-index: var(--z-entete);
  background: var(--c-fond);
  box-shadow: var(--ombre-entete);
}

.site-header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  min-height: var(--hauteur-entete);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  margin-inline-end: auto;
  padding-block: var(--esp-2);
  color: var(--c-texte-2);
  text-decoration: none;
  border-radius: var(--rayon-2);
}
/* Le logo long (marine et orange) de l'existant, comme dans A */
.brand__logo { height: var(--hauteur-logo); width: auto; }
/* Logo agrandi (A : 44 px) quand la place le permet : tablette en mode menu,
   puis bureau large ; entre 56em et 64em, le menu complet garde le petit logo. */
@container header (min-width: 48em) and (max-width: 55.99em) {
  .brand__logo { height: var(--hauteur-logo-large); }
}
@container header (min-width: 64em) {
  .brand__logo { height: var(--hauteur-logo-large); }
}
/* Boutons d'en-tête (téléphone, menu) : pilule fine de A */
.icon-btn,
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-width: var(--cible-tactile);
  min-height: var(--cible-tactile);
  padding: 0 var(--esp-3);
  border: var(--trait-fin) solid var(--c-bordure-forte);
  border-radius: var(--rayon-pilule);
  background: var(--c-fond);
  color: var(--c-marque);
  font: inherit;
  font-weight: var(--graisse-moyenne);
  line-height: var(--lh-titre);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duree) var(--courbe), border-color var(--duree) var(--courbe);
}
.menu-toggle { padding-inline: var(--esp-4); }
.icon-btn:hover, .menu-toggle:hover {
  background: var(--c-surface-marque);
  border-color: var(--c-marque);
  color: var(--c-marque);
  text-decoration: none;
}
.icon-btn:active, .menu-toggle:active { background: var(--c-bordure); }
.menu-toggle[aria-expanded="true"] { background: var(--c-surface-marque); border-color: var(--c-marque); }

.header-call__num { display: none; }

.menu-toggle .icon--close { display: none; }
.menu-toggle[aria-expanded="true"] .icon--open { display: none; }
.menu-toggle[aria-expanded="true"] .icon--close { display: block; }
html:not(.js) .menu-toggle { display: none; }

/* Menu mobile : dans le flux, sous la barre (disposition B) */
.site-nav { flex-basis: 100%; order: 10; }
.js .site-nav { display: none; }
.js .site-nav.is-open { display: block; }

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--esp-4);
}
.site-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(var(--cible-tactile) + var(--esp-1));
  padding: var(--esp-2) var(--esp-4);
  border-radius: var(--rayon-2);
  color: var(--c-texte);
  font-size: var(--fs-3);
  font-weight: var(--graisse-moyenne);
  text-decoration: none;
  transition: color var(--duree) var(--courbe), background-color var(--duree) var(--courbe);
}
.site-nav__link::after {
  content: "";
  position: absolute;
  inset-block: var(--esp-2);
  inset-inline-start: 0;
  width: var(--trait-fort);
  border-radius: var(--rayon-pilule);
  background: transparent;
  transition: background-color var(--duree) var(--courbe);
}
.site-nav__link:hover { color: var(--c-marque); background: var(--c-surface); }
.site-nav__link[aria-current="page"] { color: var(--c-marque); font-weight: var(--graisse-forte); }
.site-nav__link[aria-current="page"]::after { background: var(--c-accent); }
/* Liens vers le Cloud (autre site, nouvel onglet) : petite flèche sortante */
.site-nav__link--externe { gap: var(--esp-1); }
.site-nav__link--externe .icon { color: var(--c-texte-2); }

@container header (min-width: 56em) {
  .site-header__bar { flex-wrap: nowrap; gap: var(--esp-5); }
  .menu-toggle { display: none; }
  .js .site-nav, .site-nav { display: block; flex-basis: auto; order: 0; }
  .site-nav__list { display: flex; gap: var(--esp-1); padding: 0; }
  .site-nav__link {
    min-height: var(--cible-tactile);
    padding: var(--esp-2) var(--esp-3);
    font-size: var(--fs-2);
    white-space: nowrap;
  }
  .site-nav__link::after {
    inset-block: auto var(--esp-1);
    inset-inline: var(--esp-3);
    width: auto;
    height: var(--trait-fort);
  }
  .site-nav__link:hover { background: transparent; }
  .site-nav__link:hover::after { background: var(--c-bordure); }
  .site-nav__link[aria-current="page"]::after { background: var(--c-accent); }
  .header-call { order: 1; }
}
/* Numéro affiché à côté de l'icône seulement quand le menu complet (avec les
   liens Cloud) laisse la place ; en dessous, icône seule, nom accessible inchangé. */
@container header (min-width: 72em) {
  .header-call { padding-inline: var(--esp-4); white-space: nowrap; }
  .header-call__num { display: inline; font-weight: var(--graisse-forte); font-variant-numeric: tabular-nums; }
}

/* --- 3. Boutons (pilules de A, sans relief) ---------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--cible-tactile);
  padding: var(--esp-2) var(--esp-5);
  border: var(--trait-moyen) solid transparent;
  border-radius: var(--rayon-pilule);
  background: transparent;
  color: var(--c-marque);
  font-family: var(--police-texte);
  font-size: var(--fs-2);
  font-weight: var(--graisse-forte);
  line-height: var(--lh-titre);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--duree) var(--courbe),
    border-color var(--duree) var(--courbe),
    color var(--duree) var(--courbe),
    transform var(--duree) var(--courbe);
}
.btn:hover { text-decoration: none; }
.btn .icon--arrow { transition: transform var(--duree) var(--courbe); }
.btn:hover .icon--arrow { transform: translateX(var(--esp-1)); }

/* Principal : orange d'action, texte marine foncé (jamais blanc) */
.btn--primary { background: var(--c-accent); color: var(--c-sur-accent); }
.btn--primary:hover { background: var(--c-accent-survol); color: var(--c-sur-accent); }
.btn--primary:active { background: var(--c-accent-actif); transform: translateY(var(--trait-fin)); }

/* Secondaire sur fond clair : contour marine */
.btn--secondary { background: transparent; color: var(--c-marque); border-color: var(--c-marque); }
.btn--secondary:hover { background: var(--c-surface-marque); color: var(--c-marque); }
.btn--secondary:active { background: var(--c-bordure); transform: translateY(var(--trait-fin)); }

/* Secondaire sur image ou fond sombre : contour blanc */
.btn--on-dark { background: transparent; color: var(--c-texte-inverse); border-color: var(--c-bordure-inverse); }
.btn--on-dark:hover { background: var(--c-survol-inverse); border-color: var(--c-texte-inverse); color: var(--c-texte-inverse); }
.btn--on-dark:active { background: var(--c-separateur-inverse); transform: translateY(var(--trait-fin)); }

.btn--lg { min-height: calc(var(--cible-tactile) + var(--esp-1)); padding-inline: var(--esp-6); }
/* Petit format */
.btn--sm {
  padding-inline: var(--esp-4);
  border-width: var(--trait-fin);
  font-size: var(--fs-1);
  font-weight: var(--graisse-moyenne);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--c-desactive-fond);
  border-color: transparent;
  color: var(--c-desactive-texte);
  cursor: not-allowed;
  transform: none;
}
.btn:disabled .icon--arrow { transform: none; }

/* Envoi en cours : bouton orange, roue + libellé inchangé, non cliquable */
.btn.is-loading,
.btn.is-loading:disabled {
  background: var(--c-accent);
  border-color: transparent;
  color: var(--c-sur-accent);
  cursor: progress;
}
.spinner {
  width: var(--icone-1);
  height: var(--icone-1);
  flex: none;
  border: var(--trait-moyen) solid var(--c-bordure);
  border-top-color: currentColor;
  border-radius: var(--rayon-pilule);
  animation: tourne var(--duree-rotation) linear infinite;
}
@keyframes tourne { to { transform: rotate(1turn); } }

.actions { display: flex; flex-wrap: wrap; gap: var(--esp-3); }
.actions .btn { flex: 1 1 auto; }
@media (min-width: 40em) { .actions .btn { flex: 0 0 auto; } }

/* Lien avec flèche (bas des cartes) : gras marine, la flèche avance au survol */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: var(--cible-tactile);
  color: var(--c-marque);
  font-weight: var(--graisse-forte);
  text-decoration: none;
}
.link-arrow .icon { transition: transform var(--duree) var(--courbe); }
.link-arrow:hover { text-decoration: underline; text-decoration-thickness: var(--trait-moyen); }
.link-arrow:hover .icon { transform: translateX(var(--esp-1)); }

/* --- 4. Accueil général : dans site/assets/style.css (autre racine publiée) - */

/* --- 5. Accueil particuliers : bandeau photo sous voile marine (A) ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: var(--hauteur-hero-part);
  padding-block: var(--esp-8);
  background: var(--c-marque-fonce) url("media/piqsels-com-id-jzjcb-35594c23.png") center / cover;
  color: var(--c-texte-inverse);
  text-align: center;
}
/* Voile uniforme sur mobile (le texte occupe toute la largeur) ; dégradé
   radial au-delà : 80 % sous le texte, 65 % au minimum sur les bords (blanc
   encore à 5,2:1 sur un pixel blanc). Toute photo de remplacement doit être
   revérifiée sous ce voile. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-voile);
  background: var(--c-voile-fort);
}
.hero__content {
  display: grid;
  justify-items: center;
  gap: var(--esp-4);
  max-width: var(--largeur-hero);
}
.hero__title {
  color: var(--c-texte-inverse);
  font-size: var(--fs-6);
  line-height: var(--lh-serre);
}
.hero__lead {
  color: var(--c-texte-inverse-2);
  font-size: var(--fs-3);
  line-height: var(--lh-titre);
}
/* Mobile : boutons empilés pleine largeur ; côte à côte dès 768 px. */
.hero__actions { justify-self: stretch; justify-content: center; margin-top: var(--esp-4); }
.hero__actions .btn { flex: 1 1 100%; }
/* Le bandeau sombre est suivi de la carte Infos pratiques : il lui faut de l'air. */
.hero + .infos { padding-top: var(--esp-8); }

@media (min-width: 48em) {
  .hero { padding-block: var(--esp-9); }
  .hero::before { background: var(--voile-video); }
  .hero__actions { justify-self: center; }
  .hero__actions .btn { flex: 0 1 auto; }
  .hero__title { font-size: var(--fs-7); }
  .hero__lead { font-size: var(--fs-4); }
}

/* --- 6. Sections ------------------------------------------------------------ */
.section { padding-block: var(--esp-8); }
.section--surface { background: var(--c-surface); }

.section-head { margin-bottom: var(--esp-6); }
.section-head__title {
  margin-top: var(--esp-2);
  font-size: var(--fs-5);
  line-height: var(--lh-serre);
}
/* Phrase de présentation sous le titre (accueil particuliers : services et commune) */
.section-head__lead {
  max-width: var(--mesure);
  margin-top: var(--esp-3);
  color: var(--c-texte-2);
  text-wrap: balance;
}
@media (min-width: 48em) {
  .section { padding-block: var(--esp-9); }
  .section-head { margin-bottom: var(--esp-7); }
  .section-head__title { font-size: var(--fs-6); }
  .section-head__lead { font-size: var(--fs-3); }
}

/* --- 7. Cartes (blanches, bordure fine, ombre légère) ------------------------ */
.card {
  background: var(--c-fond);
  border: var(--trait-fin) solid var(--c-bordure);
  border-radius: var(--rayon-3);
  box-shadow: var(--ombre-1);
  padding: var(--esp-5);
}
@media (min-width: 48em) { .card { padding: var(--esp-6); } }

.services { display: grid; gap: var(--esp-5); }

/* Carte de service : toute la carte est cliquable (lien étiré de A),
   le nom accessible reste celui du lien, complété par le titre. */
.service {
  position: relative;
  display: flex;
  flex-direction: column;
  transition:
    box-shadow var(--duree) var(--courbe),
    border-color var(--duree) var(--courbe),
    transform var(--duree) var(--courbe);
}
.service:hover {
  border-color: var(--c-bordure-forte);
  box-shadow: var(--ombre-2);
  transform: translateY(calc(var(--esp-1) * -1));
}
.service__head { display: flex; align-items: center; gap: var(--esp-4); }
.service__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--pastille);
  height: var(--pastille);
  border-radius: var(--rayon-2);
  background: var(--c-accent-pale);
  color: var(--c-marque);
}
.service__title { font-size: var(--fs-4); }

.questions {
  display: grid;
  gap: var(--esp-1);
  margin: var(--esp-4) 0 0;
  padding: 0;
  list-style: none;
  color: var(--c-texte-2);
}
.service__answer {
  margin-top: var(--esp-4);
  color: var(--c-texte);
  font-weight: var(--graisse-forte);
}
.service .link-arrow { align-self: flex-start; margin-top: auto; padding-top: var(--esp-2); }
/* L'anneau passe du lien à la carte entière (A), là où :has() est connu.
   Les deux règles sont dans le même @supports : soit elles s'appliquent
   ensemble (anneau sur la carte, pas sur le lien), soit aucune ne
   s'applique et le lien garde l'anneau de :focus-visible (section 1).
   Vérifié en rechargeant la feuille avec :has() rendu inconnu : l'anneau
   reste alors sur le lien. */
@supports selector(:has(*)) {
  .service:has(.link-arrow:focus-visible) {
    outline: var(--focus-largeur) solid var(--c-focus);
    outline-offset: var(--focus-decalage);
  }
  .service .link-arrow:focus-visible { outline: none; }
}
.service .link-arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-commande);
  border-radius: var(--rayon-3);
}
.service:hover .link-arrow .icon { transform: translateX(var(--esp-1)); }

@media (min-width: 48em) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-6); }
  .service:last-child { grid-column: 1 / -1; }
}
/* Sur trois colonnes, les cartes partagent les mêmes rangées (sous-grille) :
   titres, listes, réponses et liens tombent à la même hauteur (B). */
@media (min-width: 64em) {
  .services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service:last-child { grid-column: auto; }
  @supports (grid-template-rows: subgrid) {
    .services { row-gap: 0; }
    .service {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      row-gap: var(--esp-4);
    }
    .questions, .service__answer { margin-top: 0; }
    .service .link-arrow { margin-top: 0; padding-top: 0; align-self: end; justify-self: start; }
  }
}

/* --- 8. Infos pratiques ------------------------------------------------------ */
.infos { padding-block: 0 var(--esp-8); }
.infos--footer { padding-block: var(--esp-8); background: var(--c-surface); }

.infos__card { display: grid; gap: var(--esp-6); align-items: start; }
.infos__title { font-size: var(--fs-5); line-height: var(--lh-serre); }
.infos__subtitle {
  margin-bottom: var(--esp-4);
  font-family: var(--police-texte);
  color: var(--c-texte-2);
  font-size: var(--fs-1);
  font-weight: var(--graisse-forte);
  letter-spacing: var(--interlettre-label);
  text-transform: uppercase;
}
.infos__block .notice { margin-top: var(--esp-5); }

.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-4); align-items: start; }
.contact-list li { display: flex; gap: var(--esp-3); align-items: flex-start; }
.contact-list .icon { margin-top: var(--esp-1); color: var(--c-marque); }
.contact-list a { font-weight: var(--graisse-moyenne); }
/* Situation de la commune, sous l'adresse (hors du lien Google Maps) */
.contact-list__situation { display: block; color: var(--c-texte-2); }
/* Téléphone : l'information la plus utile d'une boutique de quartier */
.contact-list__item--phone { align-items: center; }
.contact-list__item--phone .icon { margin-top: 0; }
.contact-list .contact-list__phone {
  font-family: var(--police-titre);
  font-size: var(--fs-5);
  font-weight: var(--graisse-forte);
  line-height: var(--lh-titre);
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.contact-list__phone:hover { text-decoration: underline; }

.hours { margin: 0; display: grid; font-variant-numeric: tabular-nums; }
.hours div {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-4);
  padding-block: var(--esp-2);
  border-bottom: var(--trait-fin) solid var(--c-bordure);
}
.hours div:first-child { padding-top: 0; }
.hours div:last-child { border-bottom: 0; }
.hours dt { color: var(--c-texte-2); }
.hours dd { margin: 0; color: var(--c-texte); font-weight: var(--graisse-moyenne); white-space: nowrap; }

@media (min-width: 48em) {
  .infos { padding-bottom: var(--esp-9); }
  .infos--footer { padding-block: var(--esp-9); }
  .infos__card { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: var(--esp-8); row-gap: var(--esp-5); padding: var(--esp-7); }
  .infos__title { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
  .infos__card { column-gap: var(--esp-9); }
  .infos__block--contact .contact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--esp-6); }
}

/* --- 9. Encadrés : gris bleuté, filet marine (A) ----------------------------- */
.notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5);
  background: var(--c-surface-marque);
  border-radius: var(--rayon-2);
  box-shadow: inset var(--trait-fort) 0 0 var(--c-marque);
  color: var(--c-texte);
}
.notice > .icon { margin-top: var(--esp-1); color: var(--c-marque); }
.notice__title { font-weight: var(--graisse-forte); color: var(--c-marque); }
.notice__title + p { margin-top: var(--esp-1); }
.notice--success { background: var(--c-succes-fond); box-shadow: inset var(--trait-fort) 0 0 var(--c-succes); }
.notice--success > .icon, .notice--success .notice__title { color: var(--c-succes); }
.notice--error { background: var(--c-erreur-fond); box-shadow: inset var(--trait-fort) 0 0 var(--c-erreur); }
.notice--error > .icon, .notice--error .notice__title { color: var(--c-erreur); }
.notice--lead { padding-block: var(--esp-5); }

/* --- 10. En-tête des pages internes : bandeau photo sous voile (A) ----------- */
.page-head {
  position: relative;
  isolation: isolate;
  padding-block: var(--esp-6) var(--esp-7);
  background: var(--c-marque-fonce) url("media/page-title-90e3efa8.jpg") center / cover no-repeat;
  color: var(--c-texte-inverse);
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-voile);
  background: var(--c-voile-fort);
}
.page-head__title {
  font-family: var(--police-titre);
  font-weight: var(--graisse-forte);
  margin-top: var(--esp-3);
  color: var(--c-texte-inverse);
  font-size: var(--fs-6);
  line-height: var(--lh-serre);
}
@media (min-width: 48em) {
  .page-head { padding-block: var(--esp-7) var(--esp-8); }
  .page-head::before { background: var(--voile-bandeau); }
  .page-head__title { font-size: var(--fs-7); }
}

/* Fil d'Ariane, sur le voile fort : 5,35:1 au pire cas */
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--esp-2); font-size: var(--fs-1); }
.breadcrumb li { display: flex; align-items: center; gap: var(--esp-2); color: var(--c-texte-inverse-2); }
.breadcrumb li + li::before { content: "/"; color: var(--c-texte-inverse-2); }
.breadcrumb a { color: var(--c-texte-inverse-2); font-weight: var(--graisse-moyenne); }
.breadcrumb a:hover { color: var(--c-texte-inverse); text-decoration-thickness: var(--trait-moyen); }

/* --- 11. Tarifs -------------------------------------------------------------- */
.tarifs { display: grid; gap: var(--esp-6); padding-block: var(--esp-7) var(--esp-8); }
.tarifs__main { display: grid; gap: var(--esp-5); min-width: 0; }
.tarifs__aside .call-card { display: none; }

.toc__title {
  margin-bottom: var(--esp-3);
  color: var(--c-texte-2);
  font-size: var(--fs-1);
  font-weight: var(--graisse-forte);
  letter-spacing: var(--interlettre-label);
  text-transform: uppercase;
}
/* Mobile : pastilles (A) */
.toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.toc__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-tactile);
  padding-inline: var(--esp-4);
  background: var(--c-fond);
  border: var(--trait-fin) solid var(--c-bordure);
  border-radius: var(--rayon-pilule);
  color: var(--c-marque);
  font-size: var(--fs-1);
  font-weight: var(--graisse-moyenne);
  text-decoration: none;
  transition: background-color var(--duree) var(--courbe), border-color var(--duree) var(--courbe);
}
.toc__list a:hover { background: var(--c-surface-marque); border-color: var(--c-marque); }
.toc__list a[aria-current] { background: var(--c-marque); border-color: var(--c-marque); color: var(--c-texte-inverse); }

/* Bureau : colonne collante, catégorie à l'écran marquée d'un filet orange */
@media (min-width: 64em) {
  .tarifs { grid-template-columns: var(--largeur-categories) minmax(0, 1fr); gap: var(--esp-8); padding-block: var(--esp-8) var(--esp-9); }
  .tarifs__aside-inner { position: sticky; top: calc(var(--hauteur-entete) + var(--esp-5)); display: grid; gap: var(--esp-7); }
  .tarifs__aside .call-card { display: block; margin-top: 0; }
  .toc__list { flex-direction: column; flex-wrap: nowrap; gap: var(--esp-1); border-inline-start: var(--trait-fin) solid var(--c-bordure); }
  .toc__list a {
    display: flex;
    width: 100%;
    padding-inline: var(--esp-4);
    background: transparent;
    border: 0;
    border-radius: 0 var(--rayon-2) var(--rayon-2) 0;
    font-size: var(--fs-2);
  }
  .toc__list a:hover { background: var(--c-surface-marque); }
  .toc__list a[aria-current] {
    background: transparent;
    color: var(--c-marque);
    font-weight: var(--graisse-forte);
    box-shadow: inset var(--trait-fort) 0 0 var(--c-accent);
  }
}

.price-card { padding: var(--esp-5) var(--esp-4); scroll-margin-top: calc(var(--hauteur-entete) + var(--esp-4)); }
@media (min-width: 48em) { .price-card { padding: var(--esp-6); } }
.price-card__title { font-size: var(--fs-4); }

.prices { width: 100%; margin-top: var(--esp-3); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.prices thead th {
  padding-bottom: var(--esp-2);
  border-bottom: var(--trait-moyen) solid var(--c-bordure);
  color: var(--c-texte-2);
  font-size: var(--fs-1);
  font-weight: var(--graisse-forte);
  letter-spacing: var(--interlettre-label);
  text-transform: uppercase;
  text-align: start;
}
.prices tbody th,
.prices tbody td {
  padding-block: var(--esp-3);
  border-bottom: var(--trait-fin) solid var(--c-bordure);
  vertical-align: baseline;
}
.prices tbody tr:last-child th,
.prices tbody tr:last-child td { border-bottom: 0; padding-bottom: 0; }
.prices tbody th { padding-inline-end: var(--esp-4); font-weight: var(--graisse-normale); color: var(--c-texte); text-align: start; }
/* Colonne Prix de largeur fixe : la même dans toutes les cartes (B) */
.prices .prices__price { width: var(--largeur-prix); text-align: end; }
/* Prix en gras marine, chiffres tabulaires (A) */
.price {
  color: var(--c-marque);
  font-weight: var(--graisse-forte);
  white-space: nowrap;
}
.prices__unit {
  display: block;
  margin-top: var(--esp-1);
  color: var(--c-texte-2);
  font-size: var(--fs-1);
  line-height: var(--lh-titre);
}
@media (min-width: 48em) {
  .prices .prices__price { width: var(--largeur-prix-large); }
}

/* --- 12. Contact et formulaire ----------------------------------------------- */
.contact { display: grid; gap: var(--esp-7); padding-block: var(--esp-7) var(--esp-8); }
.contact__lead { color: var(--c-marque); font-size: var(--fs-3); font-weight: var(--graisse-forte); }

.call-card {
  margin-top: var(--esp-5);
  padding: var(--esp-5);
  background: var(--c-fond);
  border: var(--trait-fin) solid var(--c-bordure);
  border-radius: var(--rayon-3);
  box-shadow: var(--ombre-1);
}
.call-card__number {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: var(--cible-tactile);
  margin-top: var(--esp-2);
  font-family: var(--police-titre);
  font-size: var(--fs-5);
  font-weight: var(--graisse-forte);
  line-height: var(--lh-titre);
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.call-card__number:hover { text-decoration: underline; }
.call-card--compact { padding: var(--esp-4); font-size: var(--fs-1); }
.call-card--compact .call-card__number { font-size: var(--fs-4); margin-top: var(--esp-1); }

.form-card__title { font-size: var(--fs-5); }
.form { display: grid; gap: var(--esp-5); margin-top: var(--esp-5); }

/* Zone d'état (role=status) : toujours dans le flux, même vide, pour que les
   lecteurs d'écran annoncent ses changements. Habillage d'encadré (A) ;
   le script n'écrit que du texte, l'icône est donc portée par ::before. */
.form-status {
  position: relative;
  padding: var(--esp-4) var(--esp-5) var(--esp-4) calc(var(--esp-4) + var(--icone-1) + var(--esp-3));
  background: var(--c-surface-marque);
  border-radius: var(--rayon-2);
  box-shadow: inset var(--trait-fort) 0 0 var(--c-marque);
  color: var(--c-texte);
}
.form-status::before {
  content: "";
  position: absolute;
  inset-inline-start: var(--esp-4);
  top: calc(var(--esp-4) + var(--esp-1));
  width: var(--icone-1);
  height: var(--icone-1);
  background: var(--c-marque);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.form-status:empty {
  min-height: 0;
  margin-block-end: calc(var(--esp-5) * -1);
  padding: 0;
  background: none;
  box-shadow: none;
}
.form-status:empty::before { content: none; }
.form-status.is-sending::before {
  background: none;
  -webkit-mask: none;
  mask: none;
  border: var(--trait-moyen) solid var(--c-bordure);
  border-top-color: var(--c-marque);
  border-radius: var(--rayon-pilule);
  animation: tourne var(--duree-rotation) linear infinite;
}
.form-status.is-success {
  background: var(--c-succes-fond);
  box-shadow: inset var(--trait-fort) 0 0 var(--c-succes);
  color: var(--c-succes);
  font-weight: var(--graisse-moyenne);
}
.form-status.is-success::before {
  background: var(--c-succes);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 2.8 2.8L16 9.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 2.8 2.8L16 9.5'/%3E%3C/svg%3E");
}
.form-status.is-error {
  background: var(--c-erreur-fond);
  box-shadow: inset var(--trait-fort) 0 0 var(--c-erreur);
  color: var(--c-erreur);
  font-weight: var(--graisse-moyenne);
}
.form-status.is-error::before {
  background: var(--c-erreur);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E");
}
.form-status a { color: inherit; }

.field { display: grid; gap: var(--esp-2); }
.field__label { font-weight: var(--graisse-forte); color: var(--c-texte); line-height: var(--lh-titre); }
.field__hint { font-weight: var(--graisse-normale); color: var(--c-texte-2); }

.input {
  width: 100%;
  min-height: var(--cible-tactile);
  padding: var(--esp-2) var(--esp-4);
  background: var(--c-fond);
  border: var(--trait-fin) solid var(--c-bordure-forte);
  border-radius: var(--rayon-2);
  color: var(--c-texte);
  font: inherit;
  line-height: var(--lh-titre);
  transition: border-color var(--duree) var(--courbe), background-color var(--duree) var(--courbe);
}
textarea.input { min-height: var(--hauteur-zone-message); padding-block: var(--esp-3); resize: vertical; line-height: var(--lh-texte); }
.input:hover { border-color: var(--c-texte-2); }
.input:focus-visible {
  border-color: var(--c-marque);
  outline: var(--focus-largeur) solid var(--c-focus);
  outline-offset: 0;
}
.input[aria-invalid="true"],
.input:user-invalid {
  border-color: var(--c-erreur);
  border-width: var(--trait-moyen);
  background: var(--c-erreur-fond);
}
.input[aria-invalid="true"]:focus-visible { outline-color: var(--c-erreur); }
.input:disabled {
  background: var(--c-desactive-fond);
  border-color: var(--c-bordure);
  color: var(--c-desactive-texte);
  cursor: not-allowed;
}
.field__error {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  color: var(--c-erreur);
  font-size: var(--fs-1);
  font-weight: var(--graisse-moyenne);
}

.form__submit { justify-self: start; }

/* Champ piège anti-robots : hors de vue, jamais display:none seul */
.hp {
  position: absolute;
  inset-inline-start: 0;
  width: var(--trait-fin);
  height: var(--trait-fin);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (min-width: 64em) {
  .contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--esp-8); padding-block: var(--esp-8) var(--esp-9); align-items: start; }
  .contact__aside { position: sticky; top: calc(var(--hauteur-entete) + var(--esp-5)); }
  .contact__lead { font-size: var(--fs-4); }
  .contact__aside .call-card__number { font-size: var(--fs-6); }
}

/* --- 13. Pied de page réduit (marque + liens), marine foncé de A ------------- */
.footer-bar {
  padding-block: var(--esp-6);
  background: var(--c-marque-fonce);
  color: var(--c-texte-inverse-2);
}
.footer-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-5);
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  color: var(--c-texte-inverse);
  font-family: var(--police-titre);
  font-size: var(--fs-3);
  font-weight: var(--graisse-forte);
  text-decoration: none;
  border-radius: var(--rayon-2);
}
.footer-brand:hover { color: var(--c-texte-inverse); text-decoration: underline; }
.footer-brand__tile {
  display: grid;
  place-items: center;
  width: var(--tuile-logo);
  height: var(--tuile-logo);
  padding: var(--esp-1);
  border-radius: var(--rayon-2);
  background: var(--c-fond);
}
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--esp-4); }
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-tactile);
  color: var(--c-texte-inverse);
  text-decoration: none;
  border-radius: var(--rayon-1);
}
.footer-links a:hover { text-decoration: underline; text-decoration-thickness: var(--trait-fin); }

/* --- 14. Pages de texte : À propos, Conditions de vente ---------------------
   Non maquettées : gabarit des pages internes de la maquette (en-tête,
   bandeau avec fil d'Ariane et titre, bande Infos pratiques, pied) ; le texte
   suit, en colonne de lecture (--mesure, 68 caractères) alignée sur le titre.
   Titres, paragraphes et listes ne prennent que des jetons. */
.page-text { padding-block: var(--esp-7) var(--esp-8); }
.prose { max-width: var(--mesure); }
.prose > * + * { margin-top: var(--esp-4); }
.prose > :first-child { margin-top: 0; }
.prose > h2 { margin-top: var(--esp-7); font-size: var(--fs-5); line-height: var(--lh-serre); }
.prose > h3 { margin-top: var(--esp-6); font-size: var(--fs-4); }
.prose > h2 + h3 { margin-top: var(--esp-5); }
.prose > :is(h2, h3) + :not(h2, h3) { margin-top: var(--esp-3); }
.prose strong { color: var(--c-marque); font-weight: var(--graisse-forte); }
.prose ul,
.prose ol { margin-bottom: 0; padding-inline-start: var(--esp-5); }
.prose li { padding-inline-start: var(--esp-1); }
.prose li + li { margin-top: var(--esp-2); }
.prose li::marker { color: var(--c-marque); }
/* Logo long en tête de la page À propos (image d'origine de la page) */
.prose__logo { margin-inline: 0; margin-bottom: 0; }
.prose__logo img { width: var(--largeur-enseigne); }
/* Lien de fin de texte (À propos → Conditions de vente) */
.prose > .prose__suite { margin-top: var(--esp-6); }
@media (min-width: 64em) {
  .page-text { padding-block: var(--esp-8) var(--esp-9); }
}

/* --- 15. Mouvement réduit ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
  .btn:active,
  .service:hover { transform: none; }
  .btn:hover .icon--arrow,
  .link-arrow:hover .icon, .service:hover .link-arrow .icon { transform: none; }
  /* roue figée : un quart de cercle reste visible, l'état est dit par le texte */
  .spinner, .form-status.is-sending::before { animation: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}