/* site.css — www.groupe-colonna.fr (site vitrine du Groupe Colonna). 11/11/2026 (demande de Fabian).
   Même famille que www.langres.immo : nuit / ivoire / or, Playfair Display + Inter auto-hébergées (SIL OFL 1.1).
   Téléphone d'abord (390 px → 2560 px), clair et sombre, aucun style en ligne (compatible CSP style-src 'self'),
   contrastes ≥ 4,5:1 (cuivre #8A5A33 sur ivoire = 5,2 ; or #D2B47C sur nuit = 8,6). */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(polices/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(polices/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(polices/playfair-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(polices/playfair-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── couleurs : clair par défaut ── */
:root {
  --fond: #F6F1E8; --fond-2: #FCFAF6; --carte: #FFFFFF; --encre: #171B21; --texte: #2A2D33; --doux: #5E5850;
  --accent: #8A5A33; --accent-fort: #6F4625; --sable: #EFE6D6; --ligne: rgba(20, 24, 31, .13);
  --btn-fond: #14181F; --btn-texte: #F6F1E8; --entete-fond: rgba(246, 241, 232, .94);
  --ombre: 0 24px 60px -24px rgba(20, 24, 31, .28); --ombre-douce: 0 10px 30px -18px rgba(20, 24, 31, .25);
  /* constantes (bandes sombres, photos) */
  --nuit: #14181F; --nuit-2: #1D232C; --ivoire: #F6F1E8; --or: #C6A56B; --or-clair: #E4D2AC; --ligne-claire: rgba(255, 255, 255, .18);
  --rayon: 6px; --max: 1240px; --entete: 76px; --mvt: cubic-bezier(.2, .7, .2, 1);
  --titre: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --corps: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color-scheme: light;
}
/* ── sombre : choisi (data-theme posé par theme.js) ou, sans JavaScript, celui du système ── */
:root[data-theme="dark"] {
  --fond: #12151B; --fond-2: #171B23; --carte: #1D232C; --encre: #F4EEE3; --texte: #DDD6CA; --doux: #ADA598;
  --accent: #D2B47C; --accent-fort: #E4D2AC; --sable: #232A34; --ligne: rgba(255, 255, 255, .14);
  --btn-fond: #F4EEE3; --btn-texte: #14181F; --entete-fond: rgba(18, 21, 27, .92);
  --ombre: 0 24px 60px -24px rgba(0, 0, 0, .7); --ombre-douce: 0 10px 30px -18px rgba(0, 0, 0, .6);
  --nuit: #0C0F14; --nuit-2: #171B23; color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --fond: #12151B; --fond-2: #171B23; --carte: #1D232C; --encre: #F4EEE3; --texte: #DDD6CA; --doux: #ADA598;
    --accent: #D2B47C; --accent-fort: #E4D2AC; --sable: #232A34; --ligne: rgba(255, 255, 255, .14);
    --btn-fond: #F4EEE3; --btn-texte: #14181F; --entete-fond: rgba(18, 21, 27, .92);
    --ombre: 0 24px 60px -24px rgba(0, 0, 0, .7); --ombre-douce: 0 10px 30px -18px rgba(0, 0, 0, .6);
    --nuit: #0C0F14; --nuit-2: #171B23; color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--entete) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; font: 400 16px/1.7 var(--corps); color: var(--texte); background: var(--fond); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; transition: background .4s, color .4s; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--accent); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-fort); }
h1, h2, h3 { font-family: var(--titre); color: var(--encre); line-height: 1.12; margin: 0 0 .5em; font-weight: 500; letter-spacing: -.012em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 6.2vw, 4.4rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; text-wrap: pretty; }
strong { color: var(--encre); font-weight: 600; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--or-clair); color: #171B21; }
.aller { position: absolute; left: -9999px; top: 0; background: var(--nuit); color: #fff; padding: 12px 18px; z-index: 200; }
.aller:focus { left: 8px; top: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.conteneur { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 20px; }
.section { padding-block: clamp(56px, 9vw, 128px); }
.section-2 { background: var(--fond-2); border-block: 1px solid var(--ligne); }
.surtitre { font: 600 .72rem/1.4 var(--corps); letter-spacing: .24em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; display: flex; align-items: center; gap: 12px; }
.surtitre::before { content: ''; width: 28px; height: 1px; background: currentColor; flex: none; }
.titre-section { max-width: 780px; margin: 0 0 clamp(28px, 4.5vw, 56px); }
.titre-section.centre { text-align: center; margin-inline: auto; }
.titre-section.centre .surtitre { justify-content: center; }
.titre-section.centre .surtitre::after { content: ''; width: 28px; height: 1px; background: currentColor; flex: none; }
.titre-section h2 { margin: 0 0 .4em; }
.titre-section.apres-photo { margin: clamp(28px, 4vw, 44px) 0 12px; }
.chapo { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--doux); max-width: 62ch; line-height: 1.6; }
.titre-section.centre .chapo { margin-inline: auto; }
.petit { font-size: .86rem; color: var(--doux); line-height: 1.55; }
em.or { font-style: italic; color: var(--accent); }

/* « à confirmer par Fabian » : repères de la maquette (retirés à la mise en ligne, voir generer.js) */
.ac { border-bottom: 1px dashed var(--accent); }
.ac::after, .ph::before { content: 'à confirmer'; font: 600 .58rem/1 var(--corps); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); border: 1px dashed var(--accent); border-radius: 99px; padding: 3px 7px; margin-left: 7px; vertical-align: middle; white-space: nowrap; display: inline-block; }
.ph { display: inline-block; font-style: italic; color: var(--doux); }
.ph::before { content: 'à compléter'; margin: 0 7px 0 0; font-style: normal; }
.sombre .ac, .pied .ac { border-color: var(--or); }
.sombre .ac::after, .pied .ac::after, .sombre .ph::before { color: var(--or); border-color: var(--or); }

/* ── boutons et liens ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 28px; border: 1px solid var(--btn-fond); border-radius: 3px; background: var(--btn-fond); color: var(--btn-texte);
  font: 600 .76rem/1.2 var(--corps); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .35s var(--mvt), color .35s, border-color .35s, transform .35s var(--mvt); text-align: center; }
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--fond); transform: translateY(-1px); }
.btn-clair { background: transparent; color: var(--encre); border-color: var(--encre); }
.btn-clair:hover { background: var(--btn-fond); border-color: var(--btn-fond); color: var(--btn-texte); }
.btn-or { background: var(--or); border-color: var(--or); color: #14181F; }
.btn-or:hover { background: #fff; border-color: #fff; color: #14181F; }
.btn-verre { background: rgba(20, 24, 31, .4); border-color: rgba(255, 255, 255, .55); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn-verre:hover { background: #fff; border-color: #fff; color: #14181F; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.lien-fleche { font: 600 .76rem/1.2 var(--corps); letter-spacing: .14em; text-transform: uppercase; color: var(--encre); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.lien-fleche::after { content: ''; width: 34px; height: 1px; background: currentColor; transition: width .4s var(--mvt); }
.lien-fleche:hover, a:hover .lien-fleche { color: var(--accent); }
.lien-fleche:hover::after, a:hover .lien-fleche::after { width: 54px; }
.ext::after { content: '↗'; font-size: .9em; margin-left: 2px; }

/* ── en-tête ── */
.entete { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 10px; height: var(--entete); padding: 0 20px; background: var(--entete-fond); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ligne); transition: background .4s, border-color .4s, box-shadow .4s; }
.logo { display: flex; align-items: center; margin-right: auto; height: 100%; text-decoration: none; }
.logo img { height: 40px; width: auto; }
.logo .l-sombre, :root[data-theme="dark"] .logo .l-clair { display: none; }
:root[data-theme="dark"] .logo .l-sombre { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .logo .l-clair { display: none; } :root:not([data-theme]) .logo .l-sombre { display: block; } }
.nav-large { display: none; gap: clamp(18px, 2.2vw, 34px); margin-right: 14px; }
.nav-large a { font: 500 .78rem/1 var(--corps); letter-spacing: .14em; text-transform: uppercase; color: var(--encre); text-decoration: none; padding: 14px 0; position: relative; white-space: nowrap; }
.nav-large a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 6px; height: 1px; background: currentColor; transition: right .4s var(--mvt); }
.nav-large a:hover::after, .nav-large a[aria-current]::after { right: 0; }
.bascule { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 50%; color: var(--encre); cursor: pointer; transition: background .3s, transform .5s var(--mvt); }
.bascule:hover { background: var(--ligne); transform: rotate(18deg); }
.bascule svg { width: 20px; height: 20px; }
.bascule .i-soleil, :root[data-theme="dark"] .bascule .i-lune { display: none; }
:root[data-theme="dark"] .bascule .i-soleil { display: block; }
html:not(.js) .bascule { display: none; }
.btn-entete { display: none; min-height: 44px; padding: 10px 22px; }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: var(--encre); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: block; width: 24px; height: 1.5px; background: currentColor; transition: transform .35s var(--mvt); }
.menu[open] summary { position: relative; z-index: 71; color: var(--ivoire); }
.menu[open] summary span:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu[open] summary span:last-child { transform: translateY(-4.25px) rotate(-45deg); }
.menu nav { position: fixed; inset: 0; z-index: 70; background: var(--nuit); display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 90px 28px 40px; overflow: auto; animation: fondu .35s ease both; }
.menu nav a:not(.btn) { font: 500 1.9rem/1.25 var(--titre); color: var(--ivoire); text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--ligne-claire); }
.menu nav a[aria-current] { color: var(--or); }
.menu nav .btn { margin-top: 28px; }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }
/* sur une grande photo : en-tête transparent, opaque au défilement (classe « colle » posée par site.js) */
.avec-hero .entete { position: absolute; inset: 0 0 auto; background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.js .avec-hero .entete { position: fixed; }
.avec-hero .entete:not(.colle) .logo .l-clair { display: none; }
.avec-hero .entete:not(.colle) .logo .l-sombre { display: block; }
.avec-hero .entete:not(.colle) .nav-large a, .avec-hero .entete:not(.colle) .bascule, .avec-hero .entete:not(.colle) .menu:not([open]) summary { color: #fff; }
.avec-hero .entete:not(.colle) .btn-entete { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
.avec-hero .entete:not(.colle) .btn-entete:hover { background: #fff; color: #14181F; border-color: #fff; }
.avec-hero .entete.colle { background: var(--entete-fond); border-color: var(--ligne); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .5); }

/* ── grand visuel d'accueil ── */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--entete) + 24px) 0 0; color: #fff; overflow: hidden; background: #14181F; isolation: isolate; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; animation: lent 18s ease-out both; }
@keyframes lent { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero-voile { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 12, 16, .66) 0%, rgba(10, 12, 16, .22) 28%, rgba(10, 12, 16, .42) 58%, rgba(10, 12, 16, .9) 100%); }
.hero-texte { margin-block: auto clamp(28px, 5vw, 64px); animation: monte 1.2s var(--mvt) both; }
.hero-texte h1 { max-width: 13ch; }
@keyframes monte { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero .surtitre { color: var(--or-clair); }
.hero h1 { color: #fff; font-size: clamp(2.5rem, 7.2vw, 5.8rem); line-height: 1.03; margin-bottom: 22px; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.hero h1 em { font-style: italic; color: var(--or-clair); }
.hero-sous { font-size: clamp(1rem, 1.7vw, 1.25rem); max-width: 58ch; margin: 0; color: rgba(255, 255, 255, .93); }
.reperes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ligne-claire); background: rgba(12, 15, 20, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: monte 1.2s .25s var(--mvt) both; }
.reperes li { padding: 18px 20px; border-bottom: 1px solid var(--ligne-claire); }
.reperes li:nth-child(odd) { border-right: 1px solid var(--ligne-claire); }
.reperes b { display: block; font: 500 1.35rem/1.2 var(--titre); color: #fff; }
.reperes span { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }

/* ── en-tête de page intérieure ── */
.hero-page { position: relative; min-height: min(68vh, 640px); display: flex; align-items: flex-end; padding: calc(var(--entete) + 40px) 0 clamp(36px, 6vw, 72px); color: #fff; overflow: hidden; background: #14181F; isolation: isolate; }
.hero-page .hero-voile { background: linear-gradient(180deg, rgba(10, 12, 16, .7) 0%, rgba(10, 12, 16, .35) 40%, rgba(10, 12, 16, .88) 100%); }
.hero-page h1 { color: #fff; max-width: 18ch; margin-bottom: 16px; }
.hero-page h1 em { font-style: italic; color: var(--or-clair); }
.hero-page .surtitre { color: var(--or-clair); }
.hero-page .hero-sous { max-width: 60ch; }
.ariane { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 22px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; color: rgba(255, 255, 255, .85); }
.ariane a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; }
.ariane a:hover { color: var(--or-clair); }
.ariane li + li::before { content: '/'; margin-right: 8px; opacity: .6; }
/* page sans photo (légal, 404) */
.tete-simple { padding: clamp(40px, 7vw, 88px) 0 clamp(20px, 3vw, 36px); border-bottom: 1px solid var(--ligne); }
.tete-simple .ariane { color: var(--doux); }
.tete-simple .ariane a:hover { color: var(--accent); }
.tete-simple h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin: 0; }

/* ── blocs ── */
.duo { display: grid; gap: clamp(28px, 5vw, 72px); align-items: center; }
.duo-haut { align-items: start; }
.prose { max-width: 64ch; }
.prose p { color: var(--texte); }
.photo { position: relative; margin: 0; border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); background: var(--sable); }
.photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform 1.4s var(--mvt); }
.photo:hover img { transform: scale(1.03); }
.photo.haute img { aspect-ratio: 4 / 5; }
.photo figcaption { position: absolute; left: 0; bottom: 0; padding: 8px 14px; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(12, 15, 20, .62); border-top-right-radius: var(--rayon); }
.coches { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.coches li { position: relative; padding-left: 30px; }
.coches li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 14px; height: 7px; border: solid var(--accent); border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg); }

/* cartes des métiers / sociétés */
.grille { display: grid; gap: 18px; }
.carte { position: relative; display: flex; flex-direction: column; background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 26px 24px 22px; text-decoration: none; color: var(--texte); box-shadow: var(--ombre-douce); transition: transform .5s var(--mvt), box-shadow .5s, border-color .5s; }
a.carte:hover { transform: translateY(-6px); box-shadow: var(--ombre); border-color: var(--accent); color: var(--texte); }
.carte .role { font: 600 .68rem/1.3 var(--corps); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin: 18px 0 8px; }
.carte h3 { margin: 0 0 8px; }
.carte p { font-size: .95rem; color: var(--doux); margin: 0 0 16px; }
.carte .lien-fleche { margin-top: auto; }
.plaque { display: flex; align-items: center; justify-content: center; height: 112px; background: #fff; border: 1px solid rgba(20, 24, 31, .1); border-radius: 4px; padding: 16px; }
.plaque img { max-height: 78px; width: auto; max-width: 82%; object-fit: contain; }
.plaque.grande { height: 190px; }
.plaque.grande img { max-height: 130px; }
.num { font: 500 2.6rem/1 var(--titre); color: var(--accent); opacity: .85; }
.icone { width: 44px; height: 44px; color: var(--accent); }
.icone svg { width: 100%; height: 100%; }
.carte.simple { box-shadow: none; background: transparent; padding: 26px 0 0; border: 0; border-top: 1px solid var(--ligne); border-radius: 0; }
.carte.simple h3 { margin-top: 16px; }

/* bande sombre */
.sombre { background: var(--nuit); color: rgba(255, 255, 255, .88); }
.sombre h2, .sombre h3, .sombre strong { color: #fff; }
.sombre .surtitre, .sombre em.or, .sombre .num { color: var(--or); }
.sombre .chapo, .sombre .prose p, .sombre .carte p { color: rgba(255, 255, 255, .84); }
.sombre .lien-fleche { color: #fff; }
.sombre .lien-fleche:hover { color: var(--or-clair); }
.sombre .coches li::before { border-color: var(--or); }
.sombre .carte.simple { border-color: var(--ligne-claire); color: rgba(255, 255, 255, .88); }
.sombre a:not(.btn):not(.lien-fleche) { color: var(--or-clair); }

/* bandeau photo (séjourner à Langres) */
.bandeau { position: relative; isolation: isolate; color: #fff; overflow: hidden; background: #14181F; padding-block: clamp(72px, 12vw, 160px); text-align: center; }
.bandeau img.fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.bandeau::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(10, 12, 16, .62); }
.bandeau h2 { color: #fff; max-width: 20ch; margin-inline: auto; }
.bandeau .surtitre { color: var(--or-clair); justify-content: center; }
.bandeau .surtitre::after { content: ''; width: 28px; height: 1px; background: currentColor; }
.bandeau p { max-width: 56ch; margin-inline: auto; color: rgba(255, 255, 255, .93); }
.bandeau .actions { justify-content: center; }

/* organigramme du groupe */
.orga { display: grid; gap: 14px; position: relative; padding-left: 26px; }
.orga::before { content: ''; position: absolute; left: 6px; top: 34px; bottom: 34px; width: 1px; background: var(--accent); opacity: .5; }
.orga-tete, .orga-fille { position: relative; background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 18px 20px; text-decoration: none; color: var(--texte); transition: border-color .4s, transform .4s var(--mvt); }
a.orga-fille:hover { border-color: var(--accent); transform: translateX(4px); color: var(--texte); }
.orga-tete::before, .orga-fille::before { content: ''; position: absolute; left: -20px; top: 50%; width: 20px; height: 1px; background: var(--accent); opacity: .5; }
.orga-tete { background: var(--nuit); border-color: var(--nuit); color: rgba(255, 255, 255, .88); }
.orga-tete b, .orga-fille b { display: block; font: 500 1.2rem/1.25 var(--titre); color: var(--encre); }
.orga-tete b { color: #fff; }
.orga small { display: block; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.orga-tete small { color: var(--or); }
.orga span { font-size: .9rem; color: var(--doux); }
.orga-tete span { color: rgba(255, 255, 255, .82); }
.orga-filles { display: contents; }

/* repères dans le temps */
.temps { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; display: grid; gap: 26px; }
.temps::before { content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--ligne); }
.temps li { position: relative; }
.temps li::before { content: ''; position: absolute; left: -26px; top: 8px; width: 11px; height: 11px; border-radius: 50%; background: var(--fond); border: 1.5px solid var(--accent); }
.temps b { display: block; font: 500 1.3rem/1.2 var(--titre); color: var(--encre); margin-bottom: 4px; }
.temps p { margin: 0; color: var(--doux); }

/* fiche d'identité d'une société */
.fiche { margin: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--ligne); }
.fiche div { display: grid; grid-template-columns: minmax(96px, 34%) 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--ligne); }
.fiche dt { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--doux); padding-top: 3px; }
.fiche dd { margin: 0; color: var(--encre); font-size: .95rem; }
.societe { padding-block: clamp(48px, 7vw, 96px); border-top: 1px solid var(--ligne); }
.societe:first-of-type { border-top: 0; }
.societe h2 { margin-bottom: .3em; }
.societe .role { font: 600 .72rem/1.4 var(--corps); letter-spacing: .24em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
.sommaire { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sommaire a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border: 1px solid var(--ligne); border-radius: 99px; text-decoration: none; color: var(--encre); font-size: .86rem; background: var(--carte); transition: border-color .3s, color .3s; }
.sommaire a:hover { border-color: var(--accent); color: var(--accent); }

/* adresses du patrimoine */
.adresses { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--ligne-claire); }
.adresses li { padding: 18px 0; border-bottom: 1px solid var(--ligne-claire); display: grid; gap: 2px; }
.adresses b { font: 500 1.2rem/1.3 var(--titre); color: #fff; }
.adresses span { font-size: .9rem; color: rgba(255, 255, 255, .8); }

/* questions fréquentes */
.faq { border-top: 1px solid var(--ligne); max-width: 860px; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--ligne); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 0; font: 500 1.15rem/1.35 var(--titre); color: var(--encre); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 300 1.6rem/1 var(--corps); color: var(--accent); transition: transform .35s var(--mvt); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--doux); max-width: 70ch; padding-bottom: 12px; }

/* contact */
.coordonnees { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--ligne); }
.coordonnees li { padding: 18px 0; border-bottom: 1px solid var(--ligne); }
.coordonnees small { display: block; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--doux); margin-bottom: 4px; }
.coordonnees a, .coordonnees span.v { font: 500 1.2rem/1.4 var(--titre); color: var(--encre); text-decoration: none; overflow-wrap: anywhere; }
.coordonnees a { display: inline-flex; align-items: center; min-height: 44px; }
.coordonnees a:hover { color: var(--accent); }
.formulaire { background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: clamp(22px, 4vw, 40px); box-shadow: var(--ombre-douce); display: grid; gap: 18px; }
.formulaire h2 { font-size: 1.6rem; margin: 0; }
.champ { display: grid; gap: 6px; }
.champ label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--doux); font-weight: 600; }
.champ input, .champ select, .champ textarea { width: 100%; min-height: 50px; padding: 12px 14px; font: 400 1rem/1.4 var(--corps); color: var(--encre); background: var(--fond-2); border: 1px solid var(--ligne); border-radius: 3px; transition: border-color .3s, box-shadow .3s; }
.champ textarea { min-height: 150px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.deux { display: grid; gap: 18px; }
.note-form { margin: 0; padding: 12px 14px; border-left: 2px solid var(--accent); background: var(--fond-2); font-size: .88rem; color: var(--doux); }
.retour-form { margin: 0; font-size: .92rem; color: var(--accent); min-height: 1.4em; }

/* pages légales */
.legal { max-width: 860px; }
.legal h2 { font-size: 1.5rem; margin: 2em 0 .6em; padding-top: 1.2em; border-top: 1px solid var(--ligne); }
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: .5em; }

/* appel final */
.appel { text-align: center; }
.appel h2 { max-width: 20ch; margin-inline: auto; }
.appel p { max-width: 54ch; margin-inline: auto; color: var(--doux); }
.appel.sombre p { color: rgba(255, 255, 255, .84); }
.appel .actions { justify-content: center; }

/* ── pied ── */
.pied { background: var(--nuit); color: rgba(255, 255, 255, .8); padding: clamp(48px, 7vw, 88px) 0 28px; font-size: .92rem; }
.pied-grille { display: grid; gap: 34px; }
.pied img.l { height: 44px; width: auto; margin-bottom: 18px; }
.pied h2 { font: 600 .72rem/1.4 var(--corps); letter-spacing: .2em; text-transform: uppercase; color: var(--or); margin: 0 0 14px; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li a { display: inline-flex; align-items: center; flex-wrap: wrap; min-height: 36px; }
.pied li > span { display: inline-block; padding-block: 6px; }
.orga + p { margin: 28px 0 0; }
.pied a { color: rgba(255, 255, 255, .88); text-decoration: none; }
.pied a:hover { color: var(--or-clair); }
.pied-bas { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--ligne-claire); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: .8rem; color: rgba(255, 255, 255, .72); }
.pied-bas a { display: inline-flex; align-items: center; min-height: 32px; }
.maquette { background: var(--or); color: #14181F; text-align: center; font-size: .78rem; font-weight: 600; letter-spacing: .06em; padding: 8px 16px; }

/* ── apparitions au défilement (seulement avec JavaScript) ── */
.js .rev { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--mvt), transform .9s var(--mvt); transition-delay: var(--d, 0s); }
.js .rev.vu { opacity: 1; transform: none; }
.rev.d1 { --d: .08s; } .rev.d2 { --d: .16s; } .rev.d3 { --d: .24s; } .rev.d4 { --d: .32s; }
@media (prefers-reduced-motion: reduce) { .js .rev { opacity: 1; transform: none; } }

/* ── tablette et ordinateur ── */
@media (min-width: 640px) {
  .grille.g2, .grille.g4, .grille.g3 { grid-template-columns: 1fr 1fr; }
  .deux { grid-template-columns: 1fr 1fr; }
  .reperes { grid-template-columns: repeat(4, 1fr); }
  .reperes li { border-bottom: 0; border-right: 1px solid var(--ligne-claire); padding: 22px 26px; }
  .reperes li:last-child { border-right: 0; }
  .pied-grille { grid-template-columns: 1.4fr 1fr 1fr; }
  .fiche div { grid-template-columns: 150px 1fr; }
}
@media (min-width: 960px) {
  .conteneur { padding-inline: 40px; }
  .entete { padding: 0 40px; }
  .nav-large { display: flex; }
  .btn-entete { display: inline-flex; }
  .menu { display: none; }
  .logo img { height: 46px; }
  .duo { grid-template-columns: 1fr 1fr; }
  .duo.large-g { grid-template-columns: 1.15fr .85fr; }
  .duo.large-d { grid-template-columns: .85fr 1.15fr; }
  .duo.inverse > :first-child { order: 2; }
  .grille.g3 { grid-template-columns: repeat(3, 1fr); }
  .grille.g4 { grid-template-columns: repeat(4, 1fr); }
  .pied-grille { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; }
  .orga { padding-left: 0; gap: 0; }
  .orga::before { display: none; }
  .orga-tete { max-width: 420px; margin: 0 auto 56px; text-align: center; width: 100%; }
  .orga-tete::before { left: 50%; top: 100%; width: 1px; height: 28px; opacity: .6; }
  .orga-filles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; }
  .orga-filles::before { content: ''; position: absolute; left: 12.5%; right: 12.5%; top: -28px; height: 1px; background: var(--accent); opacity: .6; }
  .orga-fille::before { left: 50%; top: -28px; width: 1px; height: 28px; opacity: .6; }
  a.orga-fille:hover { transform: translateY(-4px); }
  .adresses { grid-template-columns: 1fr 1fr; column-gap: 56px; }
}
@media (min-width: 1700px) {
  :root { --max: 1440px; --entete: 84px; }
  body { font-size: 17px; }
  .entete { padding: 0 64px; }
}
@media (min-width: 2300px) { :root { --max: 1680px; } body { font-size: 19px; } .hero-page { min-height: 720px; } }
@media print { .entete, .pied, .maquette, .hero-voile, .bascule { display: none !important; } .js .rev { opacity: 1; transform: none; } body { background: #fff; color: #000; } }

/* ══ 11/11/2026 (Fabian : « je veux quelque chose de très très classe ») — registre maison de prestige / family office :
   plus d'espace, grande serif de titrage, traits fins, aucun pictogramme, aucune ombre portée, angles droits,
   apparitions lentes, sections plein écran sur l'accueil. Ce bloc prime sur les règles au-dessus. ══ */
:root { --rayon: 0px; --max: 1180px; --mvt: cubic-bezier(.16, .6, .2, 1); --ombre: none; --ombre-douce: none; }
body { line-height: 1.8; letter-spacing: .003em; }
h1, h2, h3 { font-weight: 500; letter-spacing: -.018em; }
h1 { font-size: clamp(2.5rem, 6.4vw, 5rem); line-height: 1.06; }
h2 { font-size: clamp(2rem, 4.3vw, 3.4rem); line-height: 1.1; }
h3 { font-size: 1.35rem; }
.section { padding-block: clamp(80px, 12vw, 190px); }
.surtitre { font-size: .68rem; letter-spacing: .32em; font-weight: 500; margin-bottom: 22px; }
.surtitre::before, .titre-section.centre .surtitre::after, .bandeau .surtitre::after { width: 40px; }
.chapo { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.65; }
.titre-section { margin-bottom: clamp(36px, 5.5vw, 76px); }
.titre-section.centre h2::after, .appel h2::after, .bandeau h2::after { content: ''; display: block; width: 56px; height: 1px; background: var(--or); margin: 28px auto 0; }
.titre-section.centre .chapo { margin-top: 26px; }
/* boutons : fins, angles droits, lettres très espacées */
.btn { min-height: 54px; padding: 14px 36px; border-radius: 0; font-size: .7rem; font-weight: 500; letter-spacing: .24em; transition: background .6s var(--mvt), color .6s, border-color .6s; }
.btn:hover { transform: none; }
.btn-entete { min-height: 44px; padding: 10px 24px; }
.lien-fleche { font-size: .7rem; font-weight: 500; letter-spacing: .24em; }
.lien-fleche::after { width: 44px; transition-duration: .7s; }
.lien-fleche:hover::after, a:hover .lien-fleche::after { width: 72px; }
.nav-large a { font-size: .7rem; letter-spacing: .22em; font-weight: 400; }
.nav-large a::after { transition-duration: .7s; }
.bascule:hover { transform: none; }
/* cartes : à plat, un simple filet */
.carte { border-radius: 0; box-shadow: none; padding: 34px 30px 28px; transition: border-color .7s, background .7s; }
a.carte:hover { transform: none; box-shadow: none; border-color: var(--accent); }
.carte .role { letter-spacing: .28em; font-weight: 500; margin-top: 26px; }
.carte.simple { padding-top: 34px; }
.plaque { border: 0; border-bottom: 1px solid rgba(20, 24, 31, .1); border-radius: 0; height: 132px; }
.plaque img { max-height: 72px; }
.plaque.grande { height: 220px; border: 1px solid rgba(20, 24, 31, .1); }
.chiffre { display: block; font: italic 500 1.5rem/1 var(--titre); color: var(--accent); letter-spacing: .04em; padding-bottom: 18px; margin-bottom: 4px; position: relative; }
.chiffre::after { content: ''; position: absolute; left: 0; bottom: 0; width: 28px; height: 1px; background: var(--or); }
.sombre .chiffre { color: var(--or); }
.num { font-style: italic; font-size: 2.2rem; }
.carte.simple h3, .carte .chiffre + h3 { margin-top: 18px; }
/* photographies : cadre fin intérieur, mouvement très lent */
.photo { border-radius: 0; box-shadow: none; }
.photo::after { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(255, 255, 255, .42); pointer-events: none; }
.photo img { transition-duration: 2.4s; }
.photo:hover img { transform: scale(1.025); }
.photo figcaption { left: 14px; bottom: 14px; background: none; padding: 10px 16px; letter-spacing: .22em; font-size: .64rem; text-shadow: 0 1px 12px rgba(0, 0, 0, .7); border-radius: 0; }
.hero-img { animation-duration: 32s; }
/* accueil : grand titre centré */
.hero-texte { text-align: center; margin-inline: auto; }
.hero-texte h1 { max-width: 15ch; margin-inline: auto; font-size: clamp(2.7rem, 7.4vw, 6.4rem); margin-bottom: 30px; }
.hero-texte .surtitre { justify-content: center; }
.hero-texte .surtitre::after { content: ''; width: 40px; height: 1px; background: currentColor; flex: none; }
.hero-texte .hero-sous { margin-inline: auto; max-width: 54ch; }
.hero-texte .actions { justify-content: center; margin-top: 40px; }
.hero-voile { background: linear-gradient(180deg, rgba(10, 12, 16, .7) 0%, rgba(10, 12, 16, .38) 30%, rgba(10, 12, 16, .5) 60%, rgba(10, 12, 16, .92) 100%); }
.reperes { background: rgba(12, 15, 20, .3); }
.reperes li { text-align: center; padding-block: 24px; }
.reperes b { font-size: 1.3rem; font-weight: 500; }
.reperes span { font-size: .64rem; letter-spacing: .24em; }
.btn-verre { background: transparent; }
/* manifeste */
.manifeste { text-align: center; background: var(--fond-2); border-block: 1px solid var(--ligne); }
.manifeste .surtitre { justify-content: center; }
.manifeste .surtitre::after { content: ''; width: 40px; height: 1px; background: currentColor; flex: none; }
.manifeste blockquote { margin: 0 auto; max-width: 22ch; font: 500 clamp(2rem, 5.2vw, 4.4rem)/1.16 var(--titre); color: var(--encre); letter-spacing: -.02em; text-wrap: balance; }
.manifeste blockquote em { color: var(--accent); }
/* organigramme, sommaire, fiches, formulaire : mêmes traits fins */
.orga-tete, .orga-fille, .formulaire, .sommaire a, .champ input, .champ select, .champ textarea { border-radius: 0; box-shadow: none; }
.orga-tete, .orga-fille { padding: 26px 24px; }
a.orga-fille:hover { transform: none; }
.sommaire a { letter-spacing: .08em; padding-inline: 22px; }
.fiche dt { letter-spacing: .2em; font-size: .64rem; }
.formulaire { padding: clamp(26px, 4.5vw, 52px); }
.champ label { letter-spacing: .2em; font-size: .64rem; font-weight: 500; }
.champ input, .champ select, .champ textarea { background: transparent; border-width: 0 0 1px; padding-inline: 0; }
.champ select { padding-inline: 0 8px; }
.champ input:focus, .champ select:focus, .champ textarea:focus { box-shadow: 0 1px 0 var(--accent); }
.coordonnees a, .coordonnees span.v { font-size: 1.3rem; }
.faq summary { min-height: 76px; font-size: 1.25rem; }
.pied { padding-top: clamp(64px, 9vw, 120px); }
.pied h2 { letter-spacing: .28em; font-weight: 500; font-size: .64rem; }
/* apparitions : lentes et discrètes */
.js .rev { transform: translateY(16px); transition-duration: 1.6s; }
.rev.d1 { --d: .12s; } .rev.d2 { --d: .24s; } .rev.d3 { --d: .36s; } .rev.d4 { --d: .48s; }
@media (min-width: 960px) {
  .section.plein { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
  .section.plein > .conteneur { width: 100%; }
  .manifeste { min-height: 82vh; display: flex; align-items: center; }
  .duo { gap: clamp(48px, 7vw, 120px); }
  .grille { gap: 0; }
  .grille.g3 > .carte:not(.simple), .grille.g4 > .carte:not(.simple) { margin-left: -1px; margin-top: -1px; }
  .grille.g3 > .carte.simple, .grille.g4 > .carte.simple { padding-right: 36px; }
  .grille.g2 { gap: 28px; }
  .hero-page { min-height: min(76vh, 760px); }
}
@media (min-width: 1700px) { :root { --max: 1320px; } }
@media (min-width: 2300px) { :root { --max: 1560px; } }@media (min-width: 960px) { .plein .duo.large-d, .plein .duo.large-g { grid-template-columns: 1fr 1fr; } .plein .photo img { aspect-ratio: 5 / 4; } }


/* ══ 11/11/2026 (Fabian : « je veux pas photo langres sur le site groupe ») : plus aucune photo de Langres. Les grands
   en-têtes et les bandeaux deviennent des fonds d'encre profonde : dégradé très doux, cadre fin doré, colonnes en filigrane. ══ */
.hero-fond { position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 50% -10%, #263040 0%, #171C25 42%, #0C0F14 100%); }
.hero-fond::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(198, 165, 107, .09) 0 1px, transparent 1px 12.5%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 70%, transparent 100%); }
.hero-fond::after { content: ''; position: absolute; inset: calc(var(--entete) + 4px) 18px 18px; border: 1px solid rgba(198, 165, 107, .34); pointer-events: none; }
.hero .hero-fond::after { bottom: 112px; }
.hero h1, .hero-page h1 { text-shadow: none; }
.hero-page { padding-inline: 18px; }
.reperes { background: transparent; border-top-color: rgba(198, 165, 107, .3); }
.reperes li, .reperes li:nth-child(odd) { border-color: rgba(198, 165, 107, .22); }
.bandeau { background: radial-gradient(120% 120% at 50% 0%, #232C3A 0%, #14181F 55%, #0C0F14 100%); }
.bandeau::before { inset: 18px; background: none; border: 1px solid rgba(198, 165, 107, .34); pointer-events: none; }
.cartouche { border: 1px solid rgba(198, 165, 107, .4); padding: clamp(28px, 5vw, 64px); display: grid; gap: 0; counter-reset: c; }
.cartouche span { counter-increment: c; display: flex; align-items: baseline; gap: 22px; padding: clamp(14px, 2vw, 22px) 0; border-bottom: 1px solid var(--ligne-claire); font: 500 clamp(1.7rem, 3.2vw, 2.7rem)/1.1 var(--titre); color: #fff; letter-spacing: -.015em; }
.cartouche span:last-child { border-bottom: 0; }
.cartouche span::before { content: counter(c, upper-roman); font: italic 500 .95rem/1 var(--titre); color: var(--or); min-width: 2.2em; letter-spacing: .06em; }
@media (min-width: 960px) { .hero-fond::after { inset: calc(var(--entete) + 8px) 40px 40px; } .hero .hero-fond::after { bottom: 124px; } .bandeau::before { inset: 28px 40px; } .hero-page { padding-inline: 40px; } }@media (max-width: 959px) { .hero .hero-fond::after { display: none; } .hero-texte { padding-inline: 24px; } .hero-page > .conteneur { padding-inline: 22px; } .bandeau > .conteneur { padding-inline: 36px; } }
@media (max-width: 639px) { .hero-texte .surtitre::before, .hero-texte .surtitre::after { display: none; } }

/* 11/11/2026 (Fabian : nouveau logo) : logo horizontal « La colonne » en SVG */
.logo img { height: 42px; }
.pied img.l { height: 52px; margin-bottom: 24px; }
.plaque.grande img[src*="logo-horizontal"] { max-height: 84px; }
@media (min-width: 960px) { .logo img { height: 50px; } }