/* ==========================================================================
   Fire Manager — charte du site vitrine
   Encre (bleu nuit) + braise (orange) sur papier clair. Polices auto-hébergées.
   Une seule feuille, chargée sur toutes les pages : la garder lisible et courte.
   ========================================================================== */

/* --- Polices (sous-ensembles latin / latin-ext, chargement à la demande) --- */
@font-face {
  font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/bricolage-grotesque-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/bricolage-grotesque-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Public Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/public-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/public-sans-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/public-sans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/public-sans-400-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+1EF2-1EFF, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --encre: #0a1826;
  --encre-2: #132b42;
  --encre-3: #1d3e5c;
  --braise: #ef5a1e;
  --braise-2: #ff7a45;
  --braise-fond: #fff2eb;
  --papier: #ffffff;
  --brume: #f4f7fa;
  --trait: #dee6ee;
  --texte: #14212e;
  --doux: #55697d;
  --vert: #157349;
  --vert-fond: #e7f4ee;
  /* Blanc cassé exact sur lequel les illustrations sont dessinées : peindre la
     plaque de cette couleur rend « mix-blend-mode » inutile — c'est lui qui
     salissait les aplats et révélait les blocs de compression. */
  --creme: #f7f4f0;
  /* --vert sur --encre ne fait que 3,0:1 : illisible. Variante pour fond sombre. */
  --vert-clair: #4fd6a0;

  --large: 1180px;
  --etroit: 760px;
  --rayon: 14px;
  --rayon-sm: 9px;
  --ombre: 0 1px 2px rgba(10, 24, 38, .06), 0 10px 30px rgba(10, 24, 38, .07);
  --ombre-forte: 0 24px 60px rgba(10, 24, 38, .22);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0; background: var(--papier); color: var(--texte);
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Bricolage Grotesque', 'Public Sans', sans-serif; font-weight: 700;
  line-height: 1.12; letter-spacing: -.02em; color: var(--encre); margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.35rem + 2.9vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.45rem); }
h3 { font-size: clamp(1.15rem, 1.02rem + .5vw, 1.4rem); }
p { margin: 0 0 1.1em; }
a { color: var(--encre-3); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--braise); }
img, picture, svg { max-width: 100%; height: auto; display: block; }
ul, ol { padding-left: 1.2em; }
strong, b { font-weight: 700; }
:focus-visible { outline: 3px solid var(--braise); outline-offset: 2px; border-radius: 4px; }

.contenu { width: 100%; max-width: var(--large); margin-inline: auto; padding-inline: 20px; }
.etroit { max-width: var(--etroit); margin-inline: auto; }
.section { padding: clamp(48px, 7vw, 96px) 0; }
.section.brume { background: var(--brume); }
.section-titre { max-width: 660px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-titre.centre { margin-inline: auto; text-align: center; }
.section-titre p { color: var(--doux); font-size: 1.08rem; margin-bottom: 0; }
.surtitre {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--braise); margin-bottom: 12px;
}
.saut { display: block; height: 1px; }

/* --- En-tête --------------------------------------------------------------- */
.entete {
  position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--trait);
}
.entete .contenu { display: flex; align-items: center; gap: 18px; min-height: 68px; }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--encre); font-weight: 700; }
.marque svg { width: 34px; height: 34px; flex: 0 0 auto; }
.marque span { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.15rem; letter-spacing: -.02em; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
  padding: 9px 13px; border-radius: var(--rayon-sm); text-decoration: none;
  color: var(--texte); font-size: .96rem; font-weight: 500;
}
.nav a:hover { background: var(--brume); color: var(--encre); }
.nav a[aria-current="page"] { color: var(--braise); font-weight: 600; }
.nav-bouton { display: none; background: none; border: 1px solid var(--trait); border-radius: var(--rayon-sm); padding: 8px; margin-left: auto; }
.nav-bouton svg { width: 22px; height: 22px; }

@media (max-width: 940px) {
  .nav {
    position: fixed; inset: 68px 0 auto; flex-direction: column; align-items: stretch;
    background: var(--papier); border-bottom: 1px solid var(--trait); padding: 10px 20px 20px;
    gap: 2px; margin: 0; display: none; box-shadow: var(--ombre);
  }
  .nav.ouvert { display: flex; }
  .nav a { padding: 12px 10px; font-size: 1.02rem; }
  .nav .btn { margin-top: 8px; justify-content: center; }
  .nav-bouton { display: block; }
}

/* --- Boutons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border-radius: 999px; font-weight: 600; font-size: 1rem;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
  min-height: 48px;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; }
.btn-principal { background: var(--braise); color: #fff; }
.btn-principal:hover { background: #d84c15; color: #fff; }
.btn-secondaire { background: var(--papier); color: var(--encre); border-color: var(--trait); }
.btn-secondaire:hover { border-color: var(--encre); color: var(--encre); }
.btn-clair { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .35); }
.btn-clair:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.btn-groupe { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Héros ----------------------------------------------------------------- */
.heros { padding: clamp(36px, 5vw, 70px) 0 clamp(40px, 6vw, 80px); }
/* Héros pleine largeur : la photo tient la section, le texte occupe la moitié
   gauche — là où l'image a été cadrée pour rester sombre et sans détail. */
.heros.bandeau { padding: 0; }
.heros.bandeau > .contenu { padding-block: clamp(64px, 9vw, 132px); }
.heros-texte { max-width: 42rem; }
.heros.bandeau .heros-intro { color: rgba(255, 255, 255, .88); max-width: 33em; }
.heros-grille { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.heros h1 { margin-bottom: .35em; }
.heros-intro { font-size: clamp(1.05rem, 1rem + .35vw, 1.24rem); color: var(--doux); max-width: 34em; }
.heros-photo { position: relative; }
.heros-photo img { border-radius: var(--rayon); box-shadow: var(--ombre); }
.heros-preuves { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; padding: 0; list-style: none; }
.heros-preuves li { display: flex; align-items: center; gap: 8px; font-size: .95rem; color: var(--doux); font-weight: 500; }
.heros-preuves svg { width: 17px; height: 17px; color: var(--vert); flex: 0 0 auto; }
@media (max-width: 900px) { .heros-grille { grid-template-columns: 1fr; } }

/* Sur fond sombre, la lunette marine disparaîtrait : on l'éclaircit. */
.pied .marque .instrument, .ruban .marque .instrument, .bandeau .marque .instrument { fill: #26415a; }

/* --- Cartes et grilles ------------------------------------------------------ */
.grille { display: grid; gap: 20px; }
.grille-2 { grid-template-columns: repeat(2, 1fr); }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
.grille-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grille-3, .grille-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grille-2, .grille-3, .grille-4 { grid-template-columns: 1fr; } }

.carte {
  background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 24px; display: flex; flex-direction: column; gap: 8px;
}
.carte h3 { margin-bottom: 2px; }
.carte p { color: var(--doux); font-size: .97rem; margin-bottom: 0; }
.carte-icone {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: var(--braise-fond); color: var(--braise); margin-bottom: 8px;
}
.carte-icone svg { width: 21px; height: 21px; }
/* Plaque d'illustration : pleine largeur de carte, sur le crème même des visuels
   — donc aucun mix-blend-mode, qui virait le fond au gris sale sur --brume. */
.plaque-ill { position: relative; background: var(--creme); overflow: hidden; aspect-ratio: 4 / 3; }
.plaque-ill picture, .plaque-ill img { width: 100%; height: 100%; }
.plaque-ill img { object-fit: cover; }
.plaque-numero {
  position: absolute; top: 14px; left: 18px; z-index: 1;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1rem;
  letter-spacing: .08em; color: var(--braise); font-variant-numeric: tabular-nums;
}
/* Carte « atout » : la plaque touche les bords, le texte respire en dessous. */
.carte-atout { padding: 0; overflow: hidden; gap: 0; }
.carte-atout .carte-corps { padding: 22px 26px 26px; display: grid; gap: 6px; }
.carte-atout h3 { margin-bottom: 2px; }

/* Carte photographique : la photo EST la carte, le texte se pose dessus. */
.carte-photo {
  position: relative; display: flex; align-items: flex-end; min-height: 300px;
  border-radius: var(--rayon); overflow: hidden; background: var(--encre-2);
  color: #fff; text-decoration: none;
  transition: transform .2s cubic-bezier(.22, .68, .28, 1), box-shadow .2s;
}
.carte-photo > picture { position: absolute; inset: 0; z-index: 0; }
.carte-photo > picture img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22, .68, .28, 1); }
.carte-photo::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 24, 38, .12) 0%, rgba(10, 24, 38, .62) 52%, rgba(10, 24, 38, .93) 100%);
}
.carte-photo-texte { position: relative; z-index: 2; padding: 22px 22px 24px; }
.carte-photo h3 { color: #fff; font-size: 1.16rem; margin-bottom: 6px; }
.carte-photo p { color: rgba(255, 255, 255, .8); font-size: .93rem; margin-bottom: 10px; }
.carte-photo .carte-lien { color: #fff; padding-top: 0; }
.carte-photo:hover { transform: translateY(-3px); box-shadow: var(--ombre-forte); }
.carte-photo:hover > picture img { transform: scale(1.05); }
.carte-photo:hover .carte-lien { color: var(--braise-2); }

/* Illustration encadrée, hors carte (guides, pages locales). */
.ill-bloc { border-radius: var(--rayon); overflow: hidden; background: var(--creme); border: 1px solid var(--trait); }
.ill-bloc img { display: block; width: 100%; height: auto; }
.ill-bloc figcaption { padding: 10px 16px; font-size: .88rem; color: var(--doux); background: var(--papier); border-top: 1px solid var(--trait); }

.carte-lien { margin-top: auto; padding-top: 12px; font-weight: 600; font-size: .95rem; color: var(--encre-3); text-decoration: none; }
.carte-lien:hover { color: var(--braise); }
a.carte { text-decoration: none; color: inherit; }
a.carte:hover { border-color: var(--encre-3); }

/* --- Bloc alterné texte / capture ------------------------------------------ */
.alterne { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.alterne + .alterne { margin-top: clamp(48px, 7vw, 96px); }
.alterne.inverse > :first-child { order: 2; }
.alterne h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.alterne ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.alterne ul li { display: flex; gap: 10px; align-items: flex-start; color: var(--texte); }
.alterne ul svg { width: 19px; height: 19px; color: var(--vert); flex: 0 0 auto; margin-top: 4px; }
@media (max-width: 900px) { .alterne, .alterne.inverse > :first-child { grid-template-columns: 1fr; order: 0; } }

/* Cadre de capture d'écran : barre de fenêtre discrète */
.cadre {
  border-radius: var(--rayon); overflow: hidden; border: 1px solid var(--trait);
  box-shadow: var(--ombre); background: var(--papier);
}
.cadre-barre { display: flex; gap: 6px; padding: 10px 14px; background: var(--brume); border-bottom: 1px solid var(--trait); }
.cadre-barre span { width: 10px; height: 10px; border-radius: 50%; background: #cdd7e2; }
.cadre img { display: block; }
.cadre-mobile { max-width: 300px; margin-inline: auto; border-radius: 26px; padding: 10px; background: var(--encre); box-shadow: var(--ombre-forte); }
.cadre-mobile img { border-radius: 18px; }

/* --- Bandeau pleine largeur : photographie de fond + voile de lisibilité -----
   La section occupe déjà toute la largeur, seule .contenu est contrainte : on
   n'emploie jamais 100vw, qui déborde dès qu'une barre de défilement est là.
   Trois plans : la photo (0), le voile (1), le texte (2). --cadrage déplace le
   point d'intérêt de la photo selon la section. */
.bandeau { position: relative; overflow: hidden; background: var(--encre); color: #fff; }
.bandeau > picture { position: absolute; inset: 0; z-index: 0; }
.bandeau > picture img { width: 100%; height: 100%; object-fit: cover; object-position: var(--cadrage, 50% 50%); }
.bandeau::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 24, 38, .5) 0%, rgba(10, 24, 38, .12) 34%, rgba(10, 24, 38, .5) 78%, rgba(10, 24, 38, .9) 100%),
    linear-gradient(94deg, rgba(10, 24, 38, .95) 0%, rgba(10, 24, 38, .86) 36%, rgba(10, 24, 38, .42) 64%, rgba(10, 24, 38, .08) 100%);
}
.bandeau > .contenu, .bandeau > .bandeau-pied { position: relative; z-index: 2; }
.bandeau h1, .bandeau h2, .bandeau h3 { color: #fff; }
.bandeau p { color: rgba(255, 255, 255, .84); }
.bandeau .surtitre { color: var(--braise-2); }
.bandeau .liste-check svg, .bandeau .heros-preuves svg { color: var(--vert-clair); }
.bandeau .heros-preuves li { color: rgba(255, 255, 255, .86); }
.bandeau a:not(.btn) { color: #fff; }
.bandeau.section { padding: clamp(64px, 9vw, 116px) 0; }
/* Bandeau de bas de section : la bande de preuves posée sur la photo. */
.bandeau-pied { border-top: 1px solid rgba(255, 255, 255, .16); background: rgba(10, 24, 38, .5); }
.bandeau-pied .heros-preuves { margin: 0; padding: 14px 20px; gap: 10px 28px; }
/* Sur téléphone, le texte ne peut plus se caler à gauche de la photo : on assombrit tout. */
@media (max-width: 760px) {
  .bandeau::before { background: linear-gradient(180deg, rgba(10, 24, 38, .78) 0%, rgba(10, 24, 38, .93) 72%); }
}

/* --- Ruban sombre (appel à l'action) --------------------------------------- */
.ruban { background: var(--encre); color: #fff; position: relative; overflow: hidden; }
.ruban::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 120% at 85% 110%, rgba(239, 90, 30, .38), transparent 60%);
}
.ruban .contenu { position: relative; z-index: 1; }
.ruban h2, .ruban h3 { color: #fff; }
.ruban p { color: rgba(255, 255, 255, .78); }
.ruban-grille { display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; align-items: center; }
@media (max-width: 860px) { .ruban-grille { grid-template-columns: 1fr; } }

/* --- Chiffres --------------------------------------------------------------- */
.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.chiffre b {
  display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
  line-height: 1; color: var(--encre); font-variant-numeric: tabular-nums;
}
.ruban .chiffre b, .bandeau .chiffre b { color: #fff; }
.chiffre span { display: block; margin-top: 8px; font-size: .93rem; color: var(--doux); }
.ruban .chiffre span, .bandeau .chiffre span { color: rgba(255, 255, 255, .78); }
@media (max-width: 720px) { .chiffres { grid-template-columns: repeat(2, 1fr); } }

/* --- Tarifs ---------------------------------------------------------------- */
.tarif {
  border: 1px solid var(--trait); border-radius: var(--rayon); padding: 30px 26px;
  background: var(--papier); display: flex; flex-direction: column;
}
.tarif.phare { border: 2px solid var(--braise); box-shadow: var(--ombre); position: relative; }
.tarif .etiquette {
  position: absolute; top: -13px; left: 26px; background: var(--braise); color: #fff;
  font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px;
}
.tarif-prix { display: flex; align-items: baseline; gap: 6px; margin: 6px 0 4px; }
.tarif-prix b { font-family: 'Bricolage Grotesque', sans-serif; font-size: 2.6rem; line-height: 1; color: var(--encre); }
.tarif-prix span { color: var(--doux); font-size: .95rem; }
.tarif ul { list-style: none; padding: 0; margin: 18px 0 24px; display: grid; gap: 9px; }
.tarif li { display: flex; gap: 9px; align-items: flex-start; font-size: .97rem; }
.tarif li svg { width: 18px; height: 18px; color: var(--vert); flex: 0 0 auto; margin-top: 3px; }
.tarif .btn { margin-top: auto; }

/* --- FAQ -------------------------------------------------------------------- */
.faq { display: grid; gap: 10px; }
.faq details { border: 1px solid var(--trait); border-radius: var(--rayon-sm); background: var(--papier); }
.faq summary {
  cursor: pointer; padding: 16px 20px; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--braise); font-size: 1.4rem; line-height: 1; font-weight: 400; }
.faq details[open] summary::after { content: '−'; }
.faq details > div { padding: 0 20px 18px; color: var(--doux); }
.faq details > div p:last-child { margin-bottom: 0; }

/* --- Listes de villes / liens SEO ------------------------------------------ */
.liens-villes { columns: 4 170px; column-gap: 26px; list-style: none; padding: 0; margin: 0; }
.liens-villes li { break-inside: avoid; margin-bottom: 7px; font-size: .95rem; }
.fil { font-size: .88rem; color: var(--doux); padding: 18px 0 0; }
.fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.fil li + li::before { content: '›'; margin-right: 8px; color: var(--trait); }

/* --- Article / contenu rédactionnel ---------------------------------------- */
.article { max-width: 70ch; margin-inline: auto; }
.article h2 { margin-top: 1.8em; }
.article h3 { margin-top: 1.5em; }
.article ul, .article ol { display: grid; gap: 8px; margin-bottom: 1.2em; }
.article blockquote {
  margin: 1.6em 0; padding: 18px 24px; border-left: 4px solid var(--braise);
  background: var(--brume); border-radius: 0 var(--rayon-sm) var(--rayon-sm) 0; color: var(--encre);
}
.article blockquote p:last-child { margin-bottom: 0; }
.article-meta { color: var(--doux); font-size: .92rem; margin-bottom: 2em; }
.encart {
  border: 1px solid var(--trait); border-left: 4px solid var(--encre-3); background: var(--brume);
  border-radius: 0 var(--rayon-sm) var(--rayon-sm) 0; padding: 18px 22px; margin: 1.8em 0;
}
.encart p:last-child { margin-bottom: 0; }

/* --- Tableau ---------------------------------------------------------------- */
.tableau-enveloppe { overflow-x: auto; border: 1px solid var(--trait); border-radius: var(--rayon); }
table.comparatif { width: 100%; border-collapse: collapse; font-size: .96rem; min-width: 560px; }
table.comparatif th, table.comparatif td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--trait); }
table.comparatif thead th { background: var(--brume); font-weight: 700; color: var(--encre); }
table.comparatif tbody tr:last-child td { border-bottom: 0; }
table.comparatif td svg { width: 18px; height: 18px; color: var(--vert); }

/* --- Pied de page ----------------------------------------------------------- */
.pied { background: var(--encre); color: rgba(255, 255, 255, .72); padding: clamp(40px, 5vw, 64px) 0 28px; }
.pied a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied-grille { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.pied h4 { color: #fff; font-size: .95rem; margin-bottom: 14px; font-family: 'Public Sans', sans-serif; letter-spacing: .02em; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: .95rem; }
.pied .marque { color: #fff; margin-bottom: 14px; }
.pied-bas {
  margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: .88rem;
}
@media (max-width: 860px) { .pied-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pied-grille { grid-template-columns: 1fr; } }

/* ==========================================================================
   Animations
   Principe : la page est lisible à l'arrêt. Les états de départ ne s'appliquent
   qu'une fois la classe « anim » posée par le script — sans JavaScript, ou avec
   « mouvement réduit », tout reste visible et immobile.
   ========================================================================== */

@keyframes monte { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes entre { from { opacity: 0; transform: translateY(26px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes braise {
  0%, 100% { transform: translateY(0) scaleY(1); opacity: 1; }
  50% { transform: translateY(-.5px) scaleY(1.06); opacity: .92; }
}
@keyframes lueur {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .38; }
  50% { transform: translate(-6%, -4%) scale(1.15); opacity: .55; }
}

/* Séquence d'ouverture du héros : chaque élément entre à son tour. */
.anim .heros-grille > div > * { animation: monte .62s cubic-bezier(.22, .68, .28, 1) backwards; }
.anim .heros-grille > div > :nth-child(1) { animation-delay: .04s; }
.anim .heros-grille > div > :nth-child(2) { animation-delay: .11s; }
.anim .heros-grille > div > :nth-child(3) { animation-delay: .18s; }
.anim .heros-grille > div > :nth-child(4) { animation-delay: .25s; }
.anim .heros-grille > div > :nth-child(5) { animation-delay: .32s; }
.anim .heros-photo, .anim .heros-grille .cadre { animation: entre .8s cubic-bezier(.22, .68, .28, 1) .2s backwards; }

/* Révélation au défilement : l'élément monte une fois croisé, puis n'y revient plus. */
.anim .reveler { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.22, .68, .28, 1); }
.anim .reveler.vu { opacity: 1; transform: none; }
.anim .reveler.decale > * { transition-delay: 0ms; }
.anim .reveler.vu:nth-child(2) { transition-delay: .07s; }
.anim .reveler.vu:nth-child(3) { transition-delay: .14s; }
.anim .reveler.vu:nth-child(4) { transition-delay: .21s; }

/* Flamme du logo : un souffle lent, jamais clignotant. Le point d'ancrage est
   le pied de la flamme, sinon elle se décolle de son cadran. */
.anim .marque .flamme { animation: braise 3.4s ease-in-out infinite; transform-origin: 50% 66%; transform-box: fill-box; }
.ruban::after { animation: lueur 14s ease-in-out infinite; }

/* Cartes : lever léger et filet d'accent qui se déploie. */
.carte, .tarif { transition: transform .2s cubic-bezier(.22, .68, .28, 1), border-color .2s, box-shadow .2s; }
a.carte:hover, .carte:hover { transform: translateY(-3px); box-shadow: var(--ombre); }
.carte-lien svg { transition: transform .18s ease; }
a.carte:hover .carte-lien svg { transform: translateX(4px); }
.btn svg { transition: transform .18s ease; }
.btn:hover svg { transform: translateX(3px); }
.section-titre h2 { position: relative; }
.anim .section-titre.trait h2::after {
  content: ''; position: absolute; left: 0; bottom: -10px; height: 3px; width: 0;
  background: var(--braise); border-radius: 2px; transition: width .7s cubic-bezier(.22, .68, .28, 1) .15s;
}
.anim .section-titre.trait.vu h2::after { width: 64px; }
.section-titre.centre.trait h2::after { left: 50%; transform: translateX(-50%); }

/* Chiffres : arrivée décalée, sans compteur qui défile (les valeurs sont courtes). */
.anim .chiffre { opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .9, .3, 1.2); }
.anim .chiffres.vu .chiffre { opacity: 1; transform: none; }
.anim .chiffres.vu .chiffre:nth-child(2) { transition-delay: .09s; }
.anim .chiffres.vu .chiffre:nth-child(3) { transition-delay: .18s; }
.anim .chiffres.vu .chiffre:nth-child(4) { transition-delay: .27s; }

/* Capture d'écran : léger basculement au survol, pour donner du relief. */
.cadre { transition: transform .35s cubic-bezier(.22, .68, .28, 1), box-shadow .35s; }
.alterne:hover .cadre { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(10, 24, 38, .13); }

@media (prefers-reduced-motion: reduce) {
  .anim .reveler, .anim .chiffre { opacity: 1 !important; transform: none !important; transition: none !important; }
  .anim .heros-grille > div > *, .anim .heros-photo, .anim .heros-grille .cadre,
  .anim .marque .flamme, .ruban::after { animation: none !important; }
  .anim .section-titre.trait.vu h2::after { transition: none; }
}

/* --- Divers ----------------------------------------------------------------- */
.puce {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px;
  background: var(--braise-fond); color: #b8400f; font-size: .85rem; font-weight: 600;
}
.ruban .puce, .bandeau .puce { background: rgba(255, 255, 255, .14); color: #fff; }
.liste-check { list-style: none; padding: 0; display: grid; gap: 11px; }
.liste-check li { display: flex; gap: 11px; align-items: flex-start; }
.liste-check svg { width: 19px; height: 19px; color: var(--vert); flex: 0 0 auto; margin-top: 4px; }
/* Pictogrammes en ligne : taille calée sur le texte qui les entoure. */
.carte-lien svg, .fil svg, p svg { width: 1.05em; height: 1.05em; vertical-align: -.15em; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.evitement {
  position: absolute; left: -9999px; top: 0; background: var(--encre); color: #fff;
  padding: 10px 18px; z-index: 100; border-radius: 0 0 var(--rayon-sm) 0;
}
.evitement:focus { left: 0; }