/* HEXAGONE ENERGIE : feuille unique (maquette v1, charte de Mehdi, 01/10/2026) */

/* Polices hébergées sur le site (licence SIL Open Font License), sous-ensemble latin, polices variables :
   aucun appel à Google Fonts, donc pas d'adresse IP de visiteur transmise (03/10/2026). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-latin.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700 800; font-display: swap; src: url("../fonts/montserrat-latin.woff2") format("woff2"); }
/* Polices de repli calibrées sur Inter et Montserrat (05/10/2026) : le texte garde la même place pendant le chargement,
   la page ne saute plus (CLS). Valeurs calculées avec fontTools sur nos fichiers woff2 contre Arial / Arial Bold. */
@font-face { font-family: "Inter repli"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"); size-adjust: 105.27%; ascent-override: 92.03%; descent-override: 22.91%; line-gap-override: 0%; }
@font-face { font-family: "Montserrat repli"; font-weight: 700 800; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"); size-adjust: 111.60%; ascent-override: 86.74%; descent-override: 22.49%; line-gap-override: 0%; }

/* <picture> (version WebP des photos) ne crée pas de boîte : l'image garde la mise en page prévue pour <img> */
picture { display: contents; }

:root {
  /* Palette officielle de Valentin (Diferance), appliquée le 10/10/2026 sur GO de Mehdi */
  --nuit: #0e262e;          /* fond sombre de la charte */
  --nuit-2: #16323b;        /* variante pour cartes sur fond sombre */
  --ardoise: #3c5a64;       /* texte secondaire sombre */
  --bleu: #2d7a4a;          /* vert foncé : liens et textes verts sur blanc (AA) */
  --ciel: #4bb275;          /* vert de la charte : décor, icônes, sur fond sombre */
  --soleil: #4bb275;        /* appels à l'action : vert charte avec texte --nuit */
  --papier: #f1f5fb;        /* fond clair de la charte */
  --blanc: #ffffff;
  --texte: #0e262e;
  --texte-doux: #4a5d64;
  --trait: #dde3ea;

  --police: "Inter", "Inter repli", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --police-titre: "Montserrat", "Montserrat repli", "Inter", system-ui, sans-serif;
  --rayon: 6px;
  --largeur: 1180px;
  --ombre: 0 1px 2px rgba(14, 42, 59, .06), 0 8px 24px rgba(14, 42, 59, .06);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }  /* l'en-tête collant ne masque plus les ancres (audit UX du 03/10) */
body { margin: 0; font-family: var(--police); font-size: 1.0625rem; line-height: 1.6; color: var(--texte); background: var(--blanc); }
img, svg { display: block; max-width: 100%; }
img { height: auto; }  /* les images portent largeur et hauteur : on garde leurs proportions quand elles rétrécissent */
a { color: var(--bleu); }
/* Focus clavier : vert foncé sur fond clair (5,3:1), vert charte sur fond sombre (6:1) ; audit UX du 03/10 */
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }
.entete :focus-visible, .heros :focus-visible, .page-tete :focus-visible, .pied :focus-visible, .bande-action :focus-visible, .acheteurs :focus-visible, .numerique :focus-visible { outline-color: var(--ciel); }
h1, h2, h3 { font-family: var(--police-titre); color: var(--nuit); line-height: 1.18; margin: 0 0 .6em; }
h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 800; letter-spacing: -.01em; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; }

.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 20px; }
.lien-evitement { position: absolute; left: -9999px; }
.lien-evitement:focus { left: 16px; top: 16px; z-index: 100; background: var(--soleil); color: var(--nuit); padding: 8px 14px; }

/* Bandeau maquette */
.bandeau-maquette { background: #fff4cc; color: #5c4400; font-size: .9rem; text-align: center; padding: 6px 16px; border-bottom: 1px solid #f0d77a; }

/* En-tête */
.entete { position: sticky; top: 0; z-index: 50; background: #0e262e; border-bottom: 1px solid rgba(255,255,255,.08); }
.entete .conteneur { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.logo { display: flex; align-items: center; text-decoration: none; }
.logo img { height: 40px; width: auto; flex-shrink: 0; } /* 05/10/2026 : le logo ne se déforme plus sur téléphone */
.logo__nom { font-weight: 800; letter-spacing: .04em; font-size: 1.05rem; line-height: 1.1; }
.logo__nom small { display: block; font-weight: 500; letter-spacing: 0; font-size: .72rem; color: var(--texte-doux); }
.nav { margin-left: auto; }
.nav ul { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; }
.nav a { color: #dbe5ea; text-decoration: none; font-weight: 600; font-size: .95rem; }
.nav a:hover { color: var(--ciel); }

/* Boutons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: var(--rayon); font-weight: 700; text-decoration: none; border: 2px solid transparent; }
.btn--soleil { background: var(--soleil); color: var(--nuit); }
.btn--soleil:hover { background: #67bf8b; }
.btn--contour { border-color: rgba(255,255,255,.7); color: var(--blanc); }
.btn--contour:hover { background: rgba(255,255,255,.1); }
.btn--bleu { background: var(--ciel); color: var(--nuit); }
.btn--bleu:hover { background: #67bf8b; }

/* Héros */
.heros { position: relative; overflow: hidden; background: radial-gradient(ellipse 60% 70% at 85% 30%, rgba(75,178,117,.18), transparent 70%), radial-gradient(ellipse 50% 60% at 10% 110%, rgba(60,110,150,.22), transparent 70%), var(--nuit); color: #dbe7ef; padding: 96px 0 80px; }
.heros__motif { position: absolute; inset: 0; pointer-events: none; }
.heros__anneaux { position: absolute; width: 1006px; height: 1006px; right: -503px; top: -503px; opacity: .9; pointer-events: none; }
.heros__anneaux img { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; animation: tourne linear infinite; }
.heros__anneaux .a1 { animation-duration: 80s; }
.heros__anneaux .a2 { animation-duration: 105s; animation-direction: reverse; }
.heros__anneaux .a3 { animation-duration: 130s; }
@keyframes tourne { to { transform: rotate(360deg); } }
.heros .conteneur { position: relative; display: grid; grid-template-columns: 1.25fr .75fr; gap: 48px; align-items: center; }
.heros h1 { color: var(--blanc); }
.heros h1 span { color: var(--soleil); }
.surtitre { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ciel); margin-bottom: 14px; }
.heros__chapo { font-size: 1.18rem; max-width: 40em; }
.heros__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.fiche { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--rayon); padding: 22px 24px; }
.fiche h2 { color: var(--blanc); font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; }
.fiche dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: .95rem; }
.fiche dt { color: #9fb7c7; }
.fiche dd { margin: 0; color: var(--blanc); font-weight: 600; }

/* Bande de preuves */
.preuves { background: var(--papier); border-bottom: 1px solid var(--trait); }
.preuves ul { list-style: none; margin: 0; padding: 22px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.preuves li { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; color: var(--texte-doux); }
.preuves strong { display: block; color: var(--nuit); font-size: 1rem; }
/* Logos officiels Qualit'EnR (charte PG11 rév. 19) : reproduits sans modification, millésime de l'année, plus petits que le logo HEXAGONE (40 px). */
.preuves ul:has(.preuves__qualif) { grid-template-columns: repeat(5, 1fr); }
.preuves .preuves__qualif { flex-direction: column; gap: 8px; }
.preuves__qualif img { display: block; height: 36px; width: auto; }
.logos-qualif { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.logos-qualif img { height: 36px; width: auto; }
@media (max-width: 1000px) { .preuves ul:has(.preuves__qualif) { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .preuves ul:has(.preuves__qualif) { grid-template-columns: 1fr 1fr; } }
.hexa-puce { flex: 0 0 auto; width: 26px; height: 26px; margin-top: 2px; }

/* Sections */
.section { padding: 80px 0; }
.section--papier { background: var(--papier); }
.section__tete { max-width: 46em; margin-bottom: 40px; }
.section__tete p { color: var(--texte-doux); font-size: 1.1rem; }

/* Cartes publics */
.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.carte { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 28px; box-shadow: var(--ombre); display: flex; flex-direction: column; }
.carte p { color: var(--texte-doux); }
.carte ul { margin: 0 0 18px; padding-left: 1.1em; color: var(--texte-doux); }
.carte .lien-fleche { margin-top: auto; font-weight: 700; text-decoration: none; }
.carte .lien-fleche::after { content: " →"; }
.carte__icone { width: 44px; height: 44px; margin-bottom: 16px; }

/* Métiers */
.metiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--trait); border-left: 1px solid var(--trait); }
.metier { padding: 28px; border-right: 1px solid var(--trait); border-bottom: 1px solid var(--trait); background: var(--blanc); }
.metier__num { font-family: var(--police-titre); font-size: .8rem; font-weight: 800; color: var(--bleu); letter-spacing: .1em; }
.metier p { color: var(--texte-doux); margin: 0; }

/* Références */
.refs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.ref { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; }
.ref__visuel { background: linear-gradient(135deg, #2c4a52, var(--nuit)); color: #9fb7c7; font-size: .78rem; display: flex; align-items: flex-end; padding: 12px; min-height: 64px; }
.ref__corps { padding: 20px 22px; }
.ref__mo { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--bleu); }
.ref h3 { margin: 4px 0 10px; }
.ref dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: .92rem; }
.ref dt { color: var(--texte-doux); }
.ref dd { margin: 0; font-weight: 600; color: var(--nuit); }
.statut { display: inline-block; font-size: .78rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.statut--fait { background: #dff3e6; color: #1d6b3a; }
.statut--cours { background: #e3f1fb; color: #145a8a; }

/* Méthode */
.etapes { list-style: none; counter-reset: e; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; padding: 0; margin: 0; }
.etapes li { counter-increment: e; border-top: 3px solid var(--ciel); padding-top: 14px; }
.etapes li::before { content: counter(e, decimal-leading-zero); display: block; font-family: var(--police-titre); font-weight: 800; color: var(--bleu); font-size: 1.4rem; }
.etapes strong { display: block; color: var(--nuit); }
.etapes span { color: var(--texte-doux); font-size: .95rem; }

/* Acheteurs publics */
.acheteurs { background: var(--nuit); color: #dbe7ef; border-radius: var(--rayon); padding: 44px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; }
.acheteurs h2 { color: var(--blanc); }
.acheteurs ul { margin: 0; padding: 0; list-style: none; }
.acheteurs li { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.acheteurs li strong { color: var(--blanc); }

/* Pôle IA souveraine */
.numerique { background: radial-gradient(ellipse 45% 70% at 80% 50%, rgba(110,80,190,.22), transparent 70%), radial-gradient(ellipse 40% 60% at 70% 40%, rgba(75,178,117,.14), transparent 70%), var(--nuit); color: #c9d6dc; position: relative; overflow: hidden; }
.numerique .conteneur { position: relative; display: grid; grid-template-columns: 1fr 230px; gap: 40px; align-items: center; padding-top: 32px; padding-bottom: 32px; }
.numerique h2 { color: var(--blanc); margin: 12px 0 8px; font-size: 1.45rem; }
.numerique p { max-width: 46em; margin-bottom: 16px; }
.numerique__badge { display: inline-block; font-family: var(--police-titre); font-weight: 800; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--nuit); background: var(--ciel); padding: 6px 12px; border-radius: 99px; }
.numerique__visuel { width: 100%; height: auto; }
.numerique svg.reseau { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Pied de page */
.pied { background: #0e262e; border-top: 1px solid rgba(255,255,255,.08); color: #9fb7c7; padding: 56px 0 28px; font-size: .95rem; }
.pied .conteneur { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.pied__logo { height: 44px; width: auto; margin-bottom: 16px; }
.pied__liste, .pied__legal { list-style: none; margin: 0 0 18px; padding: 0; }
.pied__liste li { margin-bottom: 6px; }
.pied__liste a, .pied__legal a { text-decoration: none; }
.pied__liste a:hover, .pied__legal a:hover { text-decoration: underline; }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.pied__legal { display: flex; gap: 18px; margin: 0; }
.pied h2 { color: var(--blanc); font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; }
.pied a { color: #cfe2ee; }
.pied address { font-style: normal; }
.pied__reseaux { display: flex; gap: 10px; list-style: none; margin: 14px 0 0; padding: 0; }
.pied__reseaux a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); transition: background .2s, border-color .2s; }
.pied__reseaux a:hover, .pied__reseaux a:focus-visible { background: rgba(75,178,117,.18); border-color: #4bb275; }
.pied__reseaux svg { fill: #cfe2ee; }
/* Bandeau officiel France Rénov' (C. conso L122-26, arrêté du 7 juillet 2026) : image du kit de l'Anah, jamais modifiée. */
.france-renov { background: #fff; padding: 28px 0; border-top: 1px solid #e3e9f1; }
.france-renov a { display: block; max-width: 700px; margin: 0 auto; }
.france-renov img { display: block; width: 100%; height: auto; }
.pied__bas { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.1); padding-top: 18px; font-size: .85rem; }

/* Navigation : page courante */
.nav a[aria-current="page"] { color: var(--ciel); }

/* Menu mobile (sans JavaScript) */
.menu-mobile { display: none; margin-left: auto; position: relative; }
.menu-mobile summary { list-style: none; cursor: pointer; color: var(--blanc); font-weight: 700; padding: 10px 14px; border: 1px solid rgba(255,255,255,.3); border-radius: var(--rayon); }
.menu-mobile summary::-webkit-details-marker { display: none; }
.menu-mobile nav { position: absolute; right: 0; top: calc(100% + 10px); background: var(--nuit); border: 1px solid rgba(255,255,255,.12); border-radius: var(--rayon); padding: 10px 0; min-width: 240px; box-shadow: var(--ombre); }
.menu-mobile ul { list-style: none; margin: 0; padding: 0; }
.menu-mobile a { display: block; padding: 10px 20px; color: #dbe5ea; text-decoration: none; font-weight: 600; }
.menu-mobile a[aria-current="page"], .menu-mobile a:hover { color: var(--ciel); }

/* En-tête des pages intérieures */
.page-tete { position: relative; background: radial-gradient(ellipse 50% 90% at 90% 0%, rgba(75,178,117,.16), transparent 70%), var(--nuit); color: #c9d6dc; padding: 48px 0 56px; }
.page-tete h1 { color: var(--blanc); max-width: 22em; }
.fil { font-size: .88rem; margin-bottom: 18px; color: #9fb7c0; }
.fil a { color: #cfe2e6; }
.page-tete__chapo { font-size: 1.18rem; max-width: 42em; }
.page-tete__maj { font-size: .85rem; color: #9fb7c0; margin: 0; }

/* Contenu rédactionnel */
.prose { max-width: 50em; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.3em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }
.mise-en-page { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; }
.encart { background: var(--papier); border-left: 4px solid var(--ciel); border-radius: var(--rayon); padding: 22px 24px; }
.encart h2, .encart h3 { font-size: 1.05rem; margin-top: 0; }
.encart ul { padding-left: 1.1em; margin: 0; }
.encart--collant { position: sticky; top: 100px; }
.reponse-directe { font-size: 1.12rem; background: #e9f4ec; border-radius: var(--rayon); padding: 18px 22px; margin-bottom: 1.6em; }
.tableau { width: 100%; border-collapse: collapse; margin: 1em 0 1.6em; font-size: .97rem; }
.tableau th, .tableau td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--trait); vertical-align: top; }
.tableau th { background: var(--papier); color: var(--nuit); font-weight: 700; }
.tableau-defile { overflow-x: auto; }
.source { font-size: .85rem; color: var(--texte-doux); }
.bande-action { background: var(--nuit); color: #c9d6dc; padding: 48px 0; }
.bande-action .conteneur { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.bande-action h2 { color: var(--blanc); margin: 0 0 6px; font-size: 1.5rem; }
.bande-action p { margin: 0; }

/* Questions fréquentes */
.faq details { border-bottom: 1px solid var(--trait); padding: 16px 0; }
.faq summary { cursor: pointer; font-weight: 700; color: var(--nuit); font-family: var(--police-titre); }
.faq details p { margin: 12px 0 0; }

/* Formulaire */
.formulaire { display: grid; gap: 18px; max-width: 640px; }
.formulaire label { display: block; font-weight: 600; margin-bottom: 6px; }
.formulaire input, .formulaire select, .formulaire textarea { width: 100%; font: inherit; padding: 12px 14px; border: 1px solid #7f8f98; border-radius: var(--rayon); background: var(--blanc); color: var(--texte); }
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { outline: 3px solid var(--bleu); outline-offset: 1px; border-color: var(--bleu); }
.formulaire .case { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.formulaire .case input { width: auto; margin-top: 5px; }
.formulaire .piege { position: absolute; left: -9999px; }
.formulaire button { justify-self: start; border: 0; cursor: pointer; font-family: inherit; font-size: inherit; }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* Responsive */
@media (max-width: 1100px) {
  .nav, .entete__action { display: none; }
  .menu-mobile { display: block; }
}
@media (max-width: 960px) {
  .mise-en-page { grid-template-columns: 1fr; gap: 32px; }
  .encart--collant { position: static; }
  .pied .conteneur { grid-template-columns: 1fr 1fr; }
  .numerique .conteneur { grid-template-columns: 1fr; gap: 24px; }
  .numerique__visuel { max-width: 180px; margin: 0 auto; }
  .heros__anneaux { width: 560px; height: 560px; right: -280px; top: -280px; opacity: .45; }
  .entete .btn { display: none; }
  .nav { display: none; }
  .heros .conteneur, .acheteurs, .pied .conteneur { grid-template-columns: 1fr; }
  .grille-3, .metiers, .refs { grid-template-columns: 1fr; }
  .preuves ul { grid-template-columns: 1fr 1fr; }
  .etapes { grid-template-columns: 1fr 1fr; }
  .ref { grid-template-columns: 1fr; }
  .ref__visuel { min-height: 120px; }
}
@media (max-width: 560px) {
  .pied .conteneur, .deux-colonnes { grid-template-columns: 1fr; }
  .preuves ul, .etapes { grid-template-columns: 1fr; }
  .acheteurs { padding: 28px; }
  .section { padding: 56px 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .heros__anneaux img { animation: none; } }

/* Compléments v6 */
.h3 { font-size: 1.2rem; font-weight: 700; }
.metier--lien { display: block; text-decoration: none; color: inherit; transition: background .15s; }
.metier--lien:hover { background: var(--papier); }
.metier--lien:hover h2 { color: var(--bleu); }

/* Filigrane hexagonal (v7) : motif de la charte sur toutes les pages */
:root {
  --hexa-sombre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104'%3E%3Cpath d='M30 0 L60 17.3 L60 52 L30 69.3 L0 52 L0 17.3 Z M30 69.3 L30 104' fill='none' stroke='%234bb275' stroke-opacity='.10'/%3E%3Ccircle cx='30' cy='0' r='1.6' fill='%234bb275' fill-opacity='.3'/%3E%3C/svg%3E");
  --hexa-clair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104'%3E%3Cpath d='M30 0 L60 17.3 L60 52 L30 69.3 L0 52 L0 17.3 Z M30 69.3 L30 104' fill='none' stroke='%230e262e' stroke-opacity='.045'/%3E%3C/svg%3E");
}
.page-tete { background: radial-gradient(ellipse 50% 90% at 90% 0%, rgba(75,178,117,.16), transparent 70%), var(--hexa-sombre), var(--nuit); }
.bande-action { background: var(--hexa-sombre), var(--nuit); }
.pied { background: var(--hexa-sombre), #0e262e; }
.acheteurs { background: var(--hexa-sombre), var(--nuit); }
.section--papier { background: var(--hexa-clair), var(--papier); }
.section { background-image: var(--hexa-clair); }
.preuves { background: var(--hexa-clair), var(--papier); }

/* Deux expertises vedettes (v8) */
.vedettes { padding-top: 56px; padding-bottom: 24px; }
.vedettes__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.vedette { background: var(--blanc); border: 1px solid var(--trait); border-top: 4px solid var(--ciel); border-radius: var(--rayon); padding: 32px; box-shadow: var(--ombre); }
.vedette h2 { font-size: 1.7rem; }
.vedette p { color: var(--texte-doux); }
.vedette ul { padding-left: 1.1em; color: var(--texte); margin-bottom: 22px; }
.vedette__liens { display: flex; flex-wrap: wrap; gap: 10px; }
.btn--trait { border-color: var(--nuit); color: var(--nuit); }
.btn--trait:hover { background: var(--papier); }
@media (max-width: 960px) { .vedettes__grille { grid-template-columns: 1fr; } }

/* Blog (v9) */
.grille-articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 24px; }
.carte--article h3 { font-size: 1.12rem; margin: 6px 0 10px; }
.carte--article h3 a { color: var(--nuit); text-decoration: none; }
.carte--article h3 a:hover { color: var(--bleu); }
.carte__date { font-size: .85rem; color: var(--texte-doux); margin: 0; }
.badge-brouillon { display: inline-block; background: #fff4cc; color: #5c4400; font-size: .75rem; font-weight: 700; padding: 1px 8px; border-radius: 99px; margin-left: 6px; }
.section--courte { padding: 0 0 56px; }
.sources { font-size: .9rem; word-break: break-all; }
.lien-fleche { font-weight: 700; text-decoration: none; }
.lien-fleche::after { content: " →"; }
@media (max-width: 960px) { .grille-articles { grid-template-columns: 1fr; } }

/* Photos de chantier (v10) */
.ref__visuel--photo { padding: 0; aspect-ratio: 16 / 10; }
.ref__visuel--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.figure { margin: 1.6em 0; }
.figure img { width: 100%; height: auto; border-radius: var(--rayon); }
.figure figcaption { font-size: .88rem; color: var(--texte-doux); margin-top: 8px; }

/* Pages de référence (v11) */
.galerie { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 1em 0 1.6em; }
.galerie figure { margin: 0; }
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon); display: block; }
.galerie figcaption { font-size: .85rem; color: var(--texte-doux); margin-top: 6px; }
.figure--etroite { max-width: 260px; float: right; margin: 0 0 1em 1.5em; }
.fiche-chantier { display: grid; grid-template-columns: 1fr; gap: 2px; margin: 0 0 18px; font-size: .93rem; }
.fiche-chantier dt { font-weight: 700; color: var(--nuit); margin-top: 8px; }
.fiche-chantier dd { margin: 0; color: var(--texte-doux); }
.note-discrete { font-size: .78rem; color: var(--texte-doux); margin-top: 2.5em; }
.ref__lien { display: inline-block; margin-top: 10px; font-weight: 700; text-decoration: none; }
.ref__lien::after { content: " →"; }
@media (max-width: 560px) { .galerie { grid-template-columns: 1fr; } .figure--etroite { float: none; margin: 1em 0; } }

/* Photo vedette (v12) */
.vedette__photo { width: calc(100% + 64px); max-width: none; margin: -32px -32px 20px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--rayon) var(--rayon) 0 0; display: block; }
.vedette__photo { height: auto; }
.heros .fiche { position: relative; z-index: 1; background: rgba(14,38,46, .88); backdrop-filter: blur(2px); }
.heros__anneaux { opacity: .7; }
.vedette__photo { object-position: 45% 40%; }
@media (max-width: 560px) { .vedette__photo { aspect-ratio: 4 / 3; } .vedette { padding: 24px; } .vedette__photo { width: calc(100% + 48px); margin: -24px -24px 18px; } }

/* Lettre d'actualités : formulaire d'inscription */
.message-etat { background: #e8f5ec; border: 1px solid #9fd2ae; color: var(--nuit); border-radius: var(--rayon); padding: 14px 16px; margin-bottom: 18px; font-weight: 600; }
.formulaire .sujets { border: 1px solid var(--trait); border-radius: var(--rayon); padding: 12px 16px 14px; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.formulaire .sujets legend { font-weight: 600; padding: 0 6px; }
.formulaire .facultatif { font-weight: 400; color: var(--texte-doux); }
@media (max-width: 640px) { .formulaire .sujets { grid-template-columns: 1fr; } }
.etapes-lettre { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; counter-reset: etape; }
.etapes-lettre li { counter-increment: etape; display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: start; padding: 14px 16px; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--blanc); }
.etapes-lettre li::before { content: counter(etape); grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: #e3e9ee; color: var(--nuit); }
.etapes-lettre li.fait::before { content: "✓"; background: #2d7a4a; color: #fff; }
.etapes-lettre li.encours { border-color: #2d7a4a; box-shadow: 0 0 0 2px #2d7a4a33; }
.etapes-lettre li.encours::before { background: #f2b632; }
.etapes-lettre span { color: var(--texte-doux); }
.sommaire-guide { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
.sommaire-guide a { padding: 6px 12px; border: 1px solid var(--trait); border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .92rem; }
.encart .petit, p.petit { font-size: .9rem; color: var(--texte-doux); }
.bandeau-lettre { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; margin: 0 0 32px; padding: 22px 26px; border-radius: var(--rayon); background: var(--hexa-sombre), var(--nuit); color: #dbe7ef; text-decoration: none; border-left: 6px solid var(--ciel); }
.bandeau-lettre:hover .bandeau-lettre__btn { background: #67bf8b; }
.bandeau-lettre__texte { display: grid; gap: 4px; flex: 1 1 380px; }
.bandeau-lettre__texte strong { font-family: var(--police-titre); font-size: 1.25rem; color: #fff; }
.bandeau-lettre__texte span { color: #b9cbd3; }
.bandeau-lettre__btn { flex: 0 0 auto; }
.grille-articles + .bandeau-lettre { margin: 36px 0 18px; }
.lien-lettre-haut { font-size: .92rem; color: var(--texte-doux); border-left: 4px solid var(--ciel); padding: 6px 12px; background: #f2f7f3; border-radius: 0 6px 6px 0; }
.lien-lettre-haut a { font-weight: 700; }
/* Bloc d'inscription à la lettre : une grande case verte cliquable sur toute la largeur */
.bloc-lettre { display: flex; align-items: center; gap: 18px; width: 100%; box-sizing: border-box; margin: 0 0 32px; padding: 20px 26px; border-radius: 12px; background: var(--soleil); color: var(--nuit); text-decoration: none; box-shadow: 0 6px 18px rgba(14,38,46,.12); transition: background .2s, transform .2s, box-shadow .2s; }
.bloc-lettre:hover { background: #67bf8b; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(14,38,46,.16); }
.bloc-lettre:focus-visible { outline: 3px solid var(--nuit); outline-offset: 3px; }
.bloc-lettre__icone { flex: 0 0 auto; width: 34px; height: 34px; }
.bloc-lettre__texte { flex: 1 1 auto; display: grid; gap: 2px; }
.bloc-lettre__texte strong { font-family: var(--police-titre); font-size: 1.35rem; line-height: 1.2; }
.bloc-lettre__texte small { font-size: .9rem; color: #1f3d33; }
.bloc-lettre__fleche { flex: 0 0 auto; font-size: 1.8rem; font-weight: 700; transition: transform .2s; }
.bloc-lettre:hover .bloc-lettre__fleche { transform: translateX(4px); }
.bloc-lettre--fin { padding: 14px 22px; margin-bottom: 28px; }
.bloc-lettre--fin strong { font-size: 1.1rem; }
.grille-articles + .bloc-lettre { margin: 36px 0 18px; }
.prose .bloc-lettre { text-decoration: none; }
@media (max-width: 560px) { .bloc-lettre { padding: 16px 18px; gap: 12px; } .bloc-lettre__texte strong { font-size: 1.1rem; } .bloc-lettre__icone { width: 28px; height: 28px; } }
.badge-theme { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .02em; background: #e3eef6; color: #1d4e6e; }

/* Audit UX du 03/10/2026 (skill UI UX Pro Max, ADR-031) : contrastes et titre caché pour les lecteurs d'écran */
.page-tete__maj a { color: #cfe2e6; }
.bloc-lettre__texte small { color: var(--nuit); }
.cache-ecran { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Maquette UX du 03/10/2026 (audit avec le skill UI UX Pro Max, ADR-031), à valider par Mehdi */
.surtitre { color: var(--bleu); }  /* vert foncé sur fond clair : 5,3:1 au lieu de 2,6:1 */
.heros .surtitre, .numerique .surtitre, .acheteurs .surtitre, .bande-action .surtitre, .page-tete .surtitre { color: var(--ciel); }
.ref__bande { height: 48px; background: var(--hexa-sombre), var(--nuit); }
.refs__titre { grid-column: 1 / -1; margin: 24px 0 0; font-size: 1.4rem; }
.refs__encours { max-width: 60em; margin: 28px 0 18px; color: var(--texte-doux); }
.entete__appel { display: none; }
@media (max-width: 1100px) {
  .entete__appel { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; margin-left: auto; border-radius: var(--rayon); background: var(--soleil); color: var(--nuit); font-weight: 700; text-decoration: none; }
  .entete__appel + .menu-mobile { margin-left: 10px; }
}
@media (max-width: 960px) {
  .mise-en-page > .encart:has(.fiche-chantier) { order: -1; }  /* fiche du chantier avant les photos sur téléphone */
}

/* Encadré d'appel ciblé dans le texte (page ombrières, 03/10/2026) */
.encart-texte { background: var(--papier); border-left: 4px solid var(--soleil); padding: 14px 18px; border-radius: var(--rayon); }

/* Images des actualités (ADR-062) */
.carte--article.avec-image { padding: 0; overflow: hidden; }
.carte--article.avec-image .carte__corps { padding: 22px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.carte__image { display: block; aspect-ratio: 1200 / 630; overflow: hidden; background: var(--nuit); }
.carte__image img, .carte__image picture { width: 100%; height: 100%; display: block; }
.carte__image img { object-fit: cover; transition: transform .3s ease; }
.carte__image:hover img { transform: scale(1.03); }
.article-image { margin: 0 0 28px; }
.article-image img { width: 100%; height: auto; display: block; border-radius: var(--rayon); }
.article-image figcaption { font-size: .82rem; color: #5d6f76; margin-top: 8px; }
/* Visuel animé de l'actualité (ADR-079, GO de Mehdi 10/10/2026) : vidéo verticale sur bandeau bleu nuit */
.video-actu { margin: 0 0 28px; }
.video-actu__fond { background: radial-gradient(ellipse 60% 80% at 80% 10%, rgba(75,178,117,.18), transparent 70%), var(--nuit); border-radius: var(--rayon); padding: 22px; display: flex; justify-content: center; }
.video-actu video { height: 440px; width: auto; max-width: 100%; aspect-ratio: 9 / 16; border-radius: 10px; display: block; background: var(--nuit); }
.video-actu figcaption { font-size: .82rem; color: #5d6f76; margin-top: 8px; }
@media (max-width: 700px) { .video-actu__fond { padding: 14px; } .video-actu video { height: auto; width: min(300px, 78vw); } }
@media (prefers-reduced-motion: reduce) { .carte__image img { transition: none; } }
/* Page Environnement et chantier (17/10/2026) : cartes avec statut de preuve */
.engagements-chantier { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin: 32px 0 40px; }
.engagements-chantier .carte h2 { font-size: 1.12rem; margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.engagements-chantier .carte p { margin: 0 0 12px; }
.engagements-chantier .piece { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--trait); font-size: .95rem; }
.engagements-chantier .piece strong { color: var(--texte); }
.statut { display: inline-block; padding: 2px 10px; border-radius: 999px; font-family: var(--police); font-size: .75rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.statut--ok { background: #e3f3e9; color: #1f5c37; }
.statut--encours { background: #fff4cc; color: #5c4400; }
.legende-statuts { display: flex; flex-wrap: wrap; gap: 8px; }
.engagements-chantier__suite .encart { margin-bottom: 32px; }
@media (max-width: 760px) { .engagements-chantier { grid-template-columns: 1fr; } }