/* Concept : planche d'architecte la nuit. Fond noir graphite, traits fins en bleu 99,
   axonométries en couches (le logo comme principe constructif), cotes et cartouches
   en mono. Le corail ne sert qu'à la coupe transversale : la sûreté (99RiskManagement). */
:root {
  --fond: #06090a;
  --fond-2: #0c1214;
  --trait: rgba(160, 205, 220, .14);
  --trait-fort: rgba(160, 205, 220, .32);
  --trame: rgba(160, 205, 220, .055);
  --texte: #eef3f4;
  --gris: #8c9ca2;
  --ombre: #1b282d;
  --bleu: #046380;           /* bleu marque */
  --bleu-clair: #4fb2d4;     /* bleu lisible sur fond sombre */
  --coupe: #e0574a;          /* corail : réservé à la sûreté */

  --f-titre: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-texte: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --f-cote: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --f-logo: "Quicksand", "Manrope", Arial, sans-serif;

  --g: clamp(16px, 5vw, 72px);
  --max: 1360px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overflow-x: clip; }
/* Textes bilingues en blocs : seul le bloc de la langue active s'affiche */
html[lang="fr"] [data-l="en"], html:not([lang="fr"]) [data-l="fr"] { display: none !important; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 400 16px/1.7 var(--f-texte); -webkit-font-smoothing: antialiased;
  /* trame de calque très discrète sur toute la page */
  background-image:
    linear-gradient(var(--trame) 1px, transparent 1px),
    linear-gradient(90deg, var(--trame) 1px, transparent 1px);
  background-size: 96px 96px;
  background-position: center top;
}
img { max-width: 100%; display: block; }
picture { display: contents; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 1px solid var(--bleu-clair); outline-offset: 4px; }
.mono { font-family: var(--f-cote); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.kicker { color: var(--bleu-clair); margin: 0; }
.titre-section {
  margin: .8rem 0 0; font-family: var(--f-titre); font-weight: 250; font-stretch: 125%;
  font-size: clamp(2.1rem, 5.4vw, 4.6rem); line-height: 1; letter-spacing: -.01em; text-wrap: balance;
}
.lien { display: inline-flex; gap: .6rem; text-decoration: none; font-weight: 600; font-size: .95rem; border-bottom: 1px solid currentColor; padding-bottom: .2rem; transition: color .2s; }
.lien:hover { color: var(--bleu-clair); }

/* ---------- En-tête ---------- */
.entete {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: calc(16px + env(safe-area-inset-top, 0px)) var(--g) 16px;
  background: rgba(6,9,10,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trame);
  isolation: isolate;
}
/* Test : pont scénique (truss) en filigrane dans l'en-tête. Pour le retirer, supprimer ce bloc. */
.entete::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 26px; transform: translateY(-50%);
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='26' viewBox='0 0 48 26'><g fill='none' stroke='%234fb2d4' stroke-width='1'><path d='M0 3.5H48M0 6.5H48M0 19.5H48M0 22.5H48'/><path d='M0 20 24 6 48 20' stroke-width='.8'/><path d='M.5 6.5V19.5M24.5 6.5V19.5' stroke-width='.6'/></g></svg>") repeat-x left center / auto 26px;
  opacity: .2; pointer-events: none; z-index: -1;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.logo { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--bleu-clair); }
.logo-icon { width: 30px; height: 30px; }
.logo-sep { width: 1px; height: 36px; background: currentColor; opacity: .45; }
/* mot « 99LAYERS » vectorisé depuis le logo officiel (assets/logo/99layers-mot.svg) */
.logo-word { display: block; height: 19px; width: auto; }
.entete-droite { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }
.langue { display: flex; align-items: center; gap: .35rem; color: var(--gris); }
.langue span { opacity: .5; font-size: .72rem; }
.langue button { background: none; border: 0; padding: .3rem .1rem; cursor: pointer; color: var(--gris); border-bottom: 1px solid transparent; transition: color .2s; }
.langue button:hover { color: var(--texte); }
.langue button[aria-pressed="true"] { color: var(--bleu-clair); border-bottom-color: currentColor; }
.nav { display: flex; gap: 1.8rem; align-items: center; }
.nav a { text-decoration: none; font-size: .85rem; font-weight: 500; color: var(--gris); transition: color .2s; }
.nav a:hover { color: var(--texte); }
.nav .nav-contact { color: var(--texte); border: 1px solid var(--trait-fort); padding: .45rem .95rem; }
.nav .nav-contact:hover { border-color: var(--bleu-clair); }
/* 99RiskManagement : liseré rouge sûreté */
.nav .nav-risk { color: var(--texte); border: 1px solid var(--coupe); padding: .45rem .95rem; white-space: nowrap; word-spacing: .08em; }
.nav .nav-risk:hover { background: rgba(224,87,74,.14); }
.lien-risk { color: var(--texte); border-bottom-color: var(--coupe); }
.lien-risk:hover { color: var(--coupe); }
/* Menu : sous-menu Expertises (survol ou clavier sur ordinateur, liste dépliée sur mobile) */
.nav-groupe { position: relative; }
.nav-exp::after { content: " ▾"; font-size: .7em; color: var(--bleu-clair); }
.nav-sous { display: none; position: absolute; top: 100%; left: -1.1rem; z-index: 30; min-width: 19rem; padding-top: .9rem; }
.nav-sous::before { content: ""; position: absolute; inset: .9rem 0 0; background: var(--fond); border: 1px solid var(--trait-fort); z-index: -1; }
.nav-groupe:hover .nav-sous, .nav-groupe:focus-within .nav-sous { display: grid; }
.nav .nav-sous a { padding: .7rem 1.1rem; border-bottom: 1px solid var(--trait); color: #cfd9dc; white-space: nowrap; }
.nav .nav-sous a:last-child { border-bottom: 0; }
.nav .nav-sous a:hover { color: var(--texte); background: var(--fond-2); }
.nav .nav-sous a.risk { border-left: 2px solid var(--coupe); }
.menu-btn { display: none; background: none; border: 0; border-bottom: 1px solid currentColor; color: var(--texte); cursor: pointer; padding: .3rem 0; }
@media (max-width: 900px) {
  .menu-btn { display: block; }
  .nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--fond); border-bottom: 1px solid var(--trait); padding: 0 var(--g) 1rem; display: none; }
  .nav.ouvert { display: flex; }
  .nav a { padding: .9rem 0; border-bottom: 1px solid var(--trait); font-size: 1rem; }
  .nav .nav-contact { border: 0; border-bottom: 1px solid var(--trait); padding: .9rem 0; color: var(--bleu-clair); }
  .nav .nav-risk { border: 0; border-left: 2px solid var(--coupe); border-bottom: 1px solid var(--trait); padding: .9rem 0 .9rem .8rem; }
  .nav-groupe { display: flex; flex-direction: column; }
  .nav-sous { display: grid; position: static; min-width: 0; padding: 0 0 0 1rem; }
  .nav-sous::before { display: none; }
  .nav .nav-sous a { padding: .7rem 0; font-size: .92rem; white-space: normal; }
  .nav .nav-sous a:last-child { border-bottom: 1px solid var(--trait); }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  min-height: clamp(600px, 94svh, 1000px);
  display: grid; align-items: center;
  padding: 120px var(--g) 90px;
  --x: 30%; --y: 45%;
  background: radial-gradient(ellipse 60% 50% at 70% 55%, rgba(4,99,128,.12), transparent 70%), var(--fond);
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-text { position: relative; z-index: 2; max-width: min(640px, 100%); }
.hero-kicker { color: var(--gris); margin: 0 0 1.6rem; }
.hero-title {
  display: grid; margin: 0;
  font-family: var(--f-titre); font-weight: 750; font-stretch: 112%;
  font-size: clamp(3.2rem, 9.5vw, 8.4rem); line-height: .9; letter-spacing: -.03em;
}
.hero-title > span { grid-area: 1 / 1; }
.t-dim { color: var(--ombre); -webkit-text-stroke: 1px rgba(160,205,220,.18); }
.t-lit {
  color: var(--texte);
  -webkit-mask-image: radial-gradient(circle clamp(160px, 24vw, 340px) at var(--x) var(--y), #000 30%, transparent 72%);
          mask-image: radial-gradient(circle clamp(160px, 24vw, 340px) at var(--x) var(--y), #000 30%, transparent 72%);
}
.hero-lede { margin: 2rem 0 2.2rem; max-width: 44ch; color: var(--gris); font-size: 1.05rem; }
.coords { position: absolute; z-index: 2; left: var(--g); bottom: 26px; margin: 0; color: var(--gris); font-variant-numeric: tabular-nums; opacity: .7; }
/* Tablette portrait et téléphone : maquette en haut, texte en dessous */
@media (max-width: 1000px) {
  .coords { display: none; }
  .hero { align-items: end; padding-top: 520px; padding-bottom: 80px; min-height: 0; }
}
@media (max-width: 600px) {
  .hero { padding-top: 360px; padding-bottom: 60px; }
}

/* ---------- Méthode ---------- */
.methode { max-width: var(--max); margin-inline: auto; padding: clamp(90px, 13vw, 180px) var(--g) clamp(60px, 8vw, 120px); }
.methode-corps { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); margin-top: clamp(2.5rem, 6vw, 5rem); }
.methode-visuel { position: sticky; top: 12vh; height: 76vh; min-height: 420px; align-self: start; }
.methode-visuel canvas { width: 100%; height: 100%; display: block; }
.phases { list-style: none; margin: 0; padding: 0; }
.phase { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding-block: 2rem; border-top: 1px solid var(--trait); opacity: .38; transition: opacity .5s; }
.phase.active { opacity: 1; }
.phase-num { color: var(--bleu-clair); margin: 0; }
.phase h3 { margin: .5rem 0 .8rem; font-family: var(--f-titre); font-weight: 300; font-stretch: 125%; font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1; }
.phase > p:not(.phase-num) { margin: 0; max-width: 40ch; color: var(--gris); }
.phase ul { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: .1rem; max-width: 30rem; }
.phase ul li { padding: .45rem 0; border-bottom: 1px solid var(--trait); font-size: .93rem; display: flex; gap: .8rem; }
.phase ul li::before { content: ""; flex: 0 0 .75rem; height: 1px; margin-top: .8em; background: var(--bleu-clair); }
@media (max-width: 860px) {
  .methode-corps { grid-template-columns: minmax(0, 1fr); }
  .methode-visuel { top: 64px; height: 38vh; min-height: 260px; z-index: 1; background: linear-gradient(var(--fond) 80%, rgba(6,9,10,0)); }
  .phase { min-height: auto; padding-block: 2.4rem; opacity: 1; }
}

/* Liens vers les pages d'expertise */

/* ---------- Coupe A-A' : 99RiskManagement ---------- */
.coupe { position: relative; background: var(--fond-2); border-block: 1px solid var(--trait); overflow: hidden; }
.coupe::before { /* hachures de coupe */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px;
  background: repeating-linear-gradient(45deg, var(--coupe) 0 1px, transparent 1px 8px); opacity: .35; height: 6px;
}
.coupe-trait { position: absolute; top: 0; bottom: 0; left: clamp(28px, 8vw, 120px); width: 0; border-left: 1px dashed var(--coupe); }
.coupe-trait span { position: absolute; left: -.4em; color: var(--coupe); background: var(--fond-2); padding: .3rem 0; }
.coupe-trait span:first-child { top: 40px; } .coupe-trait span:last-child { bottom: 30px; }
.coupe-inner { max-width: var(--max); margin-inline: auto; padding: clamp(56px, 7vw, 96px) var(--g) clamp(52px, 6vw, 88px); }
.coupe-titre { font-size: clamp(1.35rem, 6vw, 2.6rem); }
.coupe .kicker { color: var(--coupe); }
/* Logo 99RiskManagement : bouclier | 99RiskManagement */
.logo-risk { display: inline-flex; align-items: center; gap: .42em; max-width: 100%; }
.logo-risk-icone { flex: none; width: .82em; height: .98em; fill: none; stroke: var(--coupe); stroke-width: 2.2; stroke-linejoin: round; }
.logo-risk-sep { flex: none; width: 1px; height: 1.15em; background: var(--coupe); opacity: .75; }
.logo-risk-mot { font-weight: 250; letter-spacing: .005em; white-space: nowrap; }
.logo-inline { display: inline-flex; align-items: center; gap: .12em; color: var(--bleu-clair); }
.logo-inline svg { width: .7em; height: .7em; }
.coupe-lede { max-width: 52ch; margin: 1.8rem 0 3rem; color: var(--gris); font-size: 1.08rem; }
.coupe-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); border-top: 1px solid var(--trait-fort); }
.coupe-grille > div { padding: 1.4rem 1.6rem 1.8rem 0; border-bottom: 1px solid var(--trait); min-width: 0; }
.coupe-grille .mono { color: var(--coupe); margin: 0; }
.coupe-grille h3 { margin: .4rem 0 .5rem; font-family: var(--f-titre); font-weight: 400; font-stretch: 115%; font-size: 1.45rem; }
.coupe-grille p:not(.mono) { margin: 0; color: var(--gris); font-size: .93rem; }
.coupe .lien { margin-top: 2.6rem; }

/* ---------- Typologies : légende ---------- */
.typologies, .realisations, .galerie-section, .faq-section { max-width: var(--max); margin-inline: auto; padding: clamp(90px, 12vw, 160px) var(--g) 0; }
.typo-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 2rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.typo-head .kicker { flex-basis: 100%; }
.typo-head .titre-section { margin: 0; flex: 1; }
.legende { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); border-top: 1px solid var(--trait-fort); }
.legende li { border-bottom: 1px solid var(--trait); min-width: 0; }
.legende .item { display: flex; align-items: center; gap: 1rem; padding: 1rem 1rem 1rem 0; font-size: 1rem; text-decoration: none; transition: color .2s; }
.legende .motif { flex: 0 0 34px; height: 22px; border: 1px solid var(--trait-fort); }
.legende .code { margin-left: auto; color: var(--gris); white-space: nowrap; }
.legende a.item:hover, .legende a.item:focus-visible { color: var(--bleu-clair); }
.legende a.item:hover .motif { border-color: var(--bleu-clair); }
.legende a.item .code { color: var(--bleu-clair); }
.legende .vide { color: var(--gris); }
.legende .vide .motif { opacity: .45; }

/* ---------- Réalisations : vignettes (accueil et page Réalisations) ---------- */
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: clamp(1rem, 2.4vw, 1.6rem); }
.carte { display: flex; flex-direction: column; text-decoration: none; border: 1px solid var(--trait-fort); background: var(--fond); min-width: 0; transition: border-color .25s, transform .35s cubic-bezier(.2,.7,.2,1); }
.carte:hover, .carte:focus-visible { border-color: var(--bleu-clair); transform: translateY(-3px); }
.carte-visuel { position: relative; aspect-ratio: 16 / 10; max-width: 100%; overflow: hidden; border-bottom: 1px solid var(--trait-fort); background: var(--fond-2); }
.carte-visuel img, .carte-visuel svg { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.carte:hover .carte-visuel img, .carte:hover .carte-visuel svg { transform: scale(1.04); }
.visuel-note { position: absolute; left: .9rem; bottom: .7rem; color: var(--gris); }
.carte-info { display: flex; flex-direction: column; gap: .55rem; padding: 1.1rem 1.2rem 1.3rem; flex: 1; }
.carte-meta { margin: 0; color: var(--bleu-clair); font-size: .66rem; }
.carte h3 { margin: 0; font-family: var(--f-titre); font-weight: 650; font-stretch: 108%; font-size: 1.45rem; line-height: 1.05; }
.carte h3 small { display: block; margin-top: .25rem; font-weight: 300; font-size: .7em; color: var(--gris); }
.carte-extrait { margin: 0; color: var(--gris); font-size: .9rem; line-height: 1.55; }
.carte-lire { margin-top: auto; padding-top: .4rem; color: var(--texte); }
.carte:hover .carte-lire { color: var(--bleu-clair); }
.voir-tout { margin: 2rem 0 0; }

/* ---------- Galerie ---------- */
.galerie { columns: 3 240px; column-gap: 10px; }
.galerie button { all: unset; display: block; margin-bottom: 10px; cursor: zoom-in; break-inside: avoid; }
.galerie button:focus-visible { outline: 1px solid var(--bleu-clair); outline-offset: 2px; }
.galerie img { width: 100%; height: auto; }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(6,9,10,.96); display: grid; place-items: center; padding: var(--g); }
.lightbox figure { margin: 0; }
.lightbox img { max-height: 82vh; margin-inline: auto; }
.lightbox figcaption { margin-top: .8rem; text-align: center; color: var(--gris); font-size: .9rem; }
.lightbox-close { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 16px; background: none; border: 0; color: var(--texte); font-size: 2.4rem; cursor: pointer; line-height: 1; }

/* ---------- Contact : cartouche ---------- */
.contact { max-width: var(--max); margin-inline: auto; padding: clamp(110px, 15vw, 200px) var(--g) clamp(80px, 10vw, 130px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.contact-titre { margin: 0; font-family: var(--f-titre); font-weight: 750; font-stretch: 112%; font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: .92; letter-spacing: -.03em; text-wrap: balance; }
.contact-infos { display: grid; gap: 1.6rem; align-content: start; min-width: 0; }
.contact-lede { margin: 0; max-width: 38ch; color: var(--gris); font-size: 1.05rem; }
/* Coordonnées : simple texte, sans cadre (pour ne pas ressembler à des champs) */
.coordonnees { margin: .4rem 0 0; display: grid; gap: .9rem; }
.coordonnees:empty { display: none; }
.coordonnees div { display: grid; gap: .1rem; min-width: 0; }
.coordonnees dt { font-family: var(--f-cote); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.coordonnees dd { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.coordonnees a { color: var(--texte); text-decoration: none; border-bottom: 1px solid var(--trait-fort); }
.coordonnees a:hover { color: var(--bleu-clair); border-color: currentColor; }

/* Formulaire de contact */
.formulaire { border: 1px solid var(--trait-fort); background: var(--fond); padding: clamp(1.2rem, 3vw, 2rem); display: grid; gap: 1.2rem; min-width: 0; }
.form-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.2rem; }
.form-champ { display: grid; gap: .4rem; min-width: 0; }
.form-large { grid-column: 1 / -1; }
.form-champ label { font-family: var(--f-cote); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.requis { color: var(--bleu-clair); }
.formulaire input[type="text"], .formulaire input[type="email"], .formulaire input[type="tel"], .formulaire select, .formulaire textarea {
  width: 100%; min-height: 44px; padding: .65rem .8rem; font: 400 1rem/1.4 var(--f-texte); color: var(--texte);
  background: var(--fond-2); border: 1px solid var(--trait-fort); border-radius: 0; -webkit-appearance: none; appearance: none;
}
.formulaire select { background-image: linear-gradient(45deg, transparent 50%, var(--bleu-clair) 50%), linear-gradient(135deg, var(--bleu-clair) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem; }
.formulaire textarea { resize: vertical; min-height: 8rem; }
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { outline: none; border-color: var(--bleu-clair); }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consentement { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: start; font-size: .88rem; color: #cfd9dc; cursor: pointer; }
.consentement input { width: 22px; height: 22px; margin: .1rem 0 0; accent-color: var(--bleu-clair); cursor: pointer; }
.consentement a { color: var(--bleu-clair); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.4rem; }
.bouton-envoyer { min-height: 46px; padding: .8rem 1.8rem; font: 600 .95rem var(--f-texte); color: #fff; background: var(--bleu); border: 1px solid var(--bleu); cursor: pointer; transition: background .2s, color .2s; }
.bouton-envoyer:hover { background: transparent; color: var(--bleu-clair); border-color: var(--bleu-clair); }
.bouton-envoyer:disabled { opacity: .6; cursor: progress; }
.form-requis { margin: 0; color: var(--gris); font-size: .66rem; }
.form-statut { margin: 0; font-size: .92rem; min-height: 1.2em; }
.form-statut.ok { color: #7fd1a8; }
.form-statut.erreur { color: #ff9c90; }
@media (max-width: 800px) { .contact { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .form-grille { grid-template-columns: minmax(0, 1fr); } }

.pied { display: grid; gap: 1.2rem; padding: 2rem var(--g) calc(1.8rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--trait); color: var(--gris); }
.pied-ligne { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem 2rem; max-width: var(--max); margin-inline: auto; width: 100%; }
.pied-liens { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 0; padding: 0; list-style: none; }
.pied a { text-decoration: none; display: inline-block; padding-block: .35rem; } .pied a:hover { color: var(--texte); }

/* Téléphones : logo réduit */
@media (max-width: 600px) {
  .logo { gap: .6rem; }
  .logo-icon { width: 26px; height: 26px; }
  .logo-sep { height: 30px; }
  .logo-word { height: 16px; }
}
/* Petits téléphones (≤ 380 px) : en-tête compacté */
@media (max-width: 380px) {
  .logo { gap: .45rem; }
  .logo-sep { display: none; }
  .logo-icon { width: 24px; height: 24px; }
  .logo-word { height: 14px; }
  .entete-droite { gap: .5rem; }
  .langue { gap: .1rem; }
  .langue button { min-width: 34px !important; }
}

/* Écrans tactiles : cibles d'au moins 44 px */
@media (pointer: coarse) {
  .langue button { min-width: 44px; min-height: 44px; }
  .menu-btn { min-height: 44px; padding-inline: .4rem; }
  .planche summary, .fiche summary { min-height: 44px; display: flex; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Cookies : lien du pied de page, bandeau et panneau (js/cookies.js) ---------- */
.pied-cookies { background: none; border: 0; padding: .35rem 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
.pied-cookies:hover { color: var(--texte); }
.ck-bandeau {
  position: fixed; z-index: 80; left: var(--g); right: var(--g); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  max-width: 760px; margin-inline: auto; display: grid; gap: 1rem; padding: 1.2rem 1.4rem;
  background: var(--fond-2); border: 1px solid var(--trait-fort); border-top: 1px solid var(--bleu-clair); color: var(--texte);
}
.ck-texte { margin: 0; color: var(--gris); font-size: .92rem; line-height: 1.6; }
.ck-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.ck-bouton {
  flex: 1 1 10rem; min-height: 44px; padding: .65rem 1rem; font: 600 .9rem var(--f-texte);
  color: var(--texte); background: transparent; border: 1px solid var(--trait-fort); cursor: pointer; transition: border-color .2s, color .2s;
}
.ck-bouton:hover { border-color: var(--bleu-clair); color: var(--bleu-clair); }
.ck-fond { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(6, 9, 10, .72); }
.ck-ouvert body { overflow: hidden; }
.ck-panneau {
  width: min(560px, 100%); max-height: calc(100svh - 32px); overflow: auto; display: grid; gap: 1rem;
  padding: 1.4rem 1.5rem 1.5rem; background: var(--fond-2); border: 1px solid var(--trait-fort); color: var(--texte);
}
.ck-tete { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.ck-titre { margin: 0; font-family: var(--f-titre); font-weight: 300; font-stretch: 125%; font-size: 1.7rem; line-height: 1; }
.ck-fermer { background: none; border: 0; color: var(--gris); font-size: 1.8rem; line-height: 1; min-width: 44px; min-height: 44px; cursor: pointer; }
.ck-fermer:hover { color: var(--texte); }
.ck-groupe { margin: .4rem 0 0; font-family: var(--f-cote); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bleu-clair); }
.ck-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.ck-ligne { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--trait); }
.ck-ligne > div { min-width: 0; }
.ck-nom { margin: 0; font-weight: 600; font-size: .95rem; }
.ck-desc { margin: .15rem 0 0; color: var(--gris); font-size: .85rem; line-height: 1.5; }
.ck-desc:empty { display: none; }
.ck-etat { flex: none; font-family: var(--f-cote); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.ck-interrupteur { position: relative; flex: none; width: 46px; height: 26px; cursor: pointer; }
.ck-interrupteur input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ck-interrupteur span { position: absolute; inset: 0; border: 1px solid var(--trait-fort); transition: border-color .2s; }
.ck-interrupteur span::after { content: ""; position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; background: var(--gris); transition: transform .2s, background .2s; }
.ck-interrupteur input:checked + span { border-color: var(--bleu-clair); }
.ck-interrupteur input:checked + span::after { transform: translateX(20px); background: var(--bleu-clair); }
.ck-interrupteur input:focus-visible + span { outline: 1px solid var(--bleu-clair); outline-offset: 3px; }
.ck-lien { color: var(--gris); font-size: .85rem; justify-self: start; }
.ck-lien:hover { color: var(--texte); }
@media (prefers-reduced-motion: reduce) { .ck-interrupteur span, .ck-interrupteur span::after, .ck-bouton { transition: none; } }

/* ---------- FAQ dépliable (accueil et page FAQ) ---------- */
.faq { display: grid; max-width: 52rem; }
.faq-groupe { margin-top: 2.4rem; }
.faq-groupe > h2 { margin: 0 0 .6rem; color: var(--bleu-clair); }
.faq details { border-top: 1px solid var(--trait); }
.faq details:last-child { border-bottom: 1px solid var(--trait); }
.faq summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center;
  padding: 1.1rem 0; min-height: 44px; font-family: var(--f-titre); font-weight: 400; font-stretch: 108%; font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height: 1.25;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-cote); color: var(--bleu-clair); font-size: 1.2rem; }
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--bleu-clair); }
.faq .reponse { padding: 0 0 1.3rem; color: #cfd9dc; max-width: 64ch; }
.faq .reponse p { margin: 0 0 .7rem; }
.faq .reponse a { color: var(--bleu-clair); }
.faq-section { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(80px, 10vw, 130px); border-top: 1px solid var(--trait); }

/* ---------- Expertises (accueil) : 4 cartes ---------- */
.expertises-accueil { max-width: var(--max); margin-inline: auto; padding: clamp(64px, 8vw, 110px) var(--g); border-top: 1px solid var(--trait); }
.exp-titre { margin: .8rem 0 0; font-family: var(--f-titre); font-weight: 250; font-stretch: 125%; font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1; letter-spacing: -.01em; }
.exp-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1px; background: var(--trait-fort); border: 1px solid var(--trait-fort); margin-top: clamp(2rem, 5vw, 3.2rem); }
.exp-carte { display: flex; flex-direction: column; gap: .9rem; min-width: 0; padding: 1.6rem 1.4rem 1.5rem; background: var(--fond); text-decoration: none; color: var(--texte); transition: background .25s; }
.exp-carte:hover, .exp-carte:focus-visible { background: var(--fond-2); }
.exp-num { color: var(--bleu-clair); }
.exp-marque { color: var(--gris); }
.exp-carte.risk { box-shadow: inset 2px 0 0 var(--coupe); }
.exp-carte.risk .exp-num { color: var(--coupe); }
.exp-carte h3 { margin: 0; font-family: var(--f-titre); font-weight: 400; font-stretch: 112%; font-size: clamp(1.3rem, 2vw, 1.55rem); line-height: 1.12; }
.exp-carte p { margin: 0; color: var(--gris); font-size: .92rem; }
.exp-carte ul { list-style: none; margin: .2rem 0 0; padding: 0; }
.exp-carte li { display: flex; gap: .7rem; padding: .45rem 0; border-bottom: 1px solid var(--trait); font-size: .88rem; color: #cfd9dc; }
.exp-carte li::before { content: ""; flex: 0 0 .7rem; height: 1px; margin-top: .75em; background: var(--bleu-clair); }
.exp-carte.risk li::before { background: var(--coupe); }
.exp-lire { margin-top: auto; padding-top: .8rem; color: var(--gris); }
.exp-carte:hover .exp-lire { color: var(--bleu-clair); }
.exp-carte.risk:hover .exp-lire { color: var(--coupe); }