/* Toiture Lot : feuille de style commune, direction « l'habit de l'essaim » (01/11/2026).
   Reprend l'allure du modèle couvreur de l'essaim (photo plein écran sous voile ardoise, terre cuite,
   boutons en pilule, cartes à photo, grands arrondis, en-tête flottant) et garde les règles du site :
   texte de 18 px au moins, contraste de 4,5 pour 1, cibles de 44 px, aucune ressource extérieure.
   Raisons et critiques : conception/02-direction-artistique.md, section 11. Ancien style rangé dans
   conception/style-rang-de-tuiles/. */

@font-face { font-family: "Montserrat"; src: url("polices/montserrat-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("polices/source-sans-3-var.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }

/* ---------- Jetons ---------- */
:root {
  /* Couleurs. La terre cuite est la couleur de l'action ; ses aplats pleins sont réservés aux boutons
     d'appel. Les fonds où l'on écrit en blanc prennent la terre cuite foncée (5,9 pour 1). */
  --terre: #B8531F;          /* boutons d'appel, icônes, accents : blanc dessus à 4,8 pour 1 (le #C35A28 de l'essaim plafonnait à 4,4) */
  --terre-vif: #E8744A;      /* début du dégradé des titres sur fond sombre */
  --terre-clair: #FBA05A;    /* fin du dégradé */
  --terre-fonce: #A54820;    /* texte terre cuite sur fond clair (5,2 pour 1), fonds sous texte blanc */
  --terre-pale: #FBEDE4;     /* fonds doux, choix cochés */
  --ardoise: #2C3E50;        /* texte et titres : 9,7 pour 1 sur le crème */
  --ardoise-fonce: #1A2A38;  /* bandes sombres, voiles, pied de page */
  --ardoise-doux: #4A5D70;   /* texte discret : 6,0 pour 1 sur le crème */
  --creme: #F5F0EB;          /* fond de page, chaud */
  --creme-fonce: #EDE4D9;    /* sections alternées */
  --papier: #FAF6F0;         /* fond des champs */
  --blanc: #FFFFFF;
  --filet: #E2D6C6;          /* séparations chaudes */
  --filet-fort: #C8B8A3;
  --urgence: #B3261E;        /* danger : blanc dessus à 6,5 pour 1 */
  --reussite: #0E7A4F;
  --alerte: #B3261E;
  --sur-nuit: #FFFFFF;       /* texte sur les fonds sombres */
  --sur-nuit-douce: #C9D2DB; /* texte discret sur les fonds sombres : 9,5 pour 1 */

  /* Caractères : Montserrat pour ce qui se voit de loin, Source Sans 3 pour ce qui se lit. */
  --f-titre: "Montserrat", "Avenir Next", "Segoe UI", Arial, sans-serif;
  --f-texte: "Source Sans 3", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Tailles : jamais sous 18 px. */
  --base: clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);
  --t-chapeau: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  --t-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --t-h2: clamp(1.875rem, 1.45rem + 1.9vw, 3rem);
  --t-h1: clamp(2.25rem, 1.65rem + 2.6vw, 3.75rem);
  --t-hero: clamp(2.6rem, 1.35rem + 5.2vw, 5.25rem);
  --t-numero: clamp(1.4rem, 0.95rem + 2.6vw, 2.75rem);
  /* anciens noms, gardés pour les pages qui s'en servent */
  --t1: var(--t-h3); --t2: var(--t-h2); --t3: var(--t-h1); --t5: clamp(3rem, 2rem + 4vw, 5rem);

  /* Espacement : 4, 8, 12, 16, 24, 32, 48, 64, 96, 128 px. */
  --e1: .25rem; --e2: .5rem; --e3: .75rem; --e4: 1rem; --e5: 1.5rem;
  --e6: 2rem; --e7: 3rem; --e8: 4rem; --e9: 6rem; --e10: 8rem;

  --mesure: 36em;
  --largeur: 80rem;          /* 1 280 px de contenu au plus */
  --gouttiere: clamp(1rem, 4vw, 2rem);

  /* Formes : de grands arrondis, des ombres douces et larges. */
  --r-s: 12px; --r-m: 16px; --r-l: 24px; --r-xl: 40px; --pilule: 999px;
  --rayon: var(--r-m);
  --ombre-s: 0 1px 2px rgba(44, 62, 80, .06);
  --ombre-m: 0 4px 14px -6px rgba(44, 62, 80, .16), 0 2px 4px rgba(44, 62, 80, .05);
  --ombre-l: 0 16px 36px -14px rgba(44, 62, 80, .24), 0 4px 10px rgba(44, 62, 80, .06);
  --ombre-xl: 0 30px 60px -22px rgba(26, 42, 56, .38);
  --lueur: 0 12px 34px -8px rgba(195, 90, 40, .55);
  --courbe: cubic-bezier(.16, 1, .3, 1);

  --barre-appel: 4.75rem;
  --entete: 5.5rem;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--entete) + 1rem); }
body {
  margin: 0;
  background: var(--creme);
  color: var(--ardoise);
  font-family: var(--f-texte);
  font-size: var(--base);
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--terre); color: #fff; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--f-titre); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin: 0; text-wrap: balance; color: inherit; }
h1 { font-size: var(--t-h1); font-weight: 900; letter-spacing: -0.03em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.01em; }
p, ul, ol, dl, table, figure { margin: 0; }
p + p, p + ul, ul + p, p + ol, ol + p { margin-top: var(--e4); }
strong, b { font-weight: 700; }
a { color: var(--terre-fonce); text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--ardoise); outline-offset: 3px; border-radius: 6px; }
.sur-nuit :focus-visible, .bloc--nuit :focus-visible, .pied :focus-visible, .hero :focus-visible, .urgence :focus-visible { outline-color: #fff; }
abbr { text-decoration: none; }
sup { font-size: max(.8em, 1.125rem); line-height: 0; }
.lien-seul, .tableau td > a:only-child { display: inline-block; padding-block: .6rem; }
.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.evitement {
  position: absolute; left: var(--e4); top: -10rem; z-index: 50;
  background: var(--ardoise); color: #fff; padding: var(--e3) var(--e4); border-radius: var(--r-s);
  font-family: var(--f-titre); font-weight: 700; text-decoration: none;
}
.evitement:focus { top: var(--e4); }

/* Icônes au trait (dessinées dans la page, aucune bibliothèque) */
.icone { width: 1.75rem; height: 1.75rem; flex: none; color: var(--terre); }

/* ---------- Cadre et sections ---------- */
.cadre { width: 100%; max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin-inline: auto; padding-inline: var(--gouttiere); }
.mesure { max-width: var(--mesure); }
main { display: block; padding-top: var(--entete); }
body:has(.hero, .tete-photo) main { padding-top: 0; }
.bloc { padding-block: var(--e8); }
@media (min-width: 64em) { .bloc { padding-block: var(--e9); } }
.bloc--pierre { background: var(--creme-fonce); }
.bloc--nuit { background: var(--ardoise-fonce); color: var(--sur-nuit); }
.bloc--nuit a { color: #fff; }
.bloc--nuit .discret { color: var(--sur-nuit-douce); }
.discret { color: var(--ardoise-doux); }

.tete-de-bloc { display: grid; gap: var(--e4); margin-bottom: var(--e7); max-width: 52rem; }
.tete-de-bloc h2 { color: var(--ardoise); }
.tete-de-bloc p { max-width: var(--mesure); font-size: var(--t-chapeau); line-height: 1.5; color: var(--ardoise-doux); }
.tete-de-bloc--centre { margin-inline: auto; text-align: center; justify-items: center; }

/* Pastille : petit libellé arrondi au-dessus d'un titre */
.pastille {
  display: inline-flex; align-items: center; gap: var(--e2); width: max-content; max-width: 100%;
  padding: .3rem 1rem; border-radius: var(--pilule);
  background: var(--terre-pale); color: var(--terre-fonce);
  font-family: var(--f-titre); font-weight: 800; font-size: 1.125rem; line-height: 1.3; letter-spacing: 0;
}
.pastille--urgence { background: var(--urgence); color: #fff; }
.pastille--verre { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: var(--f-texte); font-weight: 700; }
.pastille .icone { width: 1.25rem; height: 1.25rem; }

/* ---------- En-tête flottant ---------- */
.entete { position: fixed; top: .75rem; left: 0; right: 0; z-index: 30; padding-inline: var(--gouttiere); pointer-events: none; }
.entete .entete__ligne {
  pointer-events: auto; width: 100%; max-width: 72rem; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  min-height: 4.25rem; padding: .5rem .5rem .5rem 1.25rem;
  background: rgba(255, 255, 255, .94); border: 1px solid rgba(255, 255, 255, .7); border-radius: var(--pilule);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease, max-width .3s ease;
}
.marque { display: inline-flex; align-items: center; gap: var(--e3); color: var(--ardoise); text-decoration: none; min-height: 2.75rem; }
.marque__signe { width: 2.5rem; height: 2.5rem; flex: none; }
.marque__signe rect { fill: var(--terre); }
.marque__signe path { stroke: #fff; }
.marque__nom { display: block; font-family: var(--f-titre); font-weight: 900; font-size: 1.375rem; line-height: 1.05; letter-spacing: -0.03em; }
.marque__accent { color: var(--terre); }
.marque__role { display: block; font-family: var(--f-texte); font-weight: 600; font-size: 1.125rem; line-height: 1.2; color: var(--ardoise-doux); }
.entete__nav { display: flex; align-items: center; gap: var(--e5); }
.entete__nav a { font-weight: 700; font-size: 1.125rem; color: var(--ardoise); text-decoration: none; padding-block: var(--e3); }
.entete__nav a:hover { color: var(--terre-fonce); }
.entete__nav .entete__numero {
  display: inline-flex; align-items: center; gap: var(--e2); padding: .65rem 1.25rem; border-radius: var(--pilule);
  background: var(--terre); color: #fff; font-family: var(--f-titre); font-weight: 800; letter-spacing: -0.01em; white-space: nowrap;
  box-shadow: var(--lueur); transition: transform .25s var(--courbe), background .25s ease;
}
.entete__nav .entete__numero:hover { color: #fff; background: var(--terre-fonce); transform: translateY(-2px); }
.entete__numero svg { width: 1.1em; height: 1.1em; }
.entete__nav .entete__lien-secondaire { display: none; }
@media (min-width: 72em) { .entete__nav .entete__lien-secondaire { display: inline; } }
/* Le lien du journal (02/11/2026) : caché sous 60em, où il ferait passer « Qui sommes-nous ? » sur deux lignes ; le pied de page le porte toujours. */
.entete__nav .entete__lien-journal { display: none; }
@media (min-width: 60em) { .entete__nav .entete__lien-journal { display: inline; } }
@media (max-width: 47.99em) {
  .entete { top: .5rem; }
  .entete .entete__ligne { min-height: 3.75rem; padding: .375rem 1rem .375rem .625rem; }
  .marque__signe { width: 2.25rem; height: 2.25rem; }
  .marque__nom { font-size: 1.25rem; }
  .marque__role-suite { display: none; }
  .entete__nav { display: none; }
}
/* Sur une photo de tête (accueil et pages intérieures), tant qu'on n'a pas défilé : en-tête transparent, texte blanc. */
body:has(.hero, .tete-photo) .entete:not(.est-defile) .entete__ligne { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; max-width: 80rem; }
body:has(.hero, .tete-photo) .entete:not(.est-defile) .marque,
body:has(.hero, .tete-photo) .entete:not(.est-defile) .entete__nav a:not(.entete__numero) { color: #fff; }
body:has(.hero, .tete-photo) .entete:not(.est-defile) .marque__role { color: rgba(255, 255, 255, .86); }
body:has(.hero, .tete-photo) .entete:not(.est-defile) .marque__accent { color: var(--terre-clair); }
body:has(.hero, .tete-photo) .entete:not(.est-defile) :focus-visible { outline-color: #fff; }

/* ---------- Le geste d'appeler : un grand bouton terre cuite ---------- */
.appel {
  display: inline-grid; gap: .1rem; justify-items: start; align-content: center;
  padding: .85rem 1.75rem 1rem 1.5rem; border-radius: var(--r-l);
  background: var(--terre); color: #fff; text-decoration: none; box-shadow: var(--lueur);
  transition: transform .3s var(--courbe), box-shadow .3s ease, background .3s ease;
}
.appel:hover { background: var(--terre-fonce); transform: translateY(-3px); box-shadow: 0 18px 40px -10px rgba(195, 90, 40, .6); }
.appel:focus-visible { outline-offset: 5px; }
.appel__libelle { display: inline-flex; align-items: center; gap: var(--e2); font-family: var(--f-texte); font-weight: 700; font-size: 1.125rem; line-height: 1.2; color: #fff; }
.appel__libelle svg { width: 1.2em; height: 1.2em; flex: none; }
.appel__numero { font-family: var(--f-titre); font-weight: 800; font-size: var(--t-numero); line-height: 1.05; letter-spacing: -0.015em; white-space: nowrap; font-variant-numeric: tabular-nums; color: #fff; }
.appel__prix { font-size: var(--base); color: var(--ardoise-doux); }

/* Le rôle d'intermédiaire, dit près du numéro. */
.relation { border-left: 4px solid var(--terre); padding-left: var(--e4); max-width: var(--mesure); color: var(--ardoise); }
.relation strong { color: var(--ardoise); }

/* ---------- Ouverture de l'accueil : photo plein écran sous voile ardoise ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(100vh, 58rem); min-height: min(100svh, 58rem); display: grid; align-items: center;
  padding: calc(var(--entete) + var(--e6)) 0 var(--e9);
  background: var(--ardoise-fonce); color: #fff;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(26, 42, 56, .4) 0%, rgba(26, 42, 56, .15) 65%),
    linear-gradient(180deg, rgba(26, 42, 56, .86) 0%, rgba(26, 42, 56, .58) 28%, rgba(26, 42, 56, .62) 64%, rgba(26, 42, 56, .94) 100%);
}
.hero__grille { position: static; }
.hero__matiere { position: absolute; inset: 0; z-index: -2; margin: 0; }
.hero__matiere img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.hero__texte { max-width: 64rem; margin-inline: auto; display: grid; justify-items: center; gap: var(--e5); text-align: center; }
.hero__texte h1 { font-size: var(--t-hero); font-weight: 900; line-height: 1.04; letter-spacing: -0.035em; color: #fff; text-shadow: 0 4px 40px rgba(0, 0, 0, .35); }
.hero__accent {
  background: linear-gradient(90deg, var(--terre-vif), var(--terre-clair)); color: var(--terre-clair);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero__chapeau { font-size: var(--t-chapeau); line-height: 1.5; font-weight: 500; max-width: 38em; color: rgba(255, 255, 255, .92); text-shadow: 0 2px 16px rgba(0, 0, 0, .35); }
.hero__appel { display: flex; justify-content: center; margin-top: var(--e2); }
.hero .relation {
  max-width: 44em; text-align: left; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--r-l);
  padding: var(--e4) var(--e5); background: rgba(26, 42, 56, .5); color: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 1.125rem;
}
.hero .relation strong { color: #fff; }
.hero__secondaire { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e3); }
.hero__secondaire a {
  display: inline-flex; align-items: center; min-height: 3rem; padding: .55rem 1.25rem; border-radius: var(--pilule);
  color: #fff; text-decoration: none; font-weight: 700; font-size: 1.125rem;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .25s ease, transform .25s var(--courbe);
}
.hero__secondaire a:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }
@media (max-width: 47.99em) {
  .hero { min-height: auto; padding: calc(var(--entete) + var(--e5)) 0 var(--e8); align-items: start; }
  .hero__texte { gap: var(--e4); }
  .hero .relation { padding: var(--e4); }
}
.egout { -webkit-mask: none; mask: none; }

/* Mouvements : l'ouverture monte, la photo se pose doucement. Rien ne bouge en mouvement réduit. */
@media (prefers-reduced-motion: no-preference) {
  .ouverture [data-ouvre] { animation: monte 900ms var(--courbe) both; animation-delay: calc(var(--i, 0) * 110ms + 80ms); }
  .hero__matiere img { animation: approche 20s ease-out both; }
  .revele { opacity: 0; transform: translateY(36px); transition: opacity .8s var(--courbe), transform .8s var(--courbe); }
  .revele.est-visible { opacity: 1; transform: none; }
}
@keyframes monte { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes approche { from { transform: scale(1.12); } to { transform: scale(1); } }

/* ---------- Bandeau de confiance, à cheval sur la photo ---------- */
.confiance { position: relative; z-index: 2; padding-top: var(--e6); }
.confiance__liste {
  list-style: none; margin: 0; padding: var(--e5); display: grid; gap: var(--e4) var(--e6);
  background: var(--blanc); border-radius: var(--r-l); box-shadow: var(--ombre-xl);
}
.confiance__liste li { display: flex; align-items: center; gap: var(--e3); font-weight: 700; line-height: 1.3; color: var(--ardoise); }
.confiance__liste .icone { width: 2.25rem; height: 2.25rem; padding: .4rem; border-radius: var(--r-s); background: var(--terre-pale); color: var(--terre-fonce); }
@media (min-width: 40em) { .confiance__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) {
  .hero { padding-bottom: calc(var(--e9) + var(--e6)); }
  .confiance { margin-top: -4.5rem; padding-top: 0; }
  .confiance__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: var(--e6) var(--e7); }
}

/* ---------- Cartes à photo (les problèmes de toit) ---------- */
.cartes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e5); }
@media (min-width: 40em) { .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .cartes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cartes > li { display: flex; }
.carte {
  flex: 1; display: flex; flex-direction: column; overflow: hidden; color: var(--ardoise); text-decoration: none;
  background: var(--blanc); border: 1px solid rgba(226, 214, 198, .7); border-radius: var(--r-l); box-shadow: var(--ombre-m);
  transition: transform .45s var(--courbe), box-shadow .45s ease;
}
a.carte:hover { transform: translateY(-6px); box-shadow: var(--ombre-l); }
.carte__image { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--creme-fonce); }
@media (max-width: 39.99em) { .carte__image { aspect-ratio: 16 / 9; } }
.carte__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--courbe); }
a.carte:hover .carte__image img { transform: scale(1.08); }
.carte__etiquette {
  position: absolute; top: var(--e3); left: var(--e3); padding: .2rem .85rem; border-radius: var(--pilule);
  background: rgba(255, 255, 255, .92); color: var(--ardoise); font-family: var(--f-titre); font-weight: 800; font-size: 1.125rem; line-height: 1.4;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--ombre-s);
}
.carte__corps { flex: 1; display: flex; flex-direction: column; gap: var(--e2); padding: var(--e5); }
.carte__titre { font-family: var(--f-titre); font-weight: 800; font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.015em; }
a.carte:hover .carte__titre { color: var(--terre-fonce); }
.carte__texte { color: var(--ardoise-doux); flex: 1; }
.carte__suite { display: inline-flex; align-items: center; gap: var(--e2); margin-top: var(--e3); font-weight: 700; color: var(--terre-fonce); }
.carte__suite::after { content: "→"; transition: transform .3s var(--courbe); }
a.carte:hover .carte__suite::after { transform: translateX(4px); }
.carte--appel { background: var(--ardoise-fonce); color: #fff; border-color: transparent; padding: var(--e5); gap: var(--e4); justify-content: center; }
.carte--appel .carte__titre { color: #fff; }
.carte--appel p { color: var(--sur-nuit-douce); margin: 0; }
.carte--appel .appel { width: 100%; padding: .75rem 1rem .85rem; border-radius: var(--r-m); }
.carte--appel .appel__numero { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.625rem); }

/* L'ancienne liste en rangs (page d'erreur) : des lignes en cartes. */
.rangs { list-style: none; padding: 0; display: grid; gap: var(--e3); }
.rang {
  display: grid; gap: var(--e1); padding: var(--e4) var(--e5); color: var(--ardoise); text-decoration: none;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--r-m); box-shadow: var(--ombre-s);
  transition: transform .3s var(--courbe), box-shadow .3s ease;
}
.rang:hover { transform: translateY(-3px); box-shadow: var(--ombre-m); }
.rang__nom { font-family: var(--f-titre); font-weight: 800; font-size: var(--t-h3); line-height: 1.2; }
.rang:hover .rang__nom { color: var(--terre-fonce); }
.rang__dit { color: var(--ardoise-doux); }
.rang__suite { font-weight: 700; color: var(--terre-fonce); }

/* ---------- Bloc urgence : une grande carte ardoise ---------- */
.urgence.bloc--nuit { background: transparent; color: var(--ardoise); }
.urgence .urgence__grille {
  width: calc(100% - 2 * var(--gouttiere)); max-width: var(--largeur);
  display: grid; gap: var(--e7); padding: clamp(1.5rem, 1rem + 3vw, 4rem);
  border-radius: var(--r-xl); color: #fff; box-shadow: var(--ombre-xl);
  background:
    radial-gradient(circle at 92% 8%, rgba(195, 90, 40, .38) 0%, rgba(195, 90, 40, 0) 42%),
    linear-gradient(160deg, #22364A 0%, var(--ardoise-fonce) 70%);
}
.urgence .urgence__grille { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64em) { .urgence .urgence__grille { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; } }
@media (max-width: 47.99em) {
  .urgence .urgence__grille { padding: var(--e5) var(--e4); gap: var(--e6); }
  .urgence .urgence__appel { padding: 0; background: none; border: 0; }
}
.urgence h2, .urgence h3 { color: #fff; }
.urgence .tete-de-bloc { margin-bottom: var(--e6); }
.urgence .tete-de-bloc p { color: var(--sur-nuit-douce); }
.urgence a { color: #fff; }
.urgence__appel {
  display: grid; gap: var(--e5); align-content: start; padding: var(--e6);
  border-radius: var(--r-l); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16);
}
.urgence__titre-appel { font-family: var(--f-titre); font-weight: 800; font-size: var(--t-h3); line-height: 1.25; color: #fff; }
.urgence .relation { border-left-color: var(--terre-clair); color: var(--sur-nuit-douce); }
.secours { font-size: var(--base); color: var(--sur-nuit-douce); max-width: 32em; }
.secours strong { color: #fff; }

/* ---------- Pages intérieures : la tête en photo, sous voile ardoise ---------- */
.tete-photo {
  position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--ardoise-fonce);
  padding: calc(var(--entete) + var(--e2)) 0 var(--e7);
}
.tete-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(26, 42, 56, .88) 0%, rgba(26, 42, 56, .72) 40%, rgba(26, 42, 56, .76) 75%, rgba(26, 42, 56, .94) 100%);
}
.tete-photo__image { position: absolute; inset: 0; z-index: -2; }
.tete-photo__image img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) { .tete-photo__image img { animation: approche 20s ease-out both; } }
.tete-photo .ariane, .tete-photo .ariane a { color: rgba(255, 255, 255, .88); }
.tete-photo .ariane li + li::before { color: rgba(255, 255, 255, .5); }
.tete-photo .page-tete { padding-bottom: 0; }
.tete-photo .page-tete h1 { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .3); }
.tete-photo .reponse { color: rgba(255, 255, 255, .94); }
.tete-photo .reponse strong { color: #fff; }
.tete-photo .reponse a, .tete-photo .page-tete__texte a { color: #fff; }
.tete-photo .maj { color: var(--sur-nuit-douce); }
.tete-photo :focus-visible { outline-color: #fff; }
.tete-photo .encart-appel :focus-visible { outline-color: var(--ardoise); }
.tete-photo + .bloc { padding-top: var(--e8); }

/* ---------- Pages intérieures : tête de page ---------- */
.ariane { padding-top: var(--e5); font-size: var(--base); color: var(--ardoise-doux); }
.ariane ol { list-style: none; padding: 0; margin: 0; }
.ariane li { display: inline; }
.ariane li + li::before { content: "/"; margin: 0 var(--e2); color: var(--filet-fort); }
.ariane a { color: var(--ardoise-doux); display: inline-block; padding-block: .55rem; }
.page-tete { padding-block: var(--e5) var(--e7); display: grid; gap: var(--e5); }
.page-tete h1 { max-width: 20ch; color: var(--ardoise); }
.page-tete__texte { display: grid; gap: var(--e5); align-content: start; }
.page-tete__texte > * { margin: 0; }
.reponse { font-size: var(--t-chapeau); line-height: 1.55; max-width: var(--mesure); color: var(--ardoise); }
.reponse strong { font-weight: 700; }
.page-tete__grille { display: grid; gap: var(--e7); }
@media (min-width: 64em) {
  .page-tete__grille { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: start; }
  .page-tete__appel { position: sticky; top: calc(var(--entete) + var(--e4)); }
}
.encart-appel {
  display: grid; gap: var(--e4); padding: var(--e6); background: var(--blanc); color: var(--ardoise);
  border-radius: var(--r-l); box-shadow: var(--ombre-xl); border: 1px solid rgba(226, 214, 198, .6);
}
.encart-appel a:not(.appel) { color: var(--terre-fonce); }
/* Les plus petits téléphones (320 px) : le numéro reste sur une ligne, sans défilement de côté. */
@media (max-width: 29.99em) {
  .encart-appel { padding: var(--e5) var(--e4); }
  .appel { padding: .8rem 1.1rem .9rem 1rem; }
}
.encart-appel .appel { width: 100%; }
.encart-appel h2 { font-size: var(--t-h3); }
.encart-appel__titre { font-family: var(--f-titre); font-weight: 800; font-size: var(--t-h3); line-height: 1.2; color: var(--ardoise); }
.encart-appel__secours { font-size: var(--base); color: var(--ardoise-doux); }
.encart-appel .relation { font-size: var(--base); }
.maj { font-size: var(--base); color: var(--ardoise-doux); }
.lieux { display: grid; gap: var(--e2); }
.lieux dt { font-family: var(--f-titre); font-weight: 800; font-size: var(--t-h3); margin-top: var(--e4); line-height: 1.2; }
.lieux dd { margin: 0; }
.sous-titre { font-size: var(--t-chapeau); line-height: 1.45; max-width: 32em; color: var(--ardoise-doux); }
.chiffre-cle {
  display: grid; grid-template-columns: auto 1fr; gap: var(--e5); align-items: center; padding: var(--e5) var(--e6);
  background: var(--blanc); border-radius: var(--r-l); box-shadow: var(--ombre-m);
}
.chiffre-cle__nombre { font-family: var(--f-titre); font-weight: 900; font-size: var(--t5); line-height: .9; letter-spacing: -0.04em; color: var(--terre); }
.chiffre-cle__texte { font-size: var(--base); }
.figure-matiere { margin-top: var(--e6); }
.figure-matiere img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-l); box-shadow: var(--ombre-m); }
.figure-matiere figcaption { font-size: var(--base); color: var(--ardoise-doux); padding-top: var(--e3); }

/* La photo d'une page intérieure : une grande carte arrondie. */
.bandeau-matiere {
  position: relative; overflow: hidden; width: calc(100% - 2 * var(--gouttiere)); max-width: var(--largeur); margin-inline: auto;
  height: clamp(11rem, 26vw, 23rem); border-radius: var(--r-xl); background: var(--ardoise-doux); box-shadow: var(--ombre-l);
}
.bandeau-matiere--haut { height: clamp(12rem, 30vw, 26rem); }
.bandeau-matiere img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Texte courant d'une page ---------- */
.texte { max-width: var(--mesure); }
.texte > * + * { margin-top: var(--e4); }
.texte > h2 { margin-top: var(--e8); font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.texte > h3 { margin-top: var(--e6); }
.texte > h2 + *, .texte > h3 + * { margin-top: var(--e4); }
.texte > h2:first-child { margin-top: 0; }
.texte ul, .texte ol { padding-left: 1.3em; }
.texte li + li { margin-top: var(--e2); }
.texte li::marker { color: var(--terre); }
.texte .source { font-size: var(--base); color: var(--ardoise-doux); }
.colonnes-texte { display: grid; gap: var(--e7); }
@media (min-width: 64em) { .colonnes-texte { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.colonne-laterale { display: grid; gap: var(--e5); align-content: start; }
@media (min-width: 64em) { .colonne-laterale { position: sticky; top: calc(var(--entete) + var(--e4)); } }
.sommaire { padding: var(--e5) var(--e6); background: var(--blanc); border-radius: var(--r-l); box-shadow: var(--ombre-m); }
.sommaire h2 { font-size: 1.25rem; margin-bottom: var(--e2); }
.sommaire ol { padding-left: 1.3em; display: grid; gap: 0; }
.sommaire li::marker { color: var(--terre); font-weight: 700; }
.sommaire a { display: inline-block; padding-block: .5rem; color: var(--ardoise); }
.sommaire a:hover { color: var(--terre-fonce); }
.mot { font-family: var(--f-titre); font-weight: 800; letter-spacing: -0.01em; color: var(--ardoise); }

/* Le point important : une carte terre cuite pâle. */
.a-retenir { padding: var(--e5) var(--e6); background: var(--terre-pale); border-radius: var(--r-l); border: 1px solid #F3D2BE; }
.a-retenir h2 { font-size: 1.25rem; margin-bottom: var(--e3); color: var(--terre-fonce); }
.a-retenir p { font-size: var(--base); }

/* Tableau lisible : une carte blanche, entêtes sur crème. */
.tableau { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--base); background: var(--blanc); border-radius: var(--r-m); box-shadow: var(--ombre-s); border: 1px solid var(--filet); overflow: hidden; }
.tableau caption { text-align: left; font-family: var(--f-titre); font-weight: 800; font-size: 1.25rem; padding-bottom: var(--e3); }
.tableau th, .tableau td { text-align: left; vertical-align: top; padding: var(--e3) var(--e4); border-bottom: 1px solid var(--filet); }
.tableau tr:last-child > * { border-bottom: 0; }
.tableau thead th { font-family: var(--f-titre); font-weight: 800; background: var(--creme-fonce); color: var(--ardoise); }
.tableau tbody th { font-weight: 700; }
@media (max-width: 47.99em) {
  .tableau--pile { background: transparent; box-shadow: none; border: 0; border-radius: 0; overflow: visible; }
  .tableau--pile thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tableau--pile tr { display: grid; gap: var(--e1); padding: var(--e4); margin-bottom: var(--e3); background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--r-m); }
  .tableau--pile th, .tableau--pile td { border: 0; padding: 0; }
  .tableau--pile td::before { content: attr(data-titre) " : "; font-family: var(--f-titre); font-weight: 800; }
}

/* ---------- Les étapes (que faire, dans l'ordre) ---------- */
.etapes { list-style: none; padding: 0; counter-reset: etape; display: grid; gap: 0; max-width: 42em; }
.etapes > li { counter-increment: etape; position: relative; padding: 0 0 var(--e6) calc(3rem + var(--e5)); }
.etapes > li::before {
  content: counter(etape); position: absolute; left: 0; top: -.2em;
  width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--f-titre); font-weight: 900; font-size: 1.375rem; color: #fff; background: var(--terre); box-shadow: var(--lueur);
}
.etapes > li::after { content: ""; position: absolute; left: calc(1.5rem - 1px); top: 3.1rem; bottom: .3rem; width: 2px; background: var(--filet-fort); }
.urgence .etapes > li::after, .bloc--nuit .etapes > li::after { background: rgba(255, 255, 255, .22); }
.etapes > li:last-child { padding-bottom: 0; }
.etapes > li:last-child::after { display: none; }
.etapes h3 { font-size: var(--t-h3); margin-bottom: var(--e2); }
.urgence .etapes p { color: var(--sur-nuit-douce); }

/* ---------- Le danger (page de l'urgence) : une carte rouge ---------- */
.danger { background: var(--urgence); color: #fff; border-radius: var(--r-l); padding: var(--e5) var(--e6); display: grid; gap: var(--e3); max-width: var(--mesure); box-shadow: 0 16px 36px -14px rgba(179, 38, 30, .55); }
.page-tete__texte > .danger { margin: 0; }
.danger p + p { margin-top: 0; }
.danger__titre { font-family: var(--f-titre); font-weight: 800; font-size: var(--t-h3); line-height: 1.2; }
.danger__numeros { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e6); }
.danger__numeros a { display: inline-flex; align-items: baseline; gap: var(--e3); min-height: 2.75rem; color: #fff; text-decoration: none; }
.danger__num { font-family: var(--f-titre); font-weight: 900; font-size: var(--t-h2); line-height: 1.1; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .12em; }
.danger__numeros a:hover .danger__num { text-decoration-thickness: 5px; }
.danger__texte { color: #fff; }
.danger :focus-visible { outline-color: #fff; }
.source-ligne { margin-top: var(--e6); font-size: var(--base); color: var(--ardoise-doux); max-width: 52em; }

/* ---------- Les matières du Lot : trois cartes ---------- */
.matieres { display: grid; gap: var(--e5); }
@media (min-width: 48em) { .matieres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.matiere { display: flex; flex-direction: column; gap: var(--e3); overflow: hidden; background: var(--blanc); border-radius: var(--r-l); box-shadow: var(--ombre-m); padding-bottom: var(--e5); }
.matiere > :not(.matiere__image) { padding-inline: var(--e5); }
.matiere__image { aspect-ratio: 3 / 2; overflow: hidden; background: var(--creme-fonce); margin-bottom: var(--e2); }
.matiere__image img { width: 100%; height: 100%; object-fit: cover; }
.matiere h3 { font-size: var(--t-h3); }
.matiere p { color: var(--ardoise-doux); }

/* ---------- La zone : six cartes, une par pays ---------- */
.zone__grille { display: grid; gap: var(--e4); }
@media (min-width: 40em) { .zone__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .zone__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e5); } }
.zone__pays { padding: var(--e5); background: var(--blanc); border-radius: var(--r-l); border: 1px solid rgba(226, 214, 198, .7); box-shadow: var(--ombre-s); }
.zone__pays h3 { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-h3); margin-bottom: var(--e2); }
.zone__pays h3::before {
  content: ""; width: 1.5rem; height: 1.5rem; flex: none; background: var(--terre);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7.5 7.5 0 0 0-7.5 7.5c0 5.4 6.6 11.7 6.9 12a.9.9 0 0 0 1.2 0c.3-.3 6.9-6.6 6.9-12A7.5 7.5 0 0 0 12 2Zm0 10.2a2.7 2.7 0 1 1 0-5.4 2.7 2.7 0 0 1 0 5.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7.5 7.5 0 0 0-7.5 7.5c0 5.4 6.6 11.7 6.9 12a.9.9 0 0 0 1.2 0c.3-.3 6.9-6.6 6.9-12A7.5 7.5 0 0 0 12 2Zm0 10.2a2.7 2.7 0 1 1 0-5.4 2.7 2.7 0 0 1 0 5.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.zone__pays p { color: var(--ardoise-doux); }

/* ---------- Ce qui se passe quand vous appelez : trois cartes numérotées ---------- */
.trois-temps { list-style: none; padding: 0; display: grid; gap: var(--e5); counter-reset: temps; }
@media (min-width: 64em) { .trois-temps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.trois-temps li {
  counter-increment: temps; display: grid; gap: var(--e3); align-content: start; padding: var(--e6);
  background: var(--blanc); border-radius: var(--r-l); box-shadow: var(--ombre-m);
}
.trois-temps li::before {
  content: counter(temps); width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border-radius: var(--r-m);
  font-family: var(--f-titre); font-weight: 900; font-size: 1.5rem; color: #fff; background: var(--ardoise);
}
.trois-temps h3 { font-size: var(--t-h3); }
.trois-temps p { color: var(--ardoise-doux); }

/* ---------- Ce que nous ne faisons pas ---------- */
.refus { list-style: none; padding: 0; display: grid; gap: var(--e3); max-width: 44em; }
.refus li { position: relative; padding: var(--e3) var(--e4) var(--e3) calc(1.4em + var(--e5)); background: var(--blanc); border-radius: var(--r-m); border: 1px solid var(--filet); }
.refus li::before {
  content: ""; position: absolute; left: var(--e4); top: 1.05em; width: 1.1em; height: 1.1em; color: var(--urgence);
  background: linear-gradient(45deg, transparent 42%, currentColor 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, currentColor 42% 58%, transparent 58%);
}

/* ---------- Questions fréquentes : réponses visibles, en cartes ---------- */
.questions { display: grid; gap: var(--e3); max-width: 52em; }
.question { padding: var(--e5) var(--e6); background: var(--blanc); border-radius: var(--r-m); border: 1px solid rgba(226, 214, 198, .8); box-shadow: var(--ombre-s); }
.question h3 { font-size: clamp(1.1875rem, 1.1rem + .35vw, 1.375rem); margin-bottom: var(--e2); }
.question p { color: var(--ardoise-doux); }

/* ---------- Sources ---------- */
.sources { font-size: var(--base); max-width: 52em; }
.sources h2 { margin-bottom: var(--e5); }
.sources ol { padding-left: 1.3em; display: grid; gap: var(--e3); }
.sources li::marker { color: var(--terre); font-weight: 700; }
.sources .date { color: var(--ardoise-doux); }

/* ---------- Formulaire : une carte blanche sur la terre cuite foncée ---------- */
section:has(> .demande__grille) { background: var(--terre-fonce); color: #fff; }
section:has(> .demande__grille) .mesure h2 { color: #fff; }
section:has(> .demande__grille) .mesure p { color: rgba(255, 255, 255, .94); }
section:has(> .demande__grille) .mesure a { color: #fff; font-weight: 700; }
section:has(> .demande__grille) :focus-visible { outline-color: #fff; }
.demande__grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e7); align-items: start; }
@media (min-width: 64em) { .demande__grille { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); } }
.formulaire {
  display: grid; gap: var(--e5); max-width: 42em; padding: clamp(1.25rem, 1rem + 2vw, 2.5rem);
  background: var(--blanc); color: var(--ardoise); border-radius: var(--r-xl); box-shadow: var(--ombre-xl);
}
.formulaire :focus-visible { outline-color: var(--ardoise); }
.champ { display: grid; gap: var(--e2); }
.champ label, .champ legend, .consentement__texte { font-weight: 700; color: var(--ardoise); }
.champ .aide { font-size: var(--base); color: var(--ardoise-doux); font-weight: 400; }
.champ input[type="text"], .champ input[type="tel"] {
  font: inherit; color: var(--ardoise); background: var(--papier);
  border: 2px solid var(--filet); border-radius: var(--r-s);
  min-height: 3.5rem; padding: var(--e3) var(--e4); width: 100%;
  transition: border-color .2s ease, background .2s ease;
}
.champ input[type="text"]:focus, .champ input[type="tel"]:focus { border-color: var(--terre); background: var(--blanc); outline: none; box-shadow: 0 0 0 4px rgba(195, 90, 40, .18); }
fieldset.champ { border: 0; padding: 0; margin: 0; min-width: 0; }
.choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); margin-top: var(--e2); }
.choix label {
  position: relative; display: flex; align-items: center; min-height: 3.5rem;
  padding: var(--e3) var(--e3) var(--e3) 2.9rem; border: 2px solid var(--filet); border-radius: var(--r-s);
  background: var(--papier); font-weight: 600; line-height: 1.2; cursor: pointer; transition: border-color .2s ease, background .2s ease;
}
.choix input { position: absolute; left: var(--e4); top: 50%; translate: 0 -50%; width: 1.35rem; height: 1.35rem; margin: 0; accent-color: var(--terre); }
.choix label:has(input:checked) { border-color: var(--terre); background: var(--terre-pale); font-weight: 700; }
.choix label:has(input:focus-visible) { outline: 3px solid var(--ardoise); outline-offset: 2px; }
.consentement { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e4); align-items: start; padding: var(--e4); background: var(--papier); border: 2px solid var(--filet); border-radius: var(--r-m); }
.consentement input { width: 1.75rem; height: 1.75rem; margin: .2em 0 0; accent-color: var(--terre); }
.consentement__texte { font-weight: 400; font-size: var(--base); overflow-wrap: anywhere; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e3); width: 100%;
  min-height: 3.75rem; padding: var(--e3) var(--e6); border: 0; border-radius: var(--r-m);
  background: var(--ardoise); color: #fff; font-family: var(--f-titre); font-weight: 800; font-size: 1.25rem;
  cursor: pointer; text-decoration: none; transition: background .25s ease, transform .25s var(--courbe);
}
.bouton:hover { background: var(--ardoise-fonce); transform: translateY(-2px); }
.bouton[disabled] { opacity: .6; cursor: progress; }
.etat-envoi { font-weight: 700; min-height: 1.55em; }
.etat-envoi[data-etat="reussi"] { color: var(--reussite); }
.etat-envoi[data-etat="echec"] { color: var(--alerte); }
.piege { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Page d'erreur ---------- */
.page-erreur { display: grid; gap: var(--e7); padding-block: var(--e7) var(--e8); }
.page-erreur__code { font-family: var(--f-titre); font-weight: 900; font-size: var(--t5); line-height: .9; color: var(--terre); }
.page-erreur__appel { display: grid; gap: var(--e5); align-content: start; }
.page-erreur__pages h2 { margin-bottom: var(--e5); }
@media (min-width: 64em) { .page-erreur { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .page-erreur__pages { grid-column: 1 / -1; } }

/* ---------- Pied de page ---------- */
.pied { background: var(--ardoise-fonce); color: #fff; padding-block: var(--e8) var(--e7); }
.pied a { color: #fff; }
.pied__grille { display: grid; gap: var(--e7); }
@media (min-width: 64em) { .pied__grille { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr); } }
.pied h2 { font-size: var(--t-h3); margin-bottom: var(--e4); color: #fff; }
.pied p { color: var(--sur-nuit-douce); }
.pied p strong { color: #fff; }
.pied ul { list-style: none; padding: 0; display: grid; gap: var(--e1); }
.pied ul a { display: inline-flex; align-items: center; gap: var(--e3); padding-block: .5rem; color: var(--sur-nuit-douce); text-decoration: none; }
.pied ul a::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--terre); flex: none; }
.pied ul a:hover { color: #fff; text-decoration: underline; }
.pied__editeur { max-width: 34em; }
.pied__bas { margin-top: var(--e8); padding-top: var(--e5); border-top: 1px solid rgba(255, 255, 255, .14); display: flex; flex-wrap: wrap; gap: var(--e3) var(--e6); justify-content: space-between; color: var(--sur-nuit-douce); font-size: var(--base); }
.pied__bas a { color: var(--sur-nuit-douce); display: inline-block; padding-block: .6rem; }
.pied .appel { min-height: 2.75rem; padding: .7rem 1.5rem; border-radius: var(--pilule); }
.pied .appel__numero { font-size: 1.5rem; }

/* ---------- Barre d'appel du téléphone ---------- */
.barre-appel { display: none; }
@media (max-width: 63.99em) {
  body { padding-bottom: calc(var(--barre-appel) + env(safe-area-inset-bottom, 0px)); }
  .barre-appel {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    min-height: calc(var(--barre-appel) + env(safe-area-inset-bottom, 0px));
    padding: var(--e3) var(--e4) calc(var(--e3) + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .94); border-top: 1px solid var(--filet); gap: var(--e3); align-items: center;
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 -8px 30px rgba(26, 42, 56, .12);
  }
  .barre-appel__bouton {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--e3);
    min-height: 3.25rem; border-radius: var(--r-m); background: var(--terre); color: #fff; box-shadow: var(--lueur);
    font-family: var(--f-titre); font-weight: 800; font-size: 1.375rem; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums;
  }
  .barre-appel__bouton svg { width: 1.1em; height: 1.1em; flex: none; }
  .barre-appel__role { color: var(--ardoise-doux); font-weight: 600; font-size: 1.125rem; line-height: 1.15; max-width: 6.5em; }
  .barre-appel__bouton:focus-visible { outline-color: var(--ardoise); }
  .barre-appel.est-masquee { transform: translateY(110%); }
}
@media (max-width: 63.99em) and (prefers-reduced-motion: no-preference) {
  .barre-appel { transition: transform 260ms var(--courbe); }
}
@media (max-width: 23.99em) { .barre-appel__role { display: none; } }

/* ---------- Mention des images et signature ---------- */
.legende { font-size: var(--base); color: var(--ardoise-doux); }
.signature { font-size: var(--base); }

@media print {
  .barre-appel, .entete, .formulaire { display: none !important; }
  main { padding-top: 0; }
  body { padding: 0; background: #fff; }
}

/* ---------- Toit annoté (composant toit-annote), aux couleurs terre cuite et ardoise ---------- */
#mots-du-toit .toit {
  padding: clamp(1.25rem, 1rem + 2vw, 3rem); background: var(--blanc); border-radius: var(--r-xl); box-shadow: var(--ombre-l);
}
.toit { display: grid; gap: var(--e6); margin: 0; }
@media (min-width: 64em) { .toit { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; gap: var(--e7); } }
.toit__svg { width: 100%; height: auto; overflow: visible; }
@media (min-width: 64em) { .toit__svg { position: sticky; top: calc(var(--entete) + var(--e5)); } }

.toit-face { stroke: var(--ardoise); stroke-width: 1.6; stroke-linejoin: round; }
.toit-face--pan { fill: #E9C9B0; }
.toit-face--pan-ombre { fill: #D9AE8E; }
.toit-face--mur { fill: #FBF7F2; }
.toit-face--mur-ombre { fill: #EDE4D9; }
.toit-face--chapeau { fill: #D9AE8E; }
.toit-tuiles { fill: none; stroke: #8A4A2A; stroke-width: 1; stroke-linecap: round; opacity: .55; }
.toit-tuiles--couvert { stroke-width: 2.4; opacity: .5; }
.toit-tuiles--loin { opacity: .28; }
.toit-rangs { fill: none; stroke: #8A4A2A; stroke-width: .9; opacity: .35; }
.toit-baie { fill: #C9D2DB; stroke: var(--ardoise); stroke-width: 1.2; stroke-linejoin: round; }
.toit-trait { fill: none; stroke: var(--ardoise); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.toit-trait--fort { stroke-width: 3; }
.toit-trait--gouttiere { stroke: #5B7083; stroke-width: 6; }
.toit-trait--descente { stroke: #5B7083; stroke-width: 5; }
.toit-zone { fill: transparent; }
.toit-repere__filet { stroke: var(--ardoise); stroke-width: 1.5; }
.toit-repere__ancre { fill: var(--ardoise); }
.toit-repere__pastille { fill: var(--ardoise); }
.toit-repere__chiffre { fill: #fff; font-family: var(--f-titre); font-weight: 800; font-size: 25px; }

.toit__legende { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e2); }
.toit__legende li { display: grid; grid-template-columns: 2.75rem 1fr; gap: var(--e4); padding: var(--e3) var(--e4); border-radius: var(--r-m); cursor: pointer; transition: background .2s ease; }
.toit__num { width: 2.75rem; height: 2.75rem; border-radius: var(--r-s); background: var(--ardoise); color: #fff;
  display: grid; place-items: center; font-family: var(--f-titre); font-weight: 900; font-size: 1.25rem; line-height: 1; transition: background .2s ease; }
.toit__legende h3 { font-size: var(--t-h3); margin: .1em 0 var(--e1); }
.toit__legende p { margin: 0; color: var(--ardoise-doux); }

/* Surligner : la partie prend un trait terre cuite épais, sa pastille aussi, le reste pâlit. */
.toit-partie path, .toit-repere circle, .toit-svg-fond { transition: stroke-width .18s ease, fill .18s ease, opacity .18s ease; }
.toit[data-montre] .toit__svg > path { opacity: .55; }
.toit:is([data-montre="faitage"], :has(li[data-partie="faitage"]:hover)) #toit-faitage path,
.toit:is([data-montre="noue"], :has(li[data-partie="noue"]:hover)) #toit-noue path,
.toit:is([data-montre="solin"], :has(li[data-partie="solin"]:hover)) #toit-solin path,
.toit:is([data-montre="rive"], :has(li[data-partie="rive"]:hover)) #toit-rive path,
.toit:is([data-montre="gouttiere"], :has(li[data-partie="gouttiere"]:hover)) #toit-gouttiere path,
.toit:is([data-montre="descente"], :has(li[data-partie="descente"]:hover)) #toit-descente path { stroke: var(--terre); stroke-width: 10; }
.toit:is([data-montre="tuiles"], :has(li[data-partie="tuiles"]:hover)) #toit-tuiles path { fill: rgba(195, 90, 40, .35); stroke: var(--terre); stroke-width: 3; }
.toit:is([data-montre="faitage"], :has(li[data-partie="faitage"]:hover)) [data-repere="faitage"] .toit-repere__pastille,
.toit:is([data-montre="tuiles"], :has(li[data-partie="tuiles"]:hover)) [data-repere="tuiles"] .toit-repere__pastille,
.toit:is([data-montre="noue"], :has(li[data-partie="noue"]:hover)) [data-repere="noue"] .toit-repere__pastille,
.toit:is([data-montre="solin"], :has(li[data-partie="solin"]:hover)) [data-repere="solin"] .toit-repere__pastille,
.toit:is([data-montre="rive"], :has(li[data-partie="rive"]:hover)) [data-repere="rive"] .toit-repere__pastille,
.toit:is([data-montre="gouttiere"], :has(li[data-partie="gouttiere"]:hover)) [data-repere="gouttiere"] .toit-repere__pastille,
.toit:is([data-montre="descente"], :has(li[data-partie="descente"]:hover)) [data-repere="descente"] .toit-repere__pastille { fill: var(--terre); }
.toit__legende li:hover, .toit__legende li[aria-current="true"] { background: var(--terre-pale); }
.toit__legende li:hover .toit__num, .toit__legende li[aria-current="true"] .toit__num { background: var(--terre); }
@media (prefers-reduced-motion: reduce) { .toit-partie path, .toit-repere circle { transition: none; } }