/* Be Mobility : feuille unique du site.
   Couleurs : un composant nomme un ROLE (--c-*), jamais une teinte de marque.
   Mise en page : toute zone dont la taille peut changer apres le premier rendu
   (en-tete repliable par DZNav, etapes du formulaire) reserve sa taille finale
   des le premier rendu (voir commentaires sur place). */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700.woff2") format("woff2"); }

:root {
  /* Marque (relevee sur le site actuel) */
  --marque-bleu: #18417f;
  --marque-bleu-nuit: #0f2b56;
  --marque-vert: #239e3b;
  --marque-vert-fonce: #1b7d2f; /* blanc dessus : contraste 5,0 (le vert de marque seul : 3,4) */
  --marque-vert-vif: #39b54a;
  --marque-menthe: #e7f0e9;

  /* Roles */
  --c-fond: #ffffff;
  --c-fond-alt: var(--marque-menthe);
  --c-surface: #ffffff;
  --c-surface-sombre: var(--marque-bleu);
  --c-texte: #172235;
  --c-texte-doux: #4b5869;
  --c-texte-sur-sombre: #ffffff;
  --c-titre: var(--marque-bleu);
  --c-accent: var(--marque-vert-fonce);
  --c-accent-survol: #156526;
  --c-accent-texte: #ffffff;
  --c-accent-clair: var(--marque-vert-vif);
  --c-lien: var(--marque-bleu);
  --c-refus: #c62828;
  --c-bord: #dbe3ec;
  --c-ombre: 0 1px 2px rgb(15 43 86 / .06), 0 8px 24px rgb(15 43 86 / .08);

  --rayon: 14px;
  --rayon-petit: 8px;
  --h-entete: 76px;
  --cadre: 1200px;
  --marge: clamp(1rem, 4vw, 2rem); /* marge laterale du cadre, reprise par les pistes qui debordent jusqu'au bord */
  --police: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* DZNav : ses valeurs par defaut sont posees SUR .dznav / .dznav-top (pas :root),
   donc un reglage herite de :root est ecrase (panneau transparent, bouton
   « Revenir en haut » blanc sur blanc). :root en tete = specificite superieure. */
:root .dznav, :root .dznav__brand, :root .dznav-top, :root .dznav-progress {
  --dznav-accent: var(--c-accent);
  --dznav-text: var(--c-texte);
  --dznav-text-muted: var(--c-texte-doux);
  --dznav-border: var(--c-bord);
  --dznav-radius: var(--rayon-petit);
  --dznav-font: var(--police);
  --dznav-z: 60;
}
/* Fond pour le panneau vertical seulement : la barre horizontale garde celui de l'en-tete (translucide). */
:root .dznav--vertical { --dznav-bg: var(--c-surface); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--h-entete) + 1rem); }
body {
  margin: 0;
  font-family: var(--police);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--c-texte);
  background: var(--c-fond);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-lien); }
h1, h2, h3 { color: var(--c-titre); line-height: 1.2; margin: 0 0 .6em; font-weight: 700; }
/* Terme en svh : sur un ecran peu haut (portable 125 %, zoom), le titre retrecit pour que la
   premiere section tienne sans defiler (tests/test_premier_ecran.py). */
h1 { font-size: clamp(1.6rem, min(1.1rem + 2.4vw, .6rem + 3.6svh), 2.9rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.3vw, 2.1rem); }
h3 { font-size: 1.12rem; font-weight: 600; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; }

.lien-evitement { position: absolute; left: -999px; top: .5rem; z-index: 100; background: var(--c-surface); padding: .5rem 1rem; }
.lien-evitement:focus { left: .5rem; }
:focus-visible { outline: 3px solid var(--c-accent-clair); outline-offset: 2px; }

.cadre { max-width: var(--cadre); margin-inline: auto; padding-inline: var(--marge); }
.etroit { max-width: 820px; }
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section-menthe { background: var(--c-fond-alt); }
.section-bleue { background: var(--c-surface-sombre); color: var(--c-texte-sur-sombre); }
.section-bleue h2, .section-bleue h3 { color: var(--c-texte-sur-sombre); }
.surtitre {
  font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-accent); margin-bottom: .6rem;
}
.section-bleue .surtitre { color: var(--c-accent-clair); }
.chapo { font-size: 1.1rem; color: var(--c-texte-doux); }
.section-appel { text-align: center; background: var(--c-fond-alt); }
.section-appel .actions { justify-content: center; }

/* ---------- Boutons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.5rem; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .6rem 1.3rem; border-radius: 999px; border: 2px solid transparent;
  font: 600 .95rem/1.2 var(--police); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s;
}
/* Libelles longs du client (« Demandez un devis personnalise... ») : a 390 px, nowrap debordait de l'ecran. */
.actions .bouton { white-space: normal; text-align: center; max-width: 100%; }
/* Bouton « Appeler » : pictogramme + numero insecable (jamais coupe au milieu). */
.tel-nb { white-space: nowrap; }
.bouton svg { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }
/* Telephone (< 800 px) : boutons choisis par DZ (2026-11-01) centres ; les autres restent a gauche. */
@media (max-width: 799px) { .actions-centre-mobile { justify-content: center; } }
.actions-colonne { flex-direction: column; align-items: flex-start; }
@media (max-width: 799px) { .actions-colonne { align-items: center; } }
.bouton-grand { min-height: 52px; padding-inline: 1.7rem; font-size: 1.02rem; }
.bouton-plein { background: var(--c-accent); color: var(--c-accent-texte); }
.bouton-plein:hover { background: var(--c-accent-survol); }
.bouton-contour { border-color: var(--c-titre); color: var(--c-titre); background: transparent; }
.bouton-contour:hover { background: var(--c-titre); color: var(--c-texte-sur-sombre); }
.bouton-clair { background: var(--c-surface); color: var(--c-titre); }
.bouton-clair:hover { background: var(--c-fond-alt); }
.lien-fleche { font-weight: 600; text-decoration: none; color: var(--c-accent); }
.lien-fleche::after { content: " \2192"; }
.lien-fleche:hover { text-decoration: underline; }

/* ---------- En-tete collant (se masque en descendant, revient au survol : DZNav entete) ----------
   Hauteur FIXE dans les deux orientations du menu : DZNav bascule
   horizontal/hamburger apres le premier rendu, la hauteur ne bouge pas, donc
   rien ne saute (CLS). Le panneau vertical est un calque (position fixed). */
.entete-site {
  position: sticky; top: 0; z-index: 50; height: var(--h-entete);
  background: rgb(255 255 255 / .94);
  border-bottom: 1px solid var(--c-bord);
}
.entete-cadre {
  height: 100%; max-width: var(--cadre); margin-inline: auto; padding-inline: clamp(.75rem, 3vw, 2rem);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem;
}
.entete-gauche { display: flex; align-items: center; gap: .5rem; justify-self: start; min-width: 0; }
.entete-droite { display: flex; align-items: center; gap: 1rem; justify-self: end; }
.marque-site { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--c-titre); font-weight: 700; font-size: 1.15rem; white-space: nowrap; }
.marque-site img { width: 44px; height: auto; }
.entete-site .marque-site img { width: auto; height: calc(var(--h-entete) - 1px - 1rem); }
.entete-nav { justify-self: center; min-width: 0; }
.entete-nav .dznav__list { list-style: none; gap: .25rem; flex-wrap: nowrap; }
.entete-nav .dznav__item a {
  display: block; padding: .5rem .8rem; border-radius: var(--rayon-petit);
  color: var(--c-texte); text-decoration: none; font-weight: 500; font-size: .95rem; white-space: nowrap;
}
.entete-nav .dznav__item a:hover { background: var(--c-fond-alt); }
.entete-nav .dznav__item a[aria-current="page"] { color: var(--c-accent); font-weight: 600; }
.dznav__toggle { gap: .35rem; }
/* Bouton menu : meme degrade que le logo (vert jaune en haut a gauche vers vert
   de marque). Le pictogramme est un masque SVG (aucune largeur de glyphe, donc ni
   ☰ ni ✕ ne bougent le logo) ; le texte reserve la largeur du plus long (« Fermer »). */
.dznav__toggle { --vert-logo: linear-gradient(135deg, #d4dc1c 0%, #7cc63a 40%, #239e3b 100%); }
.dznav__toggle-icone {
  font-size: 0; display: block; width: 1.6rem; height: 1.6rem; background: var(--vert-logo);
  -webkit-mask: var(--pico) center / contain no-repeat; mask: var(--pico) center / contain no-repeat;
  --pico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18M3 12h18M3 19h18' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.dznav__toggle[aria-expanded="true"] .dznav__toggle-icone {
  --pico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.dznav__toggle-texte {
  min-width: 3.7rem; text-align: left; font-weight: 600;
  background: var(--vert-logo); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.dznav__toggle:hover { filter: brightness(.85); }
.entete-tel { display: flex; align-items: center; gap: .4rem; color: var(--c-titre); font-weight: 600; text-decoration: none; white-space: nowrap; }
.entete-tel svg { width: 18px; height: 18px; fill: currentColor; }
.entete-droite .bouton { min-height: 42px; padding-inline: 1.1rem; }

/* Repli du menu en hamburger : regle generee dans inc/haut.php depuis BM_NAV_SEUIL
   (meme valeur que DZNav), pas ici. Sous 1320 px, le telephone passe en icone. */
@media (max-width: 1180px) {
  .entete-tel span { display: none; }
  .entete-tel { width: 42px; height: 42px; justify-content: center; border: 1px solid var(--c-bord); border-radius: 999px; }
}
/* Menu horizontal : colonnes laterales de meme largeur pour que le menu soit centre sur la page.
   Telephone au-dessus du bouton devis pour libérer la place (ce bloc doit suivre la regle .entete-droite). */
@media (min-width: 1181px) {
  .entete-cadre { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .entete-droite { flex-direction: column; align-items: stretch; gap: .3rem; }
  .entete-tel { justify-content: center; font-size: .9rem; }
  .entete-tel svg { width: 15px; height: 15px; }
  .entete-droite .bouton { min-height: 34px; padding-block: .3rem; padding-inline: 1rem; font-size: .88rem; }
}
@media (max-width: 640px) {
  :root { --h-entete: 64px; }
  .marque-site span, .dznav__toggle-texte { display: none; }
  .marque-pied img { width: 38px; }
  .entete-droite { gap: .6rem; }
  .entete-droite .bouton { font-size: .85rem; padding-inline: .9rem; }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(2rem, 6vw, 4.5rem); background: linear-gradient(180deg, var(--c-fond-alt) 0%, var(--c-fond) 100%); }
.hero-grille { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) {
  .hero-grille { grid-template-columns: 1.1fr .9fr; }
  /* Premiere section entiere a l'ecran : marges et photo suivent la hauteur visible
     (svh = zoom et mise a l'echelle Windows compris). La photo se recadre (object-fit). */
  .hero { --hero-pad: clamp(1.25rem, min(6vw, 5svh), 4.5rem); padding-block: var(--hero-pad); }
  .hero-photo img { max-height: calc(100svh - var(--h-entete) - 2 * var(--hero-pad)); }
  .hero .hero-photo-portrait img { max-height: min(640px, calc(100svh - var(--h-entete) - 2 * var(--hero-pad))); }
}
.hero-photo { margin: 0; }
.hero-photo img { width: 100%; aspect-ratio: 800 / 801; object-fit: cover; border-radius: calc(var(--rayon) * 1.5); box-shadow: var(--c-ombre); }
.hero-photo-portrait img { aspect-ratio: 4 / 5; max-height: 640px; }
/* Photo detouree (fond transparent) : ni recadrage ni coins arrondis, ombre portee qui suit la silhouette.
   Dans le hero, directement sur le fond de la page, sans panneau ; hauteur max = celle de la photo pleine. */
.fig-detouree { display: flex; justify-content: center; }
.fig-detouree img { width: auto; max-width: 100%; max-height: 600px; height: auto; aspect-ratio: auto; object-fit: contain; border-radius: 0; box-shadow: none; filter: drop-shadow(0 14px 16px rgb(15 43 86 / .28)); }
.section-bleue .fig-detouree img { filter: drop-shadow(0 14px 16px rgb(0 0 0 / .4)); }
.bandeau-photo.fig-detouree img { width: 100%; max-height: none; }
.hero .hero-photo-detouree { display: flex; justify-content: center; }
.hero .hero-photo-detouree img { width: auto; max-width: 100%; height: auto; aspect-ratio: auto; max-height: 460px; object-fit: contain; border-radius: 0; box-shadow: none; filter: drop-shadow(0 14px 14px rgb(15 43 86 / .3)); }
@media (min-width: 900px) { .hero .hero-photo-detouree img { max-height: min(610px, calc(100svh - var(--h-entete) - 2 * var(--hero-pad) - 1.6rem)); } }
/* Une colonne (tablette, telephone) : photo en bandeau 16:9, le carre poussait le premier contenu a ~1100 px. */
@media (max-width: 899px) { .hero-photo:not(.hero-photo-portrait) img { aspect-ratio: 16 / 9; } }
/* Telephone : les deux boutons cote a cote, numero masque (aria-label le garde, l'en-tete a deja l'icone telephone). */
@media (max-width: 559px) {
  .hero .actions { flex-wrap: wrap; } /* le numero B-Mobile est insecable : sous ~370 px les boutons passent l'un sous l'autre au lieu de deborder */
  .hero .actions .bouton { flex: 1 1 0; padding-inline: .8rem; }
  .tel-complet { display: none; }
}

/* ---------- Rangees homogenes : centrees, lignes equilibrees ----------
   4 elements : 4 / 2+2 / 1 par ligne, jamais 3+1. */
.rangee { list-style: none; display: grid; gap: 1.25rem; margin-top: 2rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .rangee-4, .rangee-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .rangee-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 760px) { .rangee-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Telephone : une rangee de cartes devient une piste horizontale (DZ valide le carrousel
   lateral sur telephone et rejette « une colonne », cf. dzitstrategy.fr). CSS seul : le
   defilement au doigt est celui du navigateur, sans JS, donc sans clic parasite apres un
   glisser. La carte suivante depasse du bord : on voit qu'il y a une suite. */
@media (max-width: 559px) {
  .rangee-piste {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(78vw, 20rem); gap: .9rem;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin;
    margin-inline: calc(-1 * var(--marge)); padding: 0 var(--marge) .75rem; scroll-padding-inline: var(--marge);
  }
  .rangee-piste > li { scroll-snap-align: start; }
}
/* Indice de suite : les cartes glissent un peu vers la gauche quand la piste entre ou sort
   de l'ecran, et sont alignees tant qu'elle est entierement visible (zone de lecture).
   Pilote par le defilement de la page (scroll-driven animation) : symetrique, qu'on monte
   ou qu'on descende, calcule hors du fil JS donc sans freiner le defilement. `translate`
   (pas transform) ne touche ni a la mise en page (pas de CLS) ni a scrollLeft (calage
   intact). Des que l'utilisateur fait glisser la piste, site.js pose .piste-libre : plus
   d'animation. Navigateur sans cette fonction : cartes immobiles, la carte suivante
   depasse toujours du bord. */
@media (max-width: 559px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rangee-piste { view-timeline: --piste block; }
    .rangee-piste > li { animation: piste-indice linear both; animation-timeline: --piste; }
    .rangee-piste.piste-libre > li { animation: none; }
  }
}
@keyframes piste-indice {
  entry 0%   { translate: -25% 0; }
  entry 100% { translate: 0 0; }
  exit 0%    { translate: 0 0; }
  exit 100%  { translate: -25% 0; }
}

.carte { background: var(--c-surface); border: 1px solid var(--c-bord); border-radius: var(--rayon); overflow: hidden; }
/* Carte avec lien : toute la carte est cliquable (le lien s'etend sur la carte via ::before). */
.carte:has(.lien-fleche) { position: relative; transition: border-color .15s, box-shadow .15s; }
.carte .lien-fleche::before { content: ""; position: absolute; inset: 0; }
.carte:has(.lien-fleche):hover { border-color: var(--c-accent-clair); box-shadow: var(--c-ombre); }
.carte:has(.lien-fleche:focus-visible) { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.carte-image { display: flex; flex-direction: column; }
.carte-image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.carte-image img[src*="borne-mobile-eiffage-vue-complete"], .bandeau-photo img[src*="borne-mobile-eiffage-parking"] { object-position: center 28%; }
.carte-corps { padding: 1.2rem 1.25rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.carte-corps p { color: var(--c-texte-doux); font-size: .95rem; flex: 1; }
.carte-produit { padding: 1.25rem; text-align: center; display: flex; flex-direction: column; align-items: center; }
.carte-produit img { width: 100%; max-width: 220px; aspect-ratio: 1; object-fit: contain; margin-bottom: 1rem; }
.carte-produit p { color: var(--c-texte-doux); font-size: .92rem; }
.carte-vedette { border: 2px solid var(--c-accent-clair); background: var(--c-fond-alt); padding-top: 2.4rem; }
/* Borne mobile de l'accueil : grossit au survol (comme bemobility.fr, scale 1.1 en .3 s) et suit le curseur avec
   de l'inertie (variables --souris-x/y posees par site.js). Deux proprietes distinctes (scale / transform) : le zoom a sa
   transition, le suivi du curseur n'en a pas (lisse en amont par le JS). Ni l'un ni l'autre sans souris ni si l'on reduit les animations. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .carte-vedette img {
    transition: scale .3s ease;
    transform: translate(calc(var(--souris-x, 0) * 9px), calc(var(--souris-y, 0) * 6px)) rotate(calc(var(--souris-x, 0) * 2.5deg));
  }
  .carte-vedette:hover img { scale: 1.1; }
}
/* Telephone : la B-Mobile ouvre la piste de la gamme (premiere carte visible). */
@media (max-width: 559px) {
  .gamme > .carte-vedette { order: -1; }
}
/* Flottement lie au defilement vertical (bureau ET telephone) : la borne monte quand on descend dans la page et
   s'incline, comme en apesanteur. --flotte (-1 a 1) est pose par site.js. Pas de view() en CSS : sur telephone la
   piste horizontale est le conteneur defilant le plus proche, la timeline suivrait le glisser lateral, pas la page.
   `translate`/`rotate` (pas transform) : composent avec le suivi du curseur et le zoom, sans CLS. */
@media (prefers-reduced-motion: no-preference) {
  .carte-vedette img { translate: 0 calc(var(--flotte, 0) * 36px); rotate: calc(var(--flotte, 0) * -5deg); }
}

.points li { background: var(--c-surface); border-radius: var(--rayon); padding: 1.4rem; display: flex; flex-direction: column; gap: .4rem; }
/* Sur fond blanc (accueil), le bloc a besoin d'un filet comme .carte ; sur menthe il se detache seul. */
.section:not(.section-menthe) .points li { border: 1px solid var(--c-bord); }
.points strong { color: var(--c-titre); font-size: 1.05rem; }
.points span { color: var(--c-texte-doux); font-size: .93rem; }
/* Telephone : garanties en 2 x 2 compact (textes courts, tout reste visible). */
@media (max-width: 559px) {
  .points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .points li { padding: 1rem .9rem; }
  .points strong { font-size: .95rem; line-height: 1.3; }
  .points span { font-size: .84rem; line-height: 1.5; }
  /* 3 garanties : piste (2 x 2 laisserait une orpheline) */
  .points.rangee-piste { grid-template-columns: none; gap: .9rem; }
  .points.rangee-piste li { padding: 1.2rem 1.1rem; }
}

/* ---------- Bandeau photo + texte ---------- */
.bandeau-grille { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .bandeau-grille { grid-template-columns: 1fr 1fr; } }
.bandeau-photo { margin: 0; }
.bandeau-photo img { width: 100%; aspect-ratio: 800 / 558; object-fit: cover; border-radius: var(--rayon); }
/* Visuel portrait detoure a cote d'un texte : la hauteur de la section vient du TEXTE, l'image s'y adapte
   (cellule etiree, image hors flux), jamais l'inverse. En une colonne : hauteur bornee, dans le flux. */
figure.fig-adapte.fig-detouree img { width: auto; max-width: 100%; max-height: 420px; }
@media (min-width: 900px) {
  figure.fig-adapte { position: relative; align-self: stretch; min-height: 0; }
  figure.fig-adapte.fig-detouree img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: contain; }
}
/* Visuel coupe net a gauche et en bas (rangee de bornes) : pose dans le coin bas gauche de la SECTION,
   bords coupes contre les bords. Hauteur = celle de la section (dictee par le texte), largeur bornee par
   --coin ; le texte est centre dans l'espace restant a droite (jamais sous l'image : il commence apres --coin). */
.section:has(figure.fig-coin) { --coin: clamp(22rem, 28vw, 30rem); position: relative; overflow: hidden; padding-bottom: 0; }
figure.fig-coin { order: 1; justify-content: flex-start; margin: 0 0 0 calc(-1 * var(--marge)); }
figure.fig-coin.fig-detouree img { width: auto; max-width: 100%; max-height: 420px; aspect-ratio: auto; object-fit: contain; object-position: left bottom; }
@media (min-width: 900px) {
  .section:has(figure.fig-coin) { padding-bottom: clamp(3rem, 7vw, 5.5rem); }
  /* Image dans le flux (colonne auto, ratio 2/3 : sa largeur visible est CONNUE) : le texte se centre dans
     le fond bleu restant (colonne 1fr), pas dans une largeur estimee. Hauteur image <= celle du texte. */
  .bandeau-grille:has(> figure.fig-coin) { grid-template-columns: auto 1fr; column-gap: var(--marge); max-width: none; margin-inline: 0; padding-inline: 0 var(--marge); align-items: center; }
  .bandeau-grille > figure.fig-coin { order: -1; position: static; align-self: end; width: clamp(16rem, 23vw, 23rem); aspect-ratio: 2 / 3; margin: calc(1.5rem - clamp(3rem, 7vw, 5.5rem)) 0 calc(-1 * clamp(3rem, 7vw, 5.5rem)); }
  .bandeau-grille:has(> figure.fig-coin) > .bandeau-texte { justify-self: center; max-width: 44rem; }
  figure.fig-coin.fig-detouree img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
}
/* En une colonne (modele DZ 2026-11-02) : les actions vont dans le FOND BLEU libre a droite du visuel
   (plaquette puis bouton), jamais sur les bornes : le visuel est borne a la largeur restante (--col-actions). */
@media (max-width: 899px) {
  .section:has(figure.fig-coin) { --col-actions: 8.5rem; }
  /* min-height : la zone du visuel est au moins aussi haute que la colonne d'actions (sinon elle remonte sur le texte). */
  figure.fig-coin { min-height: 15rem; align-items: flex-end; }
  figure.fig-coin.fig-detouree img { max-width: min(100%, calc(100vw - var(--marge) - var(--col-actions) - .75rem)); }
  .section:has(figure.fig-coin) .bandeau-texte .actions { position: absolute; z-index: 1; right: var(--marge); bottom: 1.5rem; width: var(--col-actions); flex-direction: column; align-items: stretch; gap: 1.25rem; margin: 0; }
  .section:has(figure.fig-coin) .actions .plaquette { order: -1; flex-direction: column; align-items: center; text-align: center; gap: .4rem; font-size: .9rem; line-height: 1.3; }
  .section:has(figure.fig-coin) .actions .plaquette img { width: 84px; }
  .section:has(figure.fig-coin) .actions .bouton { padding-inline: .7rem; font-size: .85rem; }
}
@media (min-width: 560px) and (max-width: 899px) { .section:has(figure.fig-coin) { --col-actions: 16rem; } }
/* Meme idee, BORD DROIT (visuel coupe a droite seulement : bornes grises + SUV). Image centree en hauteur
   contre le bord droit de la section, texte centre dans l'espace libre a gauche. En une colonne : sous le
   texte, collee au bord droit. */
.section:has(figure.fig-bord-d) { --coin: clamp(22rem, 34vw, 36rem); position: relative; overflow: hidden; }
.deux-colonnes figure.fig-bord-d { justify-content: flex-end; margin-right: calc(-1 * var(--marge)); }
.deux-colonnes figure.fig-bord-d img { width: 100%; max-width: 30rem; height: auto; aspect-ratio: auto; border-radius: 0; object-fit: contain; }
@media (min-width: 900px) {
  .deux-colonnes:has(> figure.fig-bord-d) { grid-template-columns: 1fr; max-width: none; padding-right: calc(var(--coin) + var(--marge)); }
  .deux-colonnes:has(> figure.fig-bord-d) > div { justify-self: center; max-width: 44rem; }
  .deux-colonnes > figure.fig-bord-d { position: absolute; right: 0; top: 1.5rem; bottom: 1.5rem; width: var(--coin); margin: 0; }
  .deux-colonnes figure.fig-bord-d img { height: 100%; max-width: none; object-fit: contain; object-position: right center; }
}
/* Visuel coupe a GAUCHE et a DROITE, livre en 2 morceaux de meme hauteur source (tools/visuels_ia.py) :
   le petit contre le bord gauche, le grand contre le bord droit, le texte centre entre les deux.
   Hauteur commune = celle de la section, plafonnee pour que le grand tienne dans --bd (meme echelle). */
.section:has(figure.fig-bords) { --bd: clamp(18rem, 30vw, 30rem); --bg: calc(var(--bd) * 210 / 888); position: relative; overflow: hidden; }
.deux-colonnes figure.fig-bords { display: flex; justify-content: space-between; align-items: center; height: min(70vw, 22rem); margin-inline: calc(-1 * var(--marge)); }
.deux-colonnes figure.fig-bords img { width: auto; height: 100%; max-width: none; max-height: none; aspect-ratio: auto; border-radius: 0; object-fit: contain; }
@media (min-width: 900px) {
  .deux-colonnes:has(> figure.fig-bords) { grid-template-columns: 1fr; max-width: none; padding-inline: calc(var(--bg) + 2 * var(--marge)) calc(var(--bd) + 2 * var(--marge)); }
  .deux-colonnes:has(> figure.fig-bords) > div { justify-self: center; max-width: 44rem; }
  .deux-colonnes > figure.fig-bords { position: absolute; inset: 1rem 0; height: auto; margin: 0; pointer-events: none; }
  .deux-colonnes figure.fig-bords img { height: min(100%, calc(var(--bd) * 1145 / 888)); }
}
.plaquette { display: flex; align-items: center; gap: .8rem; color: inherit; text-decoration: none; font-weight: 600; }
.plaquette img { width: 72px; aspect-ratio: 768 / 544; border-radius: 4px; box-shadow: 0 2px 10px rgb(0 0 0 / .3); }
.plaquette small { display: block; font-weight: 400; opacity: .8; font-size: .82rem; }
.plaquette:hover span { text-decoration: underline; }

/* ---------- Articles en modale (popover natif, sans JS) ---------- */
.carte-article {
  width: 100%; height: 100%; text-align: left; cursor: pointer; padding: 1.3rem 1.3rem 1.5rem;
  font: inherit; display: flex; flex-direction: column; gap: .35rem; transition: border-color .15s, box-shadow .15s;
}
.carte-article strong { color: var(--c-titre); font-size: 1.05rem; }
.carte-article span { color: var(--c-texte-doux); font-size: .9rem; }
.carte-article::after { content: "Lire \2192"; margin-top: auto; padding-top: .6rem; color: var(--c-accent); font-weight: 600; font-size: .9rem; }
.carte-article:hover { border-color: var(--c-accent-clair); box-shadow: var(--c-ombre); }
.article-modale {
  width: min(680px, calc(100vw - 2rem)); max-height: min(85vh, 900px); padding: 0;
  border: 0; border-radius: var(--rayon); box-shadow: 0 24px 64px rgb(15 43 86 / .35); color: var(--c-texte);
}
.article-modale::backdrop { background: rgb(15 43 86 / .55); backdrop-filter: blur(3px); }
.article-modale__entete {
  position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.4rem; background: var(--c-surface); border-bottom: 1px solid var(--c-bord);
}
.article-modale__entete h2 { margin: 0; font-size: 1.3rem; }
.article-modale__corps { padding: 1.3rem 1.4rem 1.6rem; }
.article-modale__corps h3 { margin-top: 1.2rem; }
.fermer { flex: none; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--c-bord); background: var(--c-surface); font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--c-texte); }
.fermer:hover { background: var(--c-fond-alt); }

/* ---------- Contenu redactionnel (pages B-Mobile, ressources, entreprise) ---------- */
.texte-long h2 { margin-top: 0; }
.texte-long * + h2 { margin-top: clamp(2rem, 5vw, 3rem); }
/* Nom de marque jamais coupe a son tiret (« B-|Mobile » dans les titres) */
.insecable { white-space: nowrap; }
.texte-long ul:not(.rangee) { padding-left: 1.2rem; margin-bottom: 1em; }
.texte-long li { margin-bottom: .35em; }
.liste-coches { list-style: none; padding: 0 !important; }
.liste-coches li { position: relative; padding-left: 1.8rem; }
.liste-coches li::before { content: ""; position: absolute; left: 0; top: .45em; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--c-accent-clair) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 11.2 3.3 8l1-1 2.2 2.2 5.2-5.2 1 1z' fill='%23fff'/%3E%3C/svg%3E") center / 80% no-repeat; }
.deux-colonnes { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .deux-colonnes { grid-template-columns: 1fr 1fr; } }
.deux-colonnes figure { margin: 0; }
.deux-colonnes figure img { width: 100%; aspect-ratio: 4 / 5; max-height: 560px; border-radius: var(--rayon); object-fit: cover; }
/* Poignee de main : les visages sont en haut de la photo, le recadrage centre les rognait. */
.deux-colonnes figure img[src*="equipe-be-mobility-partenariat"] { object-position: center top; }
.actions-centre { justify-content: center; }
.fiche { margin-top: 1rem; }
.fiche summary { cursor: pointer; font-weight: 600; color: var(--c-lien); }
.fiche table { margin-top: .8rem; }
.fiche-technique { width: 100%; border-collapse: collapse; font-size: .95rem; }
.fiche-technique th, .fiche-technique td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--c-bord); vertical-align: top; }
.fiche-technique th { color: var(--c-titre); font-weight: 600; width: 45%; }
.faq details { border: 1px solid var(--c-bord); border-radius: var(--rayon-petit); background: var(--c-surface); margin-bottom: .75rem; }
.faq summary { cursor: pointer; padding: 1rem 1.2rem; font-weight: 600; color: var(--c-titre); list-style-position: inside; }
.faq details > :not(summary) { padding: 0 1.2rem 1rem; margin: 0; }
.galerie { list-style: none; display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2rem; }
@media (min-width: 900px) { .galerie { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.galerie img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--rayon-petit); }
.etapes { list-style: none; padding: 0; counter-reset: etape; display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 760px) { .etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.etapes li { counter-increment: etape; background: var(--c-surface); border: 1px solid var(--c-bord); border-radius: var(--rayon); padding: 1.2rem 1.2rem 1.2rem 3.6rem; position: relative; }
.etapes li::before { content: counter(etape); position: absolute; left: 1.1rem; top: 1.1rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--c-surface-sombre); color: var(--c-texte-sur-sombre); display: grid; place-items: center; font-weight: 700; font-size: .9rem; }
.encadre { background: var(--c-fond-alt); border-left: 4px solid var(--c-accent-clair); border-radius: var(--rayon-petit); padding: 1rem 1.2rem; margin: 1.2rem 0; }
.maj { font-size: .88rem; color: var(--c-texte-doux); }

/* ---------- Devis ---------- */
.devis-grille { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 960px) { .devis-grille { grid-template-columns: .85fr 1.15fr; } .devis-intro { position: sticky; top: calc(var(--h-entete) + 2rem); transition: top .28s ease; } }
/* En-tete masque (classe posee par DZNav) : plus de bande vide au-dessus de la colonne collante ;
   quand il revient, la colonne redescend avec lui (meme duree), rien n'est recouvert. */
@media (min-width: 960px) { body:has(.entete-site.dznav-entete--cachee) .devis-intro { top: 2rem; } }
.devis-intro .liste-coches { margin: 1.2rem 0; }
.devis-tel a { font-weight: 600; white-space: nowrap; }
/* Une colonne : le formulaire remonte juste sous le titre et le chapo (premiere carte visible sans
   defiler) ; les coches et le lien telephone passent dessous (l'en-tete garde l'icone telephone). */
@media (max-width: 959px) {
  .devis-intro { display: contents; }
  .devis-grille { row-gap: 0; }
  .devis-intro .liste-coches, .devis-tel { order: 1; }
  .form-devis { margin: .5rem 0 1rem; }
}
.form-devis { padding: clamp(1.2rem, 3vw, 2rem); box-shadow: var(--c-ombre); overflow: visible; }
.alerte { background: #fdecec; border-left: 4px solid #b42318; color: #7a1a12; border-radius: var(--rayon-petit); padding: .8rem 1rem; margin-bottom: 1.2rem; }
.alerte a { color: inherit; font-weight: 600; }
.progression { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; margin-bottom: 1.5rem; counter-reset: puce; }
.progression li { counter-increment: puce; display: flex; flex-direction: column; align-items: center; gap: .35rem; font-size: .78rem; color: var(--c-texte-doux); text-align: center; }
.progression li::before {
  content: counter(puce); width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: .9rem; background: var(--c-fond-alt); color: var(--c-titre); transition: background-color .2s, color .2s;
}
.progression li.est-faite::before { content: "\2713"; background: var(--c-accent-clair); color: #fff; }
.progression li.est-active { color: var(--c-titre); font-weight: 600; }
.progression li.est-active::before { background: var(--c-surface-sombre); color: var(--c-texte-sur-sombre); }
/* Telephone : numeros seuls, libelles gardes pour les lecteurs d'ecran. */
@media (max-width: 480px) { .progression li span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
.etape { border: 0; margin: 0 0 1.5rem; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.etape legend { padding: 0; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 700; color: var(--c-titre); line-height: 1.3; }
.etape legend:focus { outline: none; }
.choix-cartes { display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 520px) { .choix-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choix { position: relative; display: flex; }
.choix input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choix span {
  flex: 1; display: flex; align-items: center; gap: .7rem; min-height: 56px; padding: .7rem 1rem;
  border: 2px solid var(--c-bord); border-radius: var(--rayon-petit); background: var(--c-surface);
  font-weight: 500; line-height: 1.3; transition: border-color .15s, background-color .15s;
}
.choix span::before { content: ""; flex: none; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid var(--c-bord); background: var(--c-surface); box-shadow: inset 0 0 0 3px var(--c-surface); }
.choix:hover span { border-color: var(--c-accent-clair); }
.choix input:checked + span { border-color: var(--c-accent); background: var(--c-fond-alt); }
.choix input:checked + span::before { border-color: var(--c-accent); background: var(--c-accent); }
.choix input:focus-visible + span { outline: 3px solid var(--c-accent-clair); outline-offset: 2px; }
.champ { display: flex; flex-direction: column; gap: .35rem; }
.champ label { font-weight: 600; color: var(--c-titre); }
.champ .aide { font-weight: 400; color: var(--c-texte-doux); font-size: .88rem; }
.champ input {
  min-height: 48px; padding: .6rem .9rem; font: inherit; color: var(--c-texte);
  border: 2px solid var(--c-bord); border-radius: var(--rayon-petit); background: var(--c-surface);
}
.champ input:focus { border-color: var(--c-accent); outline: none; box-shadow: 0 0 0 3px rgb(57 181 74 / .25); }
.champ input[aria-invalid="true"] { border-color: #b42318; }
.erreur-champ { margin: 0; color: #b42318; font-size: .88rem; font-weight: 500; }
.leurre { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.etape-actions { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: auto; padding-top: .5rem; }
/* « Envoyer ma demande » en nowrap sortait de l'ecran de 24 px a 390 px (etape cachee mais mise en page). */
.etape-actions .bouton { white-space: normal; text-align: center; min-width: 0; }

/* Sans JS : etapes empilees, un formulaire classique (ni puces ni boutons d'etape).
   Avec JS (.js posee dans le <head>, avant la premiere peinture) : toutes les etapes
   dans la MEME cellule de grille, une seule visible. Le cadre prend la hauteur de la
   plus grande des le premier rendu : rien ne saute en changeant d'etape (CLS). */
html:not(.js) .progression, html:not(.js) [data-etape] { display: none; }
html:not(.js) .etape-actions { justify-content: flex-end; }
.js .form-etapes { display: grid; }
.js .etape { grid-area: 1 / 1; margin: 0; visibility: hidden; }
.js .etape.est-active { visibility: visible; }
.section-merci { min-height: 50vh; }

/* Textes PC / telephone (meme mise en page, textes plus courts sur mobile :
   demande client du 2026-02, fichiers PC-PG-BMOB-SEO et TEL-PG-BMOB-SEO). */
.version-tel { display: none; }
@media (max-width: 640px) {
  .version-pc { display: none; }
  .version-tel { display: revert; }
}

/* ---------- Pied de page ---------- */
.pied-site { background: linear-gradient(180deg, var(--c-fond) 0%, var(--c-fond-alt) 30%); color: var(--c-texte); font-size: .93rem; position: relative; }
/* Filet du haut (separe le pied de la section precedente) : 75 % de la largeur, centre, 25 % transparent. */
.pied-site::before { content: ""; position: absolute; top: 0; left: 12.5%; width: 75%; height: 1px; background: color-mix(in srgb, var(--c-bord) 75%, transparent); }
/* Derniere section coloree : le pied prend sa couleur puis s'eclaircit (sens inverse du pied standard blanc vers menthe). */
main:has(> section.section-menthe:last-of-type, > section.section-appel:last-of-type) + .pied-site { background: linear-gradient(180deg, var(--c-fond-alt) 70%, var(--c-fond) 100%); }
/* Derniere section bleue : pied bleu en haut qui s'eclaircit jusqu'au blanc en bas de .pied-bas.
   Hauteur et ecarts IDENTIQUES au pied standard (DZ 2026-11-01 : coherence globale, l'ancienne marge
   basse de 10,5 rem est rejetee) : seul le degrade change. En haut, bleu plein = section precedente.
   Fondu sur les 8 derniers rem de .pied-haut (depart doux, 100 -> 35 %), puis continue dans .pied-bas
   (35 % -> blanc), sur toute la largeur de l'ecran (pseudo-element, .pied-bas est limite a --cadre).
   Contraste mesure : derniere ligne blanche a 3,6 rem du bas de .pied-haut (ordinateur, 6,2 au
   telephone), fond >= 72 % de bleu a cet endroit (seuil 4,5:1 du blanc) ; texte gris de .pied-bas
   sur <= 25 % de bleu (>= 4,6:1). */
main:has(> section.section-bleue:last-of-type) + .pied-site { background: var(--c-fond); overflow-x: clip; }
main:has(> section.section-bleue:last-of-type) + .pied-site::before { background: rgb(255 255 255 / .25); }
main:has(> section.section-bleue:last-of-type) + .pied-site .pied-haut { color: var(--c-texte-sur-sombre); background: linear-gradient(180deg, var(--c-surface-sombre) 0, var(--c-surface-sombre) calc(100% - 8rem), color-mix(in srgb, var(--c-surface-sombre) 98.2%, var(--c-fond)) calc(100% - 7rem), color-mix(in srgb, var(--c-surface-sombre) 93.4%, var(--c-fond)) calc(100% - 6rem), color-mix(in srgb, var(--c-surface-sombre) 86.1%, var(--c-fond)) calc(100% - 5rem), color-mix(in srgb, var(--c-surface-sombre) 77%, var(--c-fond)) calc(100% - 4rem), color-mix(in srgb, var(--c-surface-sombre) 66.7%, var(--c-fond)) calc(100% - 3rem), color-mix(in srgb, var(--c-surface-sombre) 55.9%, var(--c-fond)) calc(100% - 2rem), color-mix(in srgb, var(--c-surface-sombre) 45.1%, var(--c-fond)) calc(100% - 1rem), color-mix(in srgb, var(--c-surface-sombre) 35%, var(--c-fond)) 100%); }
main:has(> section.section-bleue:last-of-type) + .pied-site .pied-bas { position: relative; isolation: isolate; }
main:has(> section.section-bleue:last-of-type) + .pied-site .pied-bas::before { content: ""; position: absolute; inset: -1px calc(50% - 50vw) 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--c-surface-sombre) 35%, var(--c-fond)), var(--c-fond)); }
main:has(> section.section-bleue:last-of-type) + .pied-site .pied-cadre :is(a, h2) { color: var(--c-texte-sur-sombre); }
main:has(> section.section-bleue:last-of-type) + .pied-site .pied-reseaux a { background: var(--c-accent); }
main:has(> section.section-bleue:last-of-type) + .pied-site .pied-reseaux a:hover { background: var(--c-accent-survol); }
.pied-site a { color: var(--c-lien); text-decoration: none; }
.pied-site a:hover { text-decoration: underline; }
.pied-cadre { max-width: var(--cadre); margin-inline: auto; padding: 3.5rem clamp(1rem, 4vw, 2rem) 2rem; display: grid; gap: 2.5rem; }
@media (min-width: 800px) { .pied-cadre { grid-template-columns: 1.6fr 1fr 1fr; } }
.pied-site h2 { color: var(--c-titre); font-size: 1rem; margin-bottom: 1rem; }
.pied-site ul { list-style: none; }
.pied-colonne li { margin-bottom: .55rem; }
.marque-pied { color: var(--c-titre); }
/* Logo a gauche du texte, centre sur lui. Large ecran : il deborde dans la marge (colonne de 0), le texte garde son alignement. */
.pied-marque { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center; }
.pied-marque > p { margin: 0; }
.pied-marque > .pied-labels { grid-column: 2; }
@media (min-width: 1300px) {
  .pied-marque { grid-template-columns: 0 1fr; }
  .marque-pied { justify-self: end; width: max-content; }
}
/* Logos sans cadre : images transparentes, couleurs d'origine. */
.pied-labels { display: flex; gap: 1.4rem; align-items: center; margin-top: 1rem; }
.pied-labels img { height: 100px; width: auto; }
.pied-labels .label-advenir { height: 36px; }
.pied-labels .label-qualifelec { height: 92px; border-radius: .3rem; }
/* Pied bleu : le logo Qualifelec (encres bleues) se pose sur un fond blanc arrondi. */
main:has(> section.section-bleue:last-of-type) + .pied-site .label-qualifelec { background: #fff; border-radius: .3rem; }
.pied-contact address { font-style: normal; }
/* Rue sur une seule ligne des que la largeur le permet (sous 380 px elle repasse a la ligne). */
@media (min-width: 380px) { .adresse-rue { white-space: nowrap; } }
@media (min-width: 800px) { .pied-cadre { grid-template-columns: 1.6fr 1fr auto; } }
.pied-reseaux { display: flex; gap: .6rem; margin-top: 1rem; }
.pied-reseaux a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--marque-bleu); }
.pied-reseaux a:hover { background: var(--c-accent); text-decoration: none; }
.pied-reseaux svg { width: 18px; height: 18px; fill: #fff; }
.pied-bas { border-top: 1px solid var(--c-bord); max-width: var(--cadre); margin-inline: auto; padding: 1.2rem clamp(1rem, 4vw, 2rem); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; font-size: .82rem; color: var(--c-texte-doux); }
.pied-bas p { margin: 0; }
/* Une colonne (< 800 px) : colonnes de liens, pastilles et mentions centrees ; bloc logo + texte et labels restent a gauche (DZ 2026-11-01). */
@media (max-width: 799px) {
  .pied-colonne { text-align: center; }
  .pied-reseaux { justify-content: center; }
  .pied-bas { justify-content: center; text-align: center; }
}

.section-404 { text-align: center; }
.section-404 .actions { justify-content: center; }

/* ---------- Ressources (guide IRVE) ---------- */
.sommaire { padding-block: 1rem 0; }
.sommaire ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.sommaire a { display: block; padding: .4rem .9rem; border: 1px solid var(--c-bord); border-radius: 999px; text-decoration: none; font-size: .9rem; font-weight: 500; }
.sommaire a:hover { background: var(--c-fond-alt); }
.deux-blocs { display: grid; gap: 1.5rem 2.5rem; margin-top: 1.5rem; }
@media (min-width: 760px) { .deux-blocs { grid-template-columns: 1fr 1fr; } }
.carte-aide { padding: 1.3rem 1.3rem 1.5rem; display: flex; flex-direction: column; }
.carte-aide p { color: var(--c-texte-doux); font-size: .93rem; flex: 1; }
.bouton-contour-clair { border-color: var(--c-texte-sur-sombre); color: var(--c-texte-sur-sombre); background: transparent; }
.bouton-contour-clair:hover { background: var(--c-texte-sur-sombre); color: var(--c-titre); }
.section-bleue .lien-clair, .section-bleue .liste-coches { color: var(--c-texte-sur-sombre); }
.section-bleue .bandeau-grille { align-items: start; }

/* Mentions legales : couples libelle / valeur, une ligne par identifiant. */
.legal-liste { margin: 0 0 1.5rem; }
.legal-liste > div { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: .25rem 1rem; padding: .5rem 0; border-bottom: 1px solid var(--c-bord); }
.legal-liste dt { font-weight: 600; }
.legal-liste dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .legal-liste > div { grid-template-columns: 1fr; } }

/* Bandeau cookies : fixe en bas, donc hors du flux (aucun CLS). Refuser et Accepter
   ont le meme poids visuel. [hidden] doit gagner sur display:flex. */
.bandeau-cookies { position: fixed; inset: auto 0 0 0; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.5rem; padding: .9rem var(--marge, 1rem); background: var(--c-surface); border-top: 1px solid var(--c-bord); box-shadow: 0 -4px 16px rgba(23, 34, 53, .12); }
.bandeau-cookies[hidden] { display: none; }
.bandeau-cookies p { margin: 0; max-width: 60rem; font-size: .95rem; }
.bandeau-cookies-actions { display: flex; gap: .75rem; }
.bandeau-cookies [data-cookies="non"]:is(:hover, :focus-visible) { background: var(--c-refus); border-color: var(--c-refus); color: #fff; }
.bandeau-cookies [data-cookies="oui"]:is(:hover, :focus-visible) { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-texte); }
.lien-bouton { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }