/* ==========================================================================
   FLT Conciergerie — design system « Or & nuit »
   Palette issue du logo : or métallisé sur bleu nuit, ivoire.
   Sommaire
     1. Polices            6. Composants
     2. Jetons             7. En-tête, menus, pied de page
     3. Base               8. Pages publiques
     4. Typographie        9. Administration
     5. Mise en page      10. Accessibilité, mouvement, impression
   ========================================================================== */

/* 1. Polices (auto-hébergées, compatibles avec la CSP font-src 'self') ----- */
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/cormorant-garamond-500.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/cormorant-garamond-600.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/cormorant-garamond-500-italic.woff2') format('woff2');
    font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope-variable.woff2') format('woff2');
    font-weight: 200 800; font-style: normal; font-display: swap;
}

/* 2. Jetons ---------------------------------------------------------------- */
:root {
    /* Couleurs de marque (mesurées sur le logo) */
    --nuit: #0F1B2D;
    --nuit-2: #16253B;
    --nuit-3: #22344F;
    --or-clair: #F1CC63;
    --or: #C39F49;
    --or-ombre: #9A7530;
    --bronze: #7D5A1E;
    --ivoire: #F6F5F3;
    --blanc: #FFFFFF;
    --sable: #E4DED2;
    --sable-2: #EFEBE3;
    --ardoise: #556070;
    --brume: #B8C0CC;

    /* États */
    --succes: #2F7A4E;  --succes-fond: #E7F2EB;
    --erreur: #B3261E;  --erreur-fond: #FBEAE8;
    --alerte: #7A4F00;  --alerte-fond: #FBF1DC;
    --info: #1F4E79;    --info-fond: #E6EEF6;

    /* Rôles (re-déclarés dans les zones sombres et le thème sombre admin) */
    --fond: var(--ivoire);
    --surface: var(--blanc);
    --surface-2: var(--sable-2);
    --texte: var(--nuit);
    --texte-doux: var(--ardoise);
    --bord: var(--sable);
    --accent: var(--bronze);          /* or lisible sur fond clair (6:1) */
    --bouton-fond: var(--or);
    --bouton-texte: var(--nuit);
    --focus: var(--bronze);

    /* Typographie */
    --font-titre: 'Cormorant Garamond', Garamond, Georgia, 'Times New Roman', serif;
    --font-texte: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --t-xs: .8125rem;
    --t-s: .9375rem;
    --t-m: 1rem;
    --t-l: 1.125rem;
    --t-h4: 1.375rem;
    --t-h3: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
    --t-h2: clamp(2rem, 1.5rem + 2vw, 2.875rem);
    --t-h1: clamp(2.5rem, 1.7rem + 3.4vw, 4.25rem);

    /* Espacements */
    --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.5rem;
    --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem;
    --section: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
    --conteneur: 1240px;
    --gouttiere: clamp(1rem, 3.5vw, 2rem);

    /* Formes */
    --r-s: 4px;
    --r: 6px;
    --r-l: 10px;
    --ombre-1: 0 1px 2px rgba(15, 27, 45, .06), 0 1px 1px rgba(15, 27, 45, .04);
    --ombre-2: 0 10px 30px -12px rgba(15, 27, 45, .25);
    --filet-or: linear-gradient(90deg, transparent, var(--or-ombre) 18%, var(--or-clair) 50%, var(--or-ombre) 82%, transparent);

    /* Mouvement */
    --duree: 180ms;
    --courbe: cubic-bezier(.2, .7, .2, 1);

    --entete-h: 72px;
    color-scheme: light;
}

/* Zones sombres (en-tête, pied, bandeaux) */
.sur-nuit {
    --fond: var(--nuit);
    --surface: var(--nuit-2);
    --surface-2: var(--nuit-3);
    --texte: var(--ivoire);
    --texte-doux: var(--brume);
    --bord: #2A3B55;
    --accent: var(--or-clair);
    --focus: var(--or-clair);
    background-color: var(--fond);
    color: var(--texte);
}

/* 3. Base ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--entete-h) + 1rem); }
body {
    margin: 0;
    font-family: var(--font-texte);
    font-size: var(--t-m);
    line-height: 1.65;
    color: var(--texte);
    background: var(--fond);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
hr { border: 0; height: 1px; background: var(--bord); margin: var(--e-6) 0; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

.icon {
    display: inline-block;
    width: 1.25em; height: 1.25em; flex-shrink: 0;
    fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
    vertical-align: -.22em;
}
.icon-s { width: 1em; height: 1em; }
.icon-l { width: 1.75rem; height: 1.75rem; }
.icon-xl { width: 2.5rem; height: 2.5rem; stroke-width: 1.3; }

.sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.lien-evitement {
    position: absolute; left: var(--e-4); top: -100px; z-index: 200;
    background: var(--or); color: var(--nuit); padding: var(--e-3) var(--e-5);
    border-radius: var(--r); font-weight: 600; text-decoration: none;
}
.lien-evitement:focus { top: var(--e-4); }

/* 4. Typographie ------------------------------------------------------------ */
h1, h2, h3, h4, .titre {
    font-family: var(--font-titre);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -.005em;
    margin: 0 0 var(--e-4);
    color: var(--texte);
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: auto;
    font-variant-numeric: lining-nums;
}
/* Cormorant utilise des chiffres elzéviriens par défaut : on force les chiffres alignés. */
.prix, .chiffre strong, .kpi strong, .note-globale strong, .heros-note strong, .total-commande, .page-erreur .code, .temoignage blockquote { font-variant-numeric: lining-nums; }
h1, .t-h1 { font-size: var(--t-h1); }
h2, .t-h2 { font-size: var(--t-h2); }
h3, .t-h3 { font-size: var(--t-h3); }
h4, .t-h4 { font-size: var(--t-h4); font-weight: 600; }
p { margin: 0 0 var(--e-4); }
p:last-child { margin-bottom: 0; }
.surtitre {
    display: inline-flex; align-items: center; gap: var(--e-3);
    font-family: var(--font-texte); font-size: var(--t-xs); font-weight: 600;
    letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
    margin: 0 0 var(--e-4);
}
.surtitre::before { content: ""; width: 2rem; height: 1px; background: currentColor; opacity: .7; }
.centre .surtitre::after, .surtitre.centre::after { content: ""; width: 2rem; height: 1px; background: currentColor; opacity: .7; }
.chapo { font-size: var(--t-l); color: var(--texte-doux); max-width: 62ch; }
.doux { color: var(--texte-doux); }
.petit { font-size: var(--t-s); }
.tres-petit { font-size: var(--t-xs); }
.accent { color: var(--accent); }
.prix { font-family: var(--font-titre); font-size: 1.625rem; font-weight: 600; line-height: 1; color: var(--texte); }
.prix small { font-family: var(--font-texte); font-size: var(--t-xs); font-weight: 500; color: var(--texte-doux); }

/* Contenu riche saisi en administration (pages légales, blog, pages locales) */
.prose { max-width: 70ch; color: var(--texte); }
.prose > * + * { margin-top: var(--e-4); }
.prose h2 { font-size: var(--t-h3); margin-top: var(--e-7); }
.prose h3 { font-size: var(--t-h4); margin-top: var(--e-6); }
.prose p, .prose li { color: #2B3646; }
.sur-nuit .prose p, .sur-nuit .prose li { color: var(--texte-doux); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: var(--e-2); }
.prose li::marker { color: var(--accent); }
.prose a { color: var(--accent); font-weight: 600; }
.prose blockquote {
    margin: var(--e-6) 0; padding: var(--e-2) 0 var(--e-2) var(--e-5);
    border-left: 2px solid var(--or); font-family: var(--font-titre);
    font-size: 1.375rem; font-style: italic; color: var(--texte);
}
.prose img { border-radius: var(--r-l); margin: var(--e-6) 0; }

/* 5. Mise en page ----------------------------------------------------------- */
.conteneur { width: 100%; max-width: var(--conteneur); margin-inline: auto; padding-inline: var(--gouttiere); }
.conteneur-etroit { width: 100%; max-width: 820px; margin-inline: auto; padding-inline: var(--gouttiere); }
.section { padding-block: var(--section); }
.section-serree { padding-block: calc(var(--section) * .6); }
.fond-ivoire { background: var(--ivoire); }
.fond-blanc { background: var(--blanc); }
.fond-sable { background: var(--sable-2); }
.centre { text-align: center; }
.centre .chapo { margin-inline: auto; }
.pile > * + * { margin-top: var(--e-4); }
.rangee { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.rangee-centre { justify-content: center; }
.rangee-entre { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-5); }
.grille { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--col, 300px)), 1fr)); }
.grille-2 { --col: 420px; }
.grille-3 { --col: 300px; }
.grille-4 { --col: 230px; }
.grille-6 { --col: 160px; }
.deux-colonnes { display: grid; gap: var(--e-7); align-items: center; }
@media (min-width: 900px) {
    .deux-colonnes { grid-template-columns: 1fr 1fr; gap: var(--e-8); }
    .deux-colonnes.inverse > :first-child { order: 2; }
}
.mt-4 { margin-top: var(--e-4); }
.mt-5 { margin-top: var(--e-5); }
.mt-6 { margin-top: var(--e-6); }
.mt-7 { margin-top: var(--e-7); }
.mb-0 { margin-bottom: 0; }
.filet-court { max-width: 320px; margin: 0 auto var(--e-6); }
.entete-section { max-width: 680px; margin-bottom: var(--e-7); }
.entete-section.rangee-entre { max-width: none; }
.entete-section.rangee-entre h2 { margin-bottom: 0; }
.entete-section.centre { margin-inline: auto; }
.entete-section h2 { margin-bottom: var(--e-4); }

/* 6. Composants ------------------------------------------------------------- */

/* Boutons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
    min-height: 48px; padding: .75rem 1.5rem;
    border: 1px solid transparent; border-radius: var(--r);
    font-family: var(--font-texte); font-size: var(--t-s); font-weight: 600; letter-spacing: .02em;
    line-height: 1.2; text-align: center; text-decoration: none; white-space: normal;
    transition: background-color var(--duree) var(--courbe), color var(--duree) var(--courbe), border-color var(--duree) var(--courbe), transform var(--duree) var(--courbe);
}
.btn:active { transform: translateY(1px); }
.btn-or { background: var(--bouton-fond); color: var(--bouton-texte); border-color: var(--bouton-fond); }
.btn-or:hover { background: var(--or-clair); border-color: var(--or-clair); }
.btn-nuit { background: var(--nuit); color: var(--ivoire); border-color: var(--nuit); }
.btn-nuit:hover { background: var(--nuit-3); border-color: var(--nuit-3); }
.btn-contour { background: transparent; color: var(--texte); border-color: currentColor; }
.btn-contour:hover { background: var(--texte); color: var(--fond); border-color: var(--texte); }
.sur-nuit .btn-contour { color: var(--or-clair); border-color: var(--or); }
.sur-nuit .btn-contour:hover { background: var(--or); color: var(--nuit); border-color: var(--or); }
.btn-discret { background: transparent; color: var(--texte-doux); border-color: var(--bord); }
.btn-discret:hover { color: var(--texte); border-color: var(--texte-doux); }
.btn-danger { background: var(--erreur); color: #fff; border-color: var(--erreur); }
.btn-danger:hover { background: #8E1E18; border-color: #8E1E18; }
.btn-s { min-height: 38px; padding: .45rem 1rem; font-size: var(--t-xs); }
.btn-bloc { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn-icone {
    display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--bord); border-radius: 50%; background: var(--surface); color: var(--texte);
    transition: border-color var(--duree), color var(--duree), background-color var(--duree);
}
.btn-icone:hover { border-color: var(--accent); color: var(--accent); }
.btn-icone-danger:hover { border-color: var(--erreur); color: var(--erreur); }
.admin .btn-icone { width: 38px; height: 38px; border-radius: var(--r); }
.deux-champs { grid-template-columns: 1fr 1fr !important; }
.barre-actions { position: sticky; bottom: var(--e-4); padding: var(--e-3); background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r-l); box-shadow: var(--ombre-2); }
.lien-fleche {
    display: inline-flex; align-items: center; gap: var(--e-2);
    font-weight: 600; font-size: var(--t-s); color: var(--texte); text-decoration: none;
    border-bottom: 1px solid var(--or); padding-bottom: 2px;
}
.lien-fleche .icon { color: var(--accent); transition: transform var(--duree) var(--courbe); }
.lien-fleche:hover .icon { transform: translateX(4px); }

/* Filet doré signature (clés croisées du logo) */
.filet { display: flex; align-items: center; gap: var(--e-4); color: var(--or); }
.filet::before, .filet::after { content: ""; flex: 1; height: 1px; background: var(--filet-or); }
.filet .icon { width: 1.4rem; height: 1.4rem; color: var(--or); }
.filet-simple { height: 1px; background: var(--filet-or); border: 0; margin: 0; }

/* Badges */
.badge {
    display: inline-flex; align-items: center; gap: var(--e-1);
    padding: .25rem .65rem; border-radius: 999px;
    font-size: .75rem; font-weight: 600; letter-spacing: .02em; line-height: 1.4;
    background: var(--surface-2); color: var(--texte);
}
.badge-or { background: #F7EBCB; color: #5E4310; }
.badge-succes { background: var(--succes-fond); color: var(--succes); }
.badge-erreur { background: var(--erreur-fond); color: var(--erreur); }
.badge-alerte { background: var(--alerte-fond); color: var(--alerte); }
.badge-info { background: var(--info-fond); color: var(--info); }
.badge-nuit { background: var(--nuit); color: var(--ivoire); }
.badge-verre { background: rgba(15, 27, 45, .78); color: var(--ivoire); backdrop-filter: blur(6px); }

/* Cartes */
.carte {
    position: relative; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r-l);
    overflow: hidden;
}
.carte-corps { padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-3); flex: 1; }
.carte-corps > * { margin: 0; }
.carte-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.carte-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--courbe); }
.carte:hover .carte-media img { transform: scale(1.04); }
.carte-titre { font-family: var(--font-titre); font-size: 1.5rem; font-weight: 600; line-height: 1.15; }
.carte-titre a { text-decoration: none; }
.carte-titre a::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* toute la carte est cliquable */
.carte .au-dessus { position: relative; z-index: 2; }
.carte-pied { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding-top: var(--e-4); margin-top: auto; border-top: 1px solid var(--bord); }
.carte-icone { padding: var(--e-6) var(--e-5); gap: var(--e-4); }
.pastille {
    display: inline-grid; place-items: center; width: 3.25rem; height: 3.25rem; flex-shrink: 0;
    border-radius: 50%; border: 1px solid var(--or); color: var(--accent);
}
.pastille .icon { width: 1.5rem; height: 1.5rem; }
.media-coin { position: absolute; top: var(--e-3); left: var(--e-3); z-index: 2; display: flex; gap: var(--e-2); flex-wrap: wrap; }
.caracteristiques { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); font-size: var(--t-xs); color: var(--texte-doux); list-style: none; padding: 0; }
.caracteristiques li { display: inline-flex; align-items: center; gap: .35rem; }
.caracteristiques .icon { color: var(--accent); }

/* Bouton favori */
.fav {
    position: absolute; top: var(--e-3); right: var(--e-3); z-index: 3;
    display: grid; place-items: center; width: 42px; height: 42px;
    border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--nuit);
    box-shadow: var(--ombre-1); transition: transform var(--duree) var(--courbe), color var(--duree);
}
.fav:hover { transform: scale(1.06); color: var(--bronze); }
.fav.est-favori { color: #A3271F; }
.fav.est-favori .icon { fill: currentColor; }
.fav-statique { position: static; box-shadow: none; border: 1px solid var(--bord); }

/* Formulaires */
.champ { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
fieldset.champ { border: 0; padding: 0; margin-inline: 0; }
fieldset.champ legend { padding: 0; margin-bottom: var(--e-2); }
.champ + .champ, .champs + .champ, .champ + .champs, .champs + .champs { margin-top: var(--e-5); }
.champs { display: grid; gap: var(--e-5); }
.champs > .champ { margin-top: 0; }
@media (min-width: 640px) { .champs { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.etiquette { font-size: var(--t-s); font-weight: 600; color: var(--texte); }
.etiquette .requis { color: var(--accent); }
.aide { font-size: var(--t-xs); color: var(--texte-doux); }
.saisie {
    width: 100%; min-height: 48px; padding: .7rem .9rem;
    background: var(--surface); color: var(--texte);
    border: 1px solid #CFC8BA; border-radius: var(--r);
    transition: border-color var(--duree), box-shadow var(--duree);
}
textarea.saisie { min-height: 140px; resize: vertical; line-height: 1.55; }
select.saisie {
    appearance: none; padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23556070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .8rem center; background-size: 1.1rem;
}
.saisie::placeholder { color: #8A93A0; }
.saisie:hover { border-color: var(--texte-doux); }
.saisie:focus { outline: none; border-color: var(--bronze); box-shadow: 0 0 0 3px rgba(195, 159, 73, .3); }
.saisie[aria-invalid="true"], .saisie.est-invalide { border-color: var(--erreur); }
.saisie[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, .2); }
.erreur-champ { display: flex; gap: var(--e-2); align-items: flex-start; font-size: var(--t-xs); font-weight: 600; color: var(--erreur); margin: 0; }
.case { display: flex; align-items: flex-start; gap: var(--e-3); font-size: var(--t-s); color: var(--texte-doux); cursor: pointer; }
.case input { width: 1.2rem; height: 1.2rem; margin-top: .2rem; flex-shrink: 0; accent-color: var(--bronze); }
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r-l); padding: clamp(1.25rem, 3vw, 2.5rem); }
.formulaire-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4); margin-top: var(--e-6); }
.sur-nuit .saisie { background: var(--nuit-2); border-color: #34476A; color: var(--ivoire); }
.sur-nuit .saisie::placeholder { color: #8E9AAD; }
.sur-nuit .saisie:focus { border-color: var(--or-clair); }

/* Saisie + bouton accolés (newsletter, recherche) */
.groupe { display: flex; min-width: 0; }
.groupe .saisie { border-radius: var(--r) 0 0 var(--r); min-width: 0; }
.groupe .btn { border-radius: 0 var(--r) var(--r) 0; flex-shrink: 0; }

/* Notation par étoiles (formulaire) — sans JavaScript */
.notation { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: .25rem; border: 0; padding: 0; margin: 0; }
.notation input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.notation label { cursor: pointer; color: #CFC8BA; padding: .15rem; transition: color var(--duree), transform var(--duree); }
.notation label .icon { width: 2rem; height: 2rem; }
.notation label:hover, .notation label:hover ~ label,
.notation input:checked ~ label { color: var(--or); }
.notation label:hover ~ label .icon, .notation label:hover .icon, .notation input:checked ~ label .icon { fill: currentColor; }
.notation input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.etoiles { display: inline-flex; gap: 2px; color: var(--or); }
.etoiles .icon { width: 1rem; height: 1rem; }
.icon.pleine { fill: currentColor; }
.etoiles .etoile-vide { color: #CFC8BA; }

/* Alertes */
.alerte {
    display: flex; gap: var(--e-3); align-items: flex-start;
    padding: var(--e-4) var(--e-5); border-radius: var(--r); border: 1px solid;
    font-size: var(--t-s); line-height: 1.5;
}
.alerte .icon { margin-top: .1rem; }
.alerte > div > * + * { margin-top: var(--e-1); }
.alerte-succes { background: var(--succes-fond); border-color: #B9DCC6; color: #1F5536; }
.alerte-erreur { background: var(--erreur-fond); border-color: #F0C1BC; color: #8E1E18; }
.alerte-alerte { background: var(--alerte-fond); border-color: #EBD3A0; color: var(--alerte); }
.alerte-info { background: var(--info-fond); border-color: #BED0E4; color: var(--info); }
.alerte a { color: inherit; font-weight: 700; }

/* Notifications flash (bas de l'écran) */
.notifications {
    position: fixed; z-index: 120; right: var(--e-4); bottom: var(--e-4); left: var(--e-4);
    display: flex; flex-direction: column; gap: var(--e-3); pointer-events: none;
}
@media (min-width: 640px) { .notifications { left: auto; width: 400px; } }
.notification {
    pointer-events: auto; display: flex; gap: var(--e-3); align-items: flex-start;
    padding: var(--e-4); border-radius: var(--r-l); background: var(--nuit); color: var(--ivoire);
    border-left: 3px solid var(--or); box-shadow: var(--ombre-2); font-size: var(--t-s);
    animation: entree .3s var(--courbe);
}
.notification-erreur { border-left-color: #E5776F; }
.notification .icon { color: var(--or-clair); margin-top: .1rem; }
.notification-erreur .icon { color: #F2A29C; }
.notification p { flex: 1; margin: 0; }
.notification button { background: none; border: 0; color: var(--brume); padding: 0 .25rem; }
.notification button:hover { color: var(--ivoire); }
@keyframes entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Fil d'Ariane */
.fil-ariane { border-bottom: 1px solid var(--bord); background: var(--surface); font-size: var(--t-xs); }
.fil-ariane ol { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; margin: 0 auto; padding-block: var(--e-3); color: var(--texte-doux); }
.fil-ariane li { display: inline-flex; align-items: center; gap: var(--e-2); }
.fil-ariane li + li::before { content: ""; width: 5px; height: 5px; border-top: 1px solid var(--or); border-right: 1px solid var(--or); transform: rotate(45deg); }
.fil-ariane a { text-decoration: none; }
.fil-ariane a:hover { color: var(--texte); text-decoration: underline; }
.fil-ariane [aria-current] { color: var(--texte); font-weight: 600; }

/* Pagination */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--e-2); margin-top: var(--e-7); }
.pagination a, .pagination span {
    display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 var(--e-3);
    border: 1px solid var(--bord); border-radius: var(--r); background: var(--surface);
    font-size: var(--t-s); font-weight: 600; text-decoration: none;
}
.pagination a:hover { border-color: var(--texte-doux); }
.pagination [aria-current] { background: var(--nuit); color: var(--ivoire); border-color: var(--nuit); }
.pagination .ellipse { border: 0; background: none; min-width: auto; }

/* Pastilles de filtre (catégories) */
.puces { display: flex; gap: var(--e-2); overflow-x: auto; padding-block: var(--e-3); scrollbar-width: thin; }
.puce {
    display: inline-flex; align-items: center; gap: var(--e-2); flex-shrink: 0;
    padding: .5rem 1rem; border: 1px solid var(--bord); border-radius: 999px;
    background: var(--surface); font-size: var(--t-s); font-weight: 500; text-decoration: none; white-space: nowrap;
    transition: border-color var(--duree), background-color var(--duree);
}
.puce .icon { color: var(--accent); }
.puce:hover { border-color: var(--texte-doux); }
.puce[aria-current="true"], .puce[aria-current="page"] { background: var(--nuit); border-color: var(--nuit); color: var(--ivoire); }
.puce[aria-current] .icon { color: var(--or-clair); }
.barre-collante { position: sticky; top: var(--entete-h); z-index: 30; background: rgba(246, 245, 243, .96); border-bottom: 1px solid var(--bord); backdrop-filter: blur(8px); }

/* Accordéon (FAQ) */
.accordeon { border-top: 1px solid var(--bord); }
.accordeon details { border-bottom: 1px solid var(--bord); }
.accordeon summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
    padding: var(--e-5) 0; cursor: pointer; list-style: none;
    font-family: var(--font-titre); font-size: 1.375rem; font-weight: 600; line-height: 1.25;
}
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon summary .icon { color: var(--accent); transition: transform var(--duree) var(--courbe); }
.accordeon details[open] summary .icon { transform: rotate(45deg); }
.accordeon summary:hover { color: var(--accent); }
.accordeon .reponse { padding: 0 0 var(--e-5); color: var(--texte-doux); max-width: 70ch; }

/* Tableaux */
.tableau-defile { overflow-x: auto; border: 1px solid var(--bord); border-radius: var(--r-l); background: var(--surface); }
.tableau { font-size: var(--t-s); }
.tableau th, .tableau td { padding: .8rem 1rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--bord); }
.tableau thead th { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux); background: var(--surface-2); white-space: nowrap; }
.tableau tbody tr:last-child td { border-bottom: 0; }
.tableau tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.tableau .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau .actions { text-align: right; white-space: nowrap; }
.tableau tfoot td { font-weight: 700; border-top: 2px solid var(--bord); border-bottom: 0; }

/* État vide */
.vide { text-align: center; padding: var(--e-8) var(--e-4); max-width: 520px; margin-inline: auto; }
.vide .pastille { width: 4.5rem; height: 4.5rem; margin-bottom: var(--e-5); }
.vide .pastille .icon { width: 2rem; height: 2rem; }
.vide h2, .vide h3 { font-size: var(--t-h3); }
.vide p { color: var(--texte-doux); }
.vide .btn { margin-top: var(--e-5); }

/* Visionneuse photo (<dialog>) */
.visionneuse { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(9, 15, 26, .96); color: var(--ivoire); }
.visionneuse::backdrop { background: rgba(9, 15, 26, .96); }
.visionneuse[open] { display: grid; place-items: center; }
.visionneuse img { max-width: 92vw; max-height: 84vh; object-fit: contain; border-radius: var(--r); }
.visionneuse .btn-icone { position: absolute; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: var(--ivoire); }
.visionneuse .btn-icone:hover { background: rgba(255, 255, 255, .2); color: var(--ivoire); }
.visionneuse [data-vis-fermer] { top: var(--e-4); right: var(--e-4); }
.visionneuse [data-vis-prec] { left: var(--e-4); top: 50%; transform: translateY(-50%); }
.visionneuse [data-vis-suiv] { right: var(--e-4); top: 50%; transform: translateY(-50%); }
.visionneuse .compteur { position: absolute; bottom: var(--e-5); left: 50%; transform: translateX(-50%); font-size: var(--t-s); letter-spacing: .15em; color: var(--brume); }

/* 7. En-tête, menus, pied de page ------------------------------------------ */
.site-entete { position: sticky; top: 0; z-index: 60; }
.site-entete::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--filet-or); opacity: .8; }
.entete-barre { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); height: var(--entete-h); }
.marque { display: inline-flex; align-items: center; gap: var(--e-3); text-decoration: none; flex-shrink: 0; }
.marque img { height: 46px; width: auto; }
.marque-texte { display: flex; flex-direction: column; line-height: 1; }
.marque-nom { font-family: var(--font-titre); font-size: 1.25rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ivoire); }

.nav-principale { display: none; }
.nav-principale ul { display: flex; align-items: center; gap: clamp(.75rem, 1.2vw, 1.5rem); list-style: none; margin: 0; padding: 0; }
.nav-principale a {
    position: relative; display: inline-block; padding: .4rem 0;
    font-size: .875rem; font-weight: 500; letter-spacing: .02em; color: var(--ivoire); text-decoration: none; white-space: nowrap;
}
.nav-principale a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--or-clair);
    transform: scaleX(0); transform-origin: left; transition: transform var(--duree) var(--courbe);
}
.nav-principale a:hover::after, .nav-principale a[aria-current="page"]::after { transform: scaleX(1); }
.nav-principale a[aria-current="page"] { color: var(--or-clair); }
.entete-outils { display: flex; align-items: center; gap: var(--e-2); }
.outil {
    position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px;
    border-radius: 50%; color: var(--ivoire); text-decoration: none; background: none; border: 0;
    transition: color var(--duree), background-color var(--duree);
}
.outil:hover { color: var(--or-clair); background: rgba(255, 255, 255, .06); }
.compteur-fav {
    position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 999px; background: var(--or); color: var(--nuit); font-size: .6875rem; font-weight: 700;
    display: grid; place-items: center; line-height: 1;
}
.entete-cta { display: none; }

/* Sélecteur de langue (fonctionne sans JavaScript) */
.langues { position: relative; }
.langues summary {
    display: inline-flex; align-items: center; gap: .3rem; height: 44px; padding: 0 .6rem;
    list-style: none; cursor: pointer; border-radius: var(--r);
    font-size: .8125rem; font-weight: 700; letter-spacing: .08em; color: var(--ivoire);
}
.langues summary::-webkit-details-marker { display: none; }
.langues summary:hover { color: var(--or-clair); }
.langues ul {
    position: absolute; right: 0; top: calc(100% + .5rem); min-width: 190px; z-index: 70;
    margin: 0; padding: var(--e-2); list-style: none;
    background: var(--blanc); color: var(--nuit); border: 1px solid var(--sable); border-radius: var(--r-l); box-shadow: var(--ombre-2);
}
.langues a { display: flex; gap: var(--e-3); align-items: center; padding: .55rem .75rem; border-radius: var(--r-s); text-decoration: none; font-size: var(--t-s); }
.langues a:hover { background: var(--sable-2); }
.langues a[aria-current="true"] { font-weight: 700; color: var(--bronze); }
.langues abbr { width: 1.75rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-decoration: none; color: var(--ardoise); }

/* Menu mobile (details/summary : utilisable sans JavaScript) */
.menu-mobile > summary { list-style: none; }
.menu-mobile > summary::-webkit-details-marker { display: none; }
.menu-mobile .icon-fermer { display: none; }
.menu-mobile[open] .icon-ouvrir { display: none; }
.menu-mobile[open] .icon-fermer { display: block; }
.menu-mobile-panneau {
    position: fixed; inset: var(--entete-h) 0 0 0; z-index: 55; overflow-y: auto;
    background: var(--nuit); padding: var(--e-5) var(--gouttiere) var(--e-7);
    border-top: 1px solid #2A3B55;
}
.menu-mobile-panneau ul { list-style: none; margin: 0; padding: 0; }
.menu-mobile-panneau li a {
    display: flex; align-items: center; justify-content: space-between; padding: var(--e-4) 0;
    border-bottom: 1px solid #22344F; font-family: var(--font-titre); font-size: 1.5rem; font-weight: 500;
    color: var(--ivoire); text-decoration: none;
}
.menu-mobile-panneau li a[aria-current="page"] { color: var(--or-clair); }
.menu-mobile-panneau .icon { color: var(--or); }
.menu-mobile-langues { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-6); }
.menu-mobile-langues a { padding: .5rem .85rem; border: 1px solid #34476A; border-radius: var(--r); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-decoration: none; color: var(--brume); }
.menu-mobile-langues a[aria-current="true"] { background: var(--or); border-color: var(--or); color: var(--nuit); }
.menu-mobile-panneau .btn { margin-top: var(--e-6); width: 100%; }

.outil-large { display: none; }
.entete-outils { gap: 0; }
@media (min-width: 640px) {
    .entete-cta { display: inline-flex; }
    .outil-large { display: inline-grid; }
    details.outil-large { display: block; }
    .entete-outils { gap: var(--e-2); }
}
@media (max-width: 420px) {
    .marque { gap: var(--e-2); }
    .marque img { height: 38px; }
    .marque-nom { font-size: 1.05rem; letter-spacing: .08em; }
}
@media (max-width: 330px) { .marque-texte { display: none; } }
@media (min-width: 1280px) {
    :root { --entete-h: 84px; }
    .nav-principale { display: block; }
    .menu-mobile { display: none; }
    .marque img { height: 54px; }
}

/* Bandeau maintenance (administrateur connecté) */
.bandeau-maintenance { background: var(--alerte-fond); color: var(--alerte); font-size: var(--t-s); text-align: center; padding: var(--e-2) var(--gouttiere); border-bottom: 1px solid #EBD3A0; }
.bandeau-maintenance a { font-weight: 700; color: inherit; }

/* Bandeau cookies */
.bandeau-cookies {
    position: fixed; z-index: 110; left: var(--e-4); right: var(--e-4); bottom: var(--e-4);
    max-width: 760px; margin-inline: auto; padding: var(--e-5);
    border-radius: var(--r-l); border: 1px solid #2A3B55; box-shadow: var(--ombre-2);
}
.bandeau-cookies h2 { font-size: 1.5rem; margin-bottom: var(--e-2); }
.bandeau-cookies p { font-size: var(--t-s); color: var(--texte-doux); }
.bandeau-cookies a { color: var(--or-clair); }
.bandeau-cookies .rangee { margin-top: var(--e-4); }

/* Pied de page */
.site-pied { padding-top: var(--e-8); }
.pied-logo { display: flex; justify-content: center; margin-bottom: var(--e-6); }
.pied-logo img { width: min(280px, 70vw); }
.pied-colonnes { display: grid; gap: var(--e-6); padding-block: var(--e-7); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.pied-colonnes h2 { font-size: .75rem; font-family: var(--font-texte); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--or-clair); margin-bottom: var(--e-4); }
.pied-colonnes ul { list-style: none; margin: 0; padding: 0; }
.pied-colonnes li + li { margin-top: var(--e-2); }
.pied-colonnes a { color: var(--brume); text-decoration: none; font-size: var(--t-s); }
.pied-colonnes a:hover { color: var(--ivoire); text-decoration: underline; }
.pied-contact li { display: flex; gap: var(--e-3); align-items: flex-start; color: var(--brume); font-size: var(--t-s); }
.pied-contact .icon { color: var(--or); margin-top: .15rem; }
.reseaux { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-5); }
.reseaux a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #34476A; border-radius: 50%; color: var(--ivoire); transition: background-color var(--duree), border-color var(--duree), color var(--duree); }
.reseaux a:hover { background: var(--or); border-color: var(--or); color: var(--nuit); }
.pied-bas { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-5); justify-content: space-between; align-items: center; padding-block: var(--e-5); border-top: 1px solid #22344F; font-size: var(--t-xs); color: var(--brume); }
.pied-bas p { margin: 0; }
.pied-bas nav { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); }
.pied-bas a, .pied-bas button { color: var(--brume); text-decoration: none; background: none; border: 0; padding: 0; font-size: inherit; }
.pied-bas a:hover, .pied-bas button:hover { color: var(--ivoire); text-decoration: underline; }

/* 8. Pages publiques -------------------------------------------------------- */

/* En-tête de page intérieure */
.entete-page { position: relative; padding-block: clamp(3rem, 2rem + 5vw, 6rem); overflow: hidden; }
.entete-page::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--filet-or); opacity: .5; }
.entete-page h1 { max-width: 20ch; margin-bottom: var(--e-4); }
.entete-page .chapo { max-width: 58ch; }
.entete-page.centre h1 { margin-inline: auto; }
.entete-page .groupe { max-width: 600px; }
.entete-page.centre .rangee, .entete-page.centre .groupe { justify-content: center; margin-inline: auto; }
.entete-page-compacte { padding-block: clamp(2.5rem, 2rem + 3vw, 4rem); }
.entete-page .filigrane {
    position: absolute; right: -2rem; top: 50%; transform: translateY(-50%);
    width: clamp(180px, 28vw, 360px); opacity: .07; pointer-events: none;
}

/* Accueil — héros */
.heros { position: relative; overflow: hidden; }
.heros-grille { display: grid; gap: var(--e-6); padding-block: clamp(2.5rem, 2rem + 4vw, 5.5rem); align-items: center; }
@media (min-width: 960px) { .heros-grille { grid-template-columns: 1.05fr 1fr; gap: var(--e-8); min-height: min(78vh, 720px); } }
.heros h1 { font-size: clamp(2.6rem, 1.8rem + 3.6vw, 4.75rem); margin-bottom: var(--e-5); max-width: 15ch; }
.heros .chapo { color: var(--brume); margin-bottom: var(--e-6); }
/* Cadre doré centré autour de l'image : même écart (--cadre) sur les quatre côtés,
   arrondis agrandis du même écart pour rester parallèles à ceux de l'image. */
.heros-visuel { position: relative; --arche: 220px; --cadre: 14px; }
.heros-visuel img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--arche) var(--arche) var(--r-l) var(--r-l); }
.heros-visuel::before {
    content: ""; position: absolute; inset: calc(-1 * var(--cadre)); z-index: 0;
    border: 1px solid var(--or); opacity: .6;
    border-radius: calc(var(--arche) + var(--cadre)) calc(var(--arche) + var(--cadre)) calc(var(--r-l) + var(--cadre)) calc(var(--r-l) + var(--cadre));
}
.heros-visuel img { position: relative; z-index: 1; }
@media (max-width: 959px) { .heros-visuel { --arche: 160px; --cadre: 10px; } .heros-visuel img { aspect-ratio: 4 / 3; } }
.heros-note {
    position: absolute; z-index: 2; left: -1rem; bottom: 2rem;
    display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4);
    background: var(--ivoire); color: var(--nuit); border-radius: var(--r-l); box-shadow: var(--ombre-2);
}
.heros-note strong { font-family: var(--font-titre); font-size: 2rem; line-height: 1; }
.heros-note > span { font-size: var(--t-xs); color: var(--ardoise); line-height: 1.3; }
.heros-note .etoiles { color: var(--or); margin-bottom: .2rem; }
@media (max-width: 959px) { .heros-note { left: var(--e-4); bottom: var(--e-4); } }

/* Chiffres clés */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--e-5); text-align: center; }
.chiffre strong { display: block; font-family: var(--font-titre); font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); font-weight: 500; line-height: 1; color: var(--or-clair); }
.chiffre span { display: block; margin-top: var(--e-2); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--brume); }

/* Engagements */
.engagement { display: flex; flex-direction: column; gap: var(--e-3); padding-top: var(--e-5); border-top: 1px solid var(--or); }
.engagement h3 { font-size: 1.5rem; margin: 0; }
.engagement p { color: var(--texte-doux); font-size: var(--t-s); }
.engagement .icon { color: var(--accent); width: 1.75rem; height: 1.75rem; }

/* Image éditoriale avec cadre doré centré */
.image-cadre { position: relative; --cadre: 14px; }
.image-cadre img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-l); }
.image-cadre::before { content: ""; position: absolute; inset: calc(-1 * var(--cadre)); border: 1px solid var(--or); border-radius: calc(var(--r-l) + var(--cadre)); }
@media (max-width: 899px) { .image-cadre { --cadre: 10px; } .image-cadre img { aspect-ratio: 4 / 3; } }

/* Témoignages : défilement natif (scroll-snap) */
.temoignages { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 86%); gap: var(--e-5); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--e-4); scrollbar-width: thin; }
@media (min-width: 720px) { .temoignages { grid-auto-columns: calc((100% - 1.5rem) / 2); } }
@media (min-width: 1100px) { .temoignages { grid-auto-columns: calc((100% - 3rem) / 3); } }
.temoignage { scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--e-4); padding: var(--e-6) var(--e-5); background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r-l); margin: 0; }
.temoignage blockquote { margin: 0; flex: 1; font-family: var(--font-titre); font-size: 1.3125rem; font-style: italic; line-height: 1.45; color: var(--texte); }
.temoignage blockquote::before { content: "\201C"; display: block; font-size: 3.5rem; line-height: .6; color: var(--or); font-style: normal; margin-bottom: var(--e-2); }
.temoignage figcaption { display: flex; align-items: center; gap: var(--e-3); padding-top: var(--e-4); border-top: 1px solid var(--bord); }
.avatar { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; object-fit: cover; border: 1px solid var(--or); }
.avatar-initiales { display: grid; place-items: center; background: var(--surface-2); color: var(--accent); font-size: var(--t-xs); font-weight: 700; letter-spacing: .05em; }
.auteur strong { display: block; font-size: var(--t-s); }
.auteur span { display: block; font-size: var(--t-xs); color: var(--texte-doux); }

/* Catégories du guide (accueil) */
.tuile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-3);
    padding: var(--e-6) var(--e-4); min-height: 150px; text-align: center; text-decoration: none;
    background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r-l);
    transition: border-color var(--duree), transform var(--duree) var(--courbe);
}
.tuile .icon { width: 2rem; height: 2rem; color: var(--accent); stroke-width: 1.3; }
.tuile span { font-weight: 600; font-size: var(--t-s); }
.tuile:hover { border-color: var(--or); transform: translateY(-2px); }

/* Appel à l'action */
.appel { position: relative; overflow: hidden; text-align: center; }
.appel.sur-nuit { background: var(--nuit-2); }
.appel h2 { max-width: 20ch; margin-inline: auto; }
.appel p { max-width: 56ch; margin-inline: auto; color: var(--texte-doux); }
.appel .rangee { justify-content: center; margin-top: var(--e-6); }
.appel .filigrane { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, 90vw); opacity: .05; pointer-events: none; }
.appel > .conteneur { position: relative; }

/* Services (page) */
.service { display: grid; gap: var(--e-6); align-items: center; scroll-margin-top: calc(var(--entete-h) + 2rem); }
.service + .service { margin-top: var(--e-9); }
@media (min-width: 900px) { .service { grid-template-columns: 1fr 1fr; gap: var(--e-8); } .service:nth-child(even) .service-media { order: 2; } }
.service-media { position: relative; }
.service-media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--r-l); }
.service-media .pastille { position: absolute; left: var(--e-4); top: var(--e-4); background: var(--nuit); border-color: var(--or); color: var(--or-clair); }
.service-numero { font-family: var(--font-titre); font-size: 1.125rem; font-style: italic; color: var(--accent); }

/* Liste des logements : filtres */
.filtres { display: grid; gap: var(--e-4); align-items: end; padding: var(--e-5); background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r-l); }
@media (min-width: 720px) { .filtres { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; } }
.filtres .rangee { flex-wrap: nowrap; }

/* Fiche logement */
.galerie { position: relative; }
.galerie-piste { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--r-l); background: var(--nuit-2); }
.galerie-piste::-webkit-scrollbar { display: none; }
.galerie-piste figure { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.galerie-piste img { width: 100%; aspect-ratio: 16 / 10; max-height: 72vh; object-fit: cover; cursor: zoom-in; }
@media (min-width: 900px) { .galerie-piste img { aspect-ratio: 16 / 8; } }
.galerie-nav { position: absolute; inset: 50% var(--e-4) auto; transform: translateY(-50%); display: flex; justify-content: space-between; pointer-events: none; }
.galerie-nav .btn-icone { pointer-events: auto; background: rgba(255, 255, 255, .92); border: 0; box-shadow: var(--ombre-1); }
.galerie-compteur { position: absolute; right: var(--e-4); bottom: var(--e-4); }
.vignettes { display: flex; gap: var(--e-2); overflow-x: auto; margin-top: var(--e-3); padding-bottom: var(--e-2); }
.vignettes button { flex: 0 0 auto; width: 92px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: var(--r); overflow: hidden; background: none; opacity: .65; transition: opacity var(--duree), border-color var(--duree); }
.vignettes button img { width: 100%; height: 100%; object-fit: cover; }
.vignettes button:hover, .vignettes button[aria-current="true"] { opacity: 1; border-color: var(--or); }
.fiche { display: grid; gap: var(--e-7); }
@media (min-width: 1000px) { .fiche { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--e-8); } }
.fiche-entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--e-4); margin-bottom: var(--e-6); }
.fiche-entete h1 { font-size: var(--t-h2); margin-bottom: var(--e-2); }
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; background: var(--bord); border: 1px solid var(--bord); border-radius: var(--r-l); overflow: hidden; margin-bottom: var(--e-7); }
.specs div { display: flex; flex-direction: column; align-items: center; gap: var(--e-2); padding: var(--e-5) var(--e-3); background: var(--surface); text-align: center; font-size: var(--t-s); font-weight: 600; }
.specs .icon { color: var(--accent); width: 1.5rem; height: 1.5rem; }
.bloc-fiche + .bloc-fiche { margin-top: var(--e-7); padding-top: var(--e-7); border-top: 1px solid var(--bord); }
.bloc-fiche h2 { font-size: var(--t-h3); }
.equipements-groupe + .equipements-groupe { margin-top: var(--e-5); }
.equipements-groupe h3 { display: flex; align-items: center; gap: var(--e-2); font-family: var(--font-texte); font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); margin-bottom: var(--e-3); }
.equipements-groupe h3 .icon { color: var(--accent); }
.equipements { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: var(--e-2) var(--e-5); list-style: none; padding: 0; margin: 0; font-size: var(--t-s); }
.equipements li { display: flex; align-items: center; gap: var(--e-2); padding: var(--e-2) 0; border-bottom: 1px dashed var(--bord); }
.equipements .icon { color: var(--accent); width: 1rem; height: 1rem; }
.carte-geo { aspect-ratio: 16 / 9; border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--bord); }
.carte-geo iframe { width: 100%; height: 100%; border: 0; }
.encart-resa { position: sticky; top: calc(var(--entete-h) + 1.5rem); padding: var(--e-6); border-radius: var(--r-l); }
.encart-resa .prix { font-size: 2.5rem; }
.encart-resa ul { list-style: none; padding: 0; margin: var(--e-5) 0; display: grid; gap: var(--e-3); font-size: var(--t-s); color: var(--brume); }
.encart-resa li { display: flex; gap: var(--e-3); align-items: flex-start; }
.encart-resa li .icon { color: var(--or); }
.encart-resa .btn + .btn { margin-top: var(--e-3); }

/* Avis : résumé des notes */
.resume-notes { display: grid; gap: var(--e-6); align-items: center; padding: var(--e-6); background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r-l); }
@media (min-width: 720px) { .resume-notes { grid-template-columns: auto 1fr; gap: var(--e-8); } }
.note-globale { text-align: center; }
.note-globale strong { display: block; font-family: var(--font-titre); font-size: 4.5rem; font-weight: 500; line-height: 1; }
.note-globale .etoiles .icon { width: 1.25rem; height: 1.25rem; }
.repartition { display: grid; gap: var(--e-2); font-size: var(--t-s); }
.repartition div { display: grid; grid-template-columns: 3rem 1fr 2rem; align-items: center; gap: var(--e-3); }
.repartition div > span:first-child { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.repartition meter { width: 100%; height: 8px; }
.barre { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.barre span { display: block; height: 100%; background: var(--or); border-radius: inherit; }

/* Options voyageur */
.option { display: grid; gap: var(--e-4); align-items: center; padding: var(--e-5); background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r-l); }
@media (min-width: 720px) { .option { grid-template-columns: auto 1fr auto; } }
.option + .option { margin-top: var(--e-3); }
.option img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r); }
.option h2 { font-size: 1.5rem; margin-bottom: var(--e-1); }
.option-achat { display: flex; align-items: center; justify-content: space-between; gap: var(--e-5); }
.option-achat .saisie { width: 5.5rem; text-align: center; }
.total-commande { font-family: var(--font-titre); font-size: 2.25rem; font-weight: 600; line-height: 1; }

/* Récapitulatif (confirmation) */
.recap { font-size: var(--t-s); }
.recap td { padding: var(--e-3) 0; border-bottom: 1px solid var(--bord); }
.recap .num { text-align: right; white-space: nowrap; }
.recap tfoot td { border-bottom: 0; padding-top: var(--e-4); font-weight: 700; }

/* Résultats de recherche */
.resultat { display: block; padding: var(--e-5); background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r-l); text-decoration: none; transition: border-color var(--duree); }
.resultat + .resultat { margin-top: var(--e-3); }
.resultat:hover { border-color: var(--or); }
.resultat h2 { font-size: 1.5rem; margin: var(--e-2) 0; }
.resultat p { color: var(--texte-doux); font-size: var(--t-s); }

/* Article */
.image-article { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-l); margin-bottom: var(--e-7); }
.pied-article { margin-top: var(--e-7); padding-top: var(--e-5); border-top: 1px solid var(--bord); align-items: center; }
.tableau-comparatif th[scope="row"] { color: var(--texte-doux); font-weight: 600; }
.tableau-comparatif thead th { font-family: var(--font-titre); font-size: 1.125rem; letter-spacing: 0; text-transform: none; color: var(--texte); }

/* Contact */
.deux-colonnes.aligne-haut { align-items: start; }
.liste-contact { list-style: none; margin: var(--e-6) 0 0; padding: 0; display: grid; gap: var(--e-5); }
.liste-contact li { display: flex; gap: var(--e-4); align-items: center; }
.liste-contact strong { display: block; font-size: var(--t-s); }
.liste-contact span:not(.pastille), .liste-contact a { color: var(--texte-doux); font-size: var(--t-s); }
.liste-contact a { text-decoration: none; }
.liste-contact a:hover { color: var(--texte); text-decoration: underline; }
.reseaux-clairs a { border-color: var(--bord); color: var(--texte); background: var(--surface); }
.carte-contact { height: clamp(300px, 40vw, 440px); border-top: 1px solid var(--bord); }
.carte-contact iframe { width: 100%; height: 100%; border: 0; }

/* Équipe */
.membre { text-align: center; }
.membre img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-l); margin-bottom: var(--e-4); }
.membre h3 { font-size: 1.5rem; margin-bottom: var(--e-1); }
.membre p { font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }

/* Citation de mission */
.citation { max-width: 28ch; margin: 0 auto; font-family: var(--font-titre); font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); font-style: italic; line-height: 1.3; text-align: center; color: var(--ivoire); }

/* Page d'erreur */
.page-erreur { min-height: calc(100vh - var(--entete-h)); display: grid; place-items: center; text-align: center; padding: var(--e-8) var(--gouttiere); }
.page-erreur .code { font-family: var(--font-titre); font-size: clamp(6rem, 4rem + 10vw, 11rem); line-height: 1; color: var(--or); font-weight: 500; }
.page-erreur p { color: var(--brume); max-width: 46ch; margin-inline: auto; }
.page-erreur .btn { margin-top: var(--e-6); }

/* Page autonome (maintenance, 500, connexion admin) */
.page-seule { min-height: 100vh; display: grid; place-items: center; padding: var(--e-7) var(--gouttiere); text-align: center; }
.page-seule .logo-seul { width: min(260px, 70vw); margin: 0 auto var(--e-6); }
.page-seule .boite { width: 100%; max-width: 560px; }
.page-seule p { color: var(--brume); }

/* 9. Administration --------------------------------------------------------- */
.admin {
    --fond: #F4F2EE;
    --surface: #FFFFFF;
    --surface-2: #EFEBE3;
    --texte: var(--nuit);
    --texte-doux: var(--ardoise);
    --bord: #E2DDD3;
    --accent: var(--bronze);
    --barre-fond: #FFFFFF;
    --barre-actif: #F6EEDA;
    font-size: .9375rem;
    background: var(--fond);
}
[data-theme="sombre"] .admin {
    --fond: #0B1422;
    --surface: #13213A;
    --surface-2: #1B2C48;
    --texte: #EEF0F3;
    --texte-doux: #A9B3C1;
    --bord: #24365A;
    --accent: var(--or-clair);
    --focus: var(--or-clair);
    --barre-fond: #0F1B2D;
    --barre-actif: #1D2E4C;
    color-scheme: dark;
}
[data-theme="sombre"] .admin .saisie { border-color: #33476C; }
[data-theme="sombre"] .admin .alerte-succes { background: #13311F; border-color: #275A3B; color: #A6D9B9; }
[data-theme="sombre"] .admin .alerte-erreur { background: #3A1614; border-color: #6E2A25; color: #F2B2AC; }
[data-theme="sombre"] .admin .alerte-alerte { background: #36280C; border-color: #6B5120; color: #EED39A; }
[data-theme="sombre"] .admin .alerte-info { background: #12253B; border-color: #284A70; color: #A9C8EA; }
[data-theme="sombre"] .admin .badge-or { background: #3A2F14; color: var(--or-clair); }
[data-theme="sombre"] .admin .badge-succes { background: #13311F; color: #8FD3A9; }
[data-theme="sombre"] .admin .badge-erreur { background: #3A1614; color: #F2A29C; }
[data-theme="sombre"] .admin .badge-alerte { background: #36280C; color: #EED39A; }
[data-theme="sombre"] .admin .badge-info { background: #12253B; color: #A9C8EA; }
[data-theme="sombre"] .admin .btn-contour:hover { color: var(--nuit); }
[data-theme="sombre"] .admin .btn-nuit { background: var(--or); border-color: var(--or); color: var(--nuit); }

.admin-cadre { display: grid; min-height: 100vh; }
@media (min-width: 1100px) { .admin-cadre { grid-template-columns: 264px minmax(0, 1fr); } }
.admin-barre { background: var(--barre-fond); border-right: 1px solid var(--bord); }
@media (min-width: 1100px) { .admin-barre { position: sticky; top: 0; height: 100vh; overflow-y: auto; } }
.admin-marque { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-4) var(--e-5); background: var(--nuit); color: var(--ivoire); text-decoration: none; }
.admin-marque img { height: 40px; width: auto; }
.admin-marque strong { display: block; font-family: var(--font-titre); font-size: 1.125rem; letter-spacing: .1em; text-transform: uppercase; }
.admin-marque span { display: block; font-size: .6875rem; letter-spacing: .24em; text-transform: uppercase; color: var(--or-clair); }
.admin-menu > summary { display: flex; align-items: center; justify-content: space-between; padding: var(--e-3) var(--e-5); cursor: pointer; list-style: none; font-weight: 700; border-bottom: 1px solid var(--bord); }
.admin-menu > summary::-webkit-details-marker { display: none; }
@media (min-width: 1100px) { .admin-menu > summary { display: none; } }
.admin-nav { padding: var(--e-3) var(--e-3) var(--e-6); }
.admin-nav h2 { margin: var(--e-5) var(--e-3) var(--e-2); font-family: var(--font-texte); font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--texte-doux); }
.admin-nav ul { list-style: none; margin: 0; padding: 0; }
.admin-nav a { display: flex; align-items: center; gap: var(--e-3); padding: .5rem .75rem; border-radius: var(--r); color: var(--texte); text-decoration: none; font-size: .875rem; font-weight: 500; }
.admin-nav a .icon { color: var(--texte-doux); width: 1.1rem; height: 1.1rem; }
.admin-nav a:hover { background: var(--surface-2); }
.admin-nav a[aria-current="page"] { background: var(--barre-actif); font-weight: 700; box-shadow: inset 2px 0 0 var(--or); }
.admin-nav a[aria-current="page"] .icon { color: var(--accent); }
.admin-nav .compte { margin-left: auto; }
.admin-principal { display: flex; flex-direction: column; min-width: 0; }
.admin-entete { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-3) clamp(1rem, 2.5vw, 2rem); background: color-mix(in srgb, var(--fond) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--bord); }
.admin-entete h1 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 0; }
.admin-entete .rangee { gap: var(--e-2); }
.admin-utilisateur { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--t-s); color: var(--texte-doux); }
.admin-contenu { flex: 1; padding: clamp(1rem, 2.5vw, 2rem); display: flex; flex-direction: column; gap: var(--e-5); }
.admin-pied { padding: var(--e-4) clamp(1rem, 2.5vw, 2rem); font-size: var(--t-xs); color: var(--texte-doux); border-top: 1px solid var(--bord); }

.panneau { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r-l); }
.panneau-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--bord); }
.panneau-entete h2 { font-family: var(--font-texte); font-size: 1rem; font-weight: 700; letter-spacing: 0; margin: 0; }
.panneau-entete p { margin: 0; font-size: var(--t-xs); color: var(--texte-doux); }
.panneau-corps { padding: var(--e-5); }
.panneau-corps > .tableau-defile { border: 0; border-radius: 0; margin: calc(var(--e-5) * -1); }
.panneau .tableau-defile { border-radius: 0 0 var(--r-l) var(--r-l); }
.panneau > .tableau-defile { border: 0; }
.admin-grille { display: grid; gap: var(--e-5); grid-template-columns: minmax(0, 1fr); }
.admin-grille > *, .admin-contenu > *, .pile > * { min-width: 0; }
@media (min-width: 1200px) { .admin-grille.deux { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); align-items: start; } .admin-grille.moitie { grid-template-columns: 1fr 1fr; align-items: start; } }
.kpis { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.kpi { padding: var(--e-4) var(--e-5); background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r-l); display: flex; gap: var(--e-3); align-items: center; }
.kpi .pastille { width: 2.75rem; height: 2.75rem; }
.kpi .pastille .icon { width: 1.25rem; height: 1.25rem; }
.kpi strong { display: block; font-family: var(--font-titre); font-size: 2rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi span { display: block; font-size: var(--t-xs); color: var(--texte-doux); margin-top: .2rem; }
.kpi-accent { border-color: var(--or); }
a.kpi { text-decoration: none; transition: border-color var(--duree); }
a.kpi:hover { border-color: var(--or); }
.kpi-libelle { font-size: var(--t-s); font-weight: 600; color: var(--texte); }
.min-0 { min-width: 0; }
.liste-simple { list-style: none; margin: 0; padding: 0; }
.liste-simple li { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-3) var(--e-5); border-bottom: 1px solid var(--bord); }
.liste-simple li:last-child { border-bottom: 0; }
.liste-simple a { text-decoration: none; }
.liste-simple a:hover { text-decoration: underline; }
.liste-admin { list-style: none; margin: 0; padding: 0; }
.liste-admin > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--e-3) var(--e-4); align-items: center; padding: var(--e-3) var(--e-5); border-bottom: 1px solid var(--bord); }
.liste-admin > li:last-child { border-bottom: 0; }
.liste-admin > li[aria-current="true"] { background: var(--barre-actif); box-shadow: inset 3px 0 0 var(--or); }
.liste-admin strong { margin-right: var(--e-2); }
.liste-admin .etoiles { vertical-align: middle; margin-right: var(--e-2); }
@media (max-width: 640px) { .liste-admin > li { grid-template-columns: auto minmax(0, 1fr); } .liste-admin > li > :nth-child(3) { display: none; } .liste-admin .actions-ligne { grid-column: 2; justify-content: flex-start; } }
.formulaire-colle { position: sticky; top: calc(4.5rem); }
@media (max-width: 1199px) { .formulaire-colle { position: static; } .admin-grille.deux > .formulaire-colle { order: -1; } }
.image-actuelle { width: 100%; max-width: 320px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); border: 1px solid var(--bord); }
.case-alignee { align-self: end; padding-bottom: .8rem; }
.bordure-haut { border-top: 1px solid var(--bord); }
.formulaire-large { max-width: 960px; }
.apercu-logo { display: inline-flex; padding: var(--e-3) var(--e-4); background: var(--nuit); border-radius: var(--r); width: fit-content; }
.apercu-logo img { height: 56px; width: auto; }
.favicon-actuel { width: 40px; height: 40px; object-fit: contain; border: 1px solid var(--bord); border-radius: var(--r); background: var(--nuit); }
.champ-court { max-width: 220px; }
.puces-multilignes { flex-wrap: wrap; overflow: visible; }
.puces-multilignes .puce { white-space: normal; flex-shrink: 1; max-width: 100%; }
.admin code, .prose code { overflow-wrap: anywhere; }
.ligne-langue { align-items: flex-end; }
.ligne-langue > .min-0 { flex: 1; }
.source-traduction { max-height: 12rem; overflow-y: auto; word-break: normal; font-family: var(--font-texte); font-size: var(--t-s); }
.aligne-haut-rangee { align-items: flex-start; }
.bloc-repete > h3 { margin-bottom: var(--e-2); }
.bloc-repete > .champ + .champ, .bloc-repete > .champ + .champs { margin-top: var(--e-4); }
.lignes-devis { display: grid; gap: var(--e-3); }
.ligne-devis { display: grid; grid-template-columns: minmax(0, 3fr) minmax(70px, 1fr) minmax(100px, 1.4fr) auto; gap: var(--e-3); align-items: center; }
.ligne-devis-entete { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux); }
@media (max-width: 640px) { .ligne-devis { grid-template-columns: 1fr 1fr auto; } .ligne-devis > :first-child { grid-column: 1 / -1; } .ligne-devis-entete { display: none; } }
.document-totaux { width: min(100%, 300px); margin: var(--e-5) 0 0 auto; }
.document-totaux dd { text-align: right; }
.saisie-code-source { font-family: ui-monospace, Consolas, monospace; font-size: .8125rem; line-height: 1.6; }
.etiquette .compteur-car { float: right; font-weight: 500; }
.miniature { width: 64px; height: 48px; object-fit: cover; border-radius: var(--r-s); background: var(--surface-2); }
.icone-donnee { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--surface-2); color: var(--accent); }
.actions-ligne { display: inline-flex; gap: var(--e-2); align-items: center; justify-content: flex-end; }
.actions-ligne form { display: inline; }
.onglets { display: flex; gap: var(--e-1); overflow-x: auto; border-bottom: 1px solid var(--bord); }
.onglets a { padding: var(--e-3) var(--e-4); font-size: var(--t-s); font-weight: 600; color: var(--texte-doux); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.onglets a:hover { color: var(--texte); }
.onglets a[aria-current="page"] { color: var(--texte); border-bottom-color: var(--or); }
.compteur-car { font-size: var(--t-xs); font-variant-numeric: tabular-nums; color: var(--texte-doux); }
.compteur-car.ok { color: var(--succes); }
.compteur-car.trop { color: var(--erreur); font-weight: 700; }
.apercus { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.apercus img { width: 96px; height: 72px; object-fit: cover; border-radius: var(--r-s); border: 1px solid var(--bord); }
.depot { display: grid; place-items: center; gap: var(--e-2); padding: var(--e-7) var(--e-5); border: 2px dashed var(--bord); border-radius: var(--r-l); text-align: center; color: var(--texte-doux); transition: border-color var(--duree), background-color var(--duree); }
.depot.survol { border-color: var(--or); background: var(--surface-2); }
.depot { cursor: pointer; position: relative; }
.depot:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.tronque { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apercu-google { font-family: Arial, sans-serif; }
.apercu-google-titre { margin: var(--e-1) 0; font-size: 1.15rem; color: #1A0DAB; line-height: 1.3; }
[data-theme="sombre"] .apercu-google-titre { color: #99C3FF; }
.depot .icon { width: 2.25rem; height: 2.25rem; color: var(--accent); }
.mediatheque { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.media-carte { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r-l); overflow: hidden; }
.media-carte img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-2); }
.media-carte .carte-corps { padding: var(--e-3); gap: var(--e-2); font-size: var(--t-xs); }
.galerie-admin { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.galerie-admin figure { margin: 0; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r); overflow: hidden; }
.galerie-admin img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.galerie-admin figcaption { display: flex; align-items: center; justify-content: space-between; gap: var(--e-1); padding: var(--e-2); font-size: var(--t-xs); }
.cases-grille { display: grid; gap: var(--e-2) var(--e-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.groupe-cases { border: 1px solid var(--bord); border-radius: var(--r); padding: var(--e-4); margin: 0; }
.groupe-cases + .groupe-cases { margin-top: var(--e-3); }
.groupe-cases legend { display: flex; align-items: center; gap: var(--e-2); padding: 0 var(--e-2); font-weight: 700; font-size: var(--t-s); }
.groupe-cases legend .icon { color: var(--accent); }
.choix-icone { display: flex; gap: var(--e-3); align-items: center; }
.choix-icone .icone-donnee { width: 48px; height: 48px; flex-shrink: 0; }
.bloc-repete { border: 1px solid var(--bord); border-radius: var(--r); padding: var(--e-4); }
.bloc-repete + .bloc-repete { margin-top: var(--e-3); }
.bloc-repete > legend, .bloc-repete > h3 { font-family: var(--font-texte); font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); padding: 0 var(--e-2); margin: 0 0 var(--e-3); }
.graphique { display: flex; align-items: flex-end; gap: 4px; height: 200px; padding-top: var(--e-4); overflow-x: auto; }
.graphique-barre { flex: 1; min-width: 4px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; }
.graphique-barre span { display: block; width: 100%; background: var(--or); border-radius: 3px 3px 0 0; min-height: 2px; transition: background-color var(--duree); }
.graphique-barre:hover span { background: var(--bronze); }
.graphique-barre small { font-size: .625rem; color: var(--texte-doux); white-space: nowrap; }
@media (max-width: 640px) { .graphique-barre small { font-size: .5rem; writing-mode: vertical-rl; transform: rotate(180deg); } .graphique { height: 220px; } }
.graphique-bas { height: 140px; }
.ligne-barre { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(80px, 1.2fr) auto !important; }
.repartition .ligne-barre > .libelle-barre { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.graphique-legende { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--texte-doux); margin-top: var(--e-2); }
.code-bloc { font-family: ui-monospace, Consolas, monospace; font-size: var(--t-xs); background: var(--surface-2); border: 1px solid var(--bord); border-radius: var(--r); padding: var(--e-3); word-break: break-all; }
.codes-secours { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--e-2); font-family: ui-monospace, Consolas, monospace; }
.codes-secours li { list-style: none; padding: var(--e-2); background: var(--surface-2); border-radius: var(--r-s); text-align: center; }
.qr { display: inline-block; padding: var(--e-3); background: #fff; border-radius: var(--r); border: 1px solid var(--bord); }
.progression { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.progression span { display: block; height: 100%; background: var(--or); }
.non-lu { font-weight: 700; }
.non-lu td:first-child { box-shadow: inset 3px 0 0 var(--or); }
.message-corps { white-space: pre-wrap; line-height: 1.7; }
.dl-grille { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: var(--e-2) var(--e-5); margin: 0; font-size: var(--t-s); }
.dl-grille dt { color: var(--texte-doux); }
.dl-grille dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* Documents imprimables (facture, devis) */
.page-document { background: #E9E6DF; }
.document-barre { max-width: 860px; margin: var(--e-5) auto 0; padding-inline: var(--gouttiere); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e-2); }
.document { max-width: 860px; margin: var(--e-4) auto var(--e-7); padding: clamp(1.5rem, 4vw, 3.5rem); background: #fff; color: var(--nuit); border-radius: var(--r); box-shadow: var(--ombre-2); }
.document-entete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-5); padding-bottom: var(--e-5); margin-bottom: var(--e-6); border-bottom: 2px solid var(--nuit); }
.document-logo { height: 56px; width: auto; margin-bottom: var(--e-3); }
.document-societe { font-family: var(--font-titre); font-size: 1.5rem; font-weight: 600; margin: 0; }
.document-ref { text-align: right; }
.document-ref h1 { font-size: 2.25rem; letter-spacing: .18em; text-transform: uppercase; color: var(--bronze); margin-bottom: var(--e-2); }
.document-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--e-5); margin-bottom: var(--e-6); }
.document-parties h2 { font-family: var(--font-texte); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ardoise); margin-bottom: var(--e-2); }
.document .tableau thead th { background: var(--ivoire); }
.document .tableau tfoot td { font-size: 1.125rem; }
.document-droite { text-align: right; margin-top: var(--e-3); }
.document-acquittee { display: inline-flex; align-items: center; gap: var(--e-2); margin-top: var(--e-5); padding: var(--e-2) var(--e-4); border: 2px solid var(--succes); border-radius: var(--r); color: var(--succes); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: var(--t-xs); }
.document-pied { margin-top: var(--e-7); padding-top: var(--e-4); border-top: 1px solid var(--sable); font-size: .75rem; color: var(--ardoise); text-align: center; }
@media print {
    .page-document { background: #fff; }
    .document-barre { display: none; }
    .document { box-shadow: none; margin: 0; max-width: none; padding: 0; }
}

/* Connexion admin */
.connexion { min-height: 100vh; display: grid; place-items: center; padding: var(--e-6) var(--gouttiere); }
.connexion .boite { width: 100%; max-width: 420px; }
.connexion .logo-seul { width: 220px; margin: 0 auto var(--e-6); }
.connexion .formulaire { background: var(--nuit-2); border-color: #2A3B55; }
.connexion h1 { font-size: 2rem; text-align: center; }
.saisie-code { text-align: center; letter-spacing: .45em; font-size: 1.5rem; font-weight: 600; }
.connexion summary { cursor: pointer; }

/* 10. Accessibilité, mouvement, impression ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
    .btn, .saisie, .carte { border: 1px solid CanvasText; }
}
@media print {
    .site-entete, .site-pied, .bandeau-cookies, .notifications, .fav, .galerie-nav, .admin-barre, .admin-entete .rangee { display: none !important; }
    body { background: #fff; color: #000; }
    .sur-nuit { background: #fff; color: #000; }
}