/* ==========================================================================
   amlipro.be — site vitrine — feuille unique (refonte 2026)
   Mobile-first. Points de rupture : 480, 768, 1024, 1280 px.
   Aucun framework. Aucune ressource externe.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Polices auto-hébergées (woff2, sous-ensemble latin, 2 graisses / famille)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/spectral-500-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: "Spectral";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/spectral-600-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: "Public Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/public-sans-400-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: "Public Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/public-sans-600-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;
}

/* --------------------------------------------------------------------------
   2. Jetons (palette dérivée du logo — ratios vérifiés, voir tools/contrast.py)
   -------------------------------------------------------------------------- */
:root {
  /* Marque */
  --c-navy:        #1B3A7E; /* bleu du logo — texte sur clair 10.75:1, fond avec texte blanc 10.75:1 */
  --c-navy-dark:   #142C63; /* sections sombres — blanc 13.4:1, orange vif 4.8:1 */
  --c-navy-deep:   #0F2148; /* pied de page — blanc 15.8:1 */

  /* RÈGLE ORANGE — non négociable.
     Les deux orange du logo sont à 3,7:1 (et moins) sur fond clair : ils ne portent JAMAIS
     de texte, d'icône ni de libellé de bouton, ni en couleur de texte ni en fond sous du texte.
     Ils servent uniquement aux aplats décoratifs (filets, pastilles, formes pleines sans texte).
     Le jeton porte « aplat » dans son nom pour rendre tout mésusage visible à la relecture.
     Tout texte, icône ou fond de bouton orange utilise --c-orange-text (#AF4D11, 5,4:1). */
  --c-orange-aplat:     #DB6015; /* orange du logo — APLAT DÉCORATIF SEULEMENT, jamais de texte dessus */
  --c-orange-vif-aplat: #F07A2A; /* orange vif du logo — APLAT DÉCORATIF sur fond sombre, jamais de texte dessus */
  --c-orange-text:      #AF4D11; /* orange assombri : texte, icônes, fond de bouton avec texte blanc (5.4:1) */
  --c-orange-soft:      #F5924E; /* texte/icône orange sur fond marine sombre (5.8:1) */

  /* Neutres */
  --c-ink:         #1A2238; /* texte courant (15.8:1) */
  --c-muted:       #4F5B70; /* texte secondaire — 6.9:1 sur blanc, 6.3:1 sur papier */
  --c-paper:       #F4F6FA; /* fond de section clair */
  --c-white:       #FFFFFF;
  --c-line:        #D9DEE8; /* filets décoratifs (pas d'exigence de contraste) */
  --c-border:      #6B7790; /* bordures de champs de formulaire (4.5:1, ≥ 3:1 requis) */
  --c-on-dark:     #C9D3E6; /* texte secondaire sur marine (8.9:1) */
  --c-focus:       #1B3A7E;

  /* Sémantique */
  --c-success:     #1E6B3A; /* 6.1:1 sur blanc */
  --c-error:       #A8281E; /* 7.5:1 sur blanc */
  --c-success-bg:  #E8F3EC;
  --c-error-bg:    #FBEAE8;

  /* Typographie */
  --f-serif: "Spectral", Georgia, "Times New Roman", serif;
  --f-sans:  "Public Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-0: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);   /* 14 → 15 */
  --fs-1: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);        /* 16 → 17 */
  --fs-2: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);       /* 18 → 20 */
  --fs-3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);        /* 22 → 28  h3 */
  --fs-4: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);          /* 28 → 40  h2 */
  --fs-5: clamp(2.125rem, 1.6rem + 2.6vw, 3.5rem);         /* 34 → 56  h1 */
  --lh-tight: 1.15;
  --lh-body: 1.6;

  /* Espacements (échelle 4 px) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem;    --s-7: 3rem;   --s-8: 4rem;    --s-9: 6rem;
  --section: clamp(3rem, 2rem + 4vw, 6rem);

  /* Mise en page */
  --container: 1200px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --radius: 10px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 2px rgba(15, 33, 72, .06), 0 4px 12px rgba(15, 33, 72, .07);
  --shadow: 0 2px 6px rgba(15, 33, 72, .06), 0 14px 32px rgba(15, 33, 72, .10);
  --shadow-btn: 0 6px 16px rgba(175, 77, 17, .24);
  /* Relief statique : dégradés et halos figés en CSS (aucune animation, aucun filtre, aucun JS).
     Opacités des halos plafonnées pour garder l'orange texte ≥ 4,5:1 au point le plus défavorable. */
  --halo-navy:   radial-gradient(circle, rgba(27, 58, 126, .06) 0 45%, rgba(27, 58, 126, 0) 70%);
  --halo-orange: radial-gradient(circle, rgba(240, 122, 42, .08) 0 40%, rgba(240, 122, 42, 0) 70%);
  --grad-navy:   linear-gradient(135deg, #1B3A7E 0%, #142C63 55%, #0F2148 100%);
  --grad-h1:     linear-gradient(120deg, #1B3A7E 0%, #2F5FB5 100%); /* titre d'affichage ≥ 32 px ; point clair #2F5FB5 = 5,3:1 sur le hero */
  --glass:       rgba(255, 255, 255, .92); /* verre clair : mesuré sur photo noire = #EBEBEB (orange texte 4,5:1) */
  --glass-dark:  rgba(255, 255, 255, .08); /* verre sur marine : mesuré sur le point clair #1B3A7E = #2D4A88 */
  --ease:        cubic-bezier(.2, .7, .2, 1);
  --t-fast:      .25s;
  --t-med:       .4s;
  --header-h: 64px;
  --callbar-h: 56px;
  --tap: 44px; /* cible tactile minimale */
}

/* --------------------------------------------------------------------------
   2b. Mouvement — règle : on n'anime que transform et opacity (composés GPU).
       Jamais filter, backdrop-filter, box-shadow, width/height, top/left.
       Tout s'arrête sous prefers-reduced-motion (section 9).
   -------------------------------------------------------------------------- */
@keyframes drift   { 0%, 100% { transform: translate3d(0, 0, 0); }     50% { transform: translate3d(70px, -50px, 0); } }
@keyframes drift-2 { 0%, 100% { transform: translate3d(0, 0, 0); }     50% { transform: translate3d(-60px, 40px, 0); } }
@keyframes marquee { from { transform: translate3d(0, 0, 0); }         to { transform: translate3d(-50%, 0, 0); } }

/* Halos : flou FIXE (filter posé une fois), seule la position bouge en transform */
.halo {
  position: absolute; pointer-events: none; border-radius: 50%; z-index: 0;
  filter: blur(40px); opacity: .9;
}
.halo--orange { width: 620px; height: 620px; right: -240px; top: -300px; background: radial-gradient(circle, rgba(240, 122, 42, .22) 0 40%, rgba(240, 122, 42, 0) 70%); }
.halo--blue   { width: 560px; height: 560px; left: -220px; bottom: -320px; background: radial-gradient(circle, rgba(62, 110, 190, .35) 0 40%, rgba(62, 110, 190, 0) 70%); }
.halo--drift   { animation: drift 18s ease-in-out infinite; will-change: transform; }
.halo--drift-2 { animation: drift-2 22s ease-in-out infinite; will-change: transform; }

/* --------------------------------------------------------------------------
   3. Réinitialisation
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
body {
  font-family: var(--f-sans);
  font-size: var(--fs-1);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
address { font-style: normal; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--s-6) 0; }
:target { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* Focus visible, uniforme et contrasté */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible, .bg-dark :focus-visible { outline-color: var(--c-white); }

/* --------------------------------------------------------------------------
   4. Typographie
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: var(--f-serif);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--c-navy);
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}
h1, .h1 { font-size: var(--fs-5); letter-spacing: -0.02em; }
h2, .h2 { font-size: var(--fs-4); }
h3, .h3 { font-size: var(--fs-3); }
h4, .h4 { font-size: var(--fs-2); font-family: var(--f-sans); font-weight: 600; }
p, li, dd { max-width: 68ch; }
p + p { margin-top: var(--s-4); }
strong, b { font-weight: 600; }
small, .small { font-size: var(--fs-0); }
.lead { font-size: var(--fs-2); color: var(--c-muted); }
.muted { color: var(--c-muted); }
.eyebrow {
  font-family: var(--f-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-orange-text);
  margin-bottom: var(--s-3);
}
.on-dark, .bg-dark { color: var(--c-white); }
.on-dark h1, .on-dark h2, .on-dark h3, .bg-dark h1, .bg-dark h2, .bg-dark h3 { color: var(--c-white); }
.on-dark .eyebrow, .bg-dark .eyebrow { color: var(--c-orange-soft); }
.on-dark .muted, .bg-dark .muted, .on-dark p, .bg-dark p { color: var(--c-on-dark); }
.on-dark strong, .bg-dark strong { color: var(--c-white); }

a { color: var(--c-navy); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
.on-dark a, .bg-dark a { color: var(--c-white); }
.link-plain { text-decoration: none; }
.link-plain:hover { text-decoration: underline; }
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 600; text-decoration: none; color: var(--c-orange-text);
  min-height: var(--tap);
}
.link-arrow:hover { text-decoration: underline; }
.link-arrow .icon { width: 1.1em; height: 1.1em; }

/* --------------------------------------------------------------------------
   5. Mise en page
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(820px + 2 * var(--gutter)); }
.section { padding-block: var(--section); }
.section--paper { background: var(--c-paper); }
.section--navy { background: var(--c-navy-dark) var(--grad-navy); color: var(--c-white); }
/* Halo statique en arrière-plan d'une section (forme figée, sans filtre ni animation) */
.section--halo { position: relative; overflow: hidden; }
.section--halo > .container { position: relative; }
.section--halo::before {
  content: ""; position: absolute; pointer-events: none; border-radius: 50%;
  width: 640px; height: 640px; right: -240px; top: -300px; background: var(--halo-navy);
}
.section-head { max-width: 68ch; margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.section-head::before { content: ""; display: block; width: 48px; height: 4px; border-radius: 2px; background: var(--c-orange-aplat); margin-bottom: var(--s-4); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center::before { margin-inline: auto; }
.section-head--center p { margin-inline: auto; }
.section-head h2 + p { margin-top: var(--s-4); }

.grid { display: grid; gap: var(--s-5); }
.grid > * { min-width: 0; }
@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--split { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s-7); }
  .grid--top { align-items: start; }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--split { grid-template-columns: 1.05fr 1fr; gap: var(--s-8); }
}
.stack > * + * { margin-top: var(--s-4); }
.stack--lg > * + * { margin-top: var(--s-6); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.flow-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------------------------
   6. Boutons — deux seulement : « Appeler » (primaire) et « Demander un devis » (secondaire)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0.75rem 1.5rem;
  font-family: var(--f-sans); font-size: 1rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; text-align: center; white-space: nowrap;
  border: 2px solid transparent; border-radius: var(--radius-sm);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn .icon { width: 1.25em; height: 1.25em; flex: none; }
.btn { transition: background-color var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-fast) var(--ease); }
.btn--primary { background: var(--c-orange-text); color: var(--c-white); border-color: var(--c-orange-text); box-shadow: var(--shadow-btn); }
.btn--primary:hover, .btn--primary:focus-visible { background: #93400E; border-color: #93400E; }
@media (hover: hover) { .btn:hover { transform: translateY(-2px); } }
.btn:active { transform: translateY(0) scale(.98); }
.btn--secondary { background: transparent; color: var(--c-navy); border-color: var(--c-navy); }
.btn--secondary:hover, .btn--secondary:focus-visible { background: var(--c-navy); color: var(--c-white); }
.btn--navy { background: var(--c-navy); color: var(--c-white); border-color: var(--c-navy); }
.btn--navy:hover, .btn--navy:focus-visible { background: var(--c-navy-dark); border-color: var(--c-navy-dark); }
.on-dark .btn--secondary, .bg-dark .btn--secondary { color: var(--c-white); border-color: var(--c-white); }
.on-dark .btn--secondary:hover, .bg-dark .btn--secondary:hover { background: var(--c-white); color: var(--c-navy); }
.btn--block { display: flex; width: 100%; }
.btn--lg { min-height: 56px; padding: 1rem 2rem; font-size: 1.0625rem; }
@media (max-width: 479px) { .btn { white-space: normal; } }

/* --------------------------------------------------------------------------
   7. Composants de base
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-top: 4px solid var(--c-navy); /* liseré : marine par défaut, orange (aplat) sur fond papier */
  border-radius: var(--radius);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  box-shadow: var(--shadow);
}
/* Survol : agrandissement en transform ; l'ombre renforcée est un pseudo-élément dont on anime l'opacité
   (jamais box-shadow). Conditionné à (hover: hover) : sur tactile, seul un état actif bref. */
.card--hover { transition: transform var(--t-med) var(--ease); }
.card--hover::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: -1;
  box-shadow: 0 28px 56px rgba(15, 33, 72, .18); opacity: 0; transition: opacity var(--t-med) ease;
}
@media (hover: hover) {
  .card--hover:hover, .card--hover:focus-within { transform: scale(1.03); z-index: 1; }
  .card--hover:hover::after, .card--hover:focus-within::after { opacity: 1; }
  .card--service:hover h3 { color: var(--c-orange-text); }
}
.card--hover:active { transform: scale(.985); }
.card--service h3 { transition: color var(--t-fast) ease; }
.section--paper .card { border-top-color: var(--c-orange-aplat); }
.card--paper { background: var(--c-paper); border-color: transparent; }
.card > * + * { margin-top: var(--s-3); }
.card h3 { font-size: var(--fs-2); }
.card .icon-box { margin-bottom: var(--s-4); }
.icon { width: 1.5rem; height: 1.5rem; flex: none; }
.icon--sm { width: 1.125rem; height: 1.125rem; }
.icon--lg { width: 2rem; height: 2rem; }
/* Icônes sur pastille teintée (jamais nues sur blanc). Ratios : marine sur #E6EBF5 9,0:1 ; orange texte sur #FBEFE6 4,8:1 */
.icon-box {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.25rem; height: 3.25rem; border-radius: var(--radius-sm);
  background: #E6EBF5; color: var(--c-navy);
}
.icon-box--orange { color: var(--c-orange-text); background: #FBEFE6; }
.icon-box--dark { background: rgba(240, 122, 42, .18); color: var(--c-orange-soft); } /* sur marine : 4,9:1 */

.list-check { display: grid; gap: var(--s-3); }
.list-check li { display: flex; gap: var(--s-3); align-items: flex-start; max-width: none; }
.list-check .icon { color: var(--c-orange-text); margin-top: 0.15em; width: 1.25rem; height: 1.25rem; }
.on-dark .list-check .icon, .bg-dark .list-check .icon { color: var(--c-orange-soft); }

.contact-line {
  display: flex; gap: var(--s-3); align-items: flex-start;
  min-height: var(--tap); text-decoration: none; color: inherit;
}
.contact-line .icon { color: var(--c-orange-text); margin-top: 0.2em; }
.on-dark .contact-line .icon, .bg-dark .contact-line .icon { color: var(--c-orange-soft); }
.contact-line strong { display: block; }

.tag {
  display: inline-block; padding: 0.2em 0.65em; border-radius: 999px;
  font-size: 0.8125rem; font-weight: 600; background: var(--c-paper); color: var(--c-navy);
}

/* Réseaux sociaux (emplacement réservé dans le pied de page, comptes en cours de récupération) */
.social { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.social__link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 var(--s-3);
  border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--radius-sm);
  color: var(--c-white); text-decoration: none; font-weight: 600; font-size: var(--fs-0);
}
.social__link:hover, .social__link:focus-visible { background: rgba(255, 255, 255, .1); text-decoration: none; }
.social-slot:empty { display: none; }

/* Placeholder d'image en attente d'une photo réelle (TODO) */
.img-todo {
  display: grid; place-items: center; aspect-ratio: 4 / 3; width: 100%;
  background: repeating-linear-gradient(45deg, #E9ECF2 0 12px, #F1F3F7 12px 24px);
  border-radius: var(--radius); color: var(--c-muted); font-size: var(--fs-0); text-align: center; padding: var(--s-4);
}
.img-todo--portrait { aspect-ratio: 3 / 4; max-width: 320px; }
.img-frame { border-radius: var(--radius); overflow: hidden; }
.img-frame img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   8. Formulaires
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); }
.field label { font-weight: 600; }
.field .hint { font-size: var(--fs-0); color: var(--c-muted); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 48px; padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-white); color: var(--c-ink);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline-offset: 0; border-color: var(--c-navy); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--c-error); border-width: 2px; }
.field-error { color: var(--c-error); font-size: var(--fs-0); font-weight: 600; }
.field-error:empty { display: none; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* pot de miel */

.alert {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4); border-radius: var(--radius-sm); border: 1px solid transparent;
}
.alert .icon { margin-top: 0.1em; }
.alert:empty { display: none; }
.alert--success { background: var(--c-success-bg); color: var(--c-success); border-color: #BFDCC8; }
.alert--error { background: var(--c-error-bg); color: var(--c-error); border-color: #EFC2BE; }
.alert p { max-width: none; color: inherit; }

/* --------------------------------------------------------------------------
   9. Accessibilité, mouvement, impression
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 1000;
  padding: var(--s-3) var(--s-4); background: var(--c-navy); color: var(--c-white);
  border-radius: var(--radius-sm); text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: var(--s-4); }

/* Apparition au défilement (fondu + translation), uniquement quand JS est actif ET que
   l'utilisateur n'a pas demandé moins de mouvement. Sans JS : tout est visible. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease-out, transform .55s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .grid > .reveal:nth-child(2) { transition-delay: .08s; }
.js .grid > .reveal:nth-child(3) { transition-delay: .16s; }
.js .grid > .reveal:nth-child(4) { transition-delay: .24s; }
.js .grid > .reveal:nth-child(5) { transition-delay: .32s; }
.js .grid > .reveal:nth-child(6) { transition-delay: .40s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .halo { display: none; }
  /* Bande défilante : plus aucun mouvement, la liste s'affiche à plat (copie masquée) */
  .ticker__inner { animation: none !important; width: auto; flex-wrap: wrap; justify-content: center; }
  .ticker__track[aria-hidden="true"] { display: none; }
  .ticker__track { flex-wrap: wrap; justify-content: center; }
}

@media print {
  .skip-link, .call-bar, .site-nav-toggle, .no-print { display: none !important; }
  body { color: #000; background: #fff; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  .section { padding-block: 1.5rem; }
}

/* --------------------------------------------------------------------------
   10. Barre d'appel mobile (fixe en bas, discrète, disparaît ≥ 768 px et à l'impression)
   -------------------------------------------------------------------------- */
.call-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: var(--callbar-h); padding: var(--s-2) var(--s-4);
  padding-bottom: calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
  background: var(--c-navy); color: var(--c-white);
  box-shadow: 0 -2px 12px rgba(15, 33, 72, .25);
  text-decoration: none; font-weight: 600;
}
.call-bar .icon { color: var(--c-orange-soft); }
.call-bar span + span { color: var(--c-on-dark); font-weight: 400; font-size: var(--fs-0); }
body:has(.call-bar) { padding-bottom: calc(var(--callbar-h) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 768px) {
  .call-bar { display: none; }
  body:has(.call-bar) { padding-bottom: 0; }
}

/* ==========================================================================
   11. En-tête et navigation
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: 800; background: var(--c-white); border-bottom: 1px solid var(--c-line); box-shadow: 0 2px 12px rgba(15, 33, 72, .06); }
.topbar { display: none; background: var(--c-navy-deep); color: var(--c-white); font-size: var(--fs-0); }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; min-height: 40px; gap: var(--s-4); }
.topbar a { color: var(--c-white); text-decoration: none; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; }
.topbar a:hover { text-decoration: underline; }
.topbar .icon { width: 1.1rem; height: 1.1rem; color: var(--c-orange-soft); }
.topbar__hours { color: var(--c-on-dark); }
.topbar__hours::before { content: "·"; margin-right: var(--s-2); }

.header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: var(--header-h); }
.brand { display: flex; align-items: center; min-height: var(--tap); flex: none; }
.brand img { height: 30px; width: auto; }
@media (min-width: 480px) { .brand img { height: 36px; } }

.header__actions { display: flex; align-items: center; gap: var(--s-2); }
.header__actions .btn { display: none; }
.header__call {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap); min-width: var(--tap); padding: 0 var(--s-2);
  color: var(--c-navy); font-weight: 600; text-decoration: none; border-radius: var(--radius-sm);
}
.header__call .icon { color: var(--c-orange-text); }
.header__call span:not(.sr-only) { display: none; }
@media (min-width: 480px) { .header__call span:not(.sr-only) { display: inline; } }

.site-nav-toggle {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap); min-width: var(--tap); padding: 0 var(--s-3);
  border: 1.5px solid var(--c-navy); border-radius: var(--radius-sm); color: var(--c-navy); font-weight: 600;
}
.site-nav-toggle [data-label] { display: none; } /* < 480 px : icône seule, nom accessible via aria-label */
@media (min-width: 480px) { .site-nav-toggle [data-label] { display: inline; } }
.site-nav-toggle .icon--close { display: none; }
.site-nav-toggle[aria-expanded="true"] .icon--menu { display: none; }
.site-nav-toggle[aria-expanded="true"] .icon--close { display: block; }

/* Tiroir mobile / tablette */
.site-nav {
  position: fixed; top: var(--header-h); right: 0; bottom: 0; z-index: 850;
  width: min(100%, 400px); overflow-y: auto;
  background: var(--c-white); border-left: 1px solid var(--c-line); box-shadow: var(--shadow);
  padding: var(--s-5) var(--gutter) calc(var(--s-6) + var(--callbar-h));
  transform: translateX(100%); visibility: hidden;
  transition: transform .2s ease-out, visibility .2s;
}
.site-nav.is-open { transform: none; visibility: visible; }
body.nav-open { overflow: hidden; }
.site-nav__list { display: grid; gap: var(--s-1); }
.site-nav__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  width: 100%; min-height: 48px; padding: var(--s-2) var(--s-3); text-align: left;
  border-radius: var(--radius-sm); font-weight: 600; color: var(--c-ink); text-decoration: none;
}
.site-nav__link:hover { background: var(--c-paper); }
.site-nav__link[aria-current="page"], .is-current > .site-nav__link { color: var(--c-navy); background: var(--c-paper); }
.site-nav__sub { display: grid; gap: var(--s-1); margin: var(--s-1) 0 var(--s-3) var(--s-3); padding-left: var(--s-3); border-left: 2px solid var(--c-line); }
.site-nav__sub a { display: flex; align-items: center; min-height: var(--tap); padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); color: var(--c-ink); text-decoration: none; }
.site-nav__sub a:hover { background: var(--c-paper); }
.site-nav__sub a[aria-current="page"] { color: var(--c-navy); font-weight: 600; }
.site-nav__extra { display: grid; gap: var(--s-3); margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--c-line); }
.site-nav__hours, .site-nav__client { display: flex; align-items: center; gap: var(--s-2); color: var(--c-muted); font-size: var(--fs-0); min-height: var(--tap); text-decoration: none; }
.site-nav__hours .icon, .site-nav__client .icon { color: var(--c-orange-text); }

@media (min-width: 1024px) {
  .topbar { display: block; }
  .brand img { height: 48px; }
  .header__actions .btn { display: inline-flex; min-height: var(--tap); padding: 0.55rem 1.1rem; }
  .header__call, .site-nav-toggle, .site-nav__extra { display: none; }
  .site-nav {
    position: static; width: auto; overflow: visible; transform: none; visibility: visible;
    background: none; border: 0; box-shadow: none; padding: 0; transition: none;
  }
  .site-nav__list { display: flex; align-items: center; gap: var(--s-1); }
  .site-nav__link { width: auto; min-height: var(--tap); padding: var(--s-2) 0.85rem; white-space: nowrap; position: relative; }
  .site-nav__link:hover { background: none; }
  /* Soulignement animé en transform (barre orange qui s'étire depuis la gauche) */
  .site-nav__link::after {
    content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 4px; height: 2px; border-radius: 1px;
    background: var(--c-orange-aplat); transform: scaleX(0); transform-origin: left; transition: transform var(--t-fast) var(--ease);
  }
  .site-nav__link:hover::after, .site-nav__link:focus-visible::after, .site-nav__link[aria-current="page"]::after, .is-current > .site-nav__link::after { transform: scaleX(1); }
  .site-nav__link[aria-current="page"], .is-current > .site-nav__link { background: none; }
  .has-sub { position: relative; }
  .has-sub .site-nav__link[aria-expanded="true"] .icon { transform: rotate(180deg); }
  .site-nav__sub {
    display: none; position: absolute; top: 100%; left: 0; min-width: 320px;
    margin: var(--s-1) 0 0; padding: var(--s-2); border: 1px solid var(--c-line); border-left-width: 1px;
    background: var(--c-white); border-radius: var(--radius); box-shadow: var(--shadow);
  }
  .has-sub:hover .site-nav__sub, .has-sub:focus-within .site-nav__sub, .has-sub.is-open .site-nav__sub { display: grid; }
}

/* ==========================================================================
   12. Accueil
   ========================================================================== */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--c-white) 0%, var(--c-paper) 100%);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); border-bottom: 1px solid var(--c-line);
}
/* Halos inspirés de 3a : flou fixe, dérive lente en transform (arrêt sous prefers-reduced-motion).
   Opacité au centre plafonnée (marine 6 %, orange 8 %) : l'orange texte reste ≥ 4,5:1 sous le halo. */
.hero::before, .hero::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(36px); will-change: transform; }
.hero::before { width: 760px; height: 760px; right: -240px; top: -340px; background: var(--halo-navy); animation: drift 20s ease-in-out infinite; }
.hero::after { width: 620px; height: 620px; left: -280px; bottom: -360px; background: var(--halo-orange); animation: drift-2 24s ease-in-out infinite; }
.hero__grid { position: relative; display: grid; gap: var(--s-6); }
/* Titre d'affichage en dégradé (≥ 32 px à toutes les largeurs) ; repli couleur pleine si background-clip n'est pas supporté */
.hero h1 { color: var(--c-navy); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hero h1 { background: var(--grad-h1); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.hero__media { position: relative; }
.hero__media::before { /* aplat orange décalé derrière la photo (aplat décoratif, jamais de texte dessus) */
  content: ""; position: absolute; right: -14px; bottom: -14px; width: 55%; height: 55%;
  background: linear-gradient(135deg, var(--c-orange-vif-aplat), var(--c-orange-aplat)); border-radius: var(--radius); opacity: .95;
}
.hero__media > * { position: relative; }
.hero__media .img-todo, .hero__media picture { box-shadow: var(--shadow); border: 1px solid var(--c-line); background-color: #EEF1F6; }
/* Carte en verre posée sur la photo : téléphone + horaires (ratios mesurés sur photo noire, cas le plus défavorable) */
.glass { background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .7); }
.hero__card {
  position: absolute; left: -8px; bottom: 14%; z-index: 2;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-5) var(--s-3) var(--s-3); border-radius: var(--radius);
  box-shadow: 0 20px 44px rgba(15, 33, 72, .22); text-decoration: none; color: var(--c-ink);
  transition: transform var(--t-med) var(--ease);
}
.hero__card-body { display: grid; line-height: 1.3; }
.hero__card-body strong { font-size: var(--fs-2); color: var(--c-navy); }
.hero__card-body span { font-size: var(--fs-0); color: var(--c-muted); }
@media (hover: hover) { .hero__card:hover { transform: translateY(-4px) scale(1.02); } }
@media (min-width: 768px) { .hero__card { left: -24px; bottom: 10%; } }
.hero h1 { margin-top: var(--s-2); }
.hero .lead { margin-top: var(--s-4); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero__hours { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); color: var(--c-muted); font-size: var(--fs-0); }
.hero__hours .icon { color: var(--c-orange-text); }
.hero__media .img-todo { aspect-ratio: 4 / 3; }
@media (min-width: 768px) { .hero__media .img-todo { max-width: 640px; } }
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: var(--s-8); }
  .hero__media .img-todo { max-width: none; }
}

.card--service { display: flex; flex-direction: column; }
.card--service p { flex: 1 0 auto; }
.card--service .link-arrow { margin-top: var(--s-4); }
.card--service:hover { border-color: var(--c-navy); }

.sectors { margin-bottom: var(--s-5); }
.sector { display: flex; gap: var(--s-4); align-items: flex-start; }
.sector .icon-box { background: #FBEFE6; color: var(--c-orange-text); }
.sector > div > * + * { margin-top: var(--s-2); }
.sector__name { font-size: var(--fs-2); }
.sector__text { font-size: var(--fs-0); color: var(--c-muted); }
.sectors-more { display: grid; gap: var(--s-4); border-top-color: var(--c-line); border-left: 4px solid var(--c-navy); }
.sectors-more h3 { font-size: var(--fs-2); }
@media (min-width: 768px) {
  .sectors-more { grid-template-columns: 1fr auto; align-items: center; gap: var(--s-6); }
}

.why { position: relative; overflow: hidden; }
.why > .container { position: relative; z-index: 1; }
.why .section-head { margin-bottom: var(--s-6); }
/* Panneaux en verre sur le dégradé marine (bento 3a) : verre statique, relief au survol en transform */
.why__item {
  position: relative;
  background: var(--glass-dark); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius); padding: var(--s-5);
  box-shadow: 0 18px 40px rgba(3, 10, 30, .32);
  transition: transform var(--t-med) var(--ease);
}
.why__item::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: -1;
  border: 1px solid rgba(245, 146, 78, .55); opacity: 0; transition: opacity var(--t-med) ease;
}
@media (hover: hover) {
  .why__item:hover { transform: translateY(-6px); }
  .why__item:hover::after { opacity: 1; }
}
.why__item h3 { font-size: var(--fs-2); margin-top: var(--s-4); }
.why__item p { margin-top: var(--s-2); }
.why__item a { font-weight: 600; }

.cta-final { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--c-paper) 0%, var(--c-white) 70%); }
.cta-final::before { content: ""; position: absolute; pointer-events: none; border-radius: 50%; width: 560px; height: 560px; left: -280px; bottom: -320px; background: var(--halo-orange); }
.cta-final::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; width: 480px; height: 480px; right: -200px; top: -240px; background: var(--halo-navy); }
.cta-final > .container { position: relative; }
.cta-final__lines {
  display: grid; gap: var(--s-3); margin-top: var(--s-5); padding: var(--s-5);
  background: var(--c-white); border: 1px solid var(--c-line); border-left: 4px solid var(--c-orange-aplat);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.cta-final .contact-line a { display: inline-flex; align-items: center; min-height: var(--tap); }
.cta-final__media { display: grid; justify-items: start; gap: var(--s-3); }
.cta-final__caption { color: var(--c-muted); font-size: var(--fs-0); }
@media (min-width: 1024px) { .cta-final__media { justify-items: center; } }

/* ==========================================================================
   13. Pied de page
   ========================================================================== */
.site-footer { background: var(--c-navy-deep); border-top: 4px solid var(--c-orange-aplat); padding-block: var(--s-8) var(--s-6); margin-top: auto; }
.footer__grid { display: grid; gap: var(--s-6); }
.footer__brand { display: inline-block; margin-bottom: var(--s-4); }
.footer__brand img { height: 44px; width: auto; }
.footer__title { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-on-dark); margin-bottom: var(--s-3); }
.footer__links { display: grid; gap: var(--s-1); }
/* Liens du pied de page : chevron qui apparaît + glissement latéral + orange, jamais de soulignement */
.footer__links a {
  position: relative; display: inline-flex; align-items: center; min-height: var(--tap); color: var(--c-white); text-decoration: none;
  transition: color var(--t-fast) ease, transform var(--t-fast) var(--ease); /* transform + opacity uniquement */
}
.footer__links a::before {
  content: "›"; position: absolute; left: -1em; top: 50%;
  color: var(--c-orange-soft); font-weight: 600; opacity: 0; transform: translate(-6px, -50%);
  transition: opacity var(--t-fast) ease, transform var(--t-fast) var(--ease);
}
.footer__links a:hover, .footer__links a:focus-visible { color: var(--c-orange-soft); text-decoration: none; transform: translateX(1em); }
.footer__links a:hover::before, .footer__links a:focus-visible::before { opacity: 1; transform: translate(0, -50%); }
.footer__contact { display: grid; gap: var(--s-2); }
.footer__contact .contact-line { color: var(--c-white); }
.footer__contact .contact-line span { color: var(--c-on-dark); }
.footer__contact .contact-line strong { color: var(--c-white); }
.footer__bottom { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid rgba(255, 255, 255, .15); font-size: var(--fs-0); color: var(--c-on-dark); display: grid; gap: var(--s-2); }
.footer__bottom p { max-width: none; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 0.9fr; gap: var(--s-7); } }

/* ==========================================================================
   14. Bande défilante (ticker) — WCAG 2.2.2 : pause au survol et au focus, arrêt en reduced-motion
   ========================================================================== */
.ticker { position: relative; overflow: hidden; background: var(--c-white); border-bottom: 1px solid var(--c-line); padding: var(--s-4) 0; }
.ticker:focus-visible { outline-offset: -3px; }
.ticker__inner { display: flex; width: max-content; animation: marquee 40s linear infinite; will-change: transform; }
.ticker:hover .ticker__inner, .ticker:focus-within .ticker__inner, .ticker:focus-visible .ticker__inner { animation-play-state: paused; }
.ticker__track { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.ticker__track li {
  display: flex; align-items: center; gap: var(--s-6); padding-right: var(--s-6); max-width: none; white-space: nowrap;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted);
}
.ticker__track li::after { content: "✦"; color: var(--c-orange-text); font-size: .9em; }

/* ==========================================================================
   15. Pages internes
   ========================================================================== */
.page-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--c-white) 0%, var(--c-paper) 100%);
  padding-block: clamp(2rem, 1rem + 3vw, 4rem) clamp(2.5rem, 1.5rem + 4vw, 5rem); border-bottom: 1px solid var(--c-line);
}
.page-hero::before, .page-hero::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(36px); will-change: transform; }
.page-hero::before { width: 640px; height: 640px; right: -240px; top: -320px; background: var(--halo-navy); animation: drift 20s ease-in-out infinite; }
.page-hero::after { width: 520px; height: 520px; left: -260px; bottom: -320px; background: var(--halo-orange); animation: drift-2 24s ease-in-out infinite; }
.page-hero > .container { position: relative; max-width: calc(880px + 2 * var(--gutter)); }
.page-hero h1 { margin-top: var(--s-2); color: var(--c-navy); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .page-hero h1 { background: var(--grad-h1); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.page-hero .lead { margin-top: var(--s-4); }

.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; font-size: var(--fs-0); color: var(--c-muted); margin-bottom: var(--s-4); }
.breadcrumb li + li::before { content: "›"; margin-right: var(--s-2); color: var(--c-orange-text); }
.breadcrumb a { color: var(--c-navy); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* Page contact */
.contact-cards { padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.contact-card { display: grid; gap: var(--s-2); text-decoration: none; color: var(--c-ink); }
.contact-card .icon-box { margin-bottom: var(--s-2); }
.contact-card__label { font-size: 0.8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.contact-card__value { font-family: var(--f-serif); font-size: var(--fs-3); color: var(--c-navy); line-height: 1.2; overflow-wrap: anywhere; }
.contact-card__hint { display: flex; align-items: center; gap: var(--s-2); color: var(--c-muted); font-size: var(--fs-0); }
.contact-card__hint .icon { color: var(--c-orange-text); }
.contact-card--phone { background: var(--c-navy-dark) var(--grad-navy); border-color: transparent; border-top-color: var(--c-orange-aplat); color: var(--c-white); }
.contact-card--phone .contact-card__label, .contact-card--phone .contact-card__hint { color: var(--c-on-dark); }
.contact-card--phone .contact-card__value { color: var(--c-white); }
.contact-card--phone .contact-card__hint .icon { color: var(--c-orange-soft); }
.contact-form__card { border-top-color: var(--c-orange-aplat); }
.contact-form .list-check { margin-top: var(--s-5); }
.contact-form .small { margin-top: var(--s-5); }

/* ==========================================================================
   16. Pages de contenu — mise en scène du texte (peu d'images)
   ========================================================================== */

/* Accroche d'ouverture : grande phrase, filet orange, sur fond clair */
.statement {
  max-width: 30ch; font-family: var(--f-serif); font-weight: 600; line-height: 1.2;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); color: var(--c-navy);
}
.statement--wide { max-width: 46ch; }

/* Bloc contrasté : dégradé marine, verre, pour un message clé ou une liste dense */
.panel {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: var(--c-navy-dark) var(--grad-navy); color: var(--c-white);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  box-shadow: 0 20px 48px rgba(15, 33, 72, .18);
}
.panel > * { position: relative; z-index: 1; }
.panel h2, .panel h3 { color: var(--c-white); }
.panel p, .panel li { color: var(--c-on-dark); }
.panel strong { color: var(--c-white); }
.panel .list-check .icon { color: var(--c-orange-soft); }
.panel .eyebrow { color: var(--c-orange-soft); }
.panel a:not(.btn) { color: var(--c-white); }
/* Bouton secondaire sur fond marine : contour et libellé blancs (10,8:1 au point le plus clair du dégradé) */
.panel .btn--secondary { color: var(--c-white); border-color: rgba(255, 255, 255, .75); background: transparent; }
.panel .btn--secondary:hover, .panel .btn--secondary:focus-visible { background: var(--c-white); color: var(--c-navy); border-color: var(--c-white); }

/* Étapes numérotées : le chiffre porte la hiérarchie */
.steps { counter-reset: step; display: grid; gap: var(--s-5); }
.step {
  position: relative; counter-increment: step;
  padding-left: 4.25rem; min-height: 3rem;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: -0.15em;
  font-family: var(--f-serif); font-size: 2.25rem; font-weight: 600; line-height: 1;
  color: var(--c-orange-text); font-variant-numeric: tabular-nums;
}
.step h3 { font-size: var(--fs-2); }
.step p { margin-top: var(--s-2); }
.panel .step::before { color: var(--c-orange-soft); }
@media (min-width: 768px) { .steps--2 { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-7); } }

/* Liste de prestations : filet à gauche, terme métier en gras */
.spec { display: grid; gap: var(--s-4); }
.spec li {
  max-width: none; padding-left: var(--s-4);
  border-left: 3px solid var(--c-line); transition: border-color var(--t-fast) ease;
}
.spec li strong { display: block; color: var(--c-navy); font-family: var(--f-serif); font-size: var(--fs-2); font-weight: 600; }
.spec li span { display: block; margin-top: var(--s-1); color: var(--c-muted); }
@media (hover: hover) { .spec li:hover { border-left-color: var(--c-orange-aplat); } }
.panel .spec li { border-left-color: rgba(255, 255, 255, .25); }
.panel .spec li strong { color: var(--c-white); }
.panel .spec li span { color: var(--c-on-dark); }
@media (min-width: 768px) { .spec--2 { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-6); } }

/* Termes métier mis en avant (Dimona, DmfA, CP 302…) */
.terms { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.term {
  display: inline-flex; align-items: center; padding: 0.35em 0.85em; border-radius: 999px;
  background: #E6EBF5; color: var(--c-navy); font-size: var(--fs-0); font-weight: 600;
}
.panel .term { background: rgba(255, 255, 255, .12); color: var(--c-white); }

/* Chiffre clé */
.figure-row { display: grid; gap: var(--s-5); }
.figure b {
  display: block; font-family: var(--f-serif); font-weight: 600; line-height: 1;
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem); color: var(--c-navy);
}
.figure span { display: block; margin-top: var(--s-2); color: var(--c-muted); }
.panel .figure b { color: var(--c-white); }
.panel .figure b em { font-style: normal; color: var(--c-orange-soft); }
.panel .figure span { color: var(--c-on-dark); }
@media (min-width: 640px) { .figure-row { grid-template-columns: repeat(3, 1fr); } }

/* Bande d'appel de fin de page */
.cta-band { position: relative; overflow: hidden; background: var(--c-paper); }
.cta-band::before { content: ""; position: absolute; pointer-events: none; border-radius: 50%; width: 520px; height: 520px; right: -240px; top: -260px; background: var(--halo-orange); filter: blur(36px); }
.cta-band > .container { position: relative; }
.cta-band__inner { display: grid; gap: var(--s-5); align-items: center; }
.cta-band h2 { font-size: var(--fs-4); }
@media (min-width: 900px) { .cta-band__inner { grid-template-columns: 1fr auto; gap: var(--s-7); } }

/* ==========================================================================
   17. Pages légales — texte long, lisible, sans fioriture
   ========================================================================== */
.prose { max-width: 72ch; }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { font-size: var(--fs-3); margin-top: var(--s-7); scroll-margin-top: calc(var(--header-h) + 1rem); }
.prose h3 { font-size: var(--fs-2); margin-top: var(--s-6); }
.prose ul, .prose ol { padding-left: 1.25rem; display: grid; gap: var(--s-2); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { max-width: none; }
.prose dl { display: grid; gap: var(--s-3); }
.prose dt { font-weight: 600; color: var(--c-navy); }
.prose dd { margin: 0; color: var(--c-muted); }
@media (min-width: 640px) {
  .prose dl { grid-template-columns: minmax(12rem, auto) 1fr; gap: var(--s-3) var(--s-5); }
  .prose dt, .prose dd { margin: 0; }
}

/* Encadré « à rédiger » : visible, jamais pris pour du contenu définitif */
.todo-box {
  border: 2px dashed var(--c-orange-text); border-radius: var(--radius);
  background: #FBEFE6; padding: var(--s-5); margin-top: var(--s-4);
}
.todo-box > * + * { margin-top: var(--s-3); }
.todo-box p, .todo-box li { color: #6E3009; max-width: none; }
.todo-box__label {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-orange-text);
}
.todo-box .icon { color: var(--c-orange-text); }

/* Sommaire de page légale */
.toc { border-left: 4px solid var(--c-orange-aplat); padding-left: var(--s-4); }
.toc ol { display: grid; gap: var(--s-2); list-style: none; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--c-navy); text-decoration: none; font-weight: 600; }
.toc a::before { content: counter(toc) ". "; color: var(--c-orange-text); margin-right: var(--s-2); }
.toc a:hover { text-decoration: underline; }

/* Canal WhatsApp : lien sortant simple, aucun script ni widget tiers */
.contact-wa {
  display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-5);
  text-decoration: none; color: var(--c-ink); border-top-color: var(--c-orange-aplat);
}
.contact-wa__body { display: grid; gap: var(--s-1); flex: 1; }
.contact-wa__body strong { font-family: var(--f-serif); font-size: var(--fs-2); color: var(--c-navy); }
.contact-wa__body span { color: var(--c-muted); font-size: var(--fs-0); }
.contact-wa__go { color: var(--c-orange-text); flex: none; }

/* --------------------------------------------------------------------------
   18. Taille des cibles (WCAG 2.5.8)
   Les liens en ligne dans une phrase sont exemptés : leur hauteur est contrainte
   par l'interlignage du texte qui les entoure. Les liens autonomes, eux, doivent
   offrir une cible suffisante. On corrige ici ceux qui ne sont pas dans une phrase.
   -------------------------------------------------------------------------- */
.topbar a { min-height: var(--tap); }                        /* barre haute : 40 -> 44 px */
.breadcrumb a { display: inline-flex; align-items: center; min-height: 24px; }
.prose dd a { display: inline-flex; align-items: center; min-height: var(--tap); }
.contact-line a { display: inline-flex; align-items: center; min-height: 24px; }