/* =========================================================================
   IVORY COAST CONNECT — feuille unique
   Direction « Le Dépliant » : la feuille pliée qui se déploie d'un seul
   geste. Facettes planes, arêtes de pli d'un cheveu, cellules qui partagent
   leurs bords, une pastille d'accent pour le pli qui commande tout — le
   numéro de téléphone.

   Aucun arrondi, aucun dégradé fondu : des aplats séparés par des arêtes.
   Une seule famille typographique, Chivo, du 400 au 900.

   L'ACCENT CHANGE SELON LA FAMILLE DE PAGES (voir 1. JETONS). Tout le reste
   — structure, composants, rythme — est strictement identique d'une page à
   l'autre : c'est la même feuille, pliée autrement.

   0. Typographie · 1. Jetons · 2. Base · 3. Surfaces · 4. Navigation
   5. Facettes et cellules · 6. Pastille, rails, plaques · 7. Sections
   8. Formulaires · 9. Pied de page · 10. Responsive
   ========================================================================= */

/* ============================ 0. TYPOGRAPHIE ============================
   Chivo variable, auto-hébergée. Deux sous-ensembles, aucun appel externe. */

@font-face {
  font-family: "Chivo";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/chivo-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: "Chivo";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/chivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* =============================== 1. JETONS ============================== */
:root {
  /* --- La feuille et ses facettes --- */
  --feuille:    #FBFAF7;   /* fond de page */
  --facette-1:  #F4F2EC;   /* facette claire */
  --facette-2:  #EAE7DE;   /* facette d'ombre */
  --blanc:      #FFFFFF;
  --encre:      #16181B;   /* texte, bandes pleines */
  --encre-2:    #24272B;   /* encre levée */
  --gris:       #5E5A52;   /* texte secondaire (6,4:1 sur feuille) */
  --gris-clair: #8C877D;   /* mentions sur fond encre */
  --pli:        #CFC9BC;   /* arête de pli — filets */
  --pli-fort:   #A8A196;   /* arête marquée */
  --whatsapp:   #128C4A;   /* affordance WhatsApp, jamais décorative */
  --marque-orange: #F36C01; /* couleurs du logo (le « O à ondes », la côte ouest) */
  --marque-vert:   #0B9638;
  --alerte:     #B23A2B;   /* erreurs de formulaire */

  /* --- L'ACCENT — décliné par famille de pages -------------------------
     --accent        aplat qui porte du texte (--sur-accent)
     --sur-accent    couleur de ce texte, vérifiée ≥ 4,5:1
     --accent-fonce  texte, liens et icônes SUR la feuille claire
     --accent-voile  teinte très pâle : badges, fonds de cellule
     Par défaut : doré / moutarde — la page d'accueil.                   */
  --accent:        #C9A648;
  --sur-accent:    #16181B;
  --accent-fonce:  #8A6A1E;
  --accent-voile:  #F6EFDC;
  --accent-clair:  #E3C367;   /* accent posé SUR l'encre (≥ 4,5:1) */

  /* --- Trame --- */
  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;   --s7: 3rem;   --s8: 4.5rem;
  --s9: 6.5rem;

  --largeur: 1220px;
  --barre-h: 72px;
  --biais: 13px;          /* profondeur du coin replié des boutons */

  --sortie: cubic-bezier(.16, 1, .3, 1);
  --vite:   170ms var(--sortie);
  --lent:   420ms var(--sortie);

  /* Ombres : décalage franc + flou doux, jamais de halo centré */
  --ombre-facette: 0 14px 28px -18px rgba(22, 24, 27, .40);
  --ombre-levee:   0 20px 38px -20px rgba(22, 24, 27, .46);
  --ombre-plaque:  0 2px 5px -2px rgba(22, 24, 27, .16);
}

/* --- Déclinaisons par famille de pages ---------------------------------
   Contraste vérifié : --sur-accent sur --accent ≥ 5:1, --accent-fonce sur
   --feuille ≥ 4,8:1. Les accents restent des accents : aucun ne devient un
   fond plein de page. Les bandes d'appel restent encre sur toutes les pages. */

body[data-page="services"] {
  --accent: #1F5C8B; --sur-accent: #FFFFFF;
  --accent-fonce: #1A4E76; --accent-voile: #E6EEF5;
  --accent-clair: #7FB3DC;
}
body[data-page="ia"] {
  --accent: #3A3F8F; --sur-accent: #FFFFFF;
  --accent-fonce: #33377D; --accent-voile: #E9EAF5;
  --accent-clair: #9AA0E8;
}
body[data-page="apropos"] {
  --accent: #5B3E8E; --sur-accent: #FFFFFF;
  --accent-fonce: #4E3579; --accent-voile: #EDE8F5;
  --accent-clair: #B49BDD;
}
body[data-page="realisations"] {
  --accent: #1F6B47; --sur-accent: #FFFFFF;
  --accent-fonce: #1A5B3C; --accent-voile: #E5F0EA;
  --accent-clair: #6FC298;
}
body[data-page="devis"] {
  --accent: #B4531F; --sur-accent: #FFFFFF;
  --accent-fonce: #9C4619; --accent-voile: #F7EAE1;
  --accent-clair: #E8A077;
}
body[data-page="contact"] {
  --accent: #146B6B; --sur-accent: #FFFFFF;
  --accent-fonce: #115C5C; --accent-voile: #E3EFEF;
  --accent-clair: #6FBFBF;
}
body[data-page="legal"] {
  --accent: #414B55; --sur-accent: #FFFFFF;
  --accent-fonce: #38414A; --accent-voile: #ECEEF0;
  --accent-clair: #A9B4C0;
}
body[data-page="confidentialite"] {
  --accent: #3E5566; --sur-accent: #FFFFFF;
  --accent-fonce: #354957; --accent-voile: #EAEEF1;
  --accent-clair: #9FB3C4;
}
body[data-page="erreur"] {
  --accent: #9E3B2A; --sur-accent: #FFFFFF;
  --accent-fonce: #8A3324; --accent-voile: #F5E7E4;
  --accent-clair: #E09083;
}

/* --- Un accent par page de service ------------------------------------ */
body[data-page="svc-maintenance"] {
  --accent: #1D5A70; --sur-accent: #FFFFFF;
  --accent-fonce: #184C5E; --accent-voile: #EBF0F2;
  --accent-clair: #93B0BA;
}
body[data-page="svc-reseaux"] {
  --accent: #1F5C8B; --sur-accent: #FFFFFF;
  --accent-fonce: #1A4D75; --accent-voile: #EBF0F5;
  --accent-clair: #93B1C7;
}
body[data-page="svc-starlink"] {
  --accent: #2E4A7D; --sur-accent: #FFFFFF;
  --accent-fonce: #273E69; --accent-voile: #ECEFF3;
  --accent-clair: #9BA8C1;
}
body[data-page="svc-serveurs"] {
  --accent: #44525E; --sur-accent: #FFFFFF;
  --accent-fonce: #39454F; --accent-voile: #EEEFF1;
  --accent-clair: #A5ACB2;
}
body[data-page="svc-cybersecurite"] {
  --accent: #8E3A2E; --sur-accent: #FFFFFF;
  --accent-fonce: #773127; --accent-voile: #F5EDEC;
  --accent-clair: #C9A09B;
}
body[data-page="svc-microsoft-365"] {
  --accent: #6B3A6B; --sur-accent: #FFFFFF;
  --accent-fonce: #5A315A; --accent-voile: #F2EDF2;
  --accent-clair: #B8A0B8;
}
body[data-page="svc-messagerie"] {
  --accent: #2A5F45; --sur-accent: #FFFFFF;
  --accent-fonce: #23503A; --accent-voile: #ECF1EE;
  --accent-clair: #99B2A6;
}
body[data-page="svc-videosurveillance"] {
  --accent: #8A5A1E; --sur-accent: #FFFFFF;
  --accent-fonce: #744C19; --accent-voile: #F4F0EB;
  --accent-clair: #C7B093;
}
body[data-page="svc-sites-web"] {
  --accent: #8A3A62; --sur-accent: #FFFFFF;
  --accent-fonce: #743152; --accent-voile: #F4EDF1;
  --accent-clair: #C7A0B4;
}
body[data-page="svc-conseil"] {
  --accent: #6E5322; --sur-accent: #FFFFFF;
  --accent-fonce: #5C461D; --accent-voile: #F2F0EB;
  --accent-clair: #B9AC95;
}

/* ================================ 2. BASE =============================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--barre-h) + var(--s4));
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: "Chivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--encre);
  background: var(--feuille);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--s3);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.03em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 800; letter-spacing: -.038em; line-height: 1.04; }
h2 { font-size: clamp(1.55rem, 3vw, 2.3rem); letter-spacing: -.034em; }
h3 { font-size: 1.0625rem; letter-spacing: -.022em; }
h4 { font-size: .9375rem; letter-spacing: -.015em; }

p { margin: 0 0 var(--s4); max-width: 72ch; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

/* Les liens de prose seulement : un lien de navigation ou de liste ne se
   souligne pas (une revue précédente avait attrapé les fils d'Ariane). */
main :is(p, dd, td, .texte, .consentement, .aide) a:not([class]) {
  color: var(--accent-fonce);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color var(--vite);
}
main :is(p, dd, td, .texte, .consentement, .aide) a:not([class]):hover {
  color: var(--encre);
  text-decoration-color: var(--accent);
}

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

ul, ol { margin: 0 0 var(--s4); padding-left: 1.15rem; }
li { margin-bottom: var(--s2); }
strong { font-weight: 700; }

/* Chiffres alignés : numéros, délais, montants */
.chiffre, td, .borne-numero, .metrique, input, select {
  font-variant-numeric: tabular-nums;
}

/* Les surfaces que le navigateur dessine portent aussi la charte. */
::selection    { background: var(--accent); color: var(--sur-accent); }
::-moz-selection { background: var(--accent); color: var(--sur-accent); }
:root { accent-color: var(--accent-fonce); caret-color: var(--accent-fonce); }
html { scrollbar-color: var(--pli-fort) var(--facette-1); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--facette-1); }
::-webkit-scrollbar-thumb { background: var(--pli-fort); border: 3px solid var(--facette-1); }
::-webkit-scrollbar-thumb:hover { background: var(--gris); }

:focus-visible {
  outline: 2px solid var(--accent-fonce);
  outline-offset: 3px;
}
.section--verte :focus-visible,
.pied :focus-visible,
.destinations--encre :focus-visible { outline-color: var(--accent); }

.lien-evitement {
  position: absolute; left: -9999px; z-index: 200;
  padding: var(--s3) var(--s5);
  background: var(--encre); color: var(--feuille);
  font-weight: 600;
}
.lien-evitement:focus { left: var(--s4); top: var(--s4); }

.hors-ecran {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================= 3. SURFACES ============================== */
.bloc, .container {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--s5);
}
.bloc--etroit { max-width: 820px; }

.section { padding-block: var(--s8); }
.section--serree { padding-block: var(--s7); }
.section--voile { background: var(--facette-1); border-block: 1px solid var(--pli); }

/* La bande pleine reste ENCRE sur toutes les pages : l'accent est un accent,
   jamais un aplat de page entière. Seule l'action d'appel y prend l'accent. */
.section--verte { background: var(--encre); color: var(--feuille); }
.section--verte h2, .section--verte h3 { color: var(--feuille); }
.section--verte p { color: #B8B4AC; }

.titre-section { margin-bottom: var(--s6); max-width: 62ch; }
.titre-section h2 { margin-bottom: var(--s3); }
.titre-section p { color: var(--gris); font-size: 1.0625rem; margin: 0; }
.section--verte .titre-section p { color: #B8B4AC; }
.titre-section--centre { margin-inline: auto; text-align: center; }
.titre-section--centre p { margin-inline: auto; }

/* L'arête de pli sous le titre : un cheveu, pas un trait décoratif épais. */
.titre-section h2::after {
  content: ""; display: block;
  width: 56px; height: 2px; margin-top: var(--s4);
  background: var(--accent);
}
.titre-section--centre h2::after { margin-inline: auto; }
.section--verte .titre-section h2::after { background: var(--accent); }

.grille { display: grid; gap: var(--s5); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

/* ============================ 4. NAVIGATION =============================
   Le bord de la feuille : fond feuille, une arête de pli en bas. */

.barre {
  position: sticky; top: 0; z-index: 100;
  height: var(--barre-h);
  display: flex; align-items: center;
  background: var(--feuille);
  border-bottom: 1px solid var(--pli);
  transition: box-shadow var(--vite), border-color var(--vite);
}
.barre.est-defilee {
  border-bottom-color: var(--pli-fort);
  box-shadow: 0 6px 18px -14px rgba(22, 24, 27, .5);
}
.barre .bloc { display: flex; align-items: center; gap: var(--s4); }

.ecusson {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 46px; flex: none;
}
/* Le logo de la barre : la version vectorielle, sans fond, lettres et
   anneau à l'encre ; contour et réseau épaissis pour la petite taille.
   Le nom de l'entreprise est porté par l'aria-label du lien. */
.ecusson-logo {
  display: block; flex: none;
  height: calc(var(--barre-h) - 10px); width: auto; aspect-ratio: 940 / 1040;
  color: var(--encre); transform-origin: 50% 60%;
}

/* La navigation se centre dans l'espace libre entre l'écusson et les actions
   (demande de l'utilisateur, 20 octobre 2026). */
.destinations-barre { flex: none; margin-inline: auto; }
.destinations-barre ul {
  display: flex; align-items: stretch; gap: 0;
  margin: 0; padding: 0; list-style: none;
}
.destinations-barre li { margin: 0; }
.destinations-barre a {
  position: relative;
  display: flex; align-items: center; white-space: nowrap;
  min-height: 46px; padding-inline: var(--s3);
  font-size: .9375rem; font-weight: 500; color: var(--gris);
  transition: color var(--vite);
}
.destinations-barre a::after {
  content: ""; position: absolute;
  left: var(--s3); right: var(--s3); bottom: 6px; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--vite);
}
.destinations-barre a:hover { color: var(--encre); }
.destinations-barre a:hover::after,
.destinations-barre a:focus-visible::after,
.destinations-barre a[aria-current="page"]::after { transform: scaleX(1); }
.destinations-barre a[aria-current="page"] { color: var(--encre); font-weight: 600; }

.actions-barre { flex: none; display: flex; align-items: center; gap: var(--s3); }
@media (max-width: 1080px) { .actions-barre { margin-left: auto; } }

/* La plaque : le téléphone de l'en-tête, gravé d'un filet */
.plaque {
  display: flex; align-items: center; gap: var(--s2); white-space: nowrap;
  min-height: 46px; padding-inline: var(--s3);
  border: 1.5px solid var(--accent-fonce);
  color: var(--accent-fonce);
  font-size: .9375rem; font-weight: 600; letter-spacing: -.01em;
  transition: background var(--vite), color var(--vite);
}
.plaque:hover { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); }
.plaque svg { width: 16px; height: 16px; fill: currentColor; flex: none; }

.langue {
  display: flex; align-items: stretch;
  border: 1px solid var(--pli-fort);
  font-size: .75rem; font-weight: 600;
}
.langue a, .langue span {
  display: flex; align-items: center;
  min-height: 46px; padding-inline: var(--s3);
}
.langue .est-active { background: var(--encre); color: var(--feuille); }
.langue a { color: var(--gris); transition: background var(--vite), color var(--vite); }
.langue a:hover { background: var(--facette-2); color: var(--encre); }
.langue .langue-sep { display: none; }

.bascule {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  border: 1px solid var(--pli-fort); background: transparent;
  color: var(--encre); cursor: pointer;
}
.bascule svg { width: 22px; height: 22px; fill: currentColor; }
.bascule .icone-fermer { display: none; }
.bascule[aria-expanded="true"] .icone-ouvrir { display: none; }
.bascule[aria-expanded="true"] .icone-fermer { display: block; }

.voile-nav {
  position: fixed; inset: var(--barre-h) 0 0; z-index: 90;
  background: rgba(22, 24, 27, .46);
  opacity: 0; visibility: hidden;
  transition: opacity var(--vite), visibility var(--vite);
}
body.nav-ouverte .voile-nav { opacity: 1; visibility: visible; }
body.nav-ouverte { overflow: hidden; }

/* ===================== 5. FACETTES ET CELLULES =========================
   Le « panneau » du monde précédent devient une FACETTE : un aplat plan,
   cerné d'une arête d'un pixel, sans arrondi et sans ombre portée lourde. */

.panneau {
  position: relative;
  padding: var(--s6);
  background: var(--facette-1);
  border: 1px solid var(--pli-fort);
}
.panneau > * { position: relative; z-index: 1; }
.panneau::before {
  /* l'arête diagonale du pliage, en haut à droite */
  content: ""; position: absolute; top: 0; right: 0;
  width: 46px; height: 46px; pointer-events: none;
  background: linear-gradient(225deg, var(--facette-2) 0 50%, transparent 50%);
}
.panneau--fixe { position: sticky; top: calc(var(--barre-h) + var(--s5)); }

/* Les rivets du monde précédent n'ont plus de sens sur une feuille pliée. */
.boulons, .boulon { display: none; }

.panneau--blanc { background: var(--blanc); }
.panneau--blanc::before { background: linear-gradient(225deg, var(--facette-1) 0 50%, transparent 50%); }

.panneau--jaune {
  background: var(--accent-voile);
  border-color: var(--accent);
}
.panneau--jaune::before { background: linear-gradient(225deg, var(--accent) 0 50%, transparent 50%); }
/* Une facette claire hérite sinon de la couleur de texte de la bande sombre
   qui la porte : elle remet explicitement l'encre, et un élément qui fixe sa
   propre couleur (.titre-plaque) garde la main. */
.panneau, .panneau--blanc, .panneau--jaune { color: var(--encre); }
.section--verte .panneau p, .section--verte .panneau dd,
.section--verte .panneau li, .section--verte .panneau .metrique { color: var(--gris); }
.section--verte .panneau :is(h2, h3):not(.titre-plaque) { color: var(--encre); }
/* .titre-plaque porte sa propre couleur sur son propre aplat : l'exclure
   ici, sinon il se retrouvait encre sur encre, illisible. */
.section--verte .panneau .prestations li, .section--verte .panneau .liste-coches li { border-color: var(--pli); }
.panneau--jaune a { color: var(--accent-fonce); }

/* --- Les cellules du pliage : elles PARTAGENT leurs arêtes -------------- */
.destinations {
  margin: 0; padding: 0; list-style: none;
  border: 1px solid var(--pli-fort);
}
.destinations li { margin: 0; }
.destinations li + li .destination { border-top: 1px solid var(--pli); }

.destination {
  position: relative; overflow: hidden;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 28px;
  grid-template-areas: "pic nom met fle";
  align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s5);
  background: var(--facette-1);
  transition: background var(--vite);
}
.destinations li:nth-child(2n) .destination { background: var(--facette-2); }
.destination::after {
  /* arête de pli oblique, à droite de la cellule */
  content: ""; position: absolute; top: 0; right: -1px;
  width: 1px; height: 100%; background: var(--pli);
  transform: skewX(-11deg); transform-origin: top;
}
.destination:hover, .destination:focus-visible { background: var(--blanc); }

.destination-pictogramme {
  grid-area: pic;
  width: 44px; height: 36px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--pli-fort); background: var(--feuille);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 9px 100%);
  transition: background var(--vite), border-color var(--vite);
}
.destination-pictogramme svg { width: 20px; height: 20px; fill: var(--gris); transition: fill var(--vite); }
.destination:hover .destination-pictogramme,
.destination:focus-visible .destination-pictogramme {
  background: var(--accent); border-color: var(--accent);
}
.destination:hover .destination-pictogramme svg,
.destination:focus-visible .destination-pictogramme svg { fill: var(--sur-accent); }

.destination-nom {
  grid-area: nom;
  font-size: 1.0125rem; font-weight: 600; letter-spacing: -.018em; line-height: 1.26;
}

.metrique { font-size: .8125rem; color: var(--gris); }
.destination .metrique { grid-area: met; white-space: nowrap; }

/* Le moment mémorable, et le seul : la métrique passe de l'abrégé au complet
   pendant que la flèche avance d'un pli. */
.metrique-complet { display: none; }
.destination:hover .metrique-abrege,
.destination:focus-visible .metrique-abrege { display: none; }
.destination:hover .metrique-complet,
.destination:focus-visible .metrique-complet { display: inline; }
.destination:hover .metrique, .destination:focus-visible .metrique { color: var(--accent-fonce); }

.fleche { display: inline-block; }
.fleche svg { width: 18px; height: 11px; fill: currentColor; }
.destination .fleche { grid-area: fle; justify-self: end; color: var(--pli-fort); transition: transform var(--vite), color var(--vite); }
.destination:hover .fleche, .destination:focus-visible .fleche {
  transform: translateX(5px); color: var(--accent-fonce);
}

/* Variante encre : les mêmes cellules, sur la face sombre de la feuille */
.destinations--encre { border-color: var(--encre); }
.destinations--encre .destination { background: var(--encre); color: var(--feuille); }
.destinations--encre li:nth-child(2n) .destination { background: var(--encre-2); }
.destinations--encre li + li .destination { border-top-color: rgba(251, 250, 247, .16); }
.destinations--encre .destination::after { background: rgba(251, 250, 247, .16); }
.destinations--encre .destination:hover,
.destinations--encre .destination:focus-visible { background: #2E3237; }
.destinations--encre .destination-pictogramme { background: transparent; border-color: rgba(251, 250, 247, .3); }
.destinations--encre .destination-pictogramme svg { fill: var(--feuille); }
.destinations--encre .fleche { color: rgba(251, 250, 247, .5); }
.destinations--encre .metrique { color: #A9A59D; }
.destinations--encre .destination:hover .metrique,
.destinations--encre .destination:focus-visible .metrique { color: var(--accent-clair); }
.destinations--encre .destination:hover .fleche,
.destinations--encre .destination:focus-visible .fleche { color: var(--accent-clair); }

/* ================= 6. PASTILLE, RAILS, PLAQUES ==========================
   La pastille : le pli qui commande tout le déploiement — le téléphone. */

.borne-ensemble { display: block; }
.borne { border: 1px solid var(--pli-fort); background: var(--feuille); }
.borne-poteau, .borne-socle { display: none; }

.borne-tete {
  margin: 0; padding: var(--s4) var(--s5) var(--s2); max-width: none;
  background: var(--accent); color: var(--sur-accent);
  font-size: .75rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.borne-corps {
  padding: 0 var(--s5) var(--s5);
  background: var(--accent); color: var(--sur-accent);
}
.borne-numero {
  display: flex; align-items: center;
  min-height: 48px;
  font-size: clamp(1.5rem, 3vw, 1.95rem);
  font-weight: 800; letter-spacing: -.034em; line-height: 1.05;
  color: var(--sur-accent);
}
a.borne-numero:hover { text-decoration: underline; text-underline-offset: .16em; }
.borne-mention { display: block; font-size: .8125rem; opacity: .8; }

/* Le rail : la bande de fixation qui porte les preuves */
.rail {
  display: flex; flex-wrap: wrap; gap: 0;
  margin: 0; padding: 0; list-style: none;
  border: 1px solid var(--pli-fort);
}
.rail--fixation { margin-top: var(--s5); }
.rail li {
  flex: 1 1 240px; margin: 0;
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s5);
  background: var(--facette-1);
  font-size: .9375rem;
}
.rail li + li { border-left: 1px solid var(--pli); }
.rail svg { width: 16px; height: 16px; fill: var(--accent-fonce); flex: none; }

/* --- Boutons : un coin inférieur droit replié, aucun arrondi ------------ */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 50px; padding-inline: var(--s5);
  border: 0; cursor: pointer;
  font-family: inherit; font-size: .96875rem; font-weight: 600;
  letter-spacing: -.008em; text-align: center;
  background: var(--encre); color: var(--feuille);
  clip-path: polygon(0 0, 100% 0, 100% 62%, calc(100% - var(--biais)) 100%, 0 100%);
  transition: background var(--vite), color var(--vite), transform var(--vite);
}
.bouton svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
.bouton:hover { background: #000; transform: translateY(-1px); }
.bouton:active { transform: translateY(0); }

.bouton--principal, .bouton--vert { background: var(--encre); color: var(--feuille); }
.bouton--principal:hover, .bouton--vert:hover { background: #000; }

/* L'appel prend l'accent : c'est la seule action qui le porte en aplat. */
.bouton--urgence, .bouton--jaune { background: var(--accent); color: var(--sur-accent); }
.bouton--urgence:hover, .bouton--jaune:hover { background: var(--accent-fonce); color: #fff; }

.bouton--contour {
  background: transparent; color: var(--encre);
  box-shadow: inset 0 0 0 1.5px var(--pli-fort);
  clip-path: none;
}
.bouton--contour:hover { background: var(--facette-1); box-shadow: inset 0 0 0 1.5px var(--encre); }

/* Sur la bande encre, l'encre devient invisible : on inverse. */
.section--verte .bouton--principal, .section--verte .bouton--vert,
.pied .bouton--principal, .pied .bouton--vert,
.destinations--encre .bouton--principal, .destinations--encre .bouton--vert {
  background: var(--feuille); color: var(--encre);
}
.section--verte .bouton--principal:hover, .section--verte .bouton--vert:hover,
.pied .bouton--principal:hover, .pied .bouton--vert:hover { background: #fff; }
.section--verte .bouton--contour, .pied .bouton--contour {
  color: var(--feuille); box-shadow: inset 0 0 0 1.5px rgba(251, 250, 247, .38);
}
.section--verte .bouton--contour:hover, .pied .bouton--contour:hover {
  background: rgba(251, 250, 247, .1); box-shadow: inset 0 0 0 1.5px var(--feuille);
}

.bouton--bloc { display: flex; width: 100%; }
/* Dans l'en-tête, l'action de devis est en encre : l'aplat d'accent reste
   réservé à l'appel, comme partout ailleurs. */
.bouton--barre {
  min-height: 44px; padding-inline: var(--s4); font-size: .875rem;
  white-space: nowrap; background: var(--encre); color: var(--feuille);
}
.bouton--barre:hover { background: #000; }
.bouton[aria-busy="true"] { opacity: .62; pointer-events: none; }

.boutons { display: flex; flex-wrap: wrap; gap: var(--s3); }
.boutons--centre { justify-content: center; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px;
  font-weight: 600; font-size: .9375rem; color: var(--accent-fonce);
}
.lien-fleche .fleche { transition: transform var(--vite); }
.lien-fleche:hover .fleche { transform: translateX(5px); }

/* --- Étiquettes : petites plaques à coin replié ------------------------ */
.etiquettes { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.etiquettes li { margin: 0; }
.etiquette {
  display: inline-flex; align-items: center;
  padding: var(--s2) var(--s3);
  background: var(--feuille);
  border: 1px solid var(--pli-fort);
  font-size: .8125rem; font-weight: 500; color: var(--gris);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%);
}
.section--verte .etiquette {
  background: transparent; border-color: rgba(251, 250, 247, .28); color: var(--feuille);
}

/* --- Listes de prestations : filets et repère plein -------------------- */
.liste-coches, .prestations {
  margin: 0 0 var(--s4); padding: 0; list-style: none;
}
.liste-coches li, .prestations li {
  position: relative;
  margin: 0; padding: var(--s3) 0 var(--s3) var(--s5);
  border-bottom: 1px solid var(--pli);
  font-size: .96875rem;
}
.prestations li:first-child, .liste-coches li:first-child { border-top: 1px solid var(--pli); }
/* Liste et mise en garde côte à côte, pour garder la pleine largeur. */
.garde-fous { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
@media (max-width: 900px) { .garde-fous { grid-template-columns: minmax(0, 1fr); } }
.liste-coches li::before, .prestations li::before {
  content: ""; position: absolute; left: 0; top: 1.05em;
  width: 8px; height: 8px; background: var(--accent);
}
.section--verte .liste-coches li, .section--verte .prestations li { border-color: rgba(251, 250, 247, .18); }
.section--verte .liste-coches li::before, .section--verte .prestations li::before { background: var(--accent); }

/* ============================= 7. SECTIONS ============================== */

/* --- Le premier écran : la feuille en cours de déploiement -------------- */
.carrefour {
  position: relative; overflow: hidden;
  padding-block: var(--s8);
  border-bottom: 1px solid var(--pli);
}
.carrefour::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(101deg,
    var(--facette-1) 0 21%, var(--feuille) 21% 37%,
    var(--facette-2) 37% 55%, var(--facette-1) 55% 73%,
    var(--feuille) 73% 100%);
}
.carrefour > .bloc { position: relative; z-index: 1; }
.carrefour-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 352px);
  gap: var(--s7);
  align-items: center;
}
/* Seule la facette qui porte le titre s'efface dans le fond du premier écran :
   celle de la colonne de droite garde son cadre. */
.carrefour-grille > .panneau { background: transparent; border: 0; padding: 0; }
.carrefour-grille > .panneau::before { display: none; }
.carrefour h1 { margin-bottom: var(--s4); }
.carrefour-sous {
  font-size: 1.0625rem; line-height: 1.67; color: var(--gris);
  max-width: 55ch; margin-bottom: var(--s5);
}
.carrefour-colonne { display: flex; flex-direction: column; gap: 0; }
.carrefour .rail { margin-top: var(--s6); }

.sous-plaque {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  min-height: 48px; padding: var(--s3) var(--s5);
  background: var(--feuille);
  border: 1px solid var(--pli-fort); border-top: 0;
  font-size: .9375rem; font-weight: 600;
  transition: background var(--vite);
}
.sous-plaque:hover { background: var(--accent-voile); }
.sous-plaque .fleche { color: var(--accent-fonce); transition: transform var(--vite); }
.sous-plaque:hover .fleche { transform: translateX(5px); }

/* --- En-tête des pages intérieures ------------------------------------- */
.entete-page {
  position: relative; overflow: hidden;
  padding-block: var(--s7) var(--s6);
  background: var(--facette-1);
  border-bottom: 1px solid var(--pli);
}
.entete-page::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(101deg,
    transparent 0 46%, var(--facette-2) 46% 64%, transparent 64% 100%);
}
.entete-page .bloc { position: relative; z-index: 1; }
.entete-page > .bloc > .panneau { background: transparent; border: 0; padding: 0; }
.entete-page > .bloc > .panneau::before { display: none; }
.entete-page h1 { margin-bottom: var(--s3); }
.entete-page p { font-size: 1.0625rem; color: var(--gris); max-width: 62ch; margin: 0; }

.itineraire { margin-bottom: var(--s4); }
.itineraire ol { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.itineraire li { display: flex; align-items: center; gap: var(--s2); margin: 0; font-size: .8125rem; color: var(--gris); }
.itineraire li + li::before { content: "/"; color: var(--pli-fort); }
.itineraire a { color: var(--gris); transition: color var(--vite); }
.itineraire a:hover { color: var(--accent-fonce); }

/* --- Les publics accompagnés ------------------------------------------- */
.publics, .plaques-publics {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin: 0; padding: 0; list-style: none;
}
.plaques-publics li, .publics li { margin: 0; }
.public, .plaque-public {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; padding: var(--s2) var(--s4);
  background: var(--facette-1);
  border: 1px solid var(--pli);
  font-size: .9375rem; font-weight: 500;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%);
  transition: background var(--vite), border-color var(--vite);
}
.public:hover, .plaque-public:hover { background: var(--accent-voile); border-color: var(--accent); }
.public svg, .plaque-public svg { width: 17px; height: 17px; fill: var(--accent-fonce); flex: none; }

/* --- Tableau d'affichage : arguments en lignes filetées ----------------- */
.affichage { border: 1px solid var(--pli-fort); }
.affichage-ligne { padding: var(--s5); background: var(--facette-1); }
.affichage-ligne:nth-child(2n) { background: var(--facette-2); }
.affichage-ligne + .affichage-ligne { border-top: 1px solid var(--pli); }
.affichage-ligne h3 { position: relative; padding-left: var(--s5); margin-bottom: var(--s2); }
.affichage-ligne h3::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 8px; height: 8px; background: var(--accent);
}
.affichage-ligne p { margin: 0; font-size: .9375rem; color: var(--gris); }
.section--verte .affichage { border-color: rgba(251, 250, 247, .28); }
.section--verte .affichage-ligne { background: transparent; }
.section--verte .affichage-ligne:nth-child(2n) { background: rgba(251, 250, 247, .05); }
.section--verte .affichage-ligne + .affichage-ligne { border-top-color: rgba(251, 250, 247, .18); }
.section--verte .affichage-ligne h3 { color: var(--feuille); }
.section--verte .affichage-ligne h3::before { background: var(--accent); }
.section--verte .affichage-ligne p { color: #B8B4AC; }

.argument h3 { margin-bottom: var(--s2); }
.argument p { font-size: .9375rem; color: var(--gris); margin: 0; }
.section--verte .argument p { color: #B8B4AC; }
.argument-filet { width: 36px; height: 2px; background: var(--accent); margin-bottom: var(--s3); }
.section--verte .argument-filet { background: var(--accent); }

/* --- Les jalons : les plis successifs d'un même déploiement ------------- */
.jalons { display: grid; gap: var(--s5); counter-reset: jalon; }
.jalon {
  position: relative;
  padding: var(--s5) var(--s5) var(--s5) calc(var(--s7) + var(--s2));
  background: var(--facette-1);
  border: 1px solid var(--pli);
}
.jalon::before {
  counter-increment: jalon; content: counter(jalon, decimal-leading-zero);
  position: absolute; left: var(--s4); top: var(--s5);
  width: 38px; height: 32px;
  display: grid; place-items: center;
  background: var(--accent); color: var(--sur-accent);
  font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%);
}
.section--voile .jalon::before, .section--verte .jalon::before { background: var(--accent); color: var(--sur-accent); }
.jalon::after { display: none; }
.jalon:last-child::after { display: none; }
.jalon h3 { margin-bottom: var(--s2); }
.jalon p { margin: 0; font-size: .9375rem; color: var(--gris); }
.section--verte .jalon { background: rgba(251, 250, 247, .05); border-color: rgba(251, 250, 247, .18); }
.section--verte .jalon p { color: #B8B4AC; }

/* --- Bande d'appel ------------------------------------------------------ */
.bande-appel { background: var(--encre); color: var(--feuille); padding-block: var(--s7); }
.bande-appel h2 { color: var(--feuille); margin-bottom: var(--s2); }
.bande-appel p { color: #B8B4AC; margin-bottom: 0; }
.bande-appel .bloc {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--s5);
}
.bande-appel .bouton--principal, .bande-appel .bouton--vert { background: var(--feuille); color: var(--encre); }
.bande-appel .bouton--principal:hover, .bande-appel .bouton--vert:hover { background: #fff; }
.bande-appel .bouton--contour { color: var(--feuille); box-shadow: inset 0 0 0 1.5px rgba(251, 250, 247, .38); }
.bande-appel .bouton--contour:hover { background: rgba(251, 250, 247, .1); box-shadow: inset 0 0 0 1.5px var(--feuille); }
.bande-appel .bouton--urgence { background: var(--accent); color: var(--sur-accent); }

/* --- Sommaire par ancres ------------------------------------------------ */
.sommaire {
  display: flex; flex-wrap: wrap; gap: 0;
  margin: 0 0 var(--s6); padding: 0; list-style: none;
  border: 1px solid var(--pli-fort);
}
.sommaire li { margin: 0; }
.sommaire a {
  display: flex; align-items: center;
  min-height: 44px; padding-inline: var(--s4);
  border-right: 1px solid var(--pli);
  font-size: .875rem; font-weight: 500; color: var(--gris);
  background: var(--facette-1);
  transition: background var(--vite), color var(--vite);
}
.sommaire a:hover { background: var(--accent); color: var(--sur-accent); }

/* --- Fiches de service -------------------------------------------------- */
.service { padding-block: var(--s7); border-top: 1px solid var(--pli); }
.service:first-of-type { border-top: 0; padding-top: var(--s5); }
.service-grille { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s6); }
.service > .bouton { margin-top: var(--s5); }
.service h2 { margin-bottom: var(--s3); }
.service-accroche { font-size: 1.0625rem; color: var(--gris); margin-bottom: var(--s5); }

.service-enseigne {
  display: inline-flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s4); padding: var(--s2) var(--s3);
  border: 1px solid var(--pli-fort); background: var(--facette-1);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 9px 100%);
}
.service-enseigne svg { width: 20px; height: 20px; fill: var(--accent-fonce); flex: none; }
.service-enseigne .metrique { font-size: .8125rem; color: var(--gris); }
.service-pictogramme {
  width: 44px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--pli-fort); background: var(--feuille);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 9px 100%);
}
.service-pictogramme svg { width: 20px; height: 20px; fill: var(--accent-fonce); }

.service-public {
  padding: var(--s4) var(--s5);
  background: var(--accent-voile);
  border: 1px solid var(--accent);
}
.service-public strong { display: block; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-fonce); margin-bottom: var(--s2); }
.service-public p { margin: 0; font-size: .9375rem; }

.titre-plaque {
  display: inline-block; margin-bottom: var(--s4);
  padding: var(--s2) var(--s3);
  background: var(--encre); color: var(--feuille);
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}

.releve { margin: 0 0 var(--s5); }
/* Variante en colonnes : évite qu'une section se rétrécisse au milieu
   d'une page dont toutes les autres occupent la largeur utile. */
.releve--colonnes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--s4) var(--s6);
}
.releve.releve--colonnes dd { margin-bottom: 0; }
/* Les intitulés y sont des noms de publics, pas des étiquettes de trois
   mots : trente-cinq caractères en capitales espacées se lisent mal. */
.releve.releve--colonnes dt {
  font-size: 1rem; font-weight: 700; letter-spacing: -.022em;
  text-transform: none; color: var(--encre); margin-bottom: var(--s2);
}
.releve dt { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin-bottom: var(--s1); }
.releve dd { margin: 0 0 var(--s4); font-size: .96875rem; }

/* --- Réalisations -------------------------------------------------------- */
.fiche { padding: var(--s6); background: var(--facette-1); border: 1px solid var(--pli-fort); }
.fiche-secteur { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-fonce); margin-bottom: var(--s2); }
.fiche h2, .fiche h3 { margin-bottom: var(--s4); }
.fiche dl { margin: 0 0 var(--s4); }
.fiche-ligne { padding-block: var(--s3); border-bottom: 1px solid var(--pli); }
.fiche-ligne:last-of-type { border-bottom: 0; }
.fiche-ligne dt { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin-bottom: var(--s1); }
.fiche-ligne dd { margin: 0; font-size: .9375rem; }
.fiche-resultat { padding: var(--s4); background: var(--accent-voile); border: 1px solid var(--accent); font-size: .9375rem; margin-bottom: var(--s4); }
.fiche-etiquettes { margin-top: var(--s4); }

/* --- Contact ------------------------------------------------------------- */
.contact-panneau {
  display: block; padding: var(--s5);
  background: var(--facette-1); border: 1px solid var(--pli-fort);
  transition: background var(--vite), border-color var(--vite);
}
.contact-panneau:hover { background: var(--blanc); border-color: var(--accent); }
.contact-icone {
  width: 44px; height: 36px; margin-bottom: var(--s4);
  display: grid; place-items: center;
  background: var(--accent); color: var(--sur-accent);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 9px 100%);
}
.contact-icone--verte { background: var(--whatsapp); color: #fff; }
.contact-icone svg { width: 20px; height: 20px; fill: currentColor; }
.contact-panneau h2, .contact-panneau h3 { margin-bottom: var(--s2); }
.contact-valeur { display: block; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: var(--s1); }
.contact-note { font-size: .875rem; color: var(--gris); margin: 0; }

.coordonnees { margin: 0; padding: 0; list-style: none; }
.coordonnees li {
  display: flex; gap: var(--s3);
  margin: 0; padding-block: var(--s4);
  border-bottom: 1px solid var(--pli);
}
.coordonnees li:last-child { border-bottom: 0; }
.coordonnees svg { width: 19px; height: 19px; fill: var(--accent-fonce); flex: none; margin-top: 3px; }
.section--verte .coordonnees li { border-bottom-color: rgba(251, 250, 247, .18); }
.section--verte .coordonnees svg { fill: var(--accent); }
.coordonnees-label { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin-bottom: 2px; }
.section--verte .coordonnees-label { color: #A9A59D; }
.coordonnees-valeur { display: block; font-size: 1rem; font-weight: 600; }
.section--verte .coordonnees-valeur { color: var(--feuille); }
a.coordonnees-valeur:hover { color: var(--accent-fonce); }
.section--verte a.coordonnees-valeur:hover { color: var(--accent-clair); }

/* --- FAQ ----------------------------------------------------------------- */
.faq { border: 1px solid var(--pli-fort); }
.faq-entree + .faq-entree { border-top: 1px solid var(--pli); }
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  min-height: 56px; padding: var(--s4) var(--s5);
  background: var(--facette-1); border: 0; cursor: pointer;
  font-family: inherit; font-size: 1rem; font-weight: 600; text-align: left;
  letter-spacing: -.018em; color: var(--encre);
  transition: background var(--vite);
}
.faq-question:hover { background: var(--blanc); }
.faq-signe {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--pli-fort);
  transition: background var(--vite), border-color var(--vite), transform var(--vite);
}
.faq-signe svg { width: 13px; height: 13px; fill: var(--encre); }
.faq-question[aria-expanded="true"] .faq-signe {
  background: var(--accent); border-color: var(--accent); transform: rotate(45deg);
}
.faq-reponse { padding: 0 var(--s5) var(--s5); background: var(--facette-1); }
.faq-reponse p { margin: 0; font-size: .9375rem; color: var(--gris); }
.faq-reponse[hidden] { display: none; }

/* --- Carte --------------------------------------------------------------- */
.carte { border: 1px solid var(--pli-fort); }
.carte-attente {
  width: 100%; min-height: 260px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3);
  padding: var(--s6);
  background: var(--facette-2); border: 0; cursor: pointer;
  font-family: inherit; font-size: .96875rem; font-weight: 600; color: var(--encre);
  transition: background var(--vite);
}
.carte-attente:hover { background: var(--facette-1); }
.carte-attente svg { width: 30px; height: 30px; fill: var(--accent-fonce); }
.carte iframe { width: 100%; height: 400px; border: 0; display: block; }

/* --- Confirmation -------------------------------------------------------- */
.confirmation { text-align: center; padding-block: var(--s8); }
.confirmation p { margin-inline: auto; }
.confirmation-marque {
  width: 72px; height: 60px; margin: 0 auto var(--s5);
  display: grid; place-items: center;
  background: var(--accent); color: var(--sur-accent);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 15px 100%);
}
.confirmation-marque svg { width: 32px; height: 32px; fill: currentColor; }

/* --- Prose (pages légales) ------------------------------------------------ */
.texte { max-width: 74ch; }
.texte h2 { margin-top: var(--s7); margin-bottom: var(--s3); font-size: 1.4rem; }
.texte h2:first-child { margin-top: 0; }
.texte h3 { margin-top: var(--s5); }
.texte li { font-size: .96875rem; }

/* ============================ 8. FORMULAIRES ============================ */
.layout-form { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
.form-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--s4); }
.champ { display: flex; flex-direction: column; gap: var(--s2); }
.champ--plein { grid-column: 1 / -1; }
.champ label, .legende {
  font-size: .8125rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gris);
}
.champ .aide { font-size: .8125rem; color: var(--gris); text-transform: none; letter-spacing: 0; font-weight: 400; }
.obligatoire { color: var(--alerte); }

.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 48px; padding: var(--s3) var(--s4);
  font-family: inherit; font-size: 1rem; color: var(--encre);
  background: var(--blanc);
  border: 1px solid var(--pli-fort); border-radius: 0;
  transition: border-color var(--vite), box-shadow var(--vite);
}
.champ textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.champ select { appearance: none; background-image: none; cursor: pointer; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: 0; border-color: var(--accent-fonce);
  box-shadow: inset 0 0 0 1px var(--accent-fonce);
}
.champ input::placeholder, .champ textarea::placeholder { color: #9A958C; }
.champ.invalide input, .champ.invalide select, .champ.invalide textarea { border-color: var(--alerte); }
.champ-erreur { display: none; font-size: .8125rem; font-weight: 600; color: var(--alerte); }
.champ.invalide .champ-erreur { display: block; }

fieldset { margin: 0 0 var(--s5); padding: 0; border: 0; }
fieldset.invalide { padding: var(--s4); border: 1px solid var(--alerte); }
legend { padding: 0; margin-bottom: var(--s3); }

.cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--s2); }
.case, .consentement { display: flex; align-items: flex-start; gap: var(--s3); font-size: .9375rem; cursor: pointer; }
.case { min-height: 44px; padding: var(--s2) var(--s3); border: 1px solid var(--pli); background: var(--facette-1); align-items: center; }
.case:hover { border-color: var(--accent); background: var(--blanc); }
.case input, .consentement input { width: 22px; height: 22px; flex: none; margin-top: 1px; cursor: pointer; }
/* La case de consentement est une cible à part entière : sur une ligne
   courte (l'anglais est plus bref), l'étiquette tombait sous 44 px. */
.consentement { min-height: 44px; padding-block: var(--s1); }
.case input { margin-top: 0; }
.consentement { margin-block: var(--s5); }
.consentement.invalide { color: var(--alerte); }

.etat-form { padding: var(--s4) var(--s5); margin-bottom: var(--s4); font-size: .9375rem; font-weight: 500; border: 1px solid; }
.etat-form[hidden] { display: none; }
.etat-form--erreur { background: #FBEDEB; border-color: var(--alerte); color: #7D2419; }
.etat-form--succes { background: var(--accent-voile); border-color: var(--accent); color: var(--encre); }
.etat-form a { text-decoration: underline; font-weight: 700; }

.piege { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* Avertissement destiné à l'exploitant du site, pas au visiteur. */
.avis-chantier {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s4) var(--s5); margin-bottom: var(--s5);
  background: var(--facette-2); border: 1px dashed var(--pli-fort);
}
.avis-chantier svg { width: 20px; height: 20px; fill: var(--gris); flex: none; margin-top: 3px; }
.avis-chantier p { margin: 0; font-size: .875rem; color: var(--gris); }

/* ============================ 9. PIED DE PAGE =========================== */
.pied { background: var(--encre); color: var(--feuille); padding-block: var(--s7) var(--s5); }
.pied-grille { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--s6); margin-bottom: var(--s6); }
.pied h2 { font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-clair); margin-bottom: var(--s4); }
.pied p { font-size: .9375rem; color: #B8B4AC; }
.pied ul { margin: 0; padding: 0; list-style: none; }
.pied li { margin-bottom: var(--s2); font-size: .9375rem; }
.pied a { color: #D5D1C9; transition: color var(--vite); }
.pied a:hover { color: var(--feuille); }
/* Le logo du pied de page : la version vectorielle de la scène d'accueil,
   sans fond, lettres et anneau en clair sur l'encre. Au survol, il se
   penche et ses ondes repartent. */
.pied-logo { display: inline-block; margin-bottom: var(--s5); color: var(--feuille); }
.pied-logo-dessin { display: block; width: 150px; height: auto; transform-origin: 50% 60%; transition: transform var(--lent); }
.pied-logo:hover .pied-logo-dessin { transform: rotate(-3deg) scale(1.04); }
.pied-logo:hover .pied-logo-onde { animation: logo-onde 1s ease-out both; }
.pied-logo:hover .pied-logo-onde--2 { animation-delay: .15s; }
.pied-logo:focus-visible { outline: 2px solid var(--accent-clair); outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) {
  .pied-logo-dessin, .pied-logo-onde { transition: none; animation: none !important; }
}
.pied-devise { font-size: .875rem; font-weight: 700; color: var(--accent-clair); letter-spacing: .06em; text-transform: uppercase; }

/* La devise : « informatique » cède la place à « système d'information »
   (survol à la souris, toucher, ou une fois dans la scène du logo). Sans JS,
   seul le premier mot existe ; avec JS, main.js pose la largeur du mot
   affiché pour que la suite de la phrase glisse avec lui. */
.bascule-mot-b { display: none; }
.js .bascule-mot {
  display: inline-grid; overflow: hidden; overflow: clip;
  transition: width 460ms var(--sortie);
  -webkit-tap-highlight-color: transparent;
}
.js .bascule-mot > span {
  grid-area: 1 / 1; justify-self: start; white-space: nowrap;
  transition: transform 460ms var(--sortie), opacity 320ms var(--sortie);
}
.js .bascule-mot-b { display: block; transform: translateY(105%); opacity: 0; }
.js .bascule-mot.est-bascule .bascule-mot-a { transform: translateY(-105%); opacity: 0; }
.js .bascule-mot.est-bascule .bascule-mot-b { transform: none; opacity: 1; }
.js .pied-devise .bascule-mot { cursor: default; }
.js .pied-devise .bascule-mot > span { text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: .3em; }
@media (prefers-reduced-motion: reduce) {
  .js .bascule-mot, .js .bascule-mot > span { transition: none; }
}
.pied-bas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4);
  padding-top: var(--s5); border-top: 1px solid rgba(251, 250, 247, .16);
  font-size: .8125rem; color: #A9A59D;
}
.pied-legal { display: flex; flex-wrap: wrap; gap: var(--s4); margin: 0; padding: 0; list-style: none; }
.pied-legal li { margin: 0; }
.pied-legal a, .pied-bas a { display: inline-flex; align-items: center; min-height: 44px; }

/* --- Actions flottantes --------------------------------------------------- */
.whatsapp-flottant {
  position: fixed; right: var(--s5); bottom: var(--s5); z-index: 80;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: var(--whatsapp); color: #fff;
  box-shadow: 0 8px 20px -8px rgba(22, 24, 27, .5);
  overflow: hidden;   /* l'intitulé hors-écran gonflait sinon la largeur défilable */
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--vite), visibility var(--vite), transform var(--vite), background var(--vite);
}
.whatsapp-flottant.est-visible { opacity: 1; visibility: visible; transform: none; }
.whatsapp-flottant:hover { background: #0F7A40; }
.whatsapp-flottant svg { width: 28px; height: 28px; fill: currentColor; }
/* L'intitulé reste dans le DOM pour l'accessibilité — le bouton porte déjà
   son aria-label — mais il ne prend plus de place dans la bulle. */
.whatsapp-flottant span { display: none; }

.rail-mobile { display: none; }

/* --- La vitrine : le carrousel du premier écran ---------------------------
   Demandée par l'utilisateur le 20 octobre 2026 : en tête de l'accueil, plus
   animée. C'est l'exception assumée aux règles 1 et 2 : chaque vue prend
   la couleur de la page de son service, en facettes pliées à arêtes franches.
   Le téléphone reste dans la colonne de droite, visible dès l'arrivée.
   Sans JavaScript : les vues se suivent, sans onglets ni commandes. */

/* Les cinq teintes, reprises des pages de service (contraste du blanc ≥ 5,9:1) */
.teinte-starlink { --t: #2E4A7D; --t-fonce: #273E69; --t-ombre: #233451; --t-clair: #9BA8C1; }
.teinte-cyber    { --t: #8E3A2E; --t-fonce: #773127; --t-ombre: #582B25; --t-clair: #DDA79F; }
.teinte-video    { --t: #8A5A1E; --t-fonce: #744C19; --t-ombre: #563C1D; --t-clair: #D9BC93; }
.teinte-m365     { --t: #6B3A6B; --t-fonce: #5A315A; --t-ombre: #452B47; --t-clair: #C9A9C9; }
.teinte-ia       { --t: #3A3F8F; --t-fonce: #33377D; --t-ombre: #2A2D5B; --t-clair: #A9AEEE; }

/* Le premier écran se resserre pour que la vitrine arrive tout de suite */
.carrefour--vitrine { padding-block: var(--s5) var(--s6); }
.carrefour-grille--vitrine {
  grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
  grid-template-areas: "vitrine titre" "vitrine colonne";
  grid-template-rows: auto 1fr;
  gap: var(--s5) var(--s6);
  align-items: start;
}
.carrefour-titre { grid-area: titre; padding-top: var(--s4); }
.carrefour-titre h1 { font-size: clamp(1.9rem, 2.7vw, 2.5rem); margin-bottom: var(--s4); }
.carrefour-titre .carrefour-sous { font-size: 1rem; margin-bottom: 0; }
.carrefour-grille--vitrine .carrefour-colonne { grid-area: colonne; align-self: end; }
.vitrine { grid-area: vitrine; }

.vitrine {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--encre);
  box-shadow: var(--ombre-levee);
}
.vitrine-scene { position: relative; flex: 1; }

/* --- Une vue ------------------------------------------------------------- */
.vue {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center; gap: var(--s5);
  min-height: clamp(470px, 64vh, 580px);
  padding: var(--s7) var(--s6) var(--s7) var(--s7);
  color: #fff;
  background: var(--t);
  background: linear-gradient(101deg, var(--t) 0 56%, var(--t-fonce) 56% 78%, var(--t-ombre) 78% 100%);
}
.vue + .vue { border-top: 1px solid rgba(251, 250, 247, .2); }
/* le coin replié de la feuille */
.vue::before {
  content: ""; position: absolute; top: 0; right: 0; z-index: 1;
  width: 58px; height: 58px; pointer-events: none;
  background: linear-gradient(225deg, var(--t-clair) 0 50%, transparent 50%);
}
.vue-texte { position: relative; z-index: 2; }
.vue h2 {
  color: #fff; max-width: 15ch; margin-bottom: var(--s4);
  font-size: clamp(1.85rem, 3vw, 2.65rem); font-weight: 800;
  line-height: 1.04; letter-spacing: -.038em;
}
.vue-texte p { color: rgba(255, 255, 255, .88); font-size: 1.03125rem; line-height: 1.6; max-width: 42ch; margin-bottom: var(--s5); }
.vue-faits { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s6); padding: 0; list-style: none; }
.vue-faits li {
  margin: 0; padding: var(--s1) var(--s3);
  border: 1px solid rgba(255, 255, 255, .42);
  font-size: .8125rem; font-weight: 600; color: #fff;
}
.vue-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.vue .bouton { background: var(--feuille); color: var(--encre); }
.vue .bouton:hover { background: #fff; }
.vue-lien {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px;
  color: #fff; font-weight: 600; font-size: .9375rem;
  text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: 1px; text-underline-offset: .22em;
  transition: text-decoration-color var(--vite);
}
.vue-lien:hover { text-decoration-color: currentColor; }
.vue-lien .fleche { transition: transform var(--vite); }
.vue-lien:hover .fleche { transform: translateX(5px); }
.vue :focus-visible { outline-color: #fff; }

.vue-illustration { position: relative; z-index: 1; justify-self: center; width: min(100%, 330px); }
.vue-dessin { display: block; width: 100%; height: auto; overflow: visible; }

/* Le dessin : des aplats, des arêtes, jamais de fondu */
.i-feuille { fill: var(--feuille); }
.i-clair   { fill: var(--t-clair); }
.i-teinte  { fill: var(--t); }
.i-ombre   { fill: var(--t-ombre); }
.i-voile   { fill: rgba(251, 250, 247, .13); stroke: rgba(251, 250, 247, .38); stroke-width: 1; }
.i-sol     { fill: rgba(251, 250, 247, .32); }
.i-trait   { fill: none; stroke: rgba(251, 250, 247, .42); stroke-width: 2; }
.i-pointille { fill: none; stroke: rgba(251, 250, 247, .5); stroke-width: 2; stroke-dasharray: 2 8; }
.i-onde    { fill: none; stroke: var(--feuille); stroke-width: 8; }
.i-serrure { fill: none; stroke: var(--t); stroke-width: 10; }
.i-cadre   { fill: none; stroke: var(--feuille); stroke-width: 2; stroke-dasharray: 5 4; }
.i-anneau  { fill: none; stroke: var(--feuille); stroke-width: 2; }
.i-impulsion { fill: none; stroke: var(--feuille); stroke-width: 4; stroke-dasharray: 9 200; stroke-dashoffset: 9; }
.i-rec     { fill: #F06A55; }

/* --- La barre : onglets-minuteurs et commandes --------------------------- */
.vitrine-barre { display: none; }
.js .vitrine-barre {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
  border-top: 1px solid rgba(251, 250, 247, .14);
}
.vitrine-onglets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.onglet {
  position: relative;
  display: flex; align-items: center; gap: var(--s2);
  min-height: 60px; padding: var(--s3) var(--s3) var(--s2);
  background: transparent; color: #B8B4AC;
  border: 0; border-right: 1px solid rgba(251, 250, 247, .1);
  font-family: inherit; font-size: .8125rem; font-weight: 600; line-height: 1.2;
  letter-spacing: -.005em; text-align: left; hyphens: manual; cursor: pointer;
  transition: background var(--lent), color var(--vite);
}
.onglet:hover { background: rgba(251, 250, 247, .06); color: var(--feuille); }
.onglet[aria-selected="true"] { background: var(--t); color: #fff; }
.onglet-cle { width: 10px; height: 10px; flex: none; background: var(--t-clair); transition: transform var(--vite); }
.onglet:hover .onglet-cle { transform: rotate(45deg); }
.onglet[aria-selected="true"] .onglet-cle { background: var(--feuille); transform: rotate(45deg); }
.onglet-ligne { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(251, 250, 247, .14); overflow: hidden; }
.onglet-minuteur { display: block; height: 100%; background: var(--feuille); transform: scaleX(0); transform-origin: left; }
.onglet[aria-selected="true"] .onglet-minuteur { animation: vitrine-minuteur var(--duree-vue, 7s) linear forwards; }
.vitrine.est-en-pause .onglet-minuteur { animation-play-state: paused; }
.vitrine.est-arrete .onglet[aria-selected="true"] .onglet-minuteur { animation: none; transform: none; }
@keyframes vitrine-minuteur { to { transform: none; } }
.vitrine .onglet:focus-visible { outline: 2px solid var(--feuille); outline-offset: -4px; }

/* Les commandes : le bouton du logo, puis pause, précédent, suivant.
   Le bouton du logo appelle le clic (ping et signal qui pulsent) ; il ouvre
   la scène du logo, qui s'agrandit jusqu'à la taille du carrousel. */
.vitrine-commandes { display: flex; }
.vitrine-commande {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  width: 54px; min-height: 60px;
  background: var(--encre); color: var(--feuille);
  border: 0; border-left: 1px solid rgba(251, 250, 247, .14);
  cursor: pointer; transition: color var(--vite);
}
/* au survol, la couleur de la vue balaie le bouton depuis le côté de sa flèche */
.vitrine-commande::before {
  content: ""; position: absolute; inset: 0;
  background: var(--t-actif, var(--accent));
  transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--lent);
}
.vitrine-commande[data-sens="1"]::before { transform: scaleX(0); transform-origin: left; }
.vitrine-commande[data-sens="-1"]::before { transform: scaleX(0); transform-origin: right; }
.vitrine-commande:hover::before { transform: none; }
.vitrine-commande svg { position: relative; z-index: 1; width: 20px; height: 20px; fill: currentColor; transition: transform var(--vite); }
.vitrine-commande[data-sens="1"]:hover svg { transform: translateX(4px); }
.vitrine-commande[data-sens="-1"]:hover svg { transform: translateX(-4px); }
.vitrine-commande:active svg { transform: scale(.82); }
.vitrine .vitrine-commande:focus-visible { outline: 2px solid var(--feuille); outline-offset: -5px; }
.vitrine-pause .icone-lecture,
.vitrine.est-arrete .vitrine-pause .icone-pause { display: none; }
.vitrine.est-arrete .vitrine-pause .icone-lecture { display: block; }
/* le cadran : le pourtour du bouton pause se trace pendant l'affichage */
.vitrine-commande .vitrine-cadran {
  position: absolute; inset: 7px; z-index: 1; width: calc(100% - 14px); height: calc(100% - 14px);
  fill: none; stroke: var(--feuille); stroke-width: 4.5; stroke-dasharray: 100; stroke-dashoffset: 100;
  pointer-events: none; transform: none;
}
.vitrine:not(.est-arrete) .vitrine-cadran { animation: vitrine-cadran var(--duree-vue, 7s) linear forwards; }
.vitrine.est-en-pause .vitrine-cadran { animation-play-state: paused; }
.vitrine.est-arrete .vitrine-cadran { opacity: 0; }
@keyframes vitrine-cadran { to { stroke-dashoffset: 0; } }

/* Le bouton du logo */
.vitrine-logo { background: var(--encre-2); border-left: 0; }
.vitrine-commande .vitrine-logo-marque { width: 30px; height: 30px; color: var(--feuille); }
.vitrine-logo:hover .vitrine-logo-marque { transform: scale(1.12) rotate(-6deg); }
.vitrine-logo-ping {
  position: absolute; inset: 10px; z-index: 0; pointer-events: none;
  border: 2px solid var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .vitrine-logo-ping { animation: logo-ping 2.4s ease-out infinite; }
  .marque-onde { animation: marque-onde 2.4s ease-in-out infinite; }
  .marque-onde--2 { animation-delay: .25s; }
}
.vitrine-logo:hover .vitrine-logo-ping, .vitrine.est-logo .vitrine-logo-ping { animation: none; opacity: 0; }
@keyframes logo-ping { 0% { opacity: .9; transform: scale(.55); } 70%, 100% { opacity: 0; transform: scale(1.3); } }
@keyframes marque-onde { 0%, 100% { opacity: 1; } 40% { opacity: .15; } }
.vitrine-logo.est-revenu .vitrine-logo-marque { animation: logo-retour 520ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes logo-retour { from { transform: scale(1.8); } to { transform: none; } }

/* La scène du logo : elle part du bouton et couvre tout le carrousel */
.logo-scene {
  position: absolute; inset: 0; z-index: 30;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s4);
  padding: var(--s6);
  background: var(--feuille);
  background: linear-gradient(101deg, var(--feuille) 0 58%, var(--facette-1) 58% 80%, var(--facette-2) 80% 100%);
  cursor: pointer;
}
.logo-scene[hidden] { display: none; }
.logo-scene .logo-dessin { display: block; width: auto; height: min(68%, 440px); max-width: 100%; }
.logo-scene-devise {
  margin: 0; opacity: 0;
  font-size: clamp(.9375rem, 1.5vw, 1.1875rem); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--encre);
}
.logo-scene.est-jouee .logo-scene-devise { animation: vue-monte 700ms var(--sortie) 2.5s both; }
@media (prefers-reduced-motion: reduce) {
  .logo-scene-devise { opacity: 1; }
}

/* --- Le logo qui se forme : côte orange et côte verte depuis le nord,
       les nœuds, le réseau, les lettres, puis le signal ------------------- */
.logo-mot { font-family: "Chivo", sans-serif; font-size: 126px; font-weight: 800; text-anchor: middle; }
.logo-noeud, .logo-lettre, .logo-point { transform-box: fill-box; transform-origin: center; }
.logo-dessin.est-en-formation .logo-cote { stroke-dasharray: 100; animation: logo-trace 1.25s cubic-bezier(.65, 0, .25, 1) both; }
.logo-dessin.est-en-formation .logo-noeud { animation: logo-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(.45s + var(--i) * 55ms); }
.logo-dessin.est-en-formation .logo-lien { stroke-dasharray: 100; animation: logo-trace .7s ease-out both; animation-delay: calc(.8s + var(--i) * 40ms); }
.logo-dessin.est-en-formation .logo-lettre { animation: logo-lettre .6s var(--sortie) both; animation-delay: calc(1.4s + var(--i) * 65ms); }
.logo-dessin.est-en-formation .logo-anneau { stroke-dasharray: 100; animation: logo-trace .6s ease-out both; animation-delay: 1.5s; }
.logo-dessin.est-en-formation .logo-anneau--haut { animation-delay: 1.85s; }
.logo-dessin.est-en-formation .logo-point { animation: logo-pop .45s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: 1.95s; }
.logo-dessin.est-en-formation .logo-onde { animation: logo-onde 1s ease-out both; animation-delay: 2.1s; }
.logo-dessin.est-en-formation .logo-onde--2 { animation-delay: 2.25s; }
@keyframes logo-trace { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes logo-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes logo-lettre { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
@keyframes logo-onde { 0% { opacity: 0; } 35% { opacity: 1; } 65% { opacity: .25; } 100% { opacity: 1; } }
@keyframes logo-pouls { 50% { opacity: .2; } }

/* --- Avec JavaScript : les vues se superposent dans la même case ---------- */
.js .vitrine-scene { display: grid; touch-action: pan-y pinch-zoom; }
.js .vue { grid-area: 1 / 1; visibility: hidden; border-top: 0; }
.js .vue.est-sortant { visibility: visible; z-index: 1; }
.js .vue.est-actif { visibility: visible; z-index: 2; }

/* Le changement : la feuille suivante se déplie en diagonale par-dessus la
   précédente, son arête de pli en tête ; le texte monte ligne à ligne, le
   dessin glisse en place ; l'ancienne vue recule. */
.js .vue::after {
  content: ""; position: absolute; top: -2%; bottom: -2%; left: 0; z-index: 4;
  width: 46px; pointer-events: none; opacity: 0;
  transform: skewX(-8deg);
  background: linear-gradient(90deg, rgba(22, 24, 27, .26) 0 calc(100% - 2px), var(--feuille) calc(100% - 2px));
}
.vitrine-scene.est-anime .vue.est-actif { animation: vue-deplie 760ms cubic-bezier(.7, 0, .2, 1); }
.vitrine-scene.est-anime .vue.est-actif::after { animation: vue-arete 760ms cubic-bezier(.7, 0, .2, 1); }
.vitrine-scene.est-anime[data-sens="-1"] .vue.est-actif { animation-name: vue-replie; }
.vitrine-scene.est-anime[data-sens="-1"] .vue.est-actif::after {
  background: linear-gradient(90deg, var(--feuille) 0 2px, rgba(22, 24, 27, .26) 2px);
  animation-name: vue-arete-retour;
}
.vitrine-scene.est-anime .vue.est-actif .vue-texte > * { animation: vue-monte 720ms var(--sortie) both; }
.vitrine-scene.est-anime .vue.est-actif .vue-texte > :nth-child(1) { animation-delay: 260ms; }
.vitrine-scene.est-anime .vue.est-actif .vue-texte > :nth-child(2) { animation-delay: 340ms; }
.vitrine-scene.est-anime .vue.est-actif .vue-texte > :nth-child(3) { animation-delay: 420ms; }
.vitrine-scene.est-anime .vue.est-actif .vue-texte > :nth-child(4) { animation-delay: 500ms; }
.vitrine-scene.est-anime .vue.est-actif .vue-illustration { animation: vue-glisse 900ms var(--sortie) 300ms both; }
.vitrine-scene.est-anime .vue.est-sortant .vue-texte,
.vitrine-scene.est-anime .vue.est-sortant .vue-illustration { animation: vue-recule 500ms var(--sortie) forwards; }

@keyframes vue-deplie {
  from { clip-path: polygon(0 0, 0 0, -12% 100%, -12% 100%); }
  to   { clip-path: polygon(0 0, 112% 0, 100% 100%, -12% 100%); }
}
@keyframes vue-replie {
  from { clip-path: polygon(112% 0, 112% 0, 100% 100%, 100% 100%); }
  to   { clip-path: polygon(0 0, 112% 0, 100% 100%, -12% 100%); }
}
@keyframes vue-arete {
  from { left: -60px; opacity: 1; } 88% { opacity: 1; } to { left: 106%; opacity: 0; }
}
@keyframes vue-arete-retour {
  from { left: 106%; opacity: 1; } 88% { opacity: 1; } to { left: -60px; opacity: 0; }
}
@keyframes vue-monte { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes vue-glisse { from { opacity: 0; transform: translateX(46px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes vue-recule { to { opacity: 0; transform: translateX(-36px); } }

/* --- La vie des dessins : seulement sur la vue affichée ------------------ */
@media (prefers-reduced-motion: no-preference) {
  .vue.est-actif .i-onde, .svc-tete .i-onde { animation: dessin-onde 2s ease-out infinite; }
  .vue.est-actif .i-onde--2, .svc-tete .i-onde--2 { animation-delay: .3s; }
  .vue.est-actif .i-onde--3, .svc-tete .i-onde--3 { animation-delay: .6s; }
  .vue.est-actif .i-pointille, .svc-tete .i-pointille { animation: dessin-defile 2.4s linear infinite; }
  .vue.est-actif .i-satellite, .svc-tete .i-satellite { animation: dessin-derive 6s ease-in-out infinite alternate; }

  .vue.est-actif .i-scan, .svc-tete .i-scan { animation: dessin-scan 3.4s ease-in-out infinite alternate; }
  .vue.est-actif .i-journal, .svc-tete .i-journal { animation: dessin-journal 2.6s var(--sortie) infinite; }
  .vue.est-actif .i-journal--2, .svc-tete .i-journal--2 { animation-delay: .85s; }
  .vue.est-actif .i-journal--3, .svc-tete .i-journal--3 { animation-delay: 1.7s; }

  .vue.est-actif .i-camera, .svc-tete .i-camera { animation: dessin-balaye 5s ease-in-out infinite alternate; }
  .vue.est-actif .i-rec, .svc-tete .i-rec { animation: dessin-clignote 1.2s steps(1) infinite; }
  .vue.est-actif .i-cadre, .svc-tete .i-cadre { animation: dessin-detecte 5s ease-in-out infinite; }

  .vue.est-actif .i-tuile, .svc-tete .i-tuile { animation: dessin-flotte 2.8s ease-in-out infinite alternate; }
  .vue.est-actif .i-tuile--2, .svc-tete .i-tuile--2 { animation-delay: .7s; }
  .vue.est-actif .i-tuile--3, .svc-tete .i-tuile--3 { animation-delay: 1.4s; }

  .vue.est-actif .i-impulsion, .svc-tete .i-impulsion { animation: dessin-impulsion 2.2s cubic-bezier(.5, 0, .5, 1) infinite; }
  .vue.est-actif .i-impulsion--2, .svc-tete .i-impulsion--2 { animation-delay: .45s; }
  .vue.est-actif .i-impulsion--3, .svc-tete .i-impulsion--3 { animation-delay: .9s; }
  .vue.est-actif .i-impulsion--4, .svc-tete .i-impulsion--4 { animation-delay: 1.35s; }
  .vue.est-actif .i-anneau, .svc-tete .i-anneau { animation: dessin-anneau 2.2s var(--sortie) infinite; }
}
.vitrine.est-dormant .vue * { animation-play-state: paused !important; }

.i-satellite, .i-journal, .i-tuile, .i-anneau, .i-cadre { transform-box: fill-box; transform-origin: center; }
.i-camera { transform-box: view-box; transform-origin: 96px 83px; }
.i-scan { transform-box: view-box; }

@keyframes dessin-onde { 0% { opacity: .12; } 30% { opacity: 1; } 100% { opacity: .12; } }
@keyframes dessin-defile { to { stroke-dashoffset: -40; } }
@keyframes dessin-derive { from { transform: translate(-8px, 6px) rotate(-3deg); } to { transform: translate(8px, -6px) rotate(3deg); } }
@keyframes dessin-scan { from { transform: translateY(0); } to { transform: translateY(232px); } }
@keyframes dessin-journal {
  0% { opacity: 0; transform: translateX(-18px); } 25% { opacity: 1; }
  75% { opacity: 1; } 100% { opacity: 0; transform: translateX(46px); }
}
@keyframes dessin-balaye { from { transform: rotate(-9deg); } to { transform: rotate(11deg); } }
@keyframes dessin-clignote { 50% { opacity: .15; } }
@keyframes dessin-detecte { 0%, 40% { opacity: 0; } 50%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dessin-flotte { from { transform: translateY(5px); } to { transform: translateY(-7px); } }
@keyframes dessin-impulsion { from { stroke-dashoffset: 9; } to { stroke-dashoffset: -100; } }
@keyframes dessin-anneau { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.75); } }

@media (prefers-reduced-motion: reduce) {
  .vitrine-scene .vue, .vitrine-scene .vue *, .js .vue::after, .logo-dessin * { animation: none !important; }
  .onglet-minuteur, .vitrine-cadran { display: none; }
}

/* --- Tablette : la vitrine prend toute la largeur ------------------------- */
@media (max-width: 1080px) {
  .carrefour-grille--vitrine {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "vitrine" "titre" "colonne";
    grid-template-rows: auto;
  }
  .carrefour-titre { padding-top: 0; }
  .carrefour-grille--vitrine .carrefour-colonne { align-self: stretch; }
}

/* --- Téléphone : dessin en tête, texte dessous, onglets en segments ------- */
@media (max-width: 720px) {
  .carrefour--vitrine { padding-top: var(--s3); }
  .carrefour--vitrine > .bloc { padding-inline: var(--s3); }
  .vue {
    grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--s3);
    min-height: 0; padding: var(--s5) var(--s5) var(--s6);
    background: linear-gradient(166deg, var(--t-ombre) 0 22%, var(--t-fonce) 22% 40%, var(--t) 40% 100%);
  }
  .vue-illustration { order: -1; justify-self: end; width: 172px; margin: calc(-1 * var(--s2)) calc(-1 * var(--s2)) 0 0; }
  .vue h2 { font-size: 1.75rem; max-width: 17ch; }
  .vue-texte p { font-size: 1rem; }
  .vue-faits { margin-bottom: var(--s5); }
  .vue-actions .bouton { flex: 1 1 100%; }
  .vue-lien { flex: 1 1 100%; justify-content: center; }
  .onglet { justify-content: center; min-height: 48px; padding: var(--s3) 0 var(--s2); }
  .onglet-nom {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0;
  }
  .vitrine-commande { width: 48px; min-height: 48px; }
  .vitrine-commande[data-sens] { display: none; }
}

@media print {
  .js .vitrine-barre { display: none; }
  .js .vitrine-scene { display: block; }
  .js .vue { visibility: visible; }
}

/* --- Teintes des six autres services (reprises de leurs pages) ----------- */
.teinte-maintenance { --t: #1D5A70; --t-fonce: #184C5E; --t-ombre: #1A3C4A; --t-clair: #93B0BA; }
.teinte-reseaux     { --t: #1F5C8B; --t-fonce: #1A4D75; --t-ombre: #1B3D59; --t-clair: #93B1C7; }
.teinte-serveurs    { --t: #44525E; --t-fonce: #39454F; --t-ombre: #2F3840; --t-clair: #A5ACB2; }
.teinte-messagerie  { --t: #2A5F45; --t-fonce: #23503A; --t-ombre: #213F32; --t-clair: #99B2A6; }
.teinte-sites       { --t: #8A3A62; --t-fonce: #743152; --t-ombre: #562B42; --t-clair: #C7A0B4; }
.teinte-conseil     { --t: #6E5322; --t-fonce: #5C461D; --t-ombre: #46381F; --t-clair: #B9AC95; }
/* --- L'index des destinations --------------------------------------------
   La liste à gauche ; la ligne active se colore et se prolonge dans
   l'aperçu, qui se déplie à droite dans la couleur du service. */
.index-tete {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--s5) var(--s6); margin-bottom: var(--s6);
}
.index-tete .titre-section { margin-bottom: 0; }
.index-filtres { display: none; }
.js .index-filtres { display: flex; background: var(--feuille); border: 1px solid var(--pli-fort); }
.index-filtre {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 46px; padding-inline: var(--s4);
  background: transparent; color: var(--gris);
  border: 0; border-left: 1px solid var(--pli);
  font-family: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
  transition: background var(--vite), color var(--vite);
}
.index-filtre:first-child { border-left: 0; }
.index-filtre:hover { background: var(--facette-1); color: var(--encre); }
.index-filtre[aria-pressed="true"] { background: var(--encre); color: var(--feuille); }
.index-compte {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding-inline: 5px;
  background: var(--facette-2); color: var(--encre);
  font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.index-filtre[aria-pressed="true"] .index-compte { background: var(--accent); color: var(--sur-accent); }
.index-filtre:focus-visible { outline-offset: -4px; }

.index { position: relative; }
.js .index { min-height: 560px; }
.index-liste { margin: 0; padding: 0; list-style: none; background: var(--feuille); border: 1px solid var(--pli-fort); }
.js .index-liste { width: 45%; }
.index-item { margin: 0; }
.index-item + .index-item .index-lien { border-top: 1px solid var(--pli); }
.index-lien {
  position: relative;
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 22px; align-items: center; gap: var(--s3);
  min-height: 57px; padding: var(--s2) var(--s4);
  color: var(--encre);
  transition: background var(--vite), color var(--vite);
}
.index-picto {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--facette-1); border: 1px solid var(--pli);
  transition: background var(--vite), border-color var(--vite), transform var(--vite);
}
.index-picto svg { width: 20px; height: 20px; fill: var(--t); }
.index-nom { font-weight: 700; letter-spacing: -.015em; }
.index-mode { font-size: .8125rem; color: var(--gris); white-space: nowrap; font-variant-numeric: tabular-nums; }
.index-lien .fleche { color: var(--pli-fort); transition: transform var(--vite), color var(--vite); }
.index-lien:hover { background: var(--facette-1); }
.index-lien:hover .index-picto { transform: rotate(-6deg); }
.index-item.est-actif .index-lien { background: var(--t); color: #fff; }
.index-item.est-actif .index-picto { background: #fff; border-color: transparent; transform: none; }
.index-item.est-actif .index-mode { color: rgba(255, 255, 255, .82); }
.index-item.est-actif .fleche { color: #fff; transform: translateX(6px); }
.index-lien:focus-visible { outline-offset: -4px; }
.index-item.est-actif .index-lien:focus-visible { outline-color: #fff; }
/* l'entrée anime le lien, jamais l'item : un item transformé deviendrait le
   repère de l'aperçu positionné en absolu, qui se retrouverait coincé dans la ligne */
.index-item.est-entree .index-lien { animation: index-entre 420ms var(--sortie) both; }
@keyframes index-entre { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

.index-apercu { display: none; }
.js .index-apercu {
  position: absolute; top: 0; right: 0; bottom: 0; width: 55%;
  display: flex; align-items: flex-end; overflow: hidden;
  padding: var(--s7);
  color: #fff; visibility: hidden;
  background: var(--t);
  background: linear-gradient(101deg, var(--t) 0 58%, var(--t-fonce) 58% 82%, var(--t-ombre) 82% 100%);
}
.js .index-item.est-actif .index-apercu { visibility: visible; z-index: 2; animation: index-deplie 640ms cubic-bezier(.7, 0, .2, 1); }
.index-apercu::before {
  content: ""; position: absolute; top: 0; right: 0; width: 52px; height: 52px;
  background: linear-gradient(225deg, var(--t-clair) 0 50%, transparent 50%);
}
.index-apercu-fond {
  position: absolute; top: var(--s6); right: var(--s6);
  width: 44%; max-width: 220px; height: auto; fill: rgba(255, 255, 255, .13);
}
.js .index-item.est-actif .index-apercu-fond { animation: index-picto 900ms var(--sortie) both; }
.index-apercu-texte { position: relative; max-width: 46ch; }
.index-apercu h3 { color: #fff; font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; margin-bottom: var(--s3); }
.index-apercu p { color: rgba(255, 255, 255, .88); margin-bottom: var(--s4); }
.index-apercu-points { margin: 0 0 var(--s4); padding: 0; list-style: none; }
.index-apercu-points li {
  position: relative; margin: 0; padding: var(--s2) 0 var(--s2) var(--s5);
  border-top: 1px solid rgba(255, 255, 255, .2); font-size: .9375rem;
}
.index-apercu-points li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 7px; height: 7px; background: #fff; }
.index-apercu-modes { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s5); padding: 0; list-style: none; }
.index-apercu-modes li { margin: 0; padding: 3px var(--s3); border: 1px solid rgba(255, 255, 255, .42); font-size: .8125rem; font-weight: 600; }
.index-apercu-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.index-apercu .bouton { background: var(--feuille); color: var(--encre); }
.index-apercu .bouton:hover { background: #fff; }
.index-apercu-devis {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px;
  color: #fff; font-weight: 600; font-size: .9375rem;
}
.index-apercu-devis .fleche { transition: transform var(--vite); }
.index-apercu-devis:hover .fleche { transform: translateX(5px); }
.index-apercu :focus-visible { outline-color: #fff; }
.js .index-item.est-actif .index-apercu-texte > * { animation: vue-monte 620ms var(--sortie) both; }
.js .index-item.est-actif .index-apercu-texte > :nth-child(1) { animation-delay: 200ms; }
.js .index-item.est-actif .index-apercu-texte > :nth-child(2) { animation-delay: 260ms; }
.js .index-item.est-actif .index-apercu-texte > :nth-child(3) { animation-delay: 320ms; }
.js .index-item.est-actif .index-apercu-texte > :nth-child(4) { animation-delay: 380ms; }
.js .index-item.est-actif .index-apercu-texte > :nth-child(5) { animation-delay: 440ms; }
@keyframes index-deplie { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes index-picto { from { opacity: 0; transform: scale(.7) rotate(-12deg); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .js .index { min-height: 0; }
  .js .index-liste { width: auto; }
  .js .index-apercu { position: static; display: none; width: auto; padding: var(--s5); visibility: visible; }
  .js .index-item.est-actif .index-apercu { display: flex; }
  .index-apercu-fond { top: var(--s4); right: var(--s4); width: 96px; }
}
@media (max-width: 720px) {
  .index-lien { grid-template-columns: 40px minmax(0, 1fr) 22px; }
  .index-mode { display: none; }
  /* un seul bouton (« Toutes ») depuis le retrait des filtres : taille naturelle */
  .js .index-filtres { align-self: flex-start; }
}

/* --- Les publics : une bande qui défile ---------------------------------- */
.defilant { overflow: hidden; padding-block: var(--s2); margin-bottom: var(--s5); }
.defilant-piste { display: flex; justify-content: center; }
.defilant-groupe {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3);
  margin: 0; padding: 0 var(--s5); list-style: none;
}
.defilant-groupe li { margin: 0; }
.defilant-copie { display: none; }
/* avec JavaScript : deux groupes identiques sur une piste que main.js fait
   glisser (initDefilant) — défilement lent, et on la lance à la main : on
   l'attrape, on la fait glisser, elle file sur son élan puis reprend. */
.defilant.est-anime {
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.defilant.est-anime .defilant-piste { justify-content: flex-start; width: max-content; will-change: transform; }
.defilant.est-anime .defilant-groupe { flex-wrap: nowrap; padding: 0 var(--s3) 0 0; }
.defilant.est-anime .defilant-copie { display: flex; }
.defilant.est-tire { cursor: grabbing; }
.defilant.est-tire .public-plaque { transform: none; transition: none; }
.defilant .public-plaque svg, .defilant .public-plaque img { -webkit-user-drag: none; }

.public-plaque {
  display: inline-flex; align-items: center; gap: var(--s3);
  min-height: 64px; padding: var(--s2) var(--s5) var(--s2) var(--s2);
  background: var(--feuille); color: var(--encre);
  border: 1px solid var(--pli-fort);
  font-family: inherit; font-size: 1rem; font-weight: 600; white-space: nowrap; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  transition: background var(--vite), color var(--vite), border-color var(--vite), transform var(--vite);
}
.public-picto {
  width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--accent-voile); transition: background var(--vite);
}
.public-picto svg { width: 22px; height: 22px; fill: var(--accent-fonce); transition: fill var(--vite), transform var(--lent); }
.public-plaque:hover { border-color: var(--encre); transform: translateY(-3px); }
.public-plaque:hover .public-picto { background: var(--accent); }
.public-plaque:hover .public-picto svg { fill: var(--sur-accent); transform: scale(1.12); }
.public-plaque.est-choisi { background: var(--encre); color: var(--feuille); border-color: var(--encre); }
.public-plaque.est-choisi .public-picto { background: var(--accent); }
.public-plaque.est-choisi .public-picto svg { fill: var(--sur-accent); }
.public-plaque:focus-visible { outline-offset: 2px; }


.public-detail {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-areas: "tete services" "texte services";
  gap: var(--s3) var(--s7); align-items: start;
  margin-bottom: var(--s3); padding: var(--s6);
  background: var(--feuille); border: 1px solid var(--pli-fort);
}
.js .public-detail { display: none; margin-bottom: 0; }
.js .public-detail.est-actif { display: grid; animation: index-deplie 600ms cubic-bezier(.7, 0, .2, 1); }
.public-detail-tete { grid-area: tete; display: flex; align-items: center; gap: var(--s4); }
.public-detail-picto { width: 64px; height: 64px; flex: none; display: grid; place-items: center; background: var(--encre); }
.public-detail-picto svg { width: 30px; height: 30px; fill: var(--accent); }
.public-detail h3 { margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 800; letter-spacing: -.03em; }
.public-detail > p { grid-area: texte; margin: 0; color: var(--gris); font-size: 1.0625rem; }
.public-services { grid-area: services; margin: 0; padding: 0; list-style: none; border: 1px solid var(--pli-fort); }
.public-services li { margin: 0; }
.public-services li + li .public-service { border-top: 1px solid var(--pli); }
.public-service {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 22px; align-items: center; gap: var(--s3);
  min-height: 56px; padding: var(--s2) var(--s4);
  color: var(--encre); font-weight: 600;
  transition: background var(--vite), color var(--vite);
}
.public-service-picto { width: 40px; height: 40px; display: grid; place-items: center; background: var(--t); }
.public-service-picto svg { width: 20px; height: 20px; fill: #fff; }
.public-service .fleche { color: var(--pli-fort); transition: transform var(--vite), color var(--vite); }
.public-service:hover { background: var(--t); color: #fff; }
.public-service:hover .fleche { color: #fff; transform: translateX(5px); }
.public-service:focus-visible { outline-offset: -4px; }
.js .public-detail.est-actif .public-services li { animation: vue-monte 560ms var(--sortie) both; }
.js .public-detail.est-actif .public-services li:nth-child(2) { animation-delay: 80ms; }
.js .public-detail.est-actif .public-services li:nth-child(3) { animation-delay: 160ms; }
@media (max-width: 900px) {
  .public-detail { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tete" "texte" "services"; padding: var(--s5); gap: var(--s4); }
}

/* --- Le parcours en quatre étapes -----------------------------------------
   Le fil se trace d'un repère à l'autre et chaque repère s'allume à son
   tour quand la section arrive dans l'écran. */
.parcours {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6);
  margin: 0; padding: 0; list-style: none;
}
.parcours-etape { position: relative; margin: 0; }
.parcours-etape:not(:last-child)::before,
.parcours-etape:not(:last-child)::after {
  content: ""; position: absolute; top: 30px; left: 124px; right: calc(-1 * var(--s6) + 8px);
  height: 2px; background: var(--pli-fort);
}
.parcours-etape:not(:last-child)::after {
  background: var(--accent-fonce); transform-origin: left;
  transition: transform 700ms cubic-bezier(.7, 0, .2, 1);
  transition-delay: calc(var(--i) * 450ms + 420ms);
}
.parcours-repere { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5); }
.parcours-num {
  width: 62px; height: 62px; display: grid; place-items: center;
  background: var(--accent); color: var(--sur-accent);
  font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%);
  transition: background 400ms, color 400ms, transform var(--vite);
  transition-delay: calc(var(--i) * 450ms + 120ms), calc(var(--i) * 450ms + 120ms), 0s;
}
.parcours-icone {
  width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--encre); color: var(--feuille);
  transition: opacity 500ms var(--sortie), transform 500ms var(--sortie);
  transition-delay: calc(var(--i) * 450ms + 260ms);
}
.parcours-icone svg { width: 22px; height: 22px; fill: currentColor; }
.parcours-etape h3 { font-size: 1.1875rem; margin-bottom: var(--s2); transition: color var(--vite); }
.parcours-etape p { margin: 0; font-size: .9375rem; color: var(--gris); }
.parcours-etape .parcours-tag {
  display: inline-block; margin-top: var(--s4); padding: var(--s1) var(--s3);
  background: var(--accent-voile); border: 1px solid var(--accent);
  color: var(--encre); font-size: .8125rem; font-weight: 600;
}
.parcours-etape:hover .parcours-num { transform: translateY(-4px); }
.parcours-etape:hover h3 { color: var(--accent-fonce); }
/* état d'attente, avec JavaScript seulement : sans lui, tout est allumé */
.js .parcours.surgit:not(.est-visible) .parcours-num { background: var(--facette-2); color: var(--gris); }
.js .parcours.surgit:not(.est-visible) .parcours-icone { opacity: 0; transform: translateX(-10px) scale(.8); }
.js .parcours.surgit:not(.est-visible) .parcours-etape::after { transform: scaleX(0); }
@media (max-width: 900px) {
  .parcours { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .parcours-etape { padding-left: 84px; }
  .parcours-repere { position: absolute; left: 0; top: 0; flex-direction: column; align-items: flex-start; }
  .parcours-icone { display: none; }
  .parcours-etape:not(:last-child)::before,
  .parcours-etape:not(:last-child)::after { top: 70px; bottom: calc(-1 * var(--s6) + 8px); left: 30px; right: auto; width: 2px; height: auto; }
  .parcours-etape:not(:last-child)::after { transform-origin: top; }
  .js .parcours.surgit:not(.est-visible) .parcours-etape::after { transform: scaleY(0); }
}

/* --- La bande d'appel à trois canaux ------------------------------------- */
.bande-appel--canaux { position: relative; overflow: hidden; padding-block: var(--s8); }
.bande-appel--canaux::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(101deg, transparent 0 60%, rgba(251, 250, 247, .035) 60% 80%, rgba(251, 250, 247, .07) 80% 100%);
}
.bande-appel--canaux .bloc {
  position: relative;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.45fr);
  gap: var(--s7); align-items: center;
}
.bande-appel-texte h2 {
  font-size: clamp(1.9rem, 3.3vw, 2.75rem); font-weight: 800;
  line-height: 1.05; letter-spacing: -.04em; margin-bottom: var(--s4);
}
.bande-appel-texte p { font-size: 1.0625rem; max-width: 40ch; }
/* Le signal : le « O à ondes » du logo CONNECT, qui émet */
.bande-appel-signal { display: block; width: 68px; height: auto; margin-bottom: var(--s5); overflow: visible; }
.signal-anneau { fill: none; stroke: var(--feuille); stroke-width: 6; }
.signal-arc { fill: none; stroke: var(--marque-orange); stroke-width: 6; }
.signal-point { fill: var(--marque-orange); transform-box: fill-box; transform-origin: center; }
.signal-onde { fill: none; stroke: var(--marque-orange); stroke-width: 5; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .signal-onde { animation: dessin-onde 2.2s ease-out infinite; }
  .signal-onde--2 { animation-delay: .3s; }
  .signal-onde--3 { animation-delay: .6s; }
  .signal-point { animation: signal-pouls 2.2s ease-in-out infinite; }
}
@keyframes signal-pouls { 50% { transform: scale(.72); } }

.canaux { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.canaux li { margin: 0; }
.canal {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--s1);
  height: 100%; min-height: 228px; padding: var(--s5);
  background: var(--encre-2); color: var(--feuille);
  border: 1px solid rgba(251, 250, 247, .16);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
  transition: color 320ms, border-color var(--vite);
}
/* au survol, la couleur du canal monte depuis le bas, comme un pli qu'on relève */
.canal::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--canal-fond);
  transform: translateY(101%); transition: transform 520ms cubic-bezier(.7, 0, .2, 1);
}
.canal > * { position: relative; z-index: 1; }
.canal:hover, .canal:focus-visible { color: var(--canal-texte); border-color: transparent; }
.canal:hover::before, .canal:focus-visible::before { transform: none; }
.canal--tel   { --canal-fond: var(--accent);   --canal-texte: var(--sur-accent); --canal-icone: var(--accent); }
.canal--wa    { --canal-fond: var(--whatsapp); --canal-texte: #fff;              --canal-icone: #3CC46F; }
.canal--devis { --canal-fond: var(--feuille);  --canal-texte: var(--encre);      --canal-icone: var(--feuille); }
.canal-icone {
  width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: auto;
  color: var(--canal-icone); border: 1px solid rgba(251, 250, 247, .22);
  transition: color 320ms, border-color 320ms, transform var(--lent);
}
.canal-icone svg { width: 24px; height: 24px; fill: currentColor; }
.canal:hover .canal-icone, .canal:focus-visible .canal-icone { color: currentColor; border-color: currentColor; transform: rotate(-8deg) scale(1.06); }
.canal-nom { margin-top: var(--s5); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .78; }
.canal-valeur { font-size: 1.3125rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.canal--tel .canal-valeur { font-size: clamp(1.0625rem, 1.45vw, 1.1875rem); white-space: nowrap; }
.canal-detail { font-size: .875rem; opacity: .75; }
.canal:hover .canal-nom, .canal:hover .canal-detail,
.canal:focus-visible .canal-nom, .canal:focus-visible .canal-detail { opacity: 1; }
.canal-fleche { position: absolute; top: var(--s5); right: var(--s5); width: 22px; opacity: 0; transform: translate(-8px, 8px); transition: opacity var(--vite), transform var(--lent); }
.canal-fleche svg { width: 22px; height: 22px; fill: currentColor; }
.canal:hover .canal-fleche, .canal:focus-visible .canal-fleche { opacity: 1; transform: none; }
.bande-appel .canal:focus-visible { outline: 2px solid var(--feuille); outline-offset: 3px; }
@media (max-width: 1080px) {
  .bande-appel--canaux .bloc { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
}
@media (max-width: 720px) {
  .canaux { grid-template-columns: minmax(0, 1fr); }
  .canal { min-height: 0; display: grid; grid-template-columns: 54px minmax(0, 1fr); grid-template-areas: "icone nom" "icone valeur" "icone detail"; column-gap: var(--s4); }
  .canal-icone { grid-area: icone; margin: 0; align-self: center; }
  .canal-nom { grid-area: nom; margin-top: 0; }
  .canal-valeur { grid-area: valeur; }
  .canal-detail { grid-area: detail; }
}

@media (prefers-reduced-motion: reduce) {
  .defilant-piste, .index-apercu, .index-apercu *, .public-detail, .public-detail *, .index-item { animation: none !important; }
}

/* --- Réalisations : missions types, filtrables et dépliables --------------
   Chaque fiche se déplie et se lit en trois temps (situation, intervention,
   résultat) ; à droite, l'appel au devis dans la couleur du service.
   Sans JavaScript : toutes les fiches ouvertes, les trois temps à la suite. */
/* Le panneau des filtres : le compteur à gauche sur l'encre, onze tuiles de
   service à droite, chacune avec son pictogramme dans la couleur du service. */
.missions-barre {
  display: grid; grid-template-columns: 230px minmax(0, 1fr);
  margin-bottom: var(--s6);
  background: var(--feuille); border: 1px solid var(--pli-fort);
  box-shadow: var(--ombre-facette);
}
.missions-compteur {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s4);
  padding: var(--s5);
  background: var(--encre); color: var(--feuille);
}
.missions-compteur::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background: linear-gradient(101deg, transparent 0 55%, var(--accent) 55% 80%, var(--accent-fonce) 80% 100%);
}
.missions-compteur > * { position: relative; }
.missions-compte { margin: 0; color: #CFCBC3; font-size: .9375rem; }
.missions-compte strong {
  display: block; margin-bottom: var(--s1);
  font-size: 3.5rem; font-weight: 800; line-height: 1; letter-spacing: -.045em;
  color: var(--feuille); font-variant-numeric: tabular-nums;
}
.missions-compte strong.est-maj { animation: compte-saute 420ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes compte-saute { from { transform: translateY(10px) scale(.86); opacity: .4; } to { transform: none; opacity: 1; } }
.filtre-tous { display: none; }
.js .filtre-tous {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--s3);
  background: transparent; color: var(--feuille);
  border: 1px solid rgba(251, 250, 247, .32);
  font-family: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
  transition: background var(--vite), border-color var(--vite), color var(--vite);
}
.js .filtre-tous:hover { border-color: var(--feuille); }
.js .filtre-tous[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.filtre-tous:focus-visible { outline-color: var(--accent-clair); }

.filtres-services { display: none; }
.js .filtres-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.filtres-services .filtre-service {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: var(--s3);
  min-height: 66px; padding: var(--s2) var(--s4) var(--s2) var(--s3);
  background: transparent; color: var(--encre);
  border: 0; border-left: 1px solid var(--pli); border-top: 1px solid var(--pli);
  font-family: inherit; font-size: .875rem; font-weight: 600; line-height: 1.25;
  text-align: left; cursor: pointer;
  transition: background var(--vite), color var(--vite);
}
.filtres-services .filtre-service:nth-child(-n+3) { border-top: 0; }
.filtre-nom { hyphens: auto; overflow-wrap: normal; }
.filtre-picto {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--t);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
  transition: background var(--vite), transform var(--lent);
}
.filtre-picto svg { width: 18px; height: 18px; fill: #fff; transition: fill var(--vite); }
.filtres-services .filtre-compte {
  min-width: 24px; height: 24px; padding-inline: 4px;
  display: grid; place-items: center;
  background: var(--facette-1); color: var(--encre);
  font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.filtres-services .filtre-service:hover { background: var(--facette-1); }
.filtres-services .filtre-service:hover .filtre-picto { transform: rotate(-8deg); }
.filtres-services .filtre-service[aria-pressed="true"] { background: var(--t); color: #fff; }
.filtres-services .filtre-service[aria-pressed="true"] .filtre-picto { background: #fff; transform: none; }
.filtres-services .filtre-service[aria-pressed="true"] .filtre-picto svg { fill: var(--t); }
.filtres-services .filtre-service[aria-pressed="true"] .filtre-compte { background: rgba(255, 255, 255, .2); color: #fff; }
.filtres-services .filtre-service:focus-visible { outline-offset: -4px; }
@media (max-width: 900px) {
  .missions-barre { grid-template-columns: minmax(0, 1fr); }
  .missions-compteur { flex-direction: row; align-items: center; padding: var(--s4); }
  .missions-compte strong { display: inline; font-size: 2.25rem; margin: 0 var(--s2) 0 0; }
  /* une seule rangée de tuiles, qu'on fait glisser */
  .js .filtres-services {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(190px, max-content);
    overflow-x: auto; scrollbar-width: none;
  }
  .js .filtres-services::-webkit-scrollbar { display: none; }
  .filtres-services .filtre-service, .filtres-services .filtre-service:nth-child(-n+3) { border-top: 0; }
}

.missions { display: flex; flex-direction: column; gap: var(--s3); }
.mission {
  background: var(--feuille); border: 1px solid var(--pli-fort);
  scroll-margin-top: calc(var(--barre-h) + var(--s4));
  transition: border-color var(--vite), box-shadow var(--lent);
}
.mission.est-ouverte { border-color: var(--t); box-shadow: var(--ombre-facette); }
.mission.est-entree { animation: index-entre 420ms var(--sortie) both; }
.mission-titre { margin: 0; font-size: inherit; line-height: inherit; letter-spacing: normal; }
.mission-tete {
  width: 100%;
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 40px; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s4) var(--s3) var(--s3);
  background: transparent; color: var(--encre);
  border: 0; font-family: inherit; text-align: left; cursor: pointer;
  transition: background var(--vite);
}
.mission-tete:hover { background: var(--facette-1); }
.mission-tete:focus-visible { outline-offset: -4px; }
.mission-picto {
  width: 64px; height: 64px; display: grid; place-items: center;
  background: var(--t);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.mission-picto svg { width: 28px; height: 28px; fill: #fff; transition: transform var(--lent); }
.mission-tete:hover .mission-picto svg { transform: rotate(-8deg) scale(1.08); }
.mission-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mission-service { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t); }
.mission-nom { font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.2; text-wrap: balance; }
.mission-etiquettes { display: flex; gap: var(--s2); }
.mission-type, .mission-structure {
  padding: 3px 10px; border: 1px solid var(--pli-fort);
  font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.mission-type { background: var(--accent-voile); border-color: var(--accent); }
.mission-bascule { position: relative; width: 40px; height: 40px; border: 1px solid var(--pli-fort); transition: background var(--vite), border-color var(--vite); }
.mission-bascule::before, .mission-bascule::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px;
  background: var(--encre); transform: translate(-50%, -50%);
  transition: transform var(--lent), background var(--vite);
}
.mission-bascule::after { transform: translate(-50%, -50%) rotate(90deg); }
.mission-tete:hover .mission-bascule { border-color: var(--encre); }
.mission.est-ouverte .mission-bascule { background: var(--t); border-color: var(--t); }
.mission.est-ouverte .mission-bascule::before, .mission.est-ouverte .mission-bascule::after { background: #fff; }
.mission.est-ouverte .mission-bascule::after { transform: translate(-50%, -50%) rotate(0deg); }

.js .mission-corps { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 540ms cubic-bezier(.7, 0, .2, 1); }
.js .mission.est-ouverte .mission-corps { grid-template-rows: 1fr; }
.mission-interieur {
  min-height: 0; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  border-top: 1px solid var(--pli);
}
.js .mission:not(.est-ouverte) .mission-interieur { visibility: hidden; border-top-color: transparent; transition: visibility 0s 540ms, border-color 0s 540ms; }
.mission-recit { padding: var(--s5) var(--s6) var(--s6); }

.mission-temps { display: none; }
.js .mission-temps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--pli-fort); margin-bottom: var(--s5); }
.mission-onglet {
  display: flex; align-items: center; gap: var(--s2);
  min-height: 48px; padding-inline: var(--s4);
  background: var(--facette-1); color: var(--gris);
  border: 0; border-left: 1px solid var(--pli);
  font-family: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer;
  transition: background var(--vite), color var(--vite);
}
.mission-onglet:first-child { border-left: 0; }
.mission-onglet:hover { color: var(--encre); background: var(--facette-2); }
.mission-onglet-num {
  width: 24px; height: 24px; flex: none; display: grid; place-items: center;
  background: var(--facette-2); color: var(--encre);
  font-size: .75rem; font-weight: 800; font-variant-numeric: tabular-nums;
  transition: background var(--vite), color var(--vite);
}
.mission-onglet.est-vu .mission-onglet-num { background: var(--t); color: #fff; }
.mission-onglet[aria-selected="true"] { background: var(--t); color: #fff; }
.mission-onglet[aria-selected="true"] .mission-onglet-num { background: #fff; color: var(--t); }
.mission-onglet:focus-visible { outline-offset: -4px; }
.mission-onglet[aria-selected="true"]:focus-visible { outline-color: #fff; }

.mission-sous-titre {
  margin: var(--s4) 0 var(--s2);
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t);
}
.mission-panneau:first-of-type .mission-sous-titre { margin-top: 0; }
.js .mission-sous-titre {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.js .mission-panneau { display: none; }
.js .mission-panneau.est-actif { display: block; animation: vue-monte 480ms var(--sortie) both; }
.mission-panneau p { font-size: 1.0625rem; max-width: 62ch; margin: 0; }
.mission-etapes { margin: 0; padding: 0; list-style: none; counter-reset: etape; }
.mission-etapes li {
  position: relative; counter-increment: etape;
  margin: 0; padding: var(--s3) 0 var(--s3) var(--s7);
  border-top: 1px solid var(--pli);
}
.mission-etapes li:first-child { border-top: 0; }
.mission-etapes li::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute; left: 0; top: var(--s3);
  width: 34px; height: 26px; display: grid; place-items: center;
  background: var(--t); color: #fff; font-size: .75rem; font-weight: 800; font-variant-numeric: tabular-nums;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 7px 100%);
}
.js .mission-panneau.est-actif .mission-etapes li { animation: vue-monte 480ms var(--sortie) both; }
.js .mission-panneau.est-actif .mission-etapes li:nth-child(2) { animation-delay: 70ms; }
.js .mission-panneau.est-actif .mission-etapes li:nth-child(3) { animation-delay: 140ms; }
.js .mission-panneau.est-actif .mission-etapes li:nth-child(4) { animation-delay: 210ms; }
.mission-panneau .mission-resultat {
  padding: var(--s4) var(--s5);
  background: var(--facette-1); border: 1px solid var(--pli);
  font-size: 1.1875rem; font-weight: 600; letter-spacing: -.012em; line-height: 1.45;
}
.mission-suivant { display: none; }
.js .mission-suivant {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin-top: var(--s5); min-height: 44px; padding-inline: var(--s4);
  background: transparent; color: var(--encre);
  border: 1px solid var(--pli-fort);
  font-family: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer;
  transition: background var(--vite), color var(--vite), border-color var(--vite);
}
.js .mission-suivant[hidden] { display: none; }
.mission-suivant:hover { background: var(--t); border-color: var(--t); color: #fff; }
.mission-suivant .fleche { transition: transform var(--vite); }
.mission-suivant:hover .fleche { transform: translateX(5px); }

.mission-appel {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: var(--s3);
  padding: var(--s6) var(--s5);
  color: #fff;
  background: var(--t);
  background: linear-gradient(101deg, var(--t) 0 60%, var(--t-fonce) 60% 85%, var(--t-ombre) 85% 100%);
}
.mission-appel-fond { position: absolute; top: var(--s4); right: var(--s4); width: 112px; height: 112px; fill: rgba(255, 255, 255, .13); }
.mission-appel > :not(.mission-appel-fond) { position: relative; }
.mission-appel .mission-appel-titre { margin: 0; color: #fff; font-size: 1.375rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.mission-appel p { margin: 0; color: rgba(255, 255, 255, .88); font-size: .9375rem; }
.mission-appel .bouton { background: var(--feuille); color: var(--encre); margin-top: var(--s2); }
.mission-appel .bouton:hover { background: #fff; }
.mission-appel-lien { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; color: #fff; font-weight: 600; font-size: .9375rem; }
.mission-appel-lien .fleche { transition: transform var(--vite); }
.mission-appel-lien:hover .fleche { transform: translateX(5px); }
.mission-appel :focus-visible { outline-color: #fff; }

@media (max-width: 900px) {
  .mission-interieur { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .mission-tete { grid-template-columns: 48px minmax(0, 1fr) 36px; gap: var(--s3); padding: var(--s3); }
  .mission-picto { width: 48px; height: 48px; }
  .mission-picto svg { width: 22px; height: 22px; }
  .mission-etiquettes { grid-column: 2 / -1; grid-row: 2; }
  .mission-bascule { grid-column: 3; grid-row: 1; width: 36px; height: 36px; }
  .mission-recit { padding: var(--s4); }
  .mission-onglet { padding-inline: var(--s2); font-size: .8125rem; gap: var(--s1); justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .js .mission-corps { transition: none; }
  .mission, .mission *, .mission-panneau { animation: none !important; }
}

/* --- Page Contact ----------------------------------------------------------
   En-tête encre aux facettes de l'accent, quatre canaux ; formulaire en trois
   étapes sur une feuille ; l'étape 3 laisse le visiteur placer son adresse
   sur une carte (Leaflet + OpenStreetMap, chargés à la demande). */
.contact-tete {
  position: relative; overflow: hidden;
  padding-block: var(--s7) var(--s8);
  background: var(--encre); color: var(--feuille);
}
.contact-tete::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .42;
  background: linear-gradient(101deg, transparent 0 57%, var(--accent) 57% 79%, var(--accent-fonce) 79% 100%);
}
.contact-tete > .bloc { position: relative; }
.contact-tete-grille {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr);
  gap: var(--s7); align-items: end;
}
.contact-tete .itineraire li, .contact-tete .itineraire a { color: #B8B4AC; }
.contact-tete .itineraire a:hover { color: var(--feuille); }
.contact-tete .itineraire li + li::before { color: rgba(251, 250, 247, .3); }
.contact-tete h1 { color: var(--feuille); font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin-bottom: var(--s4); }
.contact-tete-sous { color: #CFCBC3; font-size: 1.125rem; max-width: 40ch; margin-bottom: var(--s5); }
.contact-tete :focus-visible { outline-color: var(--accent-clair); }

.statut {
  display: inline-flex; align-items: center; gap: var(--s3);
  margin: 0; padding: var(--s2) var(--s4);
  border: 1px solid rgba(251, 250, 247, .24);
  font-size: .9375rem; font-weight: 600; color: var(--feuille);
}
.statut-point { width: 10px; height: 10px; flex: none; background: var(--gris-clair); }
.statut.est-ouvert .statut-point { background: #3CC46F; }
.statut.est-ouvert { border-color: rgba(60, 196, 111, .55); }
@media (prefers-reduced-motion: no-preference) {
  .statut.est-ouvert .statut-point { animation: statut-pouls 1.8s ease-in-out infinite; }
}
@keyframes statut-pouls { 50% { transform: scale(.6) rotate(45deg); opacity: .55; } }

.canaux--contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.canaux--contact .canal { min-height: 196px; }
.canaux--contact .canal--tel { --canal-icone: var(--accent-clair); }
.canal--mail { --canal-fond: var(--accent-clair); --canal-texte: var(--encre); --canal-icone: var(--accent-clair); }
.canal--lieu { --canal-fond: var(--feuille); --canal-texte: var(--encre); --canal-icone: var(--feuille); }
.canal--mail .canal-valeur { font-size: clamp(.9375rem, 1.25vw, 1.0625rem); overflow-wrap: anywhere; }

/* La feuille du formulaire et sa colonne */
.contact-grille { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
.contact-form {
  position: relative;
  padding: var(--s7);
  background: var(--feuille); border: 1px solid var(--pli-fort);
  box-shadow: var(--ombre-facette);
}
.contact-form::before {
  content: ""; position: absolute; top: 0; right: 0; width: 46px; height: 46px; pointer-events: none;
  background: linear-gradient(225deg, var(--facette-2) 0 50%, transparent 50%);
}
.contact-form .titre-section { margin-bottom: var(--s6); }
.etape-form { margin: 0 0 var(--s6); padding: 0; border: 0; min-width: 0; }
.etape-legende {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  margin-bottom: var(--s4); padding: 0 0 var(--s3);
  border-bottom: 1px solid var(--pli);
  font-size: 1.1875rem; font-weight: 800; letter-spacing: -.02em; color: var(--encre);
}
.etape-num {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  background: var(--accent); color: var(--sur-accent);
  font-size: .9375rem; font-variant-numeric: tabular-nums;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}
.facultatif { margin-left: auto; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.etape-aide { margin-bottom: var(--s4); font-size: .9375rem; color: var(--gris); }
.etape-form > .champ + .champ { margin-top: var(--s4); }
.champ[hidden] { display: none; }

/* Le sujet : des plaques à choisir d'un geste ; « Autre » ouvre un champ libre */
.sujets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 188px), 1fr)); gap: var(--s2); }
.sujet {
  position: relative;
  display: flex; align-items: center; gap: var(--s3);
  min-height: 58px; padding: var(--s2) var(--s3);
  background: var(--facette-1); border: 1px solid var(--pli);
  cursor: pointer;
  transition: background var(--vite), border-color var(--vite), color var(--vite), transform var(--vite);
}
/* les plaques sont des <label> dans un .champ : elles n'en prennent pas la casse */
.champ label.sujet { font-size: 1rem; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--encre); }
.champ label.sujet.est-choisi, .champ label.sujet:has(input:checked) { color: var(--sur-accent); }
.sujet input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.sujet-picto {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  background: var(--feuille); border: 1px solid var(--pli);
  transition: background var(--vite), border-color var(--vite), transform var(--lent);
}
.sujet-picto svg { width: 18px; height: 18px; fill: var(--accent-fonce); transition: fill var(--vite); }
.sujet-nom { font-size: .9375rem; font-weight: 600; line-height: 1.25; }
.sujet:hover { background: var(--feuille); border-color: var(--accent); }
.sujet:hover .sujet-picto { transform: rotate(-6deg); }
.sujet.est-choisi, .sujet:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.sujet.est-choisi .sujet-picto, .sujet:has(input:checked) .sujet-picto { background: var(--sur-accent); border-color: transparent; transform: none; animation: sujet-coche 420ms cubic-bezier(.34, 1.56, .64, 1); }
.sujet.est-choisi .sujet-picto svg, .sujet:has(input:checked) .sujet-picto svg { fill: var(--accent); }
.sujet:has(input:focus-visible) { outline: 2px solid var(--accent-fonce); outline-offset: 2px; }
.champ.invalide .sujet { border-color: var(--alerte); }
@keyframes sujet-coche { from { transform: scale(.6); } to { transform: none; } }
.js .champ-autre:not([hidden]) { animation: vue-monte 420ms var(--sortie) both; }

/* Le localisateur */
.localisateur { margin-bottom: var(--s4); }
.localisateur-sans-js {
  margin: 0 0 var(--s3); padding: var(--s3) var(--s4);
  background: var(--facette-1); border: 1px dashed var(--pli-fort);
  font-size: .875rem; color: var(--gris);
}
.js .localisateur-sans-js { display: none; }
.localisateur-actions { display: none; }
.js .localisateur-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.localisateur-bouton {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 48px; padding-inline: var(--s4);
  background: var(--feuille); color: var(--encre);
  border: 1px solid var(--pli-fort);
  font-family: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer;
  transition: background var(--vite), border-color var(--vite), color var(--vite);
}
.localisateur-bouton svg { width: 20px; height: 20px; flex: none; fill: var(--accent-fonce); transition: transform var(--lent); }
.localisateur-bouton:hover { border-color: var(--encre); }
.localisateur-bouton:hover svg { transform: rotate(-10deg) scale(1.08); }
.localisateur-bouton--plein { background: var(--encre); color: var(--feuille); border-color: var(--encre); }
.localisateur-bouton--plein svg { fill: var(--accent-clair); }
.localisateur-bouton--plein:hover { background: #000; }
.localisateur-bouton[aria-busy="true"] { opacity: .6; pointer-events: none; }
.localisateur-bouton[aria-busy="true"] svg { animation: localisateur-cherche 1s linear infinite; }
@keyframes localisateur-cherche { to { transform: rotate(360deg); } }

.localisateur-panneau { margin-top: var(--s4); background: var(--feuille); border: 1px solid var(--pli-fort); }
.localisateur-panneau[hidden] { display: none; }
.js .localisateur-panneau:not([hidden]) { animation: vue-monte 480ms var(--sortie) both; }
.localisateur-recherche { display: flex; border-bottom: 1px solid var(--pli-fort); }
.localisateur-recherche input {
  flex: 1; min-width: 0; min-height: 48px; padding-inline: var(--s4);
  background: var(--feuille); color: var(--encre);
  border: 0; font-family: inherit; font-size: 1rem;
}
.localisateur-recherche input:focus { outline: 2px solid var(--accent-fonce); outline-offset: -2px; }
.localisateur-recherche .localisateur-bouton { border: 0; border-left: 1px solid var(--encre); }
.localisateur-carte { height: 380px; background: var(--facette-2); }
.localisateur-bas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1) var(--s4);
  min-height: 46px; padding: var(--s1) var(--s4);
  border-top: 1px solid var(--pli-fort);
}
.localisateur-etat { margin: 0; font-size: .875rem; color: var(--gris); }
.localisateur-lien {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0;
  background: none; border: 0;
  font-family: inherit; font-size: .875rem; font-weight: 600; color: var(--accent-fonce);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; cursor: pointer;
}
.localisateur-lien:hover { color: var(--encre); }

.localisateur-resultat {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: var(--s2) var(--s4);
  margin-top: var(--s3); padding: var(--s3) var(--s4);
  background: var(--accent-voile); border: 1px solid var(--accent);
}
.localisateur-resultat[hidden] { display: none; }
.localisateur-resultat.est-maj { animation: vue-monte 420ms var(--sortie) both; }
.localisateur-resultat-picto { width: 48px; height: 48px; display: grid; place-items: center; background: var(--accent); }
.localisateur-resultat-picto svg { width: 22px; height: 22px; fill: var(--sur-accent); }
.localisateur-resultat-texte p { margin: 0; }
.localisateur-resultat-titre { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-fonce); }
.localisateur-adresse { font-size: .9375rem; font-weight: 600; line-height: 1.4; }
.localisateur-coord { font-size: .8125rem; color: var(--gris); font-variant-numeric: tabular-nums; }
.localisateur-resultat-actions { display: flex; flex-direction: column; align-items: flex-end; }

/* La carte elle-même, à la charte : pas d'arrondi, arêtes d'un pixel */
.localisateur-carte.leaflet-container { font-family: inherit; background: var(--facette-2); }
.localisateur-carte .leaflet-bar { border: 1px solid var(--pli-fort); border-radius: 0; box-shadow: var(--ombre-plaque); }
.localisateur-carte .leaflet-bar a {
  width: 38px; height: 38px; line-height: 38px; border-radius: 0 !important;
  color: var(--encre); background: var(--feuille); border-bottom-color: var(--pli);
}
.localisateur-carte .leaflet-bar a:hover { background: var(--facette-1); }
.localisateur-carte .leaflet-control-attribution { font-size: 11px; background: rgba(251, 250, 247, .9); }
.repere-carte { background: none; border: 0; }
.repere-carte span {
  position: absolute; left: 0; top: 6px; width: 30px; height: 30px;
  background: var(--accent); border: 3px solid #fff;
  box-shadow: 0 8px 14px -6px rgba(22, 24, 27, .65);
  transform: rotate(45deg);
  animation: repere-pose 460ms cubic-bezier(.34, 1.56, .64, 1);
}
.repere-carte span::after { content: ""; position: absolute; inset: 7px; background: #fff; }
@keyframes repere-pose { from { opacity: 0; transform: translateY(-26px) rotate(45deg); } to { opacity: 1; transform: rotate(45deg); } }

.contact-envoyer { min-height: 54px; padding-inline: var(--s6); }
.contact-envoyer .fleche { transition: transform var(--vite); }
.contact-envoyer:hover .fleche { transform: translateX(5px); }

/* La colonne */
.contact-aside { position: sticky; top: calc(var(--barre-h) + var(--s5)); display: flex; flex-direction: column; gap: var(--s3); }
.contact-aside-bloc { padding: var(--s5); background: var(--feuille); border: 1px solid var(--pli-fort); }
.contact-aside .contact-aside-titre { font-size: 1.0625rem; margin-bottom: var(--s4); }
.contact-zone { margin: 0; }
.contact-zone div + div { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--pli); }
.contact-zone dt { font-size: .9375rem; font-weight: 700; }
.contact-zone dd { margin: 2px 0 0; font-size: .9rem; color: var(--gris); }
.contact-apres { margin: 0; padding: 0; list-style: none; counter-reset: apres; }
.contact-apres li {
  position: relative; counter-increment: apres;
  margin: 0; padding: 4px 0 var(--s4) var(--s7);
  font-size: .9375rem;
}
.contact-apres li::before {
  content: counter(apres); position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; display: grid; place-items: center;
  background: var(--encre); color: var(--feuille); font-size: .8125rem; font-weight: 800;
}
.contact-apres li::after { content: ""; position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; background: var(--pli); }
.contact-apres li:last-child { padding-bottom: 0; }
.contact-apres li:last-child::after { display: none; }
.contact-presse {
  display: flex; flex-direction: column; gap: var(--s1);
  padding: var(--s5);
  background: var(--accent); color: var(--sur-accent);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  transition: background var(--vite), transform var(--vite);
}
.contact-presse:hover { background: var(--accent-fonce); transform: translateY(-2px); }
.contact-presse-titre { font-size: 1.125rem; font-weight: 800; letter-spacing: -.02em; }
.contact-presse-texte { font-size: .9375rem; opacity: .88; }
.contact-presse-numero {
  display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3);
  font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.contact-presse-numero svg { width: 20px; height: 20px; fill: currentColor; }
.contact-presse:focus-visible { outline-offset: 3px; }

/* La FAQ, en deux colonnes */
.contact-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: var(--s7); align-items: start; }
.faq-titre { margin: 0; }

@media (max-width: 1080px) {
  .contact-tete-grille, .contact-grille { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .contact-aside { position: static; }
  .contact-faq { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
}
@media (max-width: 720px) {
  .contact-tete { padding-block: var(--s6) var(--s7); }
  .contact-form { padding: var(--s5) var(--s4); }
  .canaux--contact { grid-template-columns: minmax(0, 1fr); }
  .canaux--contact .canal { min-height: 0; }
  .sujets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sujet { min-height: 64px; flex-direction: column; align-items: flex-start; gap: var(--s2); padding: var(--s3); }
  .localisateur-carte { height: 300px; }
  .localisateur-recherche .localisateur-bouton span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .localisateur-resultat { grid-template-columns: 40px minmax(0, 1fr); }
  .localisateur-resultat-picto { width: 40px; height: 40px; }
  .localisateur-resultat-actions { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; }
  .localisateur-actions .localisateur-bouton { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sujet *, .localisateur-panneau, .localisateur-resultat, .repere-carte span, .champ-autre { animation: none !important; }
}

/* --- Pourquoi nous : six volets qui se déplient -----------------------------
   Sans JavaScript : une grille des six raisons, toutes ouvertes. Avec : sur
   grand écran, des volets côte à côte (un seul ouvert) ; sur téléphone, un
   accordéon. */
.raisons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--s3); }
.raison { position: relative; margin: 0; background: var(--facette-1); border: 1px solid var(--pli); }
.raison-titre { margin: 0; font-size: inherit; line-height: inherit; letter-spacing: normal; }
.raison-tete {
  width: 100%;
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4);
  background: transparent; color: inherit; border: 0;
  font-family: inherit; text-align: left; cursor: pointer;
}
.raison-picto {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  background: var(--encre); color: var(--feuille);
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
  transition: background 400ms, color 400ms, transform var(--lent);
}
.raison-picto svg { width: 22px; height: 22px; fill: currentColor; }
.raison-tete:hover .raison-picto { transform: rotate(-8deg); }
.raison-nom { font-size: 1.0625rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.raison-corps { position: relative; padding: 0 var(--s4) var(--s5); }
.raison-corps p { margin: 0; color: var(--gris); font-size: .9375rem; }
.raison-grand, .raison-fond { display: none; }
.raison-corps .raison-preuve {
  display: inline-block; margin-top: var(--s3); padding: 3px var(--s3);
  background: var(--accent-voile); border: 1px solid var(--accent);
  color: var(--encre); font-size: .8125rem; font-weight: 600;
}
.raison-tete:focus-visible { outline-offset: -4px; }

@media (min-width: 901px) {
  .js .raisons {
    display: flex; gap: 0; height: 440px;
    background: var(--facette-1); border: 1px solid var(--pli-fort);
  }
  .js .raison {
    flex: 0 0 96px; min-width: 0; overflow: hidden;
    display: grid; grid-template-columns: 96px minmax(0, 1fr);
    border: 0; border-left: 1px solid var(--pli);
    transition: flex-grow 680ms cubic-bezier(.7, 0, .2, 1), background 420ms, color 420ms;
  }
  .js .raison:first-child { border-left: 0; }
  .js .raison:nth-child(2n) { background: var(--facette-2); }
  .js .raison.est-ouverte { flex-grow: 1; background: var(--encre); color: var(--feuille); }
  .js .raison-titre { grid-column: 1; grid-row: 1; height: 100%; }
  .js .raison-tete { height: 100%; flex-direction: column; justify-content: space-between; padding: var(--s5) 0; }
  .js .raison-nom {
    writing-mode: vertical-rl; transform: rotate(180deg);
    white-space: nowrap; font-size: 1.0625rem;
    transition: opacity 300ms;
  }
  .js .raison.est-ouverte .raison-nom { opacity: 0; }
  .js .raison.est-ouverte .raison-picto { background: var(--accent); color: var(--sur-accent); }
  .js .raison-corps {
    grid-column: 2; grid-row: 1; align-self: end;
    width: 560px; padding: var(--s7) var(--s7) var(--s7) var(--s3);
    opacity: 0; transform: translateX(-18px); pointer-events: none;
    transition: opacity 280ms, transform 280ms;
  }
  .js .raison.est-ouverte .raison-corps { opacity: 1; transform: none; pointer-events: auto; transition-delay: 300ms; }
  .js .raison-grand {
    display: block; max-width: 16ch; margin-bottom: var(--s4);
    font-size: clamp(1.8rem, 2.8vw, 2.5rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05;
  }
  .js .raison .raison-corps .raison-grand { color: var(--feuille); }
  .js .raison.est-ouverte .raison-corps p { color: #CFCBC3; }
  .js .raison.est-ouverte .raison-corps .raison-grand { color: var(--feuille); }
  .js .raison.est-ouverte .raison-corps .raison-preuve { background: transparent; border-color: var(--accent); color: var(--accent-clair); }
  /* le grand pictogramme filigrane se place dans le volet, pas dans le texte */
  .js .raison .raison-corps { position: static; }
  .js .raison-fond {
    display: block; position: absolute; top: var(--s6); right: var(--s6);
    width: 150px; height: 150px; fill: rgba(251, 250, 247, .07);
  }
}
@media (max-width: 900px) {
  .js .raisons { grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--pli-fort); }
  .js .raison { border: 0; border-top: 1px solid var(--pli); }
  .js .raison:first-child { border-top: 0; }
  .js .raison-corps { display: none; }
  .js .raison.est-ouverte { background: var(--feuille); }
  .js .raison.est-ouverte .raison-corps { display: block; animation: vue-monte 450ms var(--sortie) both; }
  .js .raison.est-ouverte .raison-picto { background: var(--accent); color: var(--sur-accent); }
}

/* --- Joignez-nous directement --------------------------------------------- */
.joindre {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  box-shadow: var(--ombre-facette);
}
.joindre-panneau { position: relative; overflow: hidden; padding: var(--s7); background: var(--encre); color: var(--feuille); }
.joindre-panneau::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .3;
  background: linear-gradient(101deg, transparent 0 62%, var(--accent) 62% 84%, var(--accent-fonce) 84% 100%);
}
.joindre-panneau > * { position: relative; }
.joindre-panneau h2 { color: var(--feuille); margin-bottom: var(--s3); }
.joindre-panneau > p { color: #CFCBC3; }
.joindre-panneau .statut { margin-bottom: var(--s5); }
.joindre-lignes { margin: 0 0 var(--s5); padding: 0; list-style: none; border-top: 1px solid rgba(251, 250, 247, .16); }
.joindre-lignes li { margin: 0; border-bottom: 1px solid rgba(251, 250, 247, .16); }
.joindre-ligne {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 46px minmax(0, 1fr) 22px; align-items: center; gap: var(--s4);
  min-height: 72px; padding: var(--s3) var(--s2);
  color: var(--feuille);
  transition: color 320ms;
}
/* au survol, l'accent balaie la ligne depuis la gauche */
.joindre-ligne::before {
  content: ""; position: absolute; inset: 0;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 480ms cubic-bezier(.7, 0, .2, 1);
}
.joindre-ligne > * { position: relative; }
.joindre-ligne:hover, .joindre-ligne:focus-visible { color: var(--sur-accent); }
.joindre-ligne:hover::before, .joindre-ligne:focus-visible::before { transform: none; }
.joindre-picto {
  width: 46px; height: 46px; display: grid; place-items: center;
  color: var(--accent-clair); border: 1px solid rgba(251, 250, 247, .24);
  transition: color 320ms, border-color 320ms, transform var(--lent);
}
.joindre-picto svg { width: 20px; height: 20px; fill: currentColor; }
.joindre-ligne:hover .joindre-picto, .joindre-ligne:focus-visible .joindre-picto { color: currentColor; border-color: currentColor; transform: rotate(-8deg); }
.joindre-nom { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
.joindre-valeur { display: block; font-size: 1.125rem; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.joindre-ligne .fleche { color: rgba(251, 250, 247, .5); transition: transform var(--vite), color 320ms; }
.joindre-ligne:hover .fleche, .joindre-ligne:focus-visible .fleche { color: currentColor; transform: translateX(5px); }
.joindre-panneau :focus-visible { outline-color: var(--accent-clair); outline-offset: -3px; }
.joindre-zone { display: flex; align-items: flex-start; gap: var(--s2); margin: 0; font-size: .875rem; color: #A9A59D; }
.joindre-zone svg { width: 16px; height: 16px; flex: none; margin-top: 3px; fill: var(--accent-clair); }

.joindre-form { position: relative; padding: var(--s7); background: var(--feuille); border: 1px solid var(--pli-fort); border-left: 0; }
.joindre-form::before {
  content: ""; position: absolute; top: 0; right: 0; width: 46px; height: 46px; pointer-events: none;
  background: linear-gradient(225deg, var(--facette-2) 0 50%, transparent 50%);
}
.joindre-form .joindre-form-titre { font-size: 1.5rem; margin-bottom: var(--s1); }
.joindre-form-sous { margin-bottom: var(--s5); color: var(--gris); font-size: .9375rem; }
.joindre-form .form-grille { gap: var(--s4); }
.joindre-raccourcis {
  display: flex; flex-wrap: wrap; gap: 0 var(--s5);
  margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--pli);
}
.joindre-raccourci { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; font-size: .875rem; font-weight: 600; color: var(--accent-fonce); }
.joindre-raccourci .fleche { transition: transform var(--vite); }
.joindre-raccourci:hover { color: var(--encre); }
.joindre-raccourci:hover .fleche { transform: translateX(5px); }
@media (max-width: 1080px) {
  .joindre { grid-template-columns: minmax(0, 1fr); }
  .joindre-form { border-left: 1px solid var(--pli-fort); border-top: 0; }
}
@media (max-width: 720px) {
  .joindre-panneau, .joindre-form { padding: var(--s5) var(--s4); }
}

/* --- Vitrine v4 : commandes hors de la barre -------------------------------
   La barre ne porte plus que les six onglets. Le logo et la pause tiennent
   dans le coin haut-gauche de la vue ; les flèches glissent sur les bords au
   survol ou au focus (masquées sur écran tactile : on y fait glisser la vue). */
.js .vitrine-barre { grid-template-columns: minmax(0, 1fr); }
.vitrine-onglets { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.vitrine-coin, .vitrine-fleche { display: none; }
.js .vitrine-coin {
  position: absolute; top: var(--s3); left: var(--s3); z-index: 6;
  display: flex; gap: 3px;
}
.vitrine-coin .vitrine-commande { width: 42px; height: 42px; min-height: 0; border: 0; }
/* le texte de la vue laisse la place au coin des commandes */
@media (min-width: 721px) { .js .vue { padding-top: calc(var(--s7) + var(--s6)); } }
.vitrine-coin .vitrine-logo { background: var(--encre-2); }
.vitrine-coin .vitrine-commande .vitrine-logo-marque { width: 26px; height: 26px; }
.vitrine-coin .vitrine-logo-ping { inset: 7px; }
.vitrine-coin .vitrine-commande .vitrine-cadran { inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); }
.js .vitrine-fleche {
  display: grid; position: absolute; top: calc(50% - 30px); z-index: 6;
  width: 44px; height: 76px; min-height: 0; border: 0;
  opacity: 0;
  transition: opacity var(--vite), transform var(--lent), color var(--vite);
}
.js .vitrine-fleche--prec { left: 0; transform: translate(-10px, -50%); }
.js .vitrine-fleche--suiv { right: 0; transform: translate(10px, -50%); }
.js .vitrine:hover .vitrine-fleche,
.js .vitrine .vitrine-fleche:focus-visible { opacity: 1; transform: translate(0, -50%); }
/* sur la vue colorée, le balayage du survol est en feuille, l'icône en encre */
.vitrine-coin .vitrine-commande::before, .vitrine-fleche::before { background: var(--feuille); }
.vitrine-coin .vitrine-commande:hover, .vitrine-fleche:hover { color: var(--encre); }
@media (hover: none) { .js .vitrine-fleche { display: none; } }
@media (max-width: 720px) {
  .js .vitrine-fleche { display: none; }
  .js .vitrine-coin { top: var(--s2); left: var(--s2); }
}

/* La sixième vue : le site qui fait arriver des demandes */
.i-curseur { transform-box: view-box; }
.i-notif { transform-box: fill-box; transform-origin: center bottom; }
@media (prefers-reduced-motion: no-preference) {
  .vue.est-actif .i-curseur, .svc-tete .i-curseur { animation: dessin-curseur 3.8s ease-in-out infinite; }
  .vue.est-actif .i-bouton, .svc-tete .i-bouton { animation: dessin-clic 3.8s ease-in-out infinite; }
  .vue.est-actif .i-notif, .svc-tete .i-notif { animation: dessin-notif 3.8s var(--sortie) infinite; }
}
@keyframes dessin-curseur { 0%, 100% { transform: translate(150px, 172px); } 40%, 56% { transform: translate(70px, 120px); } }
@keyframes dessin-clic { 0%, 45% { opacity: 1; } 48% { opacity: .3; } 53%, 100% { opacity: 1; } }
@keyframes dessin-notif { 0%, 52% { opacity: 0; transform: translateY(18px); } 62%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }

/* Carte du localisateur ouverte depuis un fichier : un avis à la place des tuiles */
.localisateur-avis {
  position: absolute; top: 50%; left: 50%; z-index: 450;
  width: min(86%, 440px); margin: 0; padding: var(--s4) var(--s5);
  transform: translate(-50%, -50%);
  background: var(--feuille); border: 1px solid var(--pli-fort); box-shadow: var(--ombre-facette);
  font-size: .9375rem; line-height: 1.5; text-align: center; color: var(--encre);
}

/* Le pictogramme du téléphone reste lisible sur fond encre, quel que soit l'accent */
.canal--tel { --canal-icone: var(--accent-clair); }

/* --- Page À propos ----------------------------------------------------------
   En-tête encre et orbite (un interlocuteur, onze métiers) ; fiche
   d'identité ; engagements à balayage ; technologies en baies de rack ;
   carte des zones d'intervention. */
.apropos-tete {
  position: relative; overflow: hidden;
  padding-block: var(--s7);
  background: var(--encre); color: var(--feuille);
}
.apropos-tete::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .4;
  background: linear-gradient(101deg, transparent 0 52%, var(--accent) 52% 76%, var(--accent-fonce) 76% 100%);
}
.apropos-tete > .bloc { position: relative; }
.apropos-tete-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s6); align-items: center; }
.apropos-tete .itineraire li, .apropos-tete .itineraire a { color: #B8B4AC; }
.apropos-tete .itineraire a:hover { color: var(--feuille); }
.apropos-tete .itineraire li + li::before { color: rgba(251, 250, 247, .3); }
.apropos-tete h1 { color: var(--feuille); font-size: clamp(2.1rem, 4.2vw, 3.4rem); margin-bottom: var(--s4); }
.apropos-tete-sous { color: #CFCBC3; font-size: 1.125rem; max-width: 44ch; }
.apropos-tete-aide { display: flex; align-items: center; gap: var(--s2); color: var(--accent-clair); font-size: .875rem; font-weight: 600; }
.apropos-tete-aide::before { content: ""; width: 10px; height: 10px; background: var(--accent-clair); transform: rotate(45deg); flex: none; }
.apropos-tete :focus-visible { outline-color: var(--accent-clair); }

/* L'orbite : le logo au centre, les onze métiers nommés autour. Positions
   en % d'un repère 1000 × 860 (le même que le SVG des liaisons). Au survol
   ou au focus d'un métier (initOrbite), sa liaison s'éclaire, les autres
   s'effacent et la légende du centre le résume. Sans JS, tout reste lisible. */
.orbite { position: relative; width: 100%; aspect-ratio: 1000 / 860; }
.orbite-liens { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbite-lien { fill: none; stroke: var(--t-clair); stroke-opacity: .32; stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: stroke-opacity var(--vite), stroke-width var(--vite); }
.orbite-paquet { fill: none; stroke: var(--t-clair); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 0 100; opacity: 0; }
.orbite.a-actif .orbite-lien { stroke-opacity: .1; }
.orbite .orbite-lien.est-actif { stroke-opacity: 1; stroke-width: 2.5; }
.orbite-centre { position: absolute; left: 50%; top: 50%; width: 31%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; pointer-events: none; }
.orbite-centre::before { content: ""; position: absolute; inset: -18% -22% -6%; z-index: -1; background: radial-gradient(closest-side, rgba(22, 24, 27, .92), rgba(22, 24, 27, .7) 62%, transparent); }
.orbite-logo { display: block; width: 100%; height: auto; color: var(--feuille); }
.orbite-legende { margin: 0; text-align: center; line-height: 1.25; min-height: 2.6em; }
.orbite-legende strong { display: block; font-size: .875rem; color: var(--feuille); }
.orbite-legende span { display: block; font-size: .75rem; color: #B8B4AC; }
.orbite-noeuds { margin: 0; padding: 0; list-style: none; }
.orbite-noeuds li { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); margin: 0; }
.orbite-noeud {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 4px;
  background: rgba(22, 24, 27, .78); border: 1px solid rgba(251, 250, 247, .16);
  color: var(--feuille); font-size: .8125rem; font-weight: 700; white-space: nowrap; text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  transition: background var(--vite), border-color var(--vite), transform var(--lent);
}
.orbite-picto { width: 28px; height: 28px; flex: none; display: grid; place-items: center; background: var(--t); transition: background var(--vite); }
.orbite-picto svg { width: 16px; height: 16px; fill: #fff; }
.orbite-noeud:hover, .orbite-noeud:focus-visible { background: var(--t); border-color: var(--t-clair); color: #fff; transform: scale(1.06); outline: none; }
.orbite-noeud:hover .orbite-picto, .orbite-noeud:focus-visible .orbite-picto { background: rgba(255, 255, 255, .16); }
@media (prefers-reduced-motion: no-preference) {
  .orbite-paquet { animation: orbite-paquet 5.5s cubic-bezier(.45, 0, .35, 1) infinite; animation-delay: calc(var(--i) * 500ms); }
  .orbite-noeuds li { animation: orbite-entree 700ms var(--sortie) both; animation-delay: calc(150ms + var(--i) * 55ms); }
  .orbite-lien { stroke-dasharray: 1200; animation: orbite-trace 900ms var(--sortie) both; animation-delay: calc(var(--i) * 55ms); }
}
@keyframes orbite-paquet { 0% { stroke-dashoffset: 0; opacity: 0; } 8% { opacity: 1; } 34% { stroke-dashoffset: -100; opacity: 1; } 36%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes orbite-entree { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes orbite-trace { from { stroke-dashoffset: 1200; } to { stroke-dashoffset: 0; } }
/* deux colonnes encore, mais l'orbite rétrécit : étiquettes un peu plus petites */
@media (min-width: 1081px) and (max-width: 1180px) {
  .orbite-noeud { font-size: .75rem; padding-right: 10px; }
  .orbite-picto { width: 24px; height: 24px; }
}

/* Qui sommes-nous et la fiche d'identité */
.apropos-qui { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s7); align-items: start; }
.apropos-qui-texte h2 { max-width: 20ch; }
.apropos-qui-texte p { font-size: 1.0625rem; color: var(--gris); }
.fiche-identite {
  position: relative;
  padding: var(--s6);
  background: var(--feuille); border: 1px solid var(--pli-fort);
  box-shadow: var(--ombre-facette);
}
.fiche-identite::before {
  content: ""; position: absolute; top: 0; right: 0; width: 46px; height: 46px;
  background: linear-gradient(225deg, var(--accent) 0 50%, transparent 50%);
}
.fiche-identite .fiche-identite-titre {
  display: inline-block; margin-bottom: var(--s4); padding: var(--s1) var(--s3);
  background: var(--encre); color: var(--feuille);
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.fiche-identite dl { margin: 0 0 var(--s4); }
.fiche-identite dl div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--pli); }
.fiche-identite dt { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); padding-top: 3px; }
.fiche-identite dd { margin: 0; font-weight: 600; font-size: .9375rem; }
.fiche-identite-lien { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; font-weight: 700; color: var(--accent-fonce); }
.fiche-identite-lien .fleche { transition: transform var(--vite); }
.fiche-identite-lien:hover .fleche { transform: translateX(5px); }

/* Les engagements : une liste, chaque ligne balayée par l'accent au survol */
.apropos-engagements { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); gap: var(--s7); align-items: start; }
.engagements { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--pli-fort); }
.engagement {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "picto titre" "picto texte";
  column-gap: var(--s5); row-gap: var(--s1);
  margin: 0; padding: var(--s5) var(--s4);
  border-bottom: 1px solid var(--pli-fort);
}
.engagement::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--accent-voile);
  transform: scaleX(0); transform-origin: left;
  transition: transform 520ms cubic-bezier(.7, 0, .2, 1);
}
.engagements { position: relative; z-index: 0; }
.engagement:hover::before { transform: none; }
.engagement-picto {
  grid-area: picto; width: 56px; height: 56px; display: grid; place-items: center;
  background: var(--encre); color: var(--feuille);
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
  transition: background var(--vite), transform var(--lent);
}
.engagement-picto svg { width: 24px; height: 24px; fill: currentColor; }
.engagement:hover .engagement-picto { background: var(--accent); color: var(--sur-accent); transform: rotate(-6deg); }
.engagement h3 { grid-area: titre; margin: 0; font-size: 1.25rem; }
.engagement p { grid-area: texte; margin: 0; color: var(--gris); font-size: .9375rem; }

/* Les baies : domaines et technologies en unités de rack */
.baies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.baie {
  background: var(--encre-2); border: 1px solid rgba(251, 250, 247, .16);
  transition: border-color var(--vite), transform var(--lent);
}
.baie:hover { border-color: var(--accent-clair); transform: translateY(-3px); }
.section--verte .baie .baie-tete {
  display: flex; align-items: center; gap: var(--s3);
  margin: 0; padding: var(--s3) var(--s4);
  background: rgba(251, 250, 247, .06); border-bottom: 1px solid rgba(251, 250, 247, .16);
  color: var(--feuille); font-size: .9375rem; letter-spacing: -.01em;
}
.baie-tete svg { width: 20px; height: 20px; flex: none; fill: var(--accent-clair); }
.baie-unites { margin: 0; padding: var(--s2); list-style: none; }
.baie-unites li {
  display: flex; align-items: center; gap: var(--s3);
  margin: 0 0 3px; padding: var(--s2) var(--s3);
  background: rgba(22, 24, 27, .45); border: 1px solid rgba(251, 250, 247, .08);
  color: #CFCBC3; font-size: .875rem; font-weight: 600;
  transition: background var(--vite), color var(--vite);
}
.baie-unites li:last-child { margin-bottom: 0; }
.baie-voyant { width: 8px; height: 8px; flex: none; background: #4A4D52; transition: background var(--vite), box-shadow var(--vite); }
.baie-unites li:hover { background: rgba(251, 250, 247, .08); color: var(--feuille); }
.baie-unites li:hover .baie-voyant, .baie:hover .baie-voyant { background: var(--accent-clair); }
@media (prefers-reduced-motion: no-preference) {
  .baie-voyant { animation: voyant 3.6s steps(1) infinite; animation-delay: calc(var(--i) * 410ms); }
}
@keyframes voyant { 0%, 88% { background: #4A4D52; } 92% { background: var(--accent-clair); } 96%, 100% { background: #4A4D52; } }

/* Les zones et leur carte */
.apropos-zones { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); align-items: center; }
.zones-liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--pli-fort); }
.zones-liste li { margin: 0; border-bottom: 1px solid var(--pli-fort); }
.zone-choix {
  width: 100%;
  display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s3);
  background: transparent; color: var(--encre); border: 0;
  font-family: inherit; text-align: left; cursor: pointer;
  transition: background var(--vite);
}
.zone-choix:hover { background: var(--facette-1); }
.zone-choix[aria-pressed="true"] { background: var(--accent-voile); }
.zone-picto { width: 48px; height: 48px; display: grid; place-items: center; background: var(--facette-2); color: var(--accent-fonce); transition: background var(--vite), color var(--vite); }
.zone-picto svg { width: 22px; height: 22px; fill: currentColor; }
.zone-choix[aria-pressed="true"] .zone-picto { background: var(--accent); color: var(--sur-accent); }
.zone-titre { display: block; font-size: 1.125rem; font-weight: 800; letter-spacing: -.02em; }
.zone-detail { display: block; margin-top: 2px; color: var(--gris); font-size: .9375rem; }
.zone-choix:focus-visible { outline-offset: -3px; }
.zones-cadre { position: relative; overflow: hidden; background: var(--facette-1); border: 1px solid var(--pli); padding: var(--s5); }
.zones-carte { display: block; width: 100%; height: auto; max-height: 520px; overflow: visible; }
.zone-pays { fill: var(--feuille); stroke: none; transition: fill 500ms; }
.zone-cote { fill: none; stroke-width: 10; stroke-linejoin: round; }
.zone-cote--ouest { stroke: #F36C01; }
.zone-cote--est { stroke: #0B9638; }
.zone-abidjan { fill: var(--accent); fill-opacity: .16; stroke: var(--accent); stroke-width: 4; stroke-dasharray: 14 10; transition: fill-opacity 500ms, stroke-opacity 500ms; }
.zone-repere rect { fill: var(--accent); stroke: #fff; stroke-width: 5; }
.zone-repere .zone-repere-coeur { fill: #fff; stroke: none; }
.zone-nom { font-family: inherit; font-size: 40px; font-weight: 800; fill: var(--encre); }
.zone-onde { fill: none; stroke: var(--accent); stroke-width: 4; opacity: 0; transform-box: fill-box; transform-origin: center; }
/* la zone choisie prend le devant */
.zones-carte[data-zone="pays"] .zone-pays { fill: var(--accent-voile); }
.zones-carte[data-zone="pays"] .zone-abidjan { fill-opacity: .05; stroke-opacity: .3; }
.zones-carte[data-zone="distance"] .zone-abidjan { fill-opacity: .05; stroke-opacity: .3; }
@media (prefers-reduced-motion: no-preference) {
  .zones-carte[data-zone="distance"] .zone-onde { animation: zone-onde 3s ease-out infinite; }
  .zones-carte[data-zone="distance"] .zone-onde--2 { animation-delay: 1s; }
  .zones-carte[data-zone="distance"] .zone-onde--3 { animation-delay: 2s; }
  .zones-carte[data-zone="abidjan"] .zone-abidjan { animation: zone-pouls 2.4s ease-in-out infinite; }
}
.zones-carte[data-zone="distance"] .zone-onde { opacity: .5; }
@keyframes zone-onde { from { opacity: .7; transform: scale(.4); } to { opacity: 0; transform: scale(6); } }
@keyframes zone-pouls { 50% { fill-opacity: .3; } }

@media (max-width: 1080px) {
  .apropos-tete-grille, .apropos-qui, .apropos-engagements, .apropos-zones { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .baies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .orbite { max-width: 600px; }
}
@media (max-width: 720px) {
  .apropos-tete { padding-block: var(--s6); }
  .baies { grid-template-columns: minmax(0, 1fr); }
  .fiche-identite { padding: var(--s5) var(--s4); }
  .fiche-identite dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .engagement { grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--s4); padding-inline: var(--s2); }
  .engagement-picto { width: 48px; height: 48px; }
  /* téléphone : le logo en haut, les métiers en grille, sans liaisons */
  .orbite { aspect-ratio: auto; display: grid; gap: var(--s5); }
  .orbite-liens { display: none; }
  .orbite-centre { position: static; transform: none; width: 46%; justify-self: center; }
  .orbite-noeuds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  .orbite-noeuds li { position: static; transform: none; animation: none; }
  .orbite-noeuds li:last-child { grid-column: 1 / -1; }
  .orbite-noeud { white-space: normal; }
}

/* --- À propos : la méthode en dépliant ---------------------------------------
   Les quatre étapes sont les volets d'un même dépliant. À l'arrivée dans
   l'écran, chaque volet pivote depuis le pli du précédent (rotateY autour de
   son bord gauche ; rotateX depuis le haut sur téléphone), s'éclaire à mesure
   qu'il s'ouvre, puis son numéro se tamponne. Chaque volet porte .surgit :
   sur téléphone, il s'ouvre quand IL arrive dans l'écran. L'accueil garde son
   fil tracé (.parcours sans modificateur). Sans JavaScript : tout est ouvert. */
.parcours--depliant { gap: 0; perspective: 1700px; }
.parcours--depliant .parcours-etape::before,
.parcours--depliant .parcours-etape::after { display: none; }
.parcours--depliant .parcours-etape {
  padding: var(--s6) var(--s5) var(--s5);
  background: linear-gradient(101deg, var(--feuille) 0 62%, var(--facette-1) 62% 100%);
  border: 1px solid var(--pli-fort);
  transform-origin: left center;
  transition: transform var(--lent), box-shadow var(--lent);
}
/* les volets alternent leur facette, comme un accordéon qui accroche la lumière */
.parcours--depliant .parcours-etape:nth-child(even) {
  background: linear-gradient(259deg, var(--feuille) 0 62%, var(--facette-1) 62% 100%);
}
.parcours--depliant .parcours-etape + .parcours-etape { margin-left: -1px; }
.parcours--depliant .parcours-etape:hover { z-index: 2; box-shadow: var(--ombre-levee); }
.js .parcours--depliant .parcours-etape:hover { transform: translateY(-6px); }
.parcours--depliant .parcours-etape:hover .parcours-num { transform: rotate(-6deg); }
.parcours--depliant .parcours-num { background: var(--accent); color: var(--sur-accent); transition: transform var(--lent); }
.parcours--depliant .parcours-icone { transition-delay: calc(var(--i) * 300ms + 820ms); }

/* état d'attente, avec JavaScript seulement */
.js .parcours--depliant .parcours-etape.surgit:not(.est-visible) { opacity: 0; transform: rotateY(80deg); }
.js .parcours--depliant .parcours-etape.surgit:not(.est-visible) .parcours-icone { opacity: 0; transform: translateX(-10px) scale(.8); }
.js .parcours--depliant .parcours-etape.surgit.est-visible {
  transition: transform var(--lent), box-shadow var(--lent);
  animation: volet-deplie 1000ms cubic-bezier(.22, .8, .24, 1) backwards;
  animation-delay: calc(var(--i) * 300ms);
}
.js .parcours--depliant .parcours-etape.surgit.est-visible .parcours-num {
  animation: tampon 480ms cubic-bezier(.2, 1.3, .4, 1) backwards;
  animation-delay: calc(var(--i) * 300ms + 640ms);
}
@keyframes volet-deplie {
  from { opacity: 0; transform: rotateY(80deg); filter: brightness(.7); }
  22%  { opacity: 1; }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes volet-deplie-v {
  from { opacity: 0; transform: rotateX(-80deg); filter: brightness(.7); }
  22%  { opacity: 1; }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes tampon { from { opacity: 0; transform: scale(1.7) rotate(-14deg); } 55% { opacity: 1; } }
@media (max-width: 900px) {
  .parcours--depliant .parcours-etape { padding: var(--s5); transform-origin: center top; }
  .parcours--depliant .parcours-etape:nth-child(even) { background: linear-gradient(101deg, var(--facette-1) 0 38%, var(--feuille) 38% 100%); }
  .parcours--depliant .parcours-etape + .parcours-etape { margin-left: 0; margin-top: -1px; }
  .parcours--depliant .parcours-repere { position: static; flex-direction: row; align-items: center; margin-bottom: var(--s4); }
  .parcours--depliant .parcours-icone { display: grid; transition-delay: 560ms; }
  .js .parcours--depliant .parcours-etape.surgit:not(.est-visible) { transform: rotateX(-80deg); }
  .js .parcours--depliant .parcours-etape.surgit.est-visible { animation-name: volet-deplie-v; animation-delay: 0ms; }
  .js .parcours--depliant .parcours-etape.surgit.est-visible .parcours-num { animation-delay: 420ms; }
}

/* --- Page Services -------------------------------------------------------------
   En-tête encre : le titre, et « Partez de votre situation » — onze
   situations qui mènent chacune (ancre, :target, sans JavaScript) à la
   prestation précise qui y répond. Puis le catalogue : un sommaire collant
   qui suit la lecture, et onze fiches à intercalaire dans la teinte du
   service (coin replié, facette franche). */
.services-tete {
  position: relative; overflow: hidden;
  padding-block: var(--s7) var(--s8);
  background: var(--encre); color: var(--feuille);
}
.services-tete::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .4;
  background: linear-gradient(101deg, transparent 0 38%, var(--accent) 38% 60%, var(--accent-fonce) 60% 100%);
}
.services-tete > .bloc { position: relative; }
.services-tete-grille { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: var(--s7); align-items: center; }
.services-tete .itineraire li, .services-tete .itineraire a { color: #B8B4AC; }
.services-tete .itineraire a:hover { color: var(--feuille); }
.services-tete .itineraire li + li::before { color: rgba(251, 250, 247, .3); }
.services-tete h1 { color: var(--feuille); font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin-bottom: var(--s4); }
.services-tete-sous { color: #CFCBC3; font-size: 1.125rem; max-width: 40ch; margin-bottom: var(--s5); }
.services-tete :focus-visible { outline-color: var(--accent-clair); }
.services-faits { display: grid; gap: var(--s3); margin: 0; padding: var(--s4) 0 0; list-style: none; border-top: 1px solid rgba(251, 250, 247, .16); }
.services-faits li { display: flex; align-items: center; gap: var(--s3); margin: 0; font-size: .9375rem; font-weight: 600; color: var(--feuille); }
.services-faits svg { width: 18px; height: 18px; flex: none; fill: var(--accent-clair); }

/* Les situations : une feuille claire posée sur l'encre, coin replié */
.situations {
  position: relative;
  padding: var(--s6) var(--s5) var(--s4);
  background: var(--feuille); color: var(--encre);
  clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%);
}
.situations::before {
  content: ""; position: absolute; top: 0; right: 0; width: 36px; height: 36px;
  background: linear-gradient(225deg, transparent 50%, var(--facette-2) 50%);
}
.situations h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin-bottom: var(--s2); }
.situations-aide { color: var(--gris); font-size: .9375rem; margin-bottom: var(--s4); max-width: 54ch; }
.situations-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s4); margin: 0; padding: 0; list-style: none; }
.situations-liste li { margin: 0; border-top: 1px solid var(--pli); }
.situation {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: center; gap: var(--s3);
  min-height: 58px; padding: var(--s2);
  transition: background var(--vite);
}
.situation-picto {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--t); color: #fff;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
  transition: transform var(--lent);
}
.situation-picto svg { width: 18px; height: 18px; fill: currentColor; }
.situation-texte { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.situation-service { display: block; margin-top: 3px; font-size: .75rem; font-weight: 700; color: var(--t-fonce); }
.situation-fleche { width: 18px; height: 18px; fill: var(--t-fonce); opacity: .45; transition: opacity var(--vite), transform var(--vite); }
.situation:hover, .situation:focus-visible { background: var(--facette-1); }
.situation:hover .situation-picto, .situation:focus-visible .situation-picto { transform: rotate(-8deg); }
.situation:hover .situation-fleche, .situation:focus-visible .situation-fleche { opacity: 1; transform: translateX(4px); }
.services-tete .situation:focus-visible { outline: 2px solid var(--accent-fonce); outline-offset: -2px; }

/* Le catalogue */
.catalogue { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: var(--s7); align-items: start; }
.catalogue-index {
  position: sticky; top: calc(var(--barre-h) + var(--s5));
  max-height: calc(100vh - var(--barre-h) - var(--s6)); overflow-y: auto;
  scrollbar-width: thin;
}
.catalogue-index-titre { margin: 0 0 var(--s3); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.catalogue-index ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--pli); }
.catalogue-index li { margin: 0; border-bottom: 1px solid var(--pli); }
.catalogue-index a {
  position: relative; z-index: 0;
  display: flex; align-items: center; gap: var(--s3);
  min-height: 44px; padding: var(--s1) var(--s2);
  font-size: .9375rem; font-weight: 600; color: var(--encre);
  transition: color 260ms;
}
/* l'aplat de teinte balaie la ligne du service en cours de lecture */
.catalogue-index a::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--t); transform: scaleX(0); transform-origin: left;
  transition: transform 420ms var(--sortie);
}
.catalogue-index-picto { width: 30px; height: 30px; flex: none; display: grid; place-items: center; background: var(--t); color: #fff; transition: background 260ms; }
.catalogue-index-picto svg { width: 16px; height: 16px; fill: currentColor; }
.catalogue-index a:hover { color: var(--t-fonce); }
.catalogue-index a[aria-current] { color: #fff; }
.catalogue-index a[aria-current]::before { transform: none; }
.catalogue-index a[aria-current] .catalogue-index-picto { background: rgba(255, 255, 255, .16); }
.catalogue-index a:focus-visible { outline-offset: -2px; }
.catalogue-index-aide { margin-top: var(--s5); padding: var(--s4); background: var(--facette-1); border: 1px solid var(--pli); }
.catalogue-index-aide p { margin: 0 0 var(--s1); font-size: .875rem; color: var(--gris); }
.catalogue-index-tel {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px;
  font-size: 1.0625rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--encre); transition: color var(--vite);
}
.catalogue-index-tel svg { width: 18px; height: 18px; flex: none; fill: var(--accent-fonce); }
.catalogue-index-tel:hover { color: var(--accent-fonce); }

.catalogue-fiches { display: grid; gap: var(--s6); }
.fiche-service { background: var(--feuille); border: 1px solid var(--pli-fort); box-shadow: var(--ombre-facette); }
.fiche-service-tete {
  position: relative;
  display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: var(--s5); align-items: start;
  padding: var(--s6) var(--s6) var(--s5);
  background: var(--t); color: #fff;
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
}
.fiche-service-tete::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(101deg, transparent 0 66%, var(--t-fonce) 66% 100%);
}
.fiche-service-tete::after {
  content: ""; position: absolute; top: 0; right: 0; width: 30px; height: 30px;
  background: linear-gradient(225deg, transparent 50%, var(--t-clair) 50%);
}
.fiche-service-tete > * { position: relative; }
.fiche-service-picto { width: 68px; height: 68px; display: grid; place-items: center; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .32); }
.fiche-service-picto svg { width: 34px; height: 34px; fill: #fff; }
.fiche-service-tete h2 { color: #fff; font-size: clamp(1.4rem, 2.3vw, 1.85rem); margin-bottom: var(--s2); max-width: 28ch; }
.fiche-service-accroche { margin: 0 0 var(--s4); font-size: 1.0625rem; color: rgba(255, 255, 255, .88); max-width: 52ch; }
.fiche-service-modes { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.fiche-service-modes li { margin: 0; padding: 3px var(--s3); border: 1px solid rgba(255, 255, 255, .42); font-size: .8125rem; font-weight: 600; color: #fff; }
.fiche-service-corps { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s6); padding: var(--s6); }
.fiche-service h3 { margin: 0 0 var(--s3); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t-fonce); }
.fiche-service .prestations { margin: 0; }
.fiche-service .prestations li { isolation: isolate; scroll-margin-top: 32vh; }
.fiche-service .prestations li::before { background: var(--t); transition: transform var(--lent); }
.fiche-service-cote { align-self: start; padding: var(--s5); background: var(--facette-1); border: 1px solid var(--pli); }
.fiche-service-cote p { margin: 0 0 var(--s5); font-size: .9375rem; }
.fiche-service-liens { margin: var(--s3) 0 0; padding: 0; list-style: none; }
.fiche-service-liens li { margin: 0; }
.fiche-service .lien-fleche { color: var(--t-fonce); }

/* La situation choisie : la fiche se déplie, la prestation qui y répond se
   surligne dans la teinte du service et reçoit sa marque. */
.prestation-repere { display: none; }
.fiche-service .prestations li:target { font-weight: 700; }
.fiche-service .prestations li:target::before { background: var(--t-fonce); transform: rotate(45deg); }
.fiche-service .prestations li:target::after {
  content: ""; position: absolute; inset: 0 calc(-1 * var(--s3)); z-index: -1;
  background: var(--t-clair); opacity: .42; transform-origin: left;
  animation: prestation-surligne 900ms var(--sortie) 380ms backwards;
}
.fiche-service .prestations li:target .prestation-repere {
  display: inline-block; margin-left: var(--s2); padding: 1px var(--s2);
  background: var(--t); color: #fff;
  font-size: .75rem; font-weight: 700; vertical-align: 1px; white-space: nowrap;
  animation: repere-entre 520ms var(--sortie) 1000ms backwards;
}
.fiche-service:target .fiche-service-tete,
.fiche-service:has(li:target) .fiche-service-tete { animation: fiche-deplie 760ms var(--sortie) 160ms backwards; }
.fiche-service.sans-animation .fiche-service-tete,
.fiche-service.sans-animation .prestations li::after,
.fiche-service.sans-animation .prestation-repere { animation: none !important; }
@keyframes fiche-deplie { from { clip-path: polygon(0 0, 0 0, 0 0, 0 100%, 0 100%); } }
@keyframes prestation-surligne { from { transform: scaleX(0); } }
@keyframes repere-entre { from { opacity: 0; transform: translateX(-8px); } }

@media (max-width: 1080px) {
  html:has([data-catalogue]) { scroll-padding-top: calc(var(--barre-h) + 72px); }
  .services-tete-grille { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .catalogue { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  /* le sommaire devient une bande de pastilles, collée sous la barre */
  .catalogue-index {
    top: var(--barre-h); z-index: 40;
    max-height: none; overflow: visible;
    margin-inline: calc(-1 * var(--s5)); padding: var(--s2) var(--s5);
    background: var(--feuille); border-bottom: 1px solid var(--pli);
  }
  .catalogue-index-titre, .catalogue-index-aide { display: none; }
  .catalogue-index ol {
    display: flex; gap: var(--s2); overflow-x: auto; border: 0;
    scrollbar-width: none; overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
            mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .catalogue-index ol::-webkit-scrollbar { display: none; }
  .catalogue-index li { flex: none; border: 0; }
  .catalogue-index a { padding: 6px var(--s3) 6px 6px; border: 1px solid var(--pli); font-size: .875rem; white-space: nowrap; }
  .catalogue-index-picto { width: 28px; height: 28px; }
}
@media (max-width: 720px) {
  .services-tete { padding-block: var(--s6) var(--s7); }
  .situations { padding: var(--s5) var(--s4) var(--s3); }
  .situations-liste { grid-template-columns: minmax(0, 1fr); }
  .catalogue-index { margin-inline: calc(-1 * var(--s4)); padding-inline: var(--s4); }
  .fiche-service-tete { grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding: var(--s5) var(--s4); }
  .fiche-service-picto { width: 52px; height: 52px; }
  .fiche-service-picto svg { width: 26px; height: 26px; }
  .fiche-service-corps { grid-template-columns: minmax(0, 1fr); gap: var(--s5); padding: var(--s5) var(--s4); }
  .fiche-service-cote { padding: var(--s4); }
}
@media (prefers-reduced-motion: reduce) {
  .parcours--depliant .parcours-etape, .parcours--depliant .parcours-num,
  .fiche-service-tete, .fiche-service .prestations li::after, .prestation-repere { animation: none !important; }
}

/* --- Pages de service : la fiche v2 ------------------------------------------
   Même contenu qu'avant, recomposé : en-tête dans la teinte du service (son
   dessin animé, l'appel en premier), sommaire de page collé sous la barre,
   problèmes en onglets, prestations en volets, chapitre spécial (ticketing,
   SIEM) à intercalaires, déroulement en parcours, cas concrets en
   conversation, autres services. Sans JavaScript : tout se lit à la suite. */

/* En-tête */
.svc-tete {
  position: relative; overflow: hidden;
  padding-block: var(--s7) var(--s8);
  color: #fff;
  background: var(--t);
  background: linear-gradient(101deg, var(--t) 0 56%, var(--t-fonce) 56% 78%, var(--t-ombre) 78% 100%);
}
.svc-tete::before {
  content: ""; position: absolute; top: 0; right: 0; width: 64px; height: 64px; pointer-events: none;
  background: linear-gradient(225deg, var(--feuille) 0 50%, var(--t-clair) 50%);
}
.svc-tete > .bloc { position: relative; }
.svc-tete-grille { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr); gap: var(--s7); align-items: center; }
.svc-tete .itineraire li, .svc-tete .itineraire a { color: rgba(255, 255, 255, .8); }
.svc-tete .itineraire a:hover { color: #fff; }
.svc-tete .itineraire li + li::before { color: rgba(255, 255, 255, .45); }
.svc-tete :focus-visible { outline-color: #fff; }
.svc-tete-marque { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin-bottom: var(--s5); }
.svc-tete-picto {
  width: 56px; height: 56px; flex: none; display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .34);
}
.svc-tete-picto svg { width: 28px; height: 28px; fill: #fff; }
.svc-modes { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.svc-modes li { margin: 0; padding: var(--s1) var(--s3); border: 1px solid rgba(255, 255, 255, .45); font-size: .8125rem; font-weight: 600; color: #fff; }
.svc-tete h1 { color: #fff; font-size: clamp(2.2rem, 4.3vw, 3.5rem); max-width: 17ch; margin-bottom: var(--s4); }
.svc-tete-sous { color: rgba(255, 255, 255, .9); font-size: 1.125rem; max-width: 50ch; margin-bottom: var(--s6); }
.svc-tete-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s5); }
.svc-appel {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s6) var(--s3) var(--s3);
  background: var(--feuille); color: var(--encre);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  transition: background var(--vite), transform var(--vite);
}
.svc-appel:hover { background: #fff; transform: translateY(-2px); }
.svc-appel-picto { width: 50px; height: 50px; flex: none; display: grid; place-items: center; background: var(--t); color: #fff; }
.svc-appel-picto svg { width: 22px; height: 22px; fill: currentColor; }
.svc-appel-texte { display: flex; flex-direction: column; line-height: 1.15; }
.svc-appel-tete { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t-fonce); }
.svc-appel-numero { margin-top: 4px; font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 800; letter-spacing: -.03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.svc-appel-mention { margin-top: 4px; font-size: .8125rem; color: var(--gris); }
.svc-tete-liens { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); }
.bouton--contour-clair { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); clip-path: none; }
.bouton--contour-clair:hover { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1.5px #fff; }
.svc-lien-clair {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px;
  color: #fff; font-size: .9375rem; font-weight: 600;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .22em;
  transition: text-decoration-color var(--vite);
}
.svc-lien-clair:hover { text-decoration-color: currentColor; }
.svc-lien-clair svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
.svc-tete-dessin { justify-self: center; width: min(100%, 370px); }

/* Le dessin de la maintenance : diagnostic, coche, ticket refermé */
.i-mesure { transform-box: fill-box; transform-origin: left center; }
.i-coche, .i-ticket, .i-cle { transform-box: fill-box; transform-origin: center; }
.i-coche-trait { fill: none; stroke: var(--feuille); stroke-width: 3.5; }
@media (prefers-reduced-motion: no-preference) {
  .svc-tete .i-mesure--1 { animation: mesure-1 6s var(--sortie) infinite; }
  .svc-tete .i-mesure--2 { animation: mesure-2 6s var(--sortie) infinite; }
  .svc-tete .i-mesure--3 { animation: mesure-3 6s var(--sortie) infinite; }
  .svc-tete .i-mesure--4 { animation: mesure-4 6s var(--sortie) infinite; }
  .svc-tete .i-coche { animation: dessin-ok 6s var(--sortie) infinite; }
  .svc-tete .i-ticket { animation: dessin-flotte 3s ease-in-out infinite alternate; }
  .svc-tete .i-cle { animation: cle-serre 6s var(--sortie) infinite; }
}
@keyframes mesure-1 { 0% { transform: scaleX(0); } 14%, 90% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
@keyframes mesure-2 { 0%, 12% { transform: scaleX(0); } 28%, 90% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
@keyframes mesure-3 { 0%, 26% { transform: scaleX(0); } 42%, 90% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
@keyframes mesure-4 { 0%, 40% { transform: scaleX(0); } 56%, 90% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
@keyframes dessin-ok { 0%, 58% { opacity: 0; transform: scale(.4); } 64%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes cle-serre { 0%, 30%, 100% { transform: none; } 8% { transform: rotate(-16deg); } 16% { transform: rotate(5deg); } 22% { transform: rotate(-3deg); } }
[data-dessin].est-dormant *, [data-dessin].est-dormant *::before, [data-dessin].est-dormant *::after { animation-play-state: paused !important; }

/* Les quatre dessins propres aux pages (réseaux, serveurs, messagerie,
   conseil) : voyants, cases cochées une à une, budget qui monte. Le reste
   (ondes, impulsions, messages, flottement) reprend les dessins de la vitrine. */
.i-case { transform-box: fill-box; transform-origin: center; }
.i-barre { transform-box: fill-box; transform-origin: center bottom; }
@media (prefers-reduced-motion: no-preference) {
  .svc-tete .i-led { animation: dessin-clignote 1.6s steps(1) infinite; }
  .svc-tete .i-led--2 { animation-delay: .4s; }
  .svc-tete .i-led--3 { animation-delay: .8s; }
  .svc-tete .i-led--4 { animation-delay: 1.2s; }
  .svc-tete .i-led--5 { animation-delay: .2s; }
  .svc-tete .i-case--1 { animation: case-1 6s var(--sortie) infinite; }
  .svc-tete .i-case--2 { animation: case-2 6s var(--sortie) infinite; }
  .svc-tete .i-case--3 { animation: case-3 6s var(--sortie) infinite; }
  .svc-tete .i-case--4 { animation: case-4 6s var(--sortie) infinite; }
  .svc-tete .i-barre { animation: barre-monte 5s var(--sortie) infinite; }
  .svc-tete .i-barre--2 { animation-delay: .25s; }
  .svc-tete .i-barre--3 { animation-delay: .5s; }
}
@keyframes case-1 { 0% { opacity: 0; transform: scale(.3); } 10%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes case-2 { 0%, 18% { opacity: 0; transform: scale(.3); } 28%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes case-3 { 0%, 36% { opacity: 0; transform: scale(.3); } 46%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes case-4 { 0%, 54% { opacity: 0; transform: scale(.3); } 64%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes barre-monte { 0% { transform: scaleY(.15); } 30%, 85% { transform: none; } 100% { transform: scaleY(.15); } }

/* Sommaire de la page */
html:has([data-sommaire]) { scroll-padding-top: calc(var(--barre-h) + 52px + var(--s4)); }
.svc-sommaire {
  position: sticky; top: var(--barre-h); z-index: 60;
  background: var(--feuille); border-bottom: 1px solid var(--pli);
}
.svc-sommaire ol { display: flex; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.svc-sommaire ol::-webkit-scrollbar { display: none; }
.svc-sommaire li { flex: none; margin: 0; }
.svc-sommaire a {
  position: relative; display: flex; align-items: center;
  min-height: 52px; padding-inline: var(--s4);
  font-size: .875rem; font-weight: 600; color: var(--gris); white-space: nowrap;
  transition: color var(--vite);
}
.svc-sommaire li:first-child a { padding-left: 0; }
.svc-sommaire a::after {
  content: ""; position: absolute; left: var(--s4); right: var(--s4); bottom: -1px; height: 3px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 380ms var(--sortie);
}
.svc-sommaire li:first-child a::after { left: 0; }
.svc-sommaire a:hover, .svc-sommaire a[aria-current] { color: var(--encre); }
.svc-sommaire a[aria-current]::after { transform: none; }
.svc-sommaire a:focus-visible { outline-offset: -3px; }

/* Le constat */
.svc-constat-grille { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s7); align-items: start; }
.svc-constat-lede { margin: 0; max-width: 42ch; font-size: clamp(1.2rem, 1.9vw, 1.5rem); font-weight: 500; line-height: 1.5; letter-spacing: -.012em; color: var(--encre); }
.svc-constat-grille p + p { margin: 0; padding-top: var(--s4); border-top: 2px solid var(--accent); color: var(--gris); font-size: 1.0625rem; }

/* Les problèmes en onglets (grand écran, avec JavaScript) */
.symptomes-liste { display: none; }
.symptome { padding: var(--s5) 0; border-top: 1px solid var(--pli-fort); }
.symptome:last-child { border-bottom: 1px solid var(--pli-fort); }
.symptome h3 { font-size: 1.1875rem; margin-bottom: var(--s2); }
.symptome p { margin: 0; color: var(--gris); }
.symptome-onglet {
  position: relative; z-index: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; gap: var(--s3);
  width: 100%; min-height: 64px; padding: var(--s3) var(--s4);
  background: transparent; border: 0; border-bottom: 1px solid var(--pli-fort);
  font: inherit; font-size: .96875rem; font-weight: 600; line-height: 1.35; text-align: left;
  color: var(--encre); cursor: pointer;
  transition: color 260ms;
}
.symptome-onglet::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--encre); transform: scaleX(0); transform-origin: left;
  transition: transform 420ms var(--sortie);
}
.symptome-onglet:hover { color: var(--accent-fonce); }
.symptome-onglet[aria-selected="true"] { color: var(--feuille); }
.symptome-onglet[aria-selected="true"]::before { transform: none; }
.symptome-fleche { width: 18px; height: 18px; fill: currentColor; opacity: .35; transition: opacity var(--vite), transform var(--vite); }
.symptome-onglet[aria-selected="true"] .symptome-fleche { opacity: 1; fill: var(--accent-clair); transform: translateX(4px); }
.symptome-onglet:focus-visible { outline-offset: -3px; }
/* avec JavaScript : la liste d'onglets et un seul problème ouvert ; côte à
   côte sur grand écran, la liste puis le texte sur téléphone */
.js .symptomes-liste { display: flex; flex-direction: column; border-top: 1px solid var(--pli-fort); }
.js .symptome { display: none; }
.js .symptome.est-actif {
  position: relative; display: block;
  margin-top: var(--s4); padding: var(--s5);
  background: var(--feuille); border: 1px solid var(--pli-fort); box-shadow: var(--ombre-facette);
  animation: volet-entre 420ms var(--sortie);
}
.js .symptome.est-actif::before {
  content: ""; position: absolute; top: -1px; right: -1px; width: 40px; height: 40px;
  background: linear-gradient(225deg, var(--facette-1) 0 50%, var(--accent) 50%);
}
.js .symptome h3 { max-width: 24ch; font-size: clamp(1.25rem, 2vw, 1.7rem); margin-bottom: var(--s3); padding-right: var(--s5); }
.js .symptome p { font-size: 1.0625rem; line-height: 1.7; color: var(--encre); }
@media (min-width: 901px) {
  .js .symptomes { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: var(--s6); align-items: start; }
  .js .symptome.est-actif { margin-top: 0; padding: var(--s6); }
  .js .symptome h3 { margin-bottom: var(--s4); }
}
@keyframes volet-entre { from { opacity: 0; transform: translateY(10px); } }

/* Prestations en volets */
.svc-volets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--s5); align-items: start; }
/* quatre volets : deux par ligne, plutôt que trois et un orphelin */
@media (min-width: 640px) {
  .svc-volets:has(> .svc-volet:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.svc-volet { background: var(--feuille); border: 1px solid var(--pli-fort); transition: box-shadow var(--lent), border-color var(--lent); }
.svc-volet:hover { border-color: var(--accent); box-shadow: var(--ombre-levee); }
.svc-volet-titre {
  margin: 0; padding: var(--s4) var(--s5);
  background: var(--accent); color: var(--sur-accent);
  font-size: 1.0625rem; letter-spacing: -.015em;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.svc-coches { margin: 0; padding: var(--s2) var(--s5) var(--s4); list-style: none; }
.svc-coches li {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--s3); align-items: start;
  margin: 0; padding: var(--s3) 0; border-bottom: 1px solid var(--pli);
  font-size: .9375rem; line-height: 1.5;
}
.svc-coches li:last-child { border-bottom: 0; }
.svc-coches svg { width: 16px; height: 16px; margin-top: 3px; fill: var(--accent-fonce); }

/* Le chapitre spécial : en-tête encre, intercalaires, volets */
.svc-chapitre-tete { position: relative; overflow: hidden; padding-top: var(--s8); background: var(--encre); color: var(--feuille); }
.svc-chapitre-tete::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(101deg, transparent 0 58%, rgba(251, 250, 247, .035) 58% 80%, rgba(251, 250, 247, .07) 80% 100%);
}
.svc-chapitre-tete .bloc { position: relative; }
.svc-chapitre-grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s7); align-items: center; padding-bottom: var(--s7); }
.svc-chapitre-tete h2 { color: var(--feuille); font-size: clamp(1.9rem, 3.3vw, 2.75rem); font-weight: 800; line-height: 1.05; letter-spacing: -.04em; margin-bottom: var(--s4); }
.svc-chapitre-tete p { color: #CFCBC3; font-size: 1.0625rem; max-width: 56ch; margin: 0; }
.svc-chapitre-tete :focus-visible { outline-color: var(--accent-clair); }
.intercalaires { display: none; }
.js .intercalaires { display: flex; gap: var(--s1); overflow-x: auto; scrollbar-width: none; }
.intercalaires::-webkit-scrollbar { display: none; }
.intercalaire {
  flex: none; min-height: 52px; padding: var(--s3) var(--s5);
  border: 0; background: rgba(251, 250, 247, .08); color: #CFCBC3;
  font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  transition: background var(--vite), color var(--vite);
}
.intercalaire:hover { background: rgba(251, 250, 247, .16); color: var(--feuille); }
.intercalaire[aria-selected="true"] { background: var(--feuille); color: var(--encre); }
.intercalaire:focus-visible { outline: 2px solid var(--accent-clair); outline-offset: -5px; }
.svc-chapitre-corps { padding-block: var(--s7) var(--s8); background: var(--feuille); border-bottom: 1px solid var(--pli); }
.chapitre-volet + .chapitre-volet { margin-top: var(--s8); }
.chapitre-volet-titre { font-size: clamp(1.35rem, 2.2vw, 1.75rem); margin-bottom: var(--s5); }
.chapitre-volet-intro { color: var(--gris); font-size: 1.0625rem; max-width: 62ch; margin: calc(-1 * var(--s3)) 0 var(--s6); }
.chapitre-volet .boutons { margin-top: var(--s6); }
.chapitre-volet:focus-visible { outline-offset: 10px; }
.js .chapitre-volet + .chapitre-volet { margin-top: 0; }
.js .chapitre-volet:not(.est-actif) { display: none; }
.js .chapitre-volet.est-actif { animation: volet-entre 420ms var(--sortie); }

/* Le ticket qui avance : créé, classé, priorisé, affecté, résolu */
.ticket-cycle { justify-self: end; width: min(100%, 400px); }
.ticket-carte {
  display: grid; gap: var(--s3); padding: var(--s5);
  background: var(--feuille); color: var(--encre);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}
.ticket-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.ticket-mot { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.ticket-statut { display: grid; min-width: 96px; }
.ticket-statut span {
  grid-area: 1 / 1; padding: 3px var(--s3);
  background: var(--accent); color: var(--sur-accent);
  font-size: .8125rem; font-weight: 700; text-align: center; opacity: 0;
}
.ticket-statut span:last-child { opacity: 1; }
.ticket-objet { font-size: 1.1875rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; }
.ticket-rail { position: relative; height: 6px; background: var(--facette-2); }
.ticket-rail-plein { position: absolute; inset: 0; background: var(--accent); transform-origin: left; }
.ticket-etapes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; font-size: .6875rem; font-weight: 600; color: var(--gris); }
.ticket-etapes li { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ticket-statut span { animation: ticket-statut 7.5s infinite; animation-delay: calc(var(--i) * 1.5s - 7.5s); }
  .ticket-rail-plein { animation: ticket-rail 7.5s steps(5, jump-start) infinite; }
}
@keyframes ticket-statut { 0%, 19.99% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes ticket-rail { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Cartes (ce que cela résout, cas d'usage du chapitre) */
.svc-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--s4); }
.svc-carte { position: relative; padding: var(--s5); background: var(--facette-1); border: 1px solid var(--pli); }
.svc-carte::before { content: ""; position: absolute; top: -1px; left: -1px; width: 40px; height: 3px; background: var(--accent); }
.svc-carte h4 { font-size: 1.0625rem; letter-spacing: -.02em; margin-bottom: var(--s2); }
.svc-carte p { margin: 0; font-size: .9375rem; color: var(--gris); }

/* Le parcours sans pictogramme (déroulement, mise en place) */
.parcours--sans-icone .parcours-etape:not(:last-child)::before,
.parcours--sans-icone .parcours-etape:not(:last-child)::after { left: 78px; }
.parcours-etape h4 { font-size: 1.1875rem; letter-spacing: -.022em; margin-bottom: var(--s2); transition: color var(--vite); }
.parcours-etape:hover h4 { color: var(--accent-fonce); }

/* Garanties : la liste cochée et la note encre */
.svc-garanties { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
.svc-coches--garanties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); padding: 0; border-top: 1px solid var(--pli); }
.svc-coches--garanties li { grid-template-columns: 24px minmax(0, 1fr); padding: var(--s4) 0; border-bottom: 1px solid var(--pli); }
.svc-coches--garanties li:last-child { border-bottom: 1px solid var(--pli); }
.svc-coches--garanties svg { width: 24px; height: 24px; margin-top: 0; padding: 4px; background: var(--accent); fill: var(--sur-accent); }
.js .svc-coches--garanties.surgit.est-visible svg { animation: coche-pose 420ms cubic-bezier(.2, 1.3, .4, 1) backwards; animation-delay: calc(var(--i) * 90ms + 250ms); }
@keyframes coche-pose { from { opacity: 0; transform: scale(.3) rotate(-30deg); } }
.svc-note { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s4); padding: var(--s5); background: var(--encre); color: var(--feuille); }
.svc-note-picto { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(251, 250, 247, .25); color: var(--accent-clair); }
.svc-note-picto svg { width: 22px; height: 22px; fill: currentColor; }
.svc-note p { margin: 0; font-size: .9375rem; line-height: 1.65; color: #E4E0D8; }

/* Pour qui : quatre plaques à pictogramme */
.svc-publics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--s4); margin: 0; padding: 0; list-style: none; }
.svc-public { margin: 0; padding: var(--s5); background: var(--feuille); border: 1px solid var(--pli-fort); transition: border-color var(--vite), box-shadow var(--lent); }
.svc-public:hover { border-color: var(--accent); box-shadow: var(--ombre-facette); }
.svc-public-picto {
  width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: var(--s4);
  background: var(--accent-voile); color: var(--accent-fonce);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  transition: background var(--vite), color var(--vite);
}
.svc-public:hover .svc-public-picto { background: var(--accent); color: var(--sur-accent); }
.svc-public-picto svg { width: 24px; height: 24px; fill: currentColor; }
.svc-public :is(h3, h4) { font-size: 1.0625rem; letter-spacing: -.02em; margin-bottom: var(--s2); }
.svc-public p { margin: 0; font-size: .9375rem; color: var(--gris); }

/* Cas concrets : la demande, puis la réponse qui s'écrit */
.svc-cas { max-width: 940px; margin-inline: auto; }
.conversation { display: grid; gap: var(--s6); margin: 0; padding: var(--s6); list-style: none; background: var(--facette-2); }
.echange { display: grid; gap: var(--s3); margin: 0; }
.bulle { position: relative; max-width: min(80%, 580px); padding: var(--s4) var(--s5); }
.bulle--demande { justify-self: start; background: var(--feuille); clip-path: polygon(0 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.bulle--demande h3 { margin: 0; font-size: 1.0625rem; letter-spacing: -.015em; line-height: 1.4; }
.bulle--reponse { justify-self: end; background: var(--accent); color: var(--sur-accent); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }
.bulle-auteur { margin: 0 0 var(--s1); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .82; }
.bulle--reponse p:last-child { margin: 0; font-size: .96875rem; line-height: 1.6; }
.js .echange.surgit { opacity: 1; transform: none; }
.js .echange.surgit:not(.est-visible) .bulle { opacity: 0; }
.js .echange.surgit.est-visible .bulle--demande { animation: bulle-arrive 420ms var(--sortie) backwards; }
.js .echange.surgit.est-visible .bulle--reponse { animation: bulle-arrive 420ms var(--sortie) 600ms backwards; }
.js .echange.surgit.est-visible .bulle--reponse > * { animation: bulle-texte 320ms ease 1500ms backwards; }
.js .echange.surgit.est-visible .bulle--reponse::after {
  content: ""; position: absolute; left: var(--s5); top: calc(50% - 4px); width: 8px; height: 8px;
  background: currentColor; box-shadow: 14px 0 currentColor, 28px 0 currentColor;
  animation: bulle-frappe 900ms ease 600ms both;
}
@keyframes bulle-arrive { from { opacity: 0; transform: translateY(12px); } }
@keyframes bulle-texte { from { opacity: 0; } }
@keyframes bulle-frappe { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* Cas décrits comme des situations (« Un bureau hors zone fibre ») : pas de
   fausse citation ; la situation à gauche, notre réponse à droite. */
.svc-cas--scenarios { max-width: none; }
.scenarios { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--pli-fort); }
.scenario {
  position: relative; z-index: 0;
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: var(--s2) var(--s6);
  margin: 0; padding: var(--s5) var(--s4);
  border-bottom: 1px solid var(--pli-fort);
}
.scenario::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--accent-voile); transform: scaleX(0); transform-origin: left;
  transition: transform 520ms cubic-bezier(.7, 0, .2, 1);
}
.scenario:hover::before { transform: none; }
.scenario-situation { display: flex; align-items: baseline; gap: var(--s3); margin: 0; font-size: 1.125rem; letter-spacing: -.02em; }
.scenario-situation::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--accent); transform: translateY(-2px) rotate(45deg); }
.scenario-reponse { margin: 0; color: var(--gris); font-size: .96875rem; line-height: 1.65; }
@media (max-width: 720px) { .scenario { grid-template-columns: minmax(0, 1fr); padding-inline: 0; } }

/* Pourquoi nous : trois colonnes, le filet s'étire au survol */
.svc-arguments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--pli-fort); }
.svc-argument { position: relative; margin: 0; padding: var(--s6) var(--s5) var(--s5) 0; }
.svc-argument + .svc-argument { padding-left: var(--s5); border-left: 1px solid var(--pli); }
.svc-argument::before {
  content: ""; position: absolute; top: -2px; left: 0; width: 56px; height: 3px;
  background: var(--accent); transition: width 600ms var(--sortie);
}
.svc-argument + .svc-argument::before { left: var(--s5); }
.svc-argument:hover::before { width: calc(100% - var(--s5)); }
.svc-argument h3 { font-size: 1.25rem; margin-bottom: var(--s2); }
.svc-argument p { margin: 0; color: var(--gris); font-size: .9375rem; }

/* Les autres services */
.svc-autres { border-top: 1px solid var(--pli); }
.svc-autres-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s5); margin-bottom: var(--s5); }
.svc-autres-tete h2 { margin: 0; font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.svc-autres-tete p { margin: 0; color: var(--gris); }
.svc-autres-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); grid-auto-rows: 1fr; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.svc-autres-liste li { margin: 0; }
.svc-autre {
  position: relative; z-index: 0; height: 100%;
  display: grid; grid-template-columns: 32px minmax(0, 1fr) 16px; align-items: center; gap: var(--s3);
  min-height: 52px; padding: var(--s2) var(--s3) var(--s2) var(--s2);
  border: 1px solid var(--pli); font-size: .9375rem; font-weight: 600; color: var(--encre);
  transition: color 260ms, border-color 260ms;
}
.svc-autre::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--t); transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--sortie); }
.svc-autre-picto { width: 32px; height: 32px; display: grid; place-items: center; background: var(--t); color: #fff; transition: background 260ms; }
.svc-autre-picto svg { width: 16px; height: 16px; fill: currentColor; }
.svc-autre-fleche { width: 16px; height: 16px; fill: currentColor; opacity: .35; transition: opacity var(--vite), transform var(--vite); }
.svc-autre:hover, .svc-autre:focus-visible { color: #fff; border-color: var(--t); }
.svc-autre:hover::before, .svc-autre:focus-visible::before { transform: none; }
.svc-autre:hover .svc-autre-picto, .svc-autre:focus-visible .svc-autre-picto { background: rgba(255, 255, 255, .16); }
.svc-autre:hover .svc-autre-fleche, .svc-autre:focus-visible .svc-autre-fleche { opacity: 1; transform: translateX(3px); }
.svc-autre:focus-visible { outline-offset: 2px; }

@media (max-width: 1080px) {
  .svc-tete-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 290px); gap: var(--s6); }
  .svc-chapitre-grille { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .ticket-cycle { justify-self: start; }
  .svc-garanties { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .svc-constat-grille { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .svc-arguments { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .svc-argument, .svc-argument + .svc-argument { padding: var(--s5) 0; border-left: 0; border-top: 1px solid var(--pli-fort); }
  .svc-argument + .svc-argument::before { left: 0; }
}
@media (max-width: 720px) {
  .svc-tete { padding-block: var(--s6) var(--s7); }
  .svc-tete::before { width: 34px; height: 34px; }
  .svc-tete-grille { grid-template-columns: minmax(0, 1fr); }
  .svc-tete-dessin { display: none; }
  .svc-tete h1 { font-size: clamp(2rem, 8.6vw, 2.6rem); }
  .svc-tete-sous { font-size: 1.0625rem; margin-bottom: var(--s5); }
  .svc-appel { width: 100%; padding-right: var(--s4); }
  .svc-tete-liens { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
  .svc-sommaire ol { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
  .svc-coches--garanties { grid-template-columns: minmax(0, 1fr); }
  .svc-chapitre-tete { padding-top: var(--s7); }
  .svc-chapitre-grille { padding-bottom: var(--s6); }
  .intercalaire { padding-inline: var(--s4); font-size: .875rem; }
  .conversation { padding: var(--s5) var(--s3); gap: var(--s5); }
  .bulle { max-width: 92%; padding: var(--s3) var(--s4); }
}
@media (prefers-reduced-motion: reduce) {
  .bulle, .bulle > *, .bulle::after, .svc-coches--garanties svg,
  .symptome, .chapitre-volet { animation: none !important; }
  .js .echange.surgit.est-visible .bulle--reponse::after { display: none; }
}

/* --- Survols et interactions communs ---------------------------------------
   Un seul langage sur tout le site, tiré du « Dépliant » : le coin replié se
   creuse, une facette franche (jamais un halo) traverse l'aplat, la flèche
   avance, la couleur balaie depuis la gauche. Rien de ceci ne masque un
   contenu : sans survol (tactile) ou sans JavaScript, tout reste en place. */

/* Boutons : le coin se creuse, le reflet passe, l'appui enfonce */
.bouton { position: relative; isolation: isolate; }
.bouton::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(101deg, transparent 0 36%, color-mix(in srgb, currentColor 16%, transparent) 36% 56%, transparent 56% 100%);
  transform: translateX(-115%);
}
.bouton:hover::before { transform: translateX(115%); transition: transform 760ms var(--sortie); }
.bouton:not(.bouton--contour):not(.bouton--contour-clair) {
  transition: background var(--vite), color var(--vite), transform var(--vite), clip-path 320ms var(--sortie);
}
.bouton:not(.bouton--contour):not(.bouton--contour-clair):hover {
  clip-path: polygon(0 0, 100% 0, 100% 38%, calc(100% - var(--biais) * 1.9) 100%, 0 100%);
}
.bouton:active { transform: translateY(1px); transition-duration: 60ms; }
.bouton svg { transition: transform var(--lent); }
.bouton[href^="tel:"]:hover svg, .svc-appel:hover .svc-appel-picto svg { animation: sonne 640ms ease-in-out; }
@keyframes sonne {
  0%, 100% { transform: none; } 15% { transform: rotate(-16deg); } 30% { transform: rotate(14deg); }
  45% { transform: rotate(-10deg); } 60% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); }
}

/* La navigation : un seul trait qui glisse vers le lien survolé, puis revient
   sur la page en cours (initCurseurNav). Sans JavaScript, chaque lien garde
   son propre soulignement. */
.destinations-barre { position: relative; }
.nav-curseur {
  position: absolute; left: 0; bottom: 6px; width: 100px; height: 2px;
  background: var(--accent); pointer-events: none;
  transform-origin: left; transform: translateX(var(--x, 0)) scaleX(var(--l, 0));
  opacity: 0;
}
.nav-curseur.est-pret { transition: transform 460ms var(--sortie), opacity 200ms; }
.destinations-barre.a-curseur .nav-curseur { opacity: 1; }
.destinations-barre.a-curseur a::after { display: none; }

/* L'écusson : la marque se redresse au survol */
.ecusson-logo { transition: transform var(--lent); }
.ecusson:hover .ecusson-logo { transform: rotate(-4deg) scale(1.05); }
.ecusson:hover .ecusson-logo-onde { animation: logo-onde 1s ease-out both; }
.ecusson:hover .ecusson-logo-onde--2 { animation-delay: .15s; }
@media (prefers-reduced-motion: reduce) {
  .ecusson-logo, .ecusson-logo-onde { transition: none; animation: none !important; }
}

/* Le bouton du menu : les trois barres se changent en croix */
.bascule { position: relative; transition: background var(--vite), border-color var(--vite); }
.bascule:hover { background: var(--facette-2); border-color: var(--encre); }
.bascule svg { position: absolute; top: 50%; left: 50%; margin: -11px 0 0 -11px; transition: transform 320ms var(--sortie), opacity 200ms; }
.bascule .icone-fermer { display: block; opacity: 0; transform: rotate(-90deg) scale(.5); }
.bascule[aria-expanded="true"] .icone-ouvrir { display: block; opacity: 0; transform: rotate(90deg) scale(.5); }
.bascule[aria-expanded="true"] .icone-fermer { opacity: 1; transform: none; }

/* La barre de lecture : un filet d'accent sous l'en-tête (initDefilement) */
.barre::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent); pointer-events: none;
  transform: scaleX(var(--lu, 0)); transform-origin: left;
}

/* Le pied de page : le lien avance derrière un repère */
.pied-grille ul a { position: relative; display: inline-block; transition: color var(--vite), transform var(--lent); }
.pied-grille ul a::before {
  content: ""; position: absolute; top: 50%; left: -14px; width: 8px; height: 2px;
  background: var(--accent-clair); transform: scaleX(0); transform-origin: left;
  transition: transform var(--lent);
}
.pied-grille ul a:hover, .pied-grille ul a:focus-visible { color: var(--feuille); transform: translateX(10px); }
.pied-grille ul a:hover::before, .pied-grille ul a:focus-visible::before { transform: none; }
.pied-bas a {
  background: linear-gradient(currentColor, currentColor) 0 78% / 0 1px no-repeat;
  transition: color var(--vite), background-size var(--lent);
}
.pied-bas a:hover { background-size: 100% 1px; }

/* Le bouton WhatsApp : il s'ouvre et dit son nom */
.whatsapp-flottant { width: auto; min-width: 56px; padding-inline: 14px; display: flex; align-items: center; }
.whatsapp-flottant span {
  display: block; max-width: 0; overflow: hidden; white-space: nowrap;
  font-size: .9375rem; font-weight: 700;
  transition: max-width 420ms var(--sortie), margin 420ms var(--sortie);
}
.whatsapp-flottant:hover span, .whatsapp-flottant:focus-visible span { max-width: 9em; margin-left: var(--s2); }
.whatsapp-flottant svg { flex: none; transition: transform var(--lent); }
.whatsapp-flottant:hover svg { transform: rotate(-10deg); }

/* La FAQ : le signe tourne au survol, la réponse descend à l'ouverture */
.faq-question:hover .faq-signe { border-color: var(--accent); }
.faq-question:hover:not([aria-expanded="true"]) .faq-signe { transform: rotate(90deg); }
.faq-reponse:not([hidden]) { animation: volet-entre 360ms var(--sortie); }

/* Les fiches du catalogue (page Services) se soulèvent */
.fiche-service { transition: box-shadow var(--lent), border-color var(--lent); }
.fiche-service:hover { box-shadow: var(--ombre-levee); border-color: var(--t); }
.fiche-service-picto { transition: transform var(--lent), background var(--lent); }
.fiche-service:hover .fiche-service-picto { transform: rotate(-6deg); background: rgba(255, 255, 255, .2); }

/* Les liens de coordonnées */
a.coordonnees-valeur {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: color var(--vite), background-size var(--lent);
}
a.coordonnees-valeur:hover { background-size: 100% 1px; }

/* --- Devis : services en tuiles, délai en plaques, récapitulatif ------------
   Les cases restent de vraies cases à cocher et de vrais boutons radio
   (masqués visuellement, jamais au clavier ni aux lecteurs d'écran). */
.choix-services, .delais-groupe { margin: 0 0 var(--s6); padding: 0; border: 0; min-width: 0; }
.choix-compte { margin: 0 0 var(--s3); font-size: .875rem; font-weight: 600; color: var(--gris); transition: color var(--vite); }
.choix-services.a-choix .choix-compte { color: var(--accent-fonce); }
.choix-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 236px), 1fr)); gap: var(--s2); }
.choix-service {
  position: relative; z-index: 0;
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 20px; align-items: center; gap: var(--s3);
  min-height: 58px; padding: var(--s2) var(--s3) var(--s2) var(--s2);
  background: var(--feuille); border: 1px solid var(--pli-fort); cursor: pointer;
  font-size: .9375rem; font-weight: 600; line-height: 1.3; color: var(--encre);
  transition: color 260ms, border-color 260ms;
}
.choix-service::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--t); transform: scaleX(0); transform-origin: left;
  transition: transform 420ms var(--sortie);
}
.choix-service input, .delai input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.choix-picto {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--t); color: #fff;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
  transition: background 260ms, transform var(--lent);
}
.choix-picto svg { width: 18px; height: 18px; fill: currentColor; }
.choix-coche { width: 20px; height: 20px; display: grid; place-items: center; border: 1.5px solid var(--pli-fort); transition: background 260ms, border-color 260ms; }
.choix-coche svg { width: 12px; height: 12px; fill: var(--t); opacity: 0; transform: scale(.4); transition: opacity 200ms, transform 320ms cubic-bezier(.2, 1.3, .4, 1); }
.choix-service:hover { border-color: var(--t); }
.choix-service:hover .choix-picto { transform: rotate(-8deg); }
.choix-service:has(input:checked), .choix-service.est-choisi { color: #fff; border-color: var(--t); }
.choix-service:has(input:checked)::before, .choix-service.est-choisi::before { transform: none; }
.choix-service:has(input:checked) .choix-picto, .choix-service.est-choisi .choix-picto { background: rgba(255, 255, 255, .16); transform: none; }
.choix-service:has(input:checked) .choix-coche, .choix-service.est-choisi .choix-coche { background: #fff; border-color: #fff; }
.choix-service:has(input:checked) .choix-coche svg, .choix-service.est-choisi .choix-coche svg { opacity: 1; transform: none; }
.choix-service:has(input:focus-visible), .delai:has(input:focus-visible) { outline: 2px solid var(--accent-fonce); outline-offset: 2px; }
.choix-services.invalide .choix-service { border-color: var(--alerte); }

.delais { display: flex; flex-wrap: wrap; gap: var(--s2); }
.delai {
  position: relative; display: inline-flex; align-items: center; gap: var(--s3);
  min-height: 48px; padding: var(--s2) var(--s4);
  background: var(--feuille); border: 1px solid var(--pli-fort); cursor: pointer;
  font-size: .9375rem; font-weight: 600;
  transition: background var(--vite), border-color var(--vite), color var(--vite);
}
.delai::before { content: ""; width: 10px; height: 10px; flex: none; border: 1.5px solid var(--pli-fort); transform: rotate(45deg); transition: background var(--vite), border-color var(--vite); }
.delai:hover { border-color: var(--accent); }
.delai:hover::before { border-color: var(--accent); }
.delai:has(input:checked), .delai.est-choisi { background: var(--encre); border-color: var(--encre); color: var(--feuille); }
.delai:has(input:checked)::before, .delai.est-choisi::before { background: var(--accent-clair); border-color: var(--accent-clair); }
.delai--urgent:has(input:checked), .delai--urgent.est-choisi { background: var(--alerte); border-color: var(--alerte); }
.delai--urgent:has(input:checked)::before, .delai--urgent.est-choisi::before { background: #fff; border-color: #fff; }
.delais-groupe.invalide .delai { border-color: var(--alerte); }
/* les plaques sont des labels dans un .champ : pas de capitales d'étiquette ;
   l'erreur se signale sur les tuiles et les plaques, sans cadre autour du groupe */
.champ label.delai { font-size: .9375rem; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--encre); }
.champ label.delai:has(input:checked), .champ label.delai.est-choisi { color: var(--feuille); }
fieldset.choix-services.invalide, fieldset.delais-groupe.invalide { padding: 0; border: 0; }

/* Le canal de réponse (devis et contact) : trois plaques, la phrase d'aide suit le choix */
.canaux-groupe { margin: 0; min-width: 0; }
.canaux-choix { display: flex; flex-wrap: wrap; gap: var(--s2); }
.canal-choix {
  position: relative; display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 48px; padding: var(--s2) var(--s4) var(--s2) var(--s3);
  background: var(--feuille); border: 1px solid var(--pli-fort); cursor: pointer;
  transition: background var(--vite), border-color var(--vite), color var(--vite);
}
.champ label.canal-choix { font-size: .9375rem; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--encre); }
.canal-choix input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.canal-choix svg { width: 18px; height: 18px; flex: none; fill: var(--gris); transition: fill var(--vite), transform var(--lent); }
.canal-choix:hover { border-color: var(--accent); }
.canal-choix:hover svg { fill: var(--accent-fonce); transform: rotate(-10deg); }
.champ label.canal-choix:has(input:checked), .champ label.canal-choix.est-choisi { background: var(--encre); border-color: var(--encre); color: var(--feuille); }
.canal-choix:has(input:checked) svg, .canal-choix.est-choisi svg { fill: var(--accent-clair); transform: none; }
.canal-choix--wa:has(input:checked) svg, .canal-choix--wa.est-choisi svg { fill: #3DCB7A; }
.canal-choix:has(input:focus-visible) { outline: 2px solid var(--accent-fonce); outline-offset: 2px; }
.canal-aide { margin: 0; font-size: .8125rem; color: var(--gris); }

main .urgence p a:not([class]) { color: var(--feuille); text-decoration-color: var(--accent-clair); }
.urgence {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s3); align-items: start;
  margin-top: var(--s3); padding: var(--s4);
  background: var(--encre); color: var(--feuille);
  animation: volet-entre 360ms var(--sortie);
}
.urgence[hidden] { display: none; }
.urgence svg { width: 22px; height: 22px; fill: var(--accent-clair); }
.urgence p { margin: 0; font-size: .9375rem; color: #E4E0D8; }
.urgence a { color: var(--feuille); font-weight: 800; text-decoration: underline; text-underline-offset: .18em; white-space: nowrap; }

/* Le récapitulatif : il suit la saisie, collé dans la colonne (grand écran) */
.layout-form > aside { align-self: stretch; }
.recap { display: none; }
@media (min-width: 1081px) {
  .js .recap:not([hidden]) {
    display: block; position: sticky; top: calc(var(--barre-h) + var(--s5));
    margin-top: var(--s5); padding: var(--s5);
    background: var(--encre); color: var(--feuille);
  }
}
.recap-titre { margin: 0 0 var(--s4); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-clair); }
.recap-liste { margin: 0 0 var(--s4); }
.recap-liste div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid rgba(251, 250, 247, .14); }
.recap-liste dt { padding-top: 2px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #A9A59D; }
.recap-liste dd { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; font-size: .9375rem; font-weight: 600; color: var(--feuille); }
.recap-vide { color: #A9A59D; font-weight: 400; }
.recap-puce { display: inline-flex; padding: 2px 8px; background: var(--t); color: #fff; font-size: .8125rem; animation: coche-pose 360ms var(--sortie); }
.recap-jauge { height: 6px; background: rgba(251, 250, 247, .14); }
.recap-jauge span { display: block; height: 100%; background: var(--accent-clair); transform-origin: left; transform: scaleX(var(--rempli, 0)); transition: transform 520ms var(--sortie), background var(--lent); }
.recap.est-pret .recap-jauge span { background: var(--whatsapp); }
.recap-etat { margin: var(--s3) 0 0; font-size: .875rem; color: #CFCBC3; }
.recap.est-pret .recap-etat { color: var(--feuille); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .bouton::before, .nav-curseur, .faq-reponse, .urgence, .recap-puce { animation: none !important; transition: none !important; }
  .bouton:hover::before { transform: translateX(-115%); }
}

/* --- Le guichet : à droite de la vitrine -----------------------------------
   Deux raisons de venir. Un projet : la situation mène à la prestation qui y
   répond (page Services). Une panne : le statut ouvert / fermé en heure
   d'Abidjan, puis le numéro, en bas, dans l'aplat de l'accent. */
.carrefour-grille--vitrine {
  grid-template-columns: minmax(0, 1fr) minmax(0, 352px);
  grid-template-areas: "vitrine guichet"; grid-template-rows: auto; align-items: stretch;
}
.guichet {
  grid-area: guichet; position: relative;
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s5);
  background: var(--feuille); border: 1px solid var(--pli-fort); box-shadow: var(--ombre-facette);
}
.guichet::before {
  content: ""; position: absolute; top: -1px; right: -1px; width: 34px; height: 34px;
  background: linear-gradient(225deg, var(--feuille) 0 50%, var(--accent) 50%);
}
.guichet .statut { align-self: flex-start; padding: var(--s1) var(--s3); border-color: var(--pli-fort); color: var(--encre); font-size: .875rem; }
.guichet .statut.est-ouvert { border-color: rgba(60, 196, 111, .6); }
.guichet h1 { margin: var(--s1) 0 0; padding-right: var(--s4); font-size: clamp(1.5rem, 2.1vw, 1.875rem); line-height: 1.08; letter-spacing: -.035em; }
.guichet-lieu { margin: 0; font-size: .9375rem; color: var(--gris); }
.guichet-question { margin: var(--s2) 0 0; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-fonce); }
.guichet-cas { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--pli); }
.guichet-cas li { margin: 0; border-bottom: 1px solid var(--pli); }
.guichet-lien {
  position: relative; z-index: 0;
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 14px; align-items: center; gap: var(--s3);
  min-height: 46px; padding: var(--s1) var(--s2);
  font-size: .9375rem; font-weight: 600; line-height: 1.25; color: var(--encre);
  transition: color 260ms;
}
.guichet-lien::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--t); transform: scaleX(0); transform-origin: left;
  transition: transform 420ms var(--sortie);
}
.guichet-lien--tout { --t: var(--encre); }
.guichet-picto { width: 28px; height: 28px; display: grid; place-items: center; background: var(--t); color: #fff; transition: background 260ms, transform var(--lent); }
.guichet-picto svg { width: 15px; height: 15px; fill: currentColor; }
.guichet-fleche { width: 14px; height: 14px; fill: currentColor; opacity: .4; transition: opacity var(--vite), transform var(--vite); }
.guichet-lien:hover, .guichet-lien:focus-visible { color: #fff; }
.guichet-lien:hover::before, .guichet-lien:focus-visible::before { transform: none; }
.guichet-lien:hover .guichet-picto, .guichet-lien:focus-visible .guichet-picto { background: rgba(255, 255, 255, .16); transform: rotate(-8deg); }
.guichet-lien:hover .guichet-fleche, .guichet-lien:focus-visible .guichet-fleche { opacity: 1; transform: translateX(3px); }
.guichet-lien:focus-visible { outline-offset: -2px; }
.guichet-appel {
  margin-top: auto; display: flex; flex-direction: column; gap: 2px;
  padding: var(--s4);
  background: var(--accent); color: var(--sur-accent);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  transition: background var(--vite), color var(--vite);
}
.guichet-appel-tete { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.guichet-appel-numero {
  display: flex; align-items: center; gap: var(--s2);
  font-size: clamp(1.3rem, 1.8vw, 1.5rem); font-weight: 800; letter-spacing: -.034em; line-height: 1.2;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.guichet-appel-numero svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
.guichet-appel-mention { font-size: .8125rem; opacity: .85; }
.guichet-appel:hover { background: var(--accent-fonce); color: #fff; }
.guichet-appel:hover .guichet-appel-numero svg { animation: sonne 640ms ease-in-out; }
.guichet-liens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.guichet-mini {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding-inline: var(--s2);
  border: 1px solid var(--pli-fort);
  font-size: .875rem; font-weight: 700; color: var(--encre);
  transition: background var(--vite), border-color var(--vite), color var(--vite);
}
.guichet-mini svg { width: 18px; height: 18px; flex: none; fill: currentColor; transition: fill var(--vite); }
.guichet-mini--wa svg { fill: var(--whatsapp); }
.guichet-mini:hover { background: var(--encre); border-color: var(--encre); color: var(--feuille); }
.guichet-mini--wa:hover { background: var(--whatsapp); border-color: var(--whatsapp); color: #fff; }
.guichet-mini--wa:hover svg { fill: #fff; }
@media (max-width: 1080px) {
  .carrefour-grille--vitrine { grid-template-columns: minmax(0, 1fr); grid-template-areas: "vitrine" "guichet"; }
}
@media (max-width: 720px) {
  .guichet { padding: var(--s4); }
  .guichet h1 { font-size: 1.625rem; }
}

/* --- Apparition au défilement ---------------------------------------------
   Conditionnée à la classe .js posée par un script en ligne dans le <head> :
   sans JavaScript, tout reste visible. NE PAS RETIRER CE GARDE-FOU. */
.js .surgit { opacity: 0; transform: translateY(14px); }
.js .surgit.est-visible {
  opacity: 1; transform: none;
  transition: opacity var(--lent), transform var(--lent);
}
@media (prefers-reduced-motion: reduce) {
  .js .surgit, .js .surgit.est-visible { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================ 10. RESPONSIVE ============================ */
@media (max-width: 1080px) {
  .carrefour-grille { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .service-grille { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .layout-form { grid-template-columns: minmax(0, 1fr); }
  .pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
  .destinations-barre { display: none; }
  .bascule { display: flex; }

  /* Le menu se déplie depuis le bord de la feuille */
  body.nav-ouverte .destinations-barre {
    display: block;
    position: fixed; inset: var(--barre-h) 0 auto; z-index: 95;
    background: var(--feuille);
    border-bottom: 1px solid var(--pli-fort);
    box-shadow: var(--ombre-facette);
    max-height: calc(100vh - var(--barre-h)); overflow-y: auto;
  }
  body.nav-ouverte .destinations-barre ul { flex-direction: column; }
  body.nav-ouverte .destinations-barre li { border-bottom: 1px solid var(--pli); }
  body.nav-ouverte .destinations-barre a { min-height: 54px; padding-inline: var(--s5); font-size: 1rem; }
  body.nav-ouverte .destinations-barre a::after { left: 0; right: auto; bottom: 0; top: 0; width: 3px; height: auto; transform: scaleY(0); transform-origin: top; }
  body.nav-ouverte .destinations-barre a:hover::after,
  body.nav-ouverte .destinations-barre a[aria-current="page"]::after { transform: scaleY(1); }
}

@media (max-width: 720px) {
  :root { --s8: 3.25rem; --s9: 4rem; --barre-h: 64px; }
  .bloc, .container { padding-inline: var(--s4); }
  .panneau { padding: var(--s5); }
  .langue { display: none; }
  .plaque span { display: none; }
  .plaque { padding-inline: var(--s3); }
  /* À 390 px, l'en-tête ne peut pas porter le logo, le nom, le téléphone,
     le devis et le menu : le devis est déjà dans la barre d'action du bas. */
  .barre .bloc { gap: var(--s3); }
  .actions-barre .bouton--barre { display: none; }
  .ecusson { min-width: 0; }
  /* devis et langue masqués : la barre d'actions est vide, le menu passe à droite */
  .actions-barre { display: none; }
  .bascule { margin-left: auto; }

  .destination {
    grid-template-columns: 40px minmax(0, 1fr) 24px;
    grid-template-areas: "pic nom fle" "pic met fle";
    column-gap: var(--s3); row-gap: 2px;
    padding: var(--s4);
  }
  .destination-pictogramme { align-self: start; }
  .destination .metrique { white-space: normal; font-size: .75rem; line-height: 1.45; }

  .rail li { flex: 1 1 100%; }
  .rail li + li { border-left: 0; border-top: 1px solid var(--pli); }

  .sommaire { flex-direction: column; }
  .sommaire a { border-right: 0; border-bottom: 1px solid var(--pli); }

  .boutons .bouton { flex: 1 1 100%; }
  .bande-appel .bloc { flex-direction: column; align-items: stretch; }
  .pied-grille { grid-template-columns: minmax(0, 1fr); }
  .pied-bas { flex-direction: column; align-items: flex-start; }

  .carte iframe { height: 300px; }

  /* Barre d'action fixe : appeler / devis, à portée de pouce */
  .rail-mobile {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
    background: var(--encre);
    border-top: 1px solid rgba(251, 250, 247, .2);
  }
  .rail-mobile a {
    display: flex; align-items: center; justify-content: center; gap: var(--s2);
    min-height: 56px;
    font-size: .9375rem; font-weight: 600; color: var(--feuille);
  }
  .rail-mobile a + a { border-left: 1px solid rgba(251, 250, 247, .2); }
  .rail-mobile a:first-child { background: var(--accent); color: var(--sur-accent); }
  .rail-mobile svg { width: 18px; height: 18px; fill: currentColor; }
  body { padding-bottom: 56px; }
  .whatsapp-flottant { bottom: calc(56px + var(--s4)); right: var(--s4); }
}

@media print {
  .barre, .whatsapp-flottant, .rail-mobile, .bascule, .voile-nav, .lien-evitement { display: none !important; }
  body { background: #fff; color: #000; }
  .section--verte, .bande-appel, .pied { background: #fff !important; color: #000 !important; }
  .carrefour::before, .entete-page::before { display: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}