/* Repris sans modification de docs/design/design-system/styles.css, à partir du bloc « Base » (variables : tokens.css, polices : polices.css). */
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--police-texte);
  font-size: var(--taille-base);
  font-weight: var(--graisse-texte);
  line-height: var(--interligne);
  color: var(--couleur-texte);
  background: var(--couleur-surface);
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--couleur-bleu); text-decoration-thickness: var(--epaisseur-bordure); text-underline-offset: 0.15em; }
a:hover { color: var(--couleur-bleu-fonce); }
:focus-visible { outline: 2px solid transparent; box-shadow: var(--anneau-focus); border-radius: var(--rayon-s); }
.sur-nuit :focus-visible, .heros :focus-visible, .pied :focus-visible { box-shadow: 0 0 0 3px var(--couleur-nuit), 0 0 0 6px var(--couleur-focus); }
h1, h2, h3, h4 { font-family: var(--police-titre); font-weight: var(--graisse-titre); line-height: var(--interligne-titre); letter-spacing: var(--interlettrage-titre); margin: 0 0 var(--espace-4); color: inherit; text-wrap: balance; }
h1 { font-size: var(--taille-titre-page); }
h2 { font-size: var(--taille-2xl); }
h3 { font-size: var(--taille-l); font-weight: var(--graisse-titre); letter-spacing: -0.01em; }
h4 { font-size: var(--taille-m); font-weight: var(--graisse-forte); font-family: var(--police-texte); }
p { margin: 0 0 var(--espace-4); max-width: var(--largeur-texte); }
ul { padding-left: 1.2em; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.a-fournir { background: var(--couleur-vert); color: var(--couleur-texte); font-family: var(--police-texte); font-weight: var(--graisse-forte); font-size: var(--taille-s); padding: 0 var(--espace-2); border-radius: var(--rayon-s); display: inline-block; letter-spacing: 0.02em; }

/* ---------- Mise en page ---------- */
.contenu { width: min(100% - 2 * var(--marge-page), var(--largeur-contenu)); margin-inline: auto; }
.section { padding-block: var(--espace-9); }
.section-dense { padding-block: var(--espace-7); }
.section-aeree { padding-block: var(--espace-10); }
.sur-nuit { background: var(--couleur-nuit); color: var(--couleur-texte-inverse); }
.sur-nuit a { color: var(--couleur-texte-inverse); }
.sur-nuit .texte-2 { color: var(--couleur-texte-muet-inverse); }
.sur-pale { background: var(--couleur-surface-pale); }
.sur-bleutee { background: var(--couleur-surface-bleutee); }
.texte-2 { color: var(--couleur-texte-2); }
.grille { display: grid; gap: var(--espace-5); }
.grille-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grille-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grille-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
@media (min-width: 900px) { .grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grille-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.entete-section { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--espace-4); margin-bottom: var(--espace-7); }
.entete-section > div:first-child { flex: 1 1 320px; min-width: 0; }
.entete-section > .bouton { flex: none; margin-left: auto; }
.entete-section > .texte-2 { flex: 0 1 auto; min-width: 0; max-width: 40ch; margin-left: auto; }
.entete-section h2 { margin-bottom: 0; max-width: 24ch; }
.entete-section p { margin: 0; }
@media (max-width: 767px) { .section { padding-block: var(--espace-8); } .section-aeree { padding-block: var(--espace-8); } .entete-section { margin-bottom: var(--espace-5); } }

/* Surtitre : étiquette en capitales qui encode une donnée (section, domaine, étape) */
.surtitre { display: inline-flex; align-items: center; gap: var(--espace-2); font-family: var(--police-texte); font-size: var(--taille-xs); font-weight: var(--graisse-forte); letter-spacing: var(--interlettrage-etiquette); text-transform: uppercase; color: var(--couleur-vert-texte); margin-bottom: var(--espace-3); }
.surtitre::before { content: ""; width: 1.5rem; height: var(--epaisseur-filet); background: var(--couleur-vert); }
.sur-nuit .surtitre, .heros .surtitre { color: var(--couleur-vert); }

/* ---------- Élément signature : le filet moléculaire ---------- */
.filet-moleculaire { width: 100%; height: 44px; color: var(--couleur-vert); overflow: visible; }
.filet-moleculaire path, .filet-moleculaire circle { stroke: currentColor; fill: none; stroke-width: var(--epaisseur-filet); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.filet-moleculaire circle.atome { fill: currentColor; stroke: none; }
.filet-moleculaire text { fill: currentColor; font-family: var(--police-titre); font-weight: var(--graisse-titre); font-size: 12px; letter-spacing: 0.04em; }
.filet-moleculaire.se-trace .trace { stroke-dasharray: 2600; stroke-dashoffset: 2600; animation: tracer var(--duree-longue) var(--courbe) forwards; animation-delay: calc(3 * var(--decalage-sequence)); }
@keyframes tracer { to { stroke-dashoffset: 0; } }

/* ---------- En-tête ---------- */
.entete { position: relative; z-index: 20; background: var(--couleur-surface); border-bottom: var(--epaisseur-bordure) solid var(--couleur-filet); }
/* En-tête flottant (accueil) : barre blanche arrondie posée sur la photo du héros, sans barre de contact */
.entete-flottante { position: absolute; top: 0; left: 0; right: 0; background: transparent; border-bottom: 0; padding-top: var(--espace-4); }
.entete-flottante .nav { background: var(--couleur-surface); border-radius: var(--rayon-m); box-shadow: var(--ombre-haute); padding-inline: var(--espace-5); }
.entete-flottante .mega-menu { left: max(var(--marge-page), calc((100% - var(--largeur-contenu)) / 2)); right: max(var(--marge-page), calc((100% - var(--largeur-contenu)) / 2)); top: calc(100% - var(--espace-2)); border-radius: 0 0 var(--rayon-m) var(--rayon-m); }
/* Pages intérieures : la même barre flottante que l'accueil, posée sur la bande nuit de la tête de page (.tete-page.sur-nuit se dégage de --hauteur-entete-flottante) */
.entete-flottante + main .tete-page.sur-nuit { padding-top: calc(var(--hauteur-entete-flottante) + var(--espace-6)); }
/* Barre nuit : variante disponible, plus utilisée par les maquettes (le client veut la barre blanche arrondie partout) */
.entete-nuit { background: var(--couleur-nuit); color: var(--couleur-texte-inverse); border-bottom: 1px solid var(--couleur-bleu-fonce); }
.entete-nuit .logo { background: var(--couleur-surface); border-radius: var(--rayon-s); padding: var(--espace-1) var(--espace-2); }
.entete-nuit .menu a { color: var(--couleur-texte-inverse); }
.entete-nuit .menu a:hover, .entete-nuit .menu a[aria-current="page"] { color: var(--couleur-vert); }
.entete-nuit .nav-icone, .entete-nuit .bouton-menu { color: var(--couleur-texte-inverse); }
.entete-nuit .nav-icone:hover { background: var(--couleur-bleu-fonce); color: var(--couleur-texte-inverse); }
.entete-nuit .bouton-menu { border-color: var(--couleur-texte-muet-inverse); }
.entete-nuit :focus-visible { box-shadow: 0 0 0 3px var(--couleur-nuit), 0 0 0 6px var(--couleur-focus); }
.entete-nuit .mega-menu :focus-visible { box-shadow: var(--anneau-focus); }
.entete-nuit + main .tete-page.sur-nuit { border-top: 1px solid var(--couleur-bleu-fonce); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-5); min-height: 76px; }
.logo { display: inline-flex; align-items: center; min-height: var(--cible-tactile); padding: var(--espace-1) 0; }
.logo img { height: 40px; width: auto; }
.logo-pied img { height: 48px; width: auto; }
.menu { display: flex; align-items: center; gap: var(--espace-1); list-style: none; margin: 0; padding: 0; }
.menu li { position: static; }
.menu a { display: inline-flex; align-items: center; min-height: var(--cible-tactile); padding: 0 var(--espace-3); font-weight: var(--graisse-moyenne); color: var(--couleur-texte); text-decoration: none; border-radius: var(--rayon-s); position: relative; }
.menu a:hover { color: var(--couleur-bleu); }
.menu a[aria-current="page"], .menu > li.current-menu-ancestor > a { color: var(--couleur-bleu); }
.menu a[aria-current="page"]::after, .menu > li.current-menu-ancestor > a::after { content: ""; position: absolute; left: var(--espace-3); right: var(--espace-3); bottom: 6px; height: var(--epaisseur-filet); background: var(--couleur-vert); }
.nav-actions { display: flex; align-items: center; gap: var(--espace-3); }
.entete .nav-icone { display: inline-flex; align-items: center; justify-content: center; width: var(--cible-tactile); height: var(--cible-tactile); color: var(--couleur-bleu); border-radius: var(--rayon-s); transition: background-color var(--duree-courte); }
.entete .nav-icone:hover { background: var(--couleur-surface-pale); color: var(--couleur-bleu-fonce); }
.entete .nav-icone svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bouton-menu { display: none; width: var(--cible-tactile); height: var(--cible-tactile); border: var(--epaisseur-bordure) solid var(--couleur-bordure); background: transparent; border-radius: var(--rayon-s); color: inherit; cursor: pointer; align-items: center; justify-content: center; }
.bouton-menu svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 899px) {
  .menu, .nav-actions .bouton { display: none; }
  .bouton-menu { display: inline-flex; }
  .nav { min-height: 64px; }
  .entete-flottante .nav { padding-inline: var(--espace-4); }
}
/* Menu replié ouvert (mobile) */
.menu-mobile { background: var(--couleur-nuit); color: var(--couleur-texte-inverse); padding: var(--espace-5) var(--marge-page) var(--espace-6); }
.menu-mobile ul { list-style: none; margin: 0 0 var(--espace-5); padding: 0; }
.menu-mobile a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 var(--espace-2); color: var(--couleur-texte-inverse); text-decoration: none; font-family: var(--police-titre); font-weight: var(--graisse-titre); font-size: var(--taille-l); border-bottom: 1px solid var(--couleur-bleu-fonce); }
.menu-mobile a[aria-current="page"] { color: var(--couleur-vert); }
/* Sous-rubriques (« À propos », ticket 026) : dépliées et indentées, plus petites que les rubriques */
.menu-mobile .sub-menu { margin: 0 0 0 var(--espace-4); }
.menu-mobile .sub-menu a { min-height: 48px; font-family: var(--police-texte); font-size: var(--taille-base); font-weight: var(--graisse-moyenne); }

/* ---------- Boutons ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: var(--espace-2); min-height: var(--cible-tactile); padding: 0 var(--espace-5); font-family: var(--police-texte); font-weight: var(--graisse-forte); font-size: var(--taille-base); line-height: 1.2; text-decoration: none; border-radius: var(--rayon-s); border: var(--epaisseur-bordure) solid transparent; cursor: pointer; transition: transform var(--duree-courte) var(--courbe), box-shadow var(--duree-courte) var(--courbe), background-color var(--duree-courte), color var(--duree-courte), border-color var(--duree-courte); }
.bouton:hover { transform: translateY(-2px); box-shadow: var(--ombre-douce); }
.bouton:active { transform: translateY(0); box-shadow: none; }
.bouton-primaire { background: var(--couleur-bleu); color: var(--couleur-texte-inverse); }
.bouton-primaire:hover { background: var(--couleur-bleu-fonce); color: var(--couleur-texte-inverse); }
.bouton-accent { background: var(--couleur-vert-fonce); color: var(--couleur-texte-inverse); }
.bouton-accent:hover { background: var(--couleur-vert-texte); color: var(--couleur-texte-inverse); }
.bouton-secondaire { background: transparent; color: var(--couleur-bleu); border-color: var(--couleur-bleu); }
.bouton-secondaire:hover { background: var(--couleur-surface-bleutee); color: var(--couleur-bleu-fonce); }
.sur-nuit .bouton-secondaire, .heros .bouton-secondaire { color: var(--couleur-texte-inverse); border-color: var(--couleur-texte-muet-inverse); }
.sur-nuit .bouton-secondaire:hover, .heros .bouton-secondaire:hover { background: var(--couleur-bleu-fonce); color: var(--couleur-texte-inverse); }
.bouton-discret { background: transparent; color: var(--couleur-bleu); padding-inline: var(--espace-2); }
.bouton-discret:hover { box-shadow: none; transform: none; text-decoration: underline; }
.bouton-large { min-height: 52px; padding-inline: var(--espace-6); font-size: var(--taille-m); }
.bouton-petit { min-height: var(--cible-tactile); font-size: var(--taille-s); padding-inline: var(--espace-4); }
.bouton[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.bouton svg { width: 1.1em; height: 1.1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.groupe-boutons { display: flex; flex-wrap: wrap; gap: var(--espace-3); }

/* ---------- Héros ---------- */
.heros { position: relative; background: var(--couleur-nuit); color: var(--couleur-texte-inverse); overflow: hidden; isolation: isolate; }
.heros-photo { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, var(--couleur-bleu-fonce), var(--couleur-nuit) 70%); }
.heros-photo img { width: 100%; height: 100%; object-fit: cover; }
.heros-voile { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--couleur-nuit) 0%, var(--couleur-voile-nuit) 55%, transparent 100%); }
.heros .contenu { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--espace-6); align-items: end; min-height: min(86vh, 820px); padding-block: var(--espace-8) 0; }
.heros-texte { padding-bottom: var(--espace-8); }
.heros h1 { font-size: var(--taille-heros); margin-bottom: var(--espace-5); text-wrap: balance; }
.heros h1 em { font-style: normal; color: var(--couleur-vert); }
.heros-accroche { font-size: var(--taille-m); color: var(--couleur-texte-muet-inverse); max-width: 52ch; margin-bottom: var(--espace-6); }
.heros-figure { position: relative; margin: 0; align-self: end; justify-self: center; width: min(100%, 440px); background: var(--couleur-surface-pale); border-radius: var(--rayon-l) var(--rayon-l) 0 0; padding: var(--espace-8) var(--espace-6) 0; box-shadow: var(--ombre-haute); }
.heros-figure img { width: 100%; height: auto; max-height: 560px; object-fit: contain; object-position: bottom; mix-blend-mode: multiply; }
.heros-a-fournir { position: absolute; top: var(--espace-3); left: var(--espace-3); right: var(--espace-3); z-index: 1; text-align: center; }
.heros-preuve { display: flex; flex-wrap: wrap; gap: var(--espace-6); margin-top: var(--espace-6); color: var(--couleur-texte-muet-inverse); font-size: var(--taille-s); }
.heros-preuve strong { display: block; font-family: var(--police-titre); font-size: var(--taille-xl); color: var(--couleur-texte-inverse); line-height: 1; }
@media (max-width: 899px) {
  .heros .contenu { grid-template-columns: 1fr; min-height: 0; gap: var(--espace-4); padding-block: var(--espace-7) 0; }
  .heros-texte { padding-bottom: var(--espace-2); }
  .heros-figure { width: min(70%, 300px); }
  .heros-voile { background: linear-gradient(180deg, var(--couleur-nuit) 0%, var(--couleur-voile-nuit) 100%); }
}
/* Héros plein : la photo (ou la vidéo) occupe toute la largeur, le contenu est posé dessus */
/* Ticket 051 : photo et vidéo en niveaux de gris sans fusion (la teinte bleue venait de luminosity), voile seulement sous le texte ; les chiffres ont leur plancher */
.heros-plein .heros-photo img, .heros-plein .heros-photo video { opacity: var(--opacite-photo-heros); filter: grayscale(1) contrast(1.1); }
.heros-plein .heros-voile { background: linear-gradient(90deg, var(--couleur-voile-nuit) 0%, var(--couleur-voile-nuit) 30%, var(--couleur-voile-heros) 48%, transparent 64%); }
/* Ticket 030 : textes allégés, hauteur du héros gardée (espace bas, plein écran sous 600 px) : la photo et le voile, en pourcentages, gardent le cadrage du ticket 018 */
.heros-plein .contenu { grid-template-columns: minmax(0, 1fr); align-items: center; min-height: min(78vh, 760px); padding-block: calc(var(--hauteur-entete-flottante) + var(--espace-7)) var(--espace-9); }
.heros-plein .heros-texte { padding-bottom: 0; max-width: 760px; }
/* Plancher : le CTA secondaire et les chiffres gardent un fond sombre sous leur texte, même sur une photo claire */
.heros-plein .bouton-secondaire { background: var(--couleur-plancher-heros); }
.heros-plein .heros-preuve > div { background: var(--couleur-plancher-heros); box-shadow: 0 0 0 var(--espace-2) var(--couleur-plancher-heros); border-radius: var(--rayon-s); }
.heros-plein .heros-a-fournir { position: absolute; top: calc(var(--hauteur-entete-flottante) + var(--espace-2)); right: var(--espace-4); left: auto; z-index: 1; }
@media (max-width: 899px) { .heros-plein .contenu { min-height: 0; padding-block: calc(var(--hauteur-entete-flottante) + var(--espace-9)) var(--espace-7); } .heros-plein .heros-a-fournir { top: calc(var(--hauteur-entete-flottante) + var(--espace-2)); left: var(--marge-page); right: var(--marge-page); text-align: center; } .heros-plein .heros-voile { background: linear-gradient(180deg, transparent 14%, var(--couleur-voile-nuit) 34%, var(--couleur-voile-nuit) 56%, transparent 76%); } }
@media (max-width: 599px) { .heros-plein .contenu { min-height: 100svh; align-items: start; } }

/* Séquence d'apparition du héros */
.apparait-sequence > * { animation: apparition var(--duree-moyenne) var(--courbe) both; }
.apparait-sequence > :nth-child(1) { animation-delay: 0ms; }
.apparait-sequence > :nth-child(2) { animation-delay: var(--decalage-sequence); }
.apparait-sequence > :nth-child(3) { animation-delay: calc(2 * var(--decalage-sequence)); }
.apparait-sequence > :nth-child(4) { animation-delay: calc(3 * var(--decalage-sequence)); }
.apparait-sequence > :nth-child(5) { animation-delay: calc(4 * var(--decalage-sequence)); }
.heros-figure.apparait-sequence-figure { animation: apparition var(--duree-longue) var(--courbe) both; animation-delay: var(--decalage-sequence); }
@keyframes apparition { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Révélation au défilement : .apparait posée par le script, .visible ajoutée par IntersectionObserver */
/* Translation seule (pas d’opacité) : un élément non encore révélé reste lisible, y compris sur une capture pleine page */
.apparait { transform: translateY(32px); transition: transform var(--duree-longue) var(--courbe); }
.apparait.visible { transform: none; }
.apparait:nth-child(2) { transition-delay: calc(1 * var(--decalage-sequence)); }
.apparait:nth-child(3) { transition-delay: calc(2 * var(--decalage-sequence)); }
.apparait:nth-child(4) { transition-delay: calc(3 * var(--decalage-sequence)); }

/* ---------- Cartes ---------- */
.carte-equipement { display: flex; flex-direction: column; background: var(--couleur-surface); border-radius: var(--rayon-m); overflow: hidden; box-shadow: var(--ombre-douce); text-decoration: none; color: inherit; transition: transform var(--duree-courte) var(--courbe), box-shadow var(--duree-courte) var(--courbe); height: 100%; }
.carte-equipement:hover { transform: translateY(-4px); box-shadow: var(--ombre-haute); color: inherit; }
.carte-photo { background: var(--couleur-surface-pale); aspect-ratio: 1; position: relative; overflow: hidden; }
.carte-photo img { position: absolute; inset: var(--espace-5); width: calc(100% - 2 * var(--espace-5)); height: calc(100% - 2 * var(--espace-5)); object-fit: contain; mix-blend-mode: multiply; transition: transform var(--duree-moyenne) var(--courbe); }
.carte-equipement:hover .carte-photo img { transform: scale(1.04); }
.carte-corps { padding: var(--espace-5); display: flex; flex-direction: column; gap: var(--espace-2); flex: 1; }
.carte-corps h3 { font-size: var(--taille-m); margin: 0; }
.carte-corps .marque { font-size: var(--taille-xs); font-weight: var(--graisse-forte); letter-spacing: var(--interlettrage-etiquette); text-transform: uppercase; color: var(--couleur-texte-2); }
.carte-pied { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--espace-3); padding-top: var(--espace-3); border-top: 1px solid var(--couleur-filet); font-size: var(--taille-s); color: var(--couleur-texte-2); }
.carte-pied .lien { color: var(--couleur-bleu); font-weight: var(--graisse-forte); display: inline-flex; align-items: center; min-height: var(--cible-tactile); }
/* Carte domaine : sur fond nuit, distinguée par la couleur et non par un filet */
.carte-domaine { display: flex; flex-direction: column; justify-content: space-between; gap: var(--espace-6); min-height: 190px; padding: var(--espace-5); background: var(--couleur-bleu-fonce); color: var(--couleur-texte-inverse); text-decoration: none; border-radius: var(--rayon-m); transition: transform var(--duree-courte) var(--courbe), background-color var(--duree-courte); }
.carte-domaine:hover { transform: translateY(-4px); background: var(--couleur-bleu); color: var(--couleur-texte-inverse); }
.carte-domaine .numero { font-family: var(--police-titre); font-weight: var(--graisse-titre); font-size: var(--taille-s); color: var(--couleur-vert); letter-spacing: var(--interlettrage-etiquette); }
.carte-domaine:not(.carte-domaine-photo):hover .numero { color: var(--couleur-texte-inverse); }
.carte-domaine h3 { margin: 0; font-size: var(--taille-l); hyphens: auto; overflow-wrap: break-word; }
.carte-domaine p { margin: 0; color: var(--couleur-texte-muet-inverse); font-size: var(--taille-s); }
/* Carte domaine avec photo : la photo de l'équipement typique du domaine, sous un voile nuit, le texte dessus */
.carte-domaine-photo { position: relative; min-height: 240px; padding: var(--espace-5); background: var(--couleur-bleu-fonce); overflow: hidden; justify-content: flex-end; isolation: isolate; }
/* Photos fabricants sur fond blanc : niveaux de gris sans teinte, assombries par brightness(0.3) (le blanc devient un gris de 77 : texte blanc et muet lisibles partout), sans fusion ni voile, même filtre au survol (ticket 051, décision de Khaled) ; numéro sur plancher (ticket 025) */
.carte-domaine-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: grayscale(1) brightness(0.3); transition: transform var(--duree-moyenne) var(--courbe); }
.carte-domaine-photo > * { position: relative; z-index: 1; }
.carte-domaine-photo .numero { position: absolute; top: var(--espace-4); left: var(--espace-5); background: var(--couleur-plancher-heros); box-shadow: 0 0 0 var(--espace-1) var(--couleur-plancher-heros); border-radius: var(--rayon-s); }
.carte-domaine-photo:hover { background: var(--couleur-nuit); }
.carte-domaine-photo:hover img { transform: scale(1.05); }
.carte-domaine-photo .photo-a-fournir { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--espace-5); background: var(--couleur-bleu-fonce); text-align: center; }
@media (max-width: 899px) { .carte-domaine-photo .photo-a-fournir { place-items: start center; padding-top: calc(var(--espace-4) + var(--espace-5)); } .carte-domaine-photo .photo-a-fournir .a-fournir { font-size: var(--taille-xs); } }
/* Carte équipement compacte : photo moins haute, corps serré (sélection de l'accueil) */
.carte-equipement.compacte .carte-photo { aspect-ratio: 4 / 3; }
.carte-equipement.compacte .carte-photo img { inset: var(--espace-4); width: calc(100% - 2 * var(--espace-4)); height: calc(100% - 2 * var(--espace-4)); }
.carte-equipement.compacte .carte-corps { padding: var(--espace-4); }
.carte-equipement.compacte .carte-corps h3 { font-size: var(--taille-base); }
.carte-equipement.compacte .carte-pied { font-size: var(--taille-xs); }
/* Ligne d'événement */
.ligne-evenement { display: grid; grid-template-columns: 96px 1fr auto; gap: var(--espace-5); align-items: center; padding: var(--espace-5) 0; border-bottom: 1px solid var(--couleur-filet); }
.ligne-evenement:first-child { border-top: 1px solid var(--couleur-filet); }
.date-bloc { text-align: center; font-family: var(--police-titre); font-weight: var(--graisse-titre); line-height: 1; color: var(--couleur-bleu); background: var(--couleur-surface-bleutee); border-radius: var(--rayon-s); padding: var(--espace-3) var(--espace-2); }
.date-bloc span { display: block; font-family: var(--police-texte); font-weight: var(--graisse-forte); font-size: var(--taille-xs); letter-spacing: var(--interlettrage-etiquette); text-transform: uppercase; margin-top: var(--espace-1); }
.date-bloc strong { font-size: var(--taille-xl); }
.ligne-evenement h3 { font-size: var(--taille-m); margin: 0 0 var(--espace-1); }
.ligne-evenement .meta { font-size: var(--taille-s); color: var(--couleur-texte-2); }
@media (max-width: 767px) { .ligne-evenement { grid-template-columns: 72px 1fr; } .ligne-evenement .bouton { grid-column: 2; justify-self: start; } }

/* ---------- Étiquettes de stock et de domaine ---------- */
.etiquette { display: inline-flex; align-items: center; gap: var(--espace-2); font-size: var(--taille-xs); font-weight: var(--graisse-forte); letter-spacing: var(--interlettrage-etiquette); text-transform: uppercase; padding: var(--espace-1) var(--espace-2); border-radius: var(--rayon-s); background: var(--couleur-surface-bleutee); color: var(--couleur-bleu); }
.etiquette::before { content: ""; width: 8px; height: 8px; border-radius: var(--rayon-rond); background: currentColor; }
.etiquette-stock { background: var(--couleur-surface-pale); color: var(--couleur-vert-texte); }
.etiquette-stock::before { background: var(--couleur-vert); }
.etiquette-commande { background: var(--couleur-surface-pale); color: var(--couleur-texte-2); }
/* Sur une photo, l'étiquette passe au-dessus de l'image (z-index) avec un fond blanc opaque et une ombre : lisible quelle que soit la photo */
.etiquette-sur-photo { position: absolute; top: var(--espace-3); left: var(--espace-3); z-index: 1; background: var(--couleur-surface); box-shadow: var(--ombre-douce); }

/* ---------- Formulaire ---------- */
.champ { display: flex; flex-direction: column; gap: var(--espace-2); }
.champ label { font-weight: var(--graisse-forte); font-size: var(--taille-s); }
.champ label .optionnel { font-weight: var(--graisse-texte); color: var(--couleur-texte-2); }
.champ input, .champ textarea, .champ select { font: inherit; color: var(--couleur-texte); background: var(--couleur-surface); border: var(--epaisseur-bordure) solid var(--couleur-bordure); border-radius: var(--rayon-s); min-height: 48px; padding: var(--espace-3) var(--espace-4); width: 100%; transition: border-color var(--duree-courte), box-shadow var(--duree-courte); }
.champ textarea { min-height: 140px; resize: vertical; }
.champ input:hover, .champ textarea:hover, .champ select:hover { border-color: var(--couleur-bleu); }
.champ input:focus-visible, .champ textarea:focus-visible, .champ select:focus-visible { border-color: var(--couleur-bleu); box-shadow: var(--anneau-focus); }
.champ .aide { font-size: var(--taille-s); color: var(--couleur-texte-2); }
.champ.champ-erreur input, .champ.champ-erreur textarea { border-color: var(--couleur-erreur, var(--couleur-bleu-fonce)); border-width: 2px; }
.champ .erreur { font-size: var(--taille-s); font-weight: var(--graisse-forte); color: var(--couleur-texte); }
.champ input:disabled { background: var(--couleur-surface-pale); color: var(--couleur-texte-2); }
.formulaire { display: grid; gap: var(--espace-5); }
.formulaire .deux-colonnes { display: grid; gap: var(--espace-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.case { display: flex; align-items: flex-start; gap: var(--espace-3); min-height: var(--cible-tactile); }
.case input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--couleur-bleu); flex: none; }
.encart-devis { background: var(--couleur-surface); color: var(--couleur-texte); border-radius: var(--rayon-l); padding: var(--espace-6); box-shadow: var(--ombre-haute); }

/* ---------- Fiche équipement ---------- */
.fil-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2); list-style: none; margin: 0 0 var(--espace-5); padding: 0; font-size: var(--taille-s); line-height: 1.3; color: var(--couleur-texte-2); }
.fil-ariane li { display: inline-flex; align-items: center; min-height: 32px; }
.fil-ariane li + li::before { content: "/"; margin-right: var(--espace-2); color: var(--couleur-bordure); }
.fil-ariane a { color: var(--couleur-texte-2); display: inline-flex; align-items: center; min-height: 32px; }
.fiche-tete { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--espace-8); align-items: start; }
.fiche-photo { background: var(--couleur-surface-pale); border-radius: var(--rayon-l); padding: var(--espace-7); display: grid; place-items: center; position: relative; min-height: 420px; }
.fiche-photo img { width: 100%; max-height: 560px; object-fit: contain; mix-blend-mode: multiply; }
.fiche-miniatures { display: flex; gap: var(--espace-3); margin-top: var(--espace-3); }
.fiche-miniatures button { width: 72px; height: 72px; padding: var(--espace-2); background: var(--couleur-surface-pale); border: var(--epaisseur-bordure) solid transparent; border-radius: var(--rayon-s); cursor: pointer; }
.fiche-miniatures button[aria-pressed="true"] { border-color: var(--couleur-bleu); }
.fiche-miniatures img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.fiche-infos h1 { margin-bottom: var(--espace-3); }
.fiche-infos .resume { font-size: var(--taille-m); color: var(--couleur-texte-2); }
.fiche-donnees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-4) var(--espace-5); margin: var(--espace-6) 0; padding: var(--espace-5); background: var(--couleur-surface-pale); border-radius: var(--rayon-m); }
.fiche-donnees dt { font-size: var(--taille-xs); font-weight: var(--graisse-forte); letter-spacing: var(--interlettrage-etiquette); text-transform: uppercase; color: var(--couleur-texte-2); }
.fiche-donnees dd { margin: var(--espace-1) 0 0; font-weight: var(--graisse-moyenne); }
.fiche-onglets { display: flex; flex-wrap: wrap; gap: var(--espace-2); border-bottom: var(--epaisseur-bordure) solid var(--couleur-filet); margin-bottom: var(--espace-6); }
.fiche-onglets a { display: inline-flex; align-items: center; min-height: var(--cible-tactile); padding: 0 var(--espace-4); text-decoration: none; color: var(--couleur-texte-2); font-weight: var(--graisse-forte); border-bottom: 3px solid transparent; margin-bottom: -1.5px; }
.fiche-onglets a[aria-current="true"] { color: var(--couleur-bleu); border-bottom-color: var(--couleur-vert); }
.liste-points { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--espace-3); }
.liste-points li { position: relative; padding-left: var(--espace-6); }
.liste-points li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 1rem; height: var(--epaisseur-filet); background: var(--couleur-vert); }
.tableau { width: 100%; border-collapse: collapse; font-size: var(--taille-base); }
.tableau th, .tableau td { text-align: left; padding: var(--espace-3) var(--espace-4); border-bottom: 1px solid var(--couleur-filet); vertical-align: top; }
.tableau th { font-size: var(--taille-s); font-weight: var(--graisse-forte); color: var(--couleur-texte-2); width: 38%; }
@media (max-width: 899px) { .fiche-tete { grid-template-columns: 1fr; gap: var(--espace-5); } .fiche-tete > .fiche-visuel { order: -1; } .fiche-visuel { margin-top: 0; } .fiche-photo { min-height: 0; padding: var(--espace-5); } .fiche-donnees { grid-template-columns: 1fr; } .tableau th { width: 45%; } }

/* ---------- Bandeau de marques (preuve) ---------- */
.marques { display: flex; flex-wrap: wrap; gap: var(--espace-3) var(--espace-6); align-items: center; }
.marques span { font-family: var(--police-titre); font-weight: var(--graisse-titre); font-size: var(--taille-m); letter-spacing: 0.02em; color: var(--couleur-texte-muet-inverse); text-transform: uppercase; }

/* Logos de marques : fichiers de marque passés en blanc (noir et blanc) sur fond nuit, même hauteur pour tous */
.logos-marques { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--espace-2); list-style: none; margin: 0; padding: 0; }
.logos-marques li { display: grid; place-items: center; min-height: 88px; min-width: 0; overflow: hidden; padding: var(--espace-3) var(--espace-4); border: 1px solid var(--couleur-bleu-fonce); border-radius: var(--rayon-s); }
.logos-marques .nom-marque .a-fournir { font-size: var(--taille-xs); white-space: normal; }
.logos-marques img { max-height: var(--hauteur-logo-marque); max-width: 100%; width: auto; object-fit: contain; filter: grayscale(1) brightness(0) invert(1); opacity: var(--opacite-logo-marque); transition: opacity var(--duree-courte); }
.logos-marques li:hover img { opacity: 1; }
.logos-marques .nom-marque { max-width: 100%; overflow-wrap: anywhere; font-family: var(--police-titre); font-weight: var(--graisse-titre); font-size: var(--taille-xs); letter-spacing: 0.02em; text-transform: uppercase; color: var(--couleur-texte-muet-inverse); text-align: center; }
@media (max-width: 599px) { .logos-marques { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Brochures : la couverture est dessinée (face bleue, tranche), la marque et le titre réels dessus */
.brochures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espace-5); }
@media (max-width: 899px) { .brochures { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } }
.brochure { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--espace-4); align-items: stretch; padding: var(--espace-4); background: var(--couleur-surface); border-radius: var(--rayon-m); box-shadow: var(--ombre-douce); text-decoration: none; color: inherit; transition: transform var(--duree-courte) var(--courbe), box-shadow var(--duree-courte) var(--courbe); }
.brochure:hover { transform: translateY(-4px); box-shadow: var(--ombre-haute); color: inherit; }
.brochure-couverture { position: relative; min-height: 150px; padding: var(--espace-3) var(--espace-3) var(--espace-3) var(--espace-4); background: var(--couleur-bleu); color: var(--couleur-texte-inverse); border-radius: var(--rayon-s) var(--rayon-m) var(--rayon-m) var(--rayon-s); box-shadow: inset 6px 0 0 var(--couleur-nuit), inset 8px 0 0 var(--couleur-vert); display: flex; flex-direction: column; justify-content: space-between; font-family: var(--police-titre); font-weight: var(--graisse-titre); font-size: var(--taille-xs); letter-spacing: 0.04em; text-transform: uppercase; hyphens: auto; overflow-wrap: break-word; }
.brochure-couverture .pages { font-family: var(--police-texte); font-weight: var(--graisse-forte); letter-spacing: var(--interlettrage-etiquette); color: var(--couleur-texte-muet-inverse); }
.brochure:nth-child(3n+2) .brochure-couverture { background: var(--couleur-nuit); }
.brochure:nth-child(3n) .brochure-couverture { background: var(--couleur-bleu-fonce); }
.brochure-corps { display: flex; flex-direction: column; gap: var(--espace-2); min-width: 0; }
.brochure-corps .marque { font-size: var(--taille-xs); font-weight: var(--graisse-forte); letter-spacing: var(--interlettrage-etiquette); text-transform: uppercase; color: var(--couleur-texte-2); }
.brochure-corps h3 { font-size: var(--taille-base); margin: 0; }
.brochure-corps .lien { margin-top: auto; display: inline-flex; align-items: center; gap: var(--espace-2); min-height: var(--cible-tactile); color: var(--couleur-bleu); font-weight: var(--graisse-forte); font-size: var(--taille-s); }
/* Devis court : deux champs, et le catalogue comme autre voie */
.devis-alternative { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-3); margin-top: var(--espace-6); padding-top: var(--espace-5); border-top: 1px solid var(--couleur-bordure); font-size: var(--taille-s); color: var(--couleur-texte-2); }
/* ---------- Chiffres ---------- */
.chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espace-5); }
.chiffre strong { display: block; font-family: var(--police-titre); font-weight: var(--graisse-titre); font-size: var(--taille-2xl); line-height: 1; color: var(--couleur-bleu); margin-bottom: var(--espace-2); }
.sur-nuit .chiffre strong { color: var(--couleur-vert); }
.chiffre span { color: var(--couleur-texte-2); font-size: var(--taille-s); }
.sur-nuit .chiffre span { color: var(--couleur-texte-muet-inverse); }

/* ---------- Bande d'appel (devis) ---------- */
.appel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--espace-8); align-items: center; }
@media (max-width: 899px) { .appel { grid-template-columns: 1fr; gap: var(--espace-6); } }

/* ---------- Filtres de liste ---------- */
.filtres { display: flex; flex-wrap: wrap; gap: var(--espace-2); }
.filtres a { display: inline-flex; align-items: center; min-height: var(--cible-tactile); padding: 0 var(--espace-4); border-radius: var(--rayon-rond); border: var(--epaisseur-bordure) solid var(--couleur-bordure); color: var(--couleur-texte); text-decoration: none; font-size: var(--taille-s); font-weight: var(--graisse-moyenne); transition: background-color var(--duree-courte), border-color var(--duree-courte); }
.filtres a:hover { border-color: var(--couleur-bleu); color: var(--couleur-bleu); }
.filtres a[aria-current="true"] { background: var(--couleur-bleu); border-color: var(--couleur-bleu); color: var(--couleur-texte-inverse); }
/* Catalogue : filtres en colonne à gauche (groupes repliables), équipements à droite */
.catalogue { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: var(--espace-7); align-items: start; }
.filtres-colonne { display: grid; gap: var(--espace-3); }
.filtres-entete { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-3); min-height: var(--cible-tactile); }
.filtres-entete h2 { font-size: var(--taille-m); margin: 0; }
.filtres-entete a { font-size: var(--taille-s); font-weight: var(--graisse-forte); display: inline-flex; align-items: center; min-height: var(--cible-tactile); }
.filtres-groupe { background: var(--couleur-surface); border-radius: var(--rayon-m); box-shadow: var(--ombre-douce); padding: 0 var(--espace-4); }
.filtres-groupe summary { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-3); min-height: 52px; cursor: pointer; list-style: none; font-size: var(--taille-xs); font-weight: var(--graisse-forte); letter-spacing: var(--interlettrage-etiquette); text-transform: uppercase; color: var(--couleur-vert-texte); border-radius: var(--rayon-s); }
.filtres-groupe summary::-webkit-details-marker { display: none; }
.filtres-groupe summary::after { content: ""; width: 8px; height: 8px; margin-right: var(--espace-1); border-right: 2px solid var(--couleur-bleu); border-bottom: 2px solid var(--couleur-bleu); transform: rotate(45deg); transition: transform var(--duree-courte) var(--courbe); }
.filtres-groupe[open] summary::after { transform: rotate(-135deg); }
.filtres-groupe ul { list-style: none; margin: 0; padding: 0 0 var(--espace-3); border-top: 1px solid var(--couleur-filet); }
.filtres-groupe li a { display: flex; align-items: center; gap: var(--espace-3); min-height: var(--cible-tactile); padding: 0 var(--espace-2); color: var(--couleur-texte); text-decoration: none; font-size: var(--taille-s); font-weight: var(--graisse-moyenne); border-radius: var(--rayon-s); transition: background-color var(--duree-courte), color var(--duree-courte); }
.filtres-groupe li a::before { content: ""; flex: none; width: 16px; height: 16px; border: var(--epaisseur-bordure) solid var(--couleur-bordure); border-radius: var(--rayon-s); background: var(--couleur-surface); transition: background-color var(--duree-courte), border-color var(--duree-courte); }
.filtres-groupe li a:hover { color: var(--couleur-bleu); background: var(--couleur-surface-pale); }
.filtres-groupe li a[aria-current="true"] { color: var(--couleur-bleu); font-weight: var(--graisse-forte); }
.filtres-groupe li a[aria-current="true"]::before { background: var(--couleur-bleu); border-color: var(--couleur-bleu); box-shadow: inset 0 0 0 3px var(--couleur-surface); }
.filtres-groupe .numero { font-family: var(--police-titre); font-weight: var(--graisse-titre); font-size: var(--taille-xs); color: var(--couleur-vert-texte); letter-spacing: var(--interlettrage-etiquette); min-width: 1.6em; }
.filtres-groupe .etiquette { margin-left: auto; }
.catalogue-liste .barre-liste { margin-bottom: var(--espace-5); }
@media (max-width: 899px) { .catalogue { grid-template-columns: 1fr; gap: var(--espace-5); } .filtres-groupe summary { min-height: var(--cible-tactile); } }
.barre-liste { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--espace-4); margin-bottom: var(--espace-6); font-size: var(--taille-s); color: var(--couleur-texte-2); }
/* Pagination de la liste : pages numérotées (nav.pagination), page courante en bleu plein, précédent / suivant aux extrémités, cibles de 44 px */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--espace-2); margin-top: var(--espace-7); }
.pagination ul { display: contents; list-style: none; margin: 0; padding: 0; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; gap: var(--espace-1); min-width: var(--cible-tactile); min-height: var(--cible-tactile); padding: 0 var(--espace-3); border-radius: var(--rayon-s); font-size: var(--taille-s); font-weight: var(--graisse-moyenne); color: var(--couleur-texte); text-decoration: none; transition: background var(--duree-courte), color var(--duree-courte); }
.pagination a:hover { background: var(--couleur-surface-bleutee); color: var(--couleur-bleu-fonce); }
.pagination [aria-current="page"] { background: var(--couleur-bleu); color: var(--couleur-texte-inverse); }
.pagination .pagination-points { color: var(--couleur-texte-2); padding: 0; min-width: var(--espace-6); }
.pagination .pagination-bord { color: var(--couleur-bleu); border: var(--epaisseur-bordure) solid var(--couleur-bleu); padding: 0 var(--espace-4); }
.pagination .pagination-bord[aria-disabled="true"] { color: var(--couleur-texte-2); border-color: var(--couleur-filet); pointer-events: none; }
.pagination svg { width: 1.1em; height: 1.1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 599px) { .pagination .pagination-bord .libelle { display: none; } .pagination .pagination-bord { padding: 0; } }
.tete-page { padding-block: var(--espace-8) var(--espace-7); }
/* Tête de page sur nuit : la bande bleue de l'en-tête se prolonge derrière le fil d'Ariane, le surtitre, le titre et l'accroche (pages intérieures, harmonisées avec le héros de l'accueil) */
.tete-page.sur-nuit { padding-block: var(--espace-7) var(--espace-8); }
.tete-page.sur-nuit .fil-ariane { margin-bottom: var(--espace-6); }
.tete-page.sur-nuit .texte-2 { max-width: 60ch; }
.sur-nuit .fil-ariane, .sur-nuit .fil-ariane a, .sur-nuit .fil-ariane li + li::before { color: var(--couleur-texte-muet-inverse); }
.sur-nuit .fil-ariane a:hover, .sur-nuit .fil-ariane [aria-current] { color: var(--couleur-texte-inverse); }
/* Fiche : la bande nuit porte le titre à gauche ; la photo (colonne droite) remonte dans la bande, comme la figure du héros */
.tete-fiche { padding-bottom: var(--espace-9); }
.tete-fiche .resume { font-size: var(--taille-m); }
.fiche-tete > .fiche-visuel { order: 2; }
.fiche-visuel { margin-top: calc(-1 * (var(--espace-9) + var(--espace-7))); }

.tete-page h1 { max-width: 18ch; }
.tete-page p { font-size: var(--taille-m); }

/* ---------- Pied de page ---------- */
.pied { background: var(--couleur-nuit); color: var(--couleur-texte-muet-inverse); font-size: var(--taille-s); }
.pied .contenu { padding-block: var(--espace-8) var(--espace-6); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--espace-6); }
.pied h4 { color: var(--couleur-texte-inverse); font-family: var(--police-texte); font-size: var(--taille-xs); letter-spacing: var(--interlettrage-etiquette); text-transform: uppercase; margin-bottom: var(--espace-4); }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: var(--espace-1); }
.pied a { color: var(--couleur-texte-inverse); text-decoration: none; display: inline-flex; align-items: center; min-height: 36px; }
.pied a:hover { color: var(--couleur-vert); }
.pied address { font-style: normal; }
.pied-bas { border-top: 1px solid var(--couleur-bleu-fonce); }
.pied-bas .contenu { padding-block: var(--espace-4); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--espace-3); }
.pied .logo-pied { background: var(--couleur-surface); border-radius: var(--rayon-s); padding: var(--espace-2) var(--espace-3); display: inline-flex; margin-bottom: var(--espace-4); }
@media (max-width: 899px) { .pied .contenu { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .pied .contenu { grid-template-columns: 1fr; } }

/* ---------- Mosaïque des domaines ---------- */
/* Le premier domaine occupe 2 × 2, le sixième 2 × 1 : trois rangées de hauteurs différentes au lieu d'une grille uniforme */
.mosaique-domaines { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 220px; gap: var(--espace-4); }
.mosaique-domaines .carte-domaine { min-height: 0; height: 100%; }
.mosaique-domaines > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
.mosaique-domaines > :nth-child(6) { grid-column: span 2; }
.mosaique-domaines > :nth-child(1) h3 { font-size: var(--taille-xl); }
.mosaique-domaines > :nth-child(1) p, .mosaique-domaines > :nth-child(6) p { font-size: var(--taille-base); }
.mosaique-domaines .carte-domaine h3 { font-size: var(--taille-m); }
.mosaique-domaines .carte-domaine p { display: none; }
.mosaique-domaines > :nth-child(1) p, .mosaique-domaines > :nth-child(6) p { display: block; }
@media (max-width: 899px) {
  .mosaique-domaines { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; }
  .mosaique-domaines > :nth-child(1) { grid-row: span 2; }
  .mosaique-domaines > :nth-child(1) h3 { font-size: var(--taille-l); }
}

/* ---------- Catégories d'événements ---------- */
/* Salon : bleu ; webinaire : vert foncé ; formation / e-learning : nuit. Chaque étiquette porte aussi son icône. */
.etiquette svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.etiquette.avec-icone::before { display: none; }
.etiquette-salon { background: var(--couleur-surface-bleutee); color: var(--couleur-bleu); }
.etiquette-webinaire { background: var(--couleur-vert-fonce); color: var(--couleur-texte-inverse); }
.etiquette-formation { background: var(--couleur-nuit); color: var(--couleur-texte-inverse); }
.evenement-webinaire .date-bloc { background: var(--couleur-vert-fonce); color: var(--couleur-texte-inverse); }
.evenement-formation .date-bloc { background: var(--couleur-nuit); color: var(--couleur-texte-inverse); }

/* ---------- Méga-menu Catalogue ---------- */
/* Ouvert au survol ou au clavier (focus-within) ; .est-ouvert le force (aperçu, JavaScript) ; absent sous 900 px (menu replié) */
.mega-menu { position: absolute; left: 0; right: 0; top: 100%; display: none; background: var(--couleur-surface); color: var(--couleur-texte); border-top: 3px solid var(--couleur-vert); box-shadow: var(--ombre-haute); z-index: 30; }
.menu-catalogue:hover .mega-menu, .menu-catalogue:focus-within .mega-menu, .mega-menu.est-ouvert { display: block; }
.menu > li > a svg { width: 16px; height: 16px; margin-left: var(--espace-1); stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Menu déroulant « À propos » (ticket 026) : même ouverture et même fermeture que le méga-menu, sous l'entrée */
.menu .menu-rubrique { position: relative; }
.menu .sub-menu { position: absolute; top: 100%; left: 0; min-width: 220px; display: none; list-style: none; margin: 0; padding: var(--espace-2) 0; background: var(--couleur-surface); border-top: 3px solid var(--couleur-vert); border-radius: 0 0 var(--rayon-m) var(--rayon-m); box-shadow: var(--ombre-haute); z-index: 30; }
.menu-rubrique:hover > .sub-menu, .menu-rubrique:focus-within > .sub-menu { display: block; }
.menu .sub-menu a { display: flex; min-height: var(--cible-tactile); padding: 0 var(--espace-4); white-space: nowrap; border-radius: 0; }
.menu .sub-menu a:hover, .menu .sub-menu a[aria-current="page"] { color: var(--couleur-bleu); }
.menu .sub-menu a[aria-current="page"]::after { display: none; }
.mega-menu .contenu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 1.2fr; gap: var(--espace-6); padding-block: var(--espace-6); }
.mega-menu h3 { font-family: var(--police-texte); font-size: var(--taille-xs); font-weight: var(--graisse-forte); letter-spacing: var(--interlettrage-etiquette); text-transform: uppercase; color: var(--couleur-vert-texte); margin-bottom: var(--espace-3); }
.mega-menu ul { list-style: none; margin: 0; padding: 0; }
.entete .mega-menu ul a { display: flex; align-items: center; gap: var(--espace-2); min-height: 36px; color: var(--couleur-texte); text-decoration: none; font-size: var(--taille-s); font-weight: var(--graisse-moyenne); padding: 0; }
.entete .mega-menu ul a:hover { color: var(--couleur-bleu); }
.entete .mega-menu ul a .numero { font-family: var(--police-titre); font-weight: var(--graisse-titre); font-size: var(--taille-xs); color: var(--couleur-vert-texte); letter-spacing: var(--interlettrage-etiquette); min-width: 1.6em; }
.entete .mega-menu .tout { margin-top: var(--espace-3); display: inline-flex; align-items: center; min-height: 36px; font-size: var(--taille-s); font-weight: var(--graisse-forte); color: var(--couleur-bleu); }
.entete .mega-menu .marques-menu a { min-height: 32px; }
.entete .mega-menu .mega-mise-en-avant { display: grid; min-height: 0; padding: var(--espace-4); grid-template-columns: 112px minmax(0, 1fr); gap: var(--espace-4); align-items: center; padding: var(--espace-4); background: var(--couleur-surface-pale); border-radius: var(--rayon-m); color: inherit; text-decoration: none; transition: transform var(--duree-courte) var(--courbe), box-shadow var(--duree-courte) var(--courbe); }
.entete .mega-menu .mega-mise-en-avant:hover { transform: translateY(-2px); box-shadow: var(--ombre-douce); color: inherit; }
.entete .mega-menu .mega-mise-en-avant img { width: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
.entete .mega-menu .mega-mise-en-avant h3 { font-family: var(--police-titre); font-size: var(--taille-base); font-weight: var(--graisse-titre); letter-spacing: var(--interlettrage-titre); text-transform: none; color: inherit; margin: var(--espace-1) 0; }
.entete .mega-menu .mega-mise-en-avant .lien { color: var(--couleur-bleu); font-weight: var(--graisse-forte); font-size: var(--taille-s); }
.entete .mega-menu .mega-brochures { margin-top: var(--espace-4); display: flex; align-items: center; gap: var(--espace-3); min-height: var(--cible-tactile); padding: var(--espace-2) var(--espace-4); border: var(--epaisseur-bordure) solid var(--couleur-filet); border-radius: var(--rayon-s); text-decoration: none; color: var(--couleur-texte); font-size: var(--taille-s); font-weight: var(--graisse-forte); }
.entete .mega-menu .mega-brochures:hover { border-color: var(--couleur-bleu); color: var(--couleur-bleu); }
.entete .mega-menu .mega-brochures svg { width: 20px; height: 20px; stroke: var(--couleur-vert-fonce); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Bande d'appel avec photo d'arrière-plan (demande spécifique) ---------- */
.appel-photo { position: relative; overflow: hidden; isolation: isolate; }
.appel-photo-fond { position: absolute; inset: 0; z-index: -1; background: var(--couleur-nuit); }
.appel-photo-fond img { width: 100%; height: 100%; object-fit: cover; opacity: var(--opacite-photo-appel); filter: grayscale(1) contrast(1.1); }
.appel-photo-fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--couleur-voile-nuit) 0%, var(--couleur-voile-nuit) 40%, var(--couleur-voile-heros) 70%, transparent 100%); }
.appel-photo .a-fournir.photo-fond-a-fournir { position: absolute; top: var(--espace-4); right: var(--espace-4); z-index: 1; }
.appel-photo .devis-alternative { border-top-color: var(--couleur-filet); }
/* Ticket 051 : sous 900 px, voile nuit uniforme (plus de nuit pleine en bas, sous l'encart du formulaire) */
@media (max-width: 899px) { .appel-photo-fond::after { background: linear-gradient(180deg, var(--couleur-voile-nuit) 0%, var(--couleur-voile-nuit) 100%); } .appel-photo .a-fournir.photo-fond-a-fournir { position: static; display: inline-block; margin: 0 var(--marge-page) var(--espace-4); } }

/* L'encart blanc du formulaire garde ses couleurs claires même dans une section nuit */
.sur-nuit .encart-devis .texte-2 { color: var(--couleur-texte-2); }
.sur-nuit .encart-devis a { color: var(--couleur-bleu); }
.sur-nuit .encart-devis .bouton-secondaire { color: var(--couleur-bleu); border-color: var(--couleur-bleu); }
.sur-nuit .encart-devis .bouton-secondaire:hover { background: var(--couleur-surface-bleutee); color: var(--couleur-bleu-fonce); }
.sur-nuit .encart-devis .surtitre { color: var(--couleur-vert-texte); }

/* ---------- Bande newsletter (juste avant le pied) : surface bleutée claire, le pied est le seul bloc sombre qui suit ---------- */
.bande-newsletter { background: var(--couleur-surface-bleutee); color: var(--couleur-texte); border-top: 1px solid var(--couleur-filet); }
.bande-newsletter .contenu { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espace-5); padding-block: var(--espace-6); }
.bande-newsletter h2 { font-size: var(--taille-l); margin: 0 0 var(--espace-1); }
.bande-newsletter p { margin: 0; color: var(--couleur-texte-2); font-size: var(--taille-s); }
.bande-newsletter form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--espace-3); flex: 1 1 420px; justify-content: flex-end; }
.bande-newsletter .champ { flex: 1 1 240px; }
.bande-newsletter .champ label { color: var(--couleur-texte); }
.bande-newsletter .champ input { border-color: var(--couleur-bleu); }
.bande-newsletter .bouton { flex: none; min-height: 48px; }
.bande-newsletter .note { flex-basis: 100%; text-align: right; }
.bande-newsletter :focus-visible { box-shadow: var(--anneau-focus); }
@media (max-width: 767px) { .bande-newsletter form { justify-content: flex-start; } .bande-newsletter .note { text-align: left; } }

/* ---------- Éléments flottants : bouton WhatsApp (toutes les pages) et popup promotionnel ---------- */
.bouton-whatsapp { position: fixed; right: var(--espace-5); bottom: var(--espace-5); z-index: 40; display: inline-flex; align-items: center; gap: var(--espace-2); min-height: var(--taille-flottant); padding: 0 var(--espace-5) 0 var(--espace-4); background: var(--couleur-vert-fonce); color: var(--couleur-texte-inverse); border-radius: var(--rayon-rond); box-shadow: var(--ombre-haute); text-decoration: none; font-weight: var(--graisse-forte); font-size: var(--taille-s); transition: transform var(--duree-courte) var(--courbe), background-color var(--duree-courte); }
.bouton-whatsapp:hover { transform: translateY(-2px); background: var(--couleur-vert-texte); color: var(--couleur-texte-inverse); }
.bouton-whatsapp svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 899px) { .bouton-whatsapp { width: var(--taille-flottant); height: var(--taille-flottant); padding: 0; justify-content: center; right: var(--espace-4); bottom: var(--espace-4); } .bouton-whatsapp span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.popup-pub { position: fixed; left: var(--espace-5); bottom: var(--espace-5); z-index: 40; width: min(var(--largeur-popup), calc(100% - 2 * var(--espace-4) - var(--taille-flottant) - var(--espace-4))); display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--espace-4); padding: var(--espace-4); background: var(--couleur-surface); color: var(--couleur-texte); border-radius: var(--rayon-m); box-shadow: var(--ombre-haute); border-left: 0; animation: apparition var(--duree-longue) var(--courbe) both; animation-delay: 1200ms; }
.popup-pub .popup-photo { background: var(--couleur-surface-pale); border-radius: var(--rayon-s); aspect-ratio: 1; display: grid; place-items: center; padding: var(--espace-2); }
.popup-pub .popup-photo img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.popup-pub .surtitre { margin-bottom: var(--espace-1); }
.popup-pub h2 { font-size: var(--taille-base); margin: 0 0 var(--espace-1); }
.popup-pub p { font-size: var(--taille-s); color: var(--couleur-texte-2); margin: 0 0 var(--espace-2); }
.popup-pub .lien { display: inline-flex; align-items: center; min-height: 36px; color: var(--couleur-bleu); font-weight: var(--graisse-forte); font-size: var(--taille-s); text-decoration: none; }
.popup-pub .fermer { position: absolute; top: 0; right: 0; width: var(--cible-tactile); height: var(--cible-tactile); display: grid; place-items: center; background: transparent; border: 0; color: var(--couleur-texte-2); cursor: pointer; border-radius: var(--rayon-s); }
.popup-pub .fermer:hover { color: var(--couleur-texte); }
.popup-pub .fermer svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 899px) { .popup-pub { left: var(--espace-4); bottom: var(--espace-4); } }
/* Aperçu statique dans le design system */
.flottants-statique .bouton-whatsapp, .flottants-statique .popup-pub { position: relative; left: auto; right: auto; bottom: auto; animation: none; }
.flottants-statique .popup-pub .fermer { position: absolute; }

/* ---------- Cadre téléphone (maquette accueil-mobile) ---------- */
.cadre-mobile { width: 390px; max-width: 100%; margin: var(--espace-6) auto; border: 8px solid var(--couleur-nuit); border-radius: 32px; overflow: hidden; box-shadow: var(--ombre-haute); background: var(--couleur-surface); }
.cadre-mobile .page { width: 100%; }

/* ---------- Bouton « Mon devis » (en-tête) : le devis se remplit comme un panier, le compteur dit combien d'équipements il contient ---------- */
.bouton-devis .compteur { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 var(--espace-1); border-radius: var(--rayon-rond); background: var(--couleur-surface); color: var(--couleur-vert-texte); font-size: var(--taille-xs); font-weight: var(--graisse-forte); line-height: 1; }
@media (max-width: 899px) {
  .nav-actions .bouton-devis { display: inline-flex; padding-inline: var(--espace-3); }
  .bouton-devis .libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Carrousel (sélection d'équipements) : défilement horizontal aimanté, plus de quatre cartes ---------- */
.carrousel { display: flex; gap: var(--espace-5); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: var(--espace-3); scrollbar-width: thin; scrollbar-color: var(--couleur-bordure) transparent; }
.carrousel > * { flex: 0 0 calc((100% - 3 * var(--espace-5)) / 4); scroll-snap-align: start; }
@media (max-width: 899px) { .carrousel > * { flex-basis: calc((100% - var(--espace-5)) / 2); } }
@media (max-width: 599px) { .carrousel > * { flex-basis: 82%; } }
.carrousel-commandes { display: flex; align-items: center; gap: var(--espace-2); }
.entete-section > .carrousel-commandes { flex: none; margin-left: auto; }
.bouton-icone { width: var(--cible-tactile); height: var(--cible-tactile); padding: 0; flex: none; }
.bouton-icone svg { width: 20px; height: 20px; }

/* ---------- Page « Mon devis » : les équipements ajoutés, puis l'envoi en une fois ---------- */
.devis-page { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--espace-8); align-items: start; }
@media (max-width: 899px) { .devis-page { grid-template-columns: 1fr; gap: var(--espace-6); } }
.lignes-devis { display: grid; gap: var(--espace-4); }
.ligne-devis { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto auto; gap: var(--espace-5); align-items: center; padding: var(--espace-4); background: var(--couleur-surface); border-radius: var(--rayon-m); box-shadow: var(--ombre-douce); }
.ligne-devis .photo { aspect-ratio: 1; background: var(--couleur-surface-pale); border-radius: var(--rayon-s); padding: var(--espace-2); display: grid; place-items: center; }
.ligne-devis .photo img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ligne-devis h3 { font-size: var(--taille-m); margin: var(--espace-1) 0; }
.ligne-devis h3 a { color: inherit; text-decoration: none; }
.ligne-devis h3 a:hover { color: var(--couleur-bleu); }
.ligne-devis .ref { font-size: var(--taille-s); color: var(--couleur-texte-2); margin: 0 0 var(--espace-2); }
.champ-quantite { display: flex; flex-direction: column; gap: var(--espace-1); }
.champ-quantite label { font-size: var(--taille-xs); font-weight: var(--graisse-forte); letter-spacing: var(--interlettrage-etiquette); text-transform: uppercase; color: var(--couleur-texte-2); }
.champ-quantite input { width: 88px; min-height: var(--cible-tactile); padding: 0 var(--espace-3); font: inherit; color: var(--couleur-texte); background: var(--couleur-surface); border: var(--epaisseur-bordure) solid var(--couleur-bordure); border-radius: var(--rayon-s); text-align: center; }
.champ-quantite input:focus-visible { border-color: var(--couleur-bleu); box-shadow: var(--anneau-focus); }
.ligne-devis .retirer { color: var(--couleur-texte-2); border-color: var(--couleur-bordure); }
.ligne-devis .retirer:hover { color: var(--couleur-texte); background: var(--couleur-surface-pale); border-color: var(--couleur-bordure); }
@media (max-width: 767px) { .ligne-devis { grid-template-columns: 88px minmax(0, 1fr); } .ligne-devis .champ-quantite, .ligne-devis .retirer { grid-column: 2; justify-self: start; } }
.devis-recap .total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--espace-3); padding-bottom: var(--espace-4); margin-bottom: var(--espace-5); border-bottom: 1px solid var(--couleur-filet); font-size: var(--taille-s); color: var(--couleur-texte-2); }
.devis-recap .total strong { color: var(--couleur-texte); font-family: var(--police-titre); font-weight: var(--graisse-titre); font-size: var(--taille-m); }

/* ---------- Mouvement coupé ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .apparait { transform: none; }
  .filet-moleculaire.se-trace .trace { stroke-dashoffset: 0; }
  .popup-pub { animation: none; }
}