/* Vitrine « Nuancier » : Nuancier Peinture et Décoration. Une seule variable pilote la teinte de toute la page : --accent (menthe par défaut,
   c'est aussi ce que voit un visiteur sans JavaScript). site.js la remplace quand on choisit une pastille, avec --sur-accent : le noir
   ou le blanc qui garde 4,5 de contraste sur la teinte choisie. Aucun texte courant n'est écrit dans la teinte : elle sert aux aplats,
   aux filets et aux pastilles ; tout texte posé sur elle prend --sur-accent. */
@property --accent { syntax: "<color>"; inherits: true; initial-value: #36c9a0; }
:root {
  --accent: #36c9a0;
  --sur-accent: #10131a;
  --creme: #fbfaf7;
  --creme-fonce: #f1eee7;
  --encre: #1d2330;
  --encre-douce: #4a5262;
  --encre-profonde: #10131a;
  --ligne: rgba(29, 35, 48, .14);
  --etiquette: 2rem;
  --entete-h: 4.25rem;
  --rayon: 4px;
  --plafond-photo: min(70svh, 600px);
  --teinte-pale: color-mix(in srgb, var(--accent) 14%, var(--creme));
}
html { transition: --accent .6s ease; }
body {
  background: var(--creme);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: 1.0625rem;
  line-height: 1.6;
}
h1, h2, h3 { font-family: var(--police-titre); line-height: 1.06; letter-spacing: -.025em; margin: 0 0 .5em; font-weight: 800; }
h2 { font-size: clamp(2.1rem, 1.1rem + 3.4vw, 4rem); letter-spacing: -.035em; max-width: 17ch; }
h3 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.7rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
p { margin: 0 0 1em; }
a { color: inherit; }

.etiquette-demo { height: var(--etiquette); line-height: var(--etiquette); padding-block: 0; background: var(--encre-profonde); color: #fff; }

/* ---------- motif : la bande de cinq teintes ---------- */
.teintes { display: inline-flex; flex: none; }
.teintes i { display: block; width: .5rem; height: 1rem; background: var(--accent); }
.teintes i:nth-child(1) { opacity: .2; }
.teintes i:nth-child(2) { opacity: .4; }
.teintes i:nth-child(3) { opacity: .6; }
.teintes i:nth-child(4) { opacity: .8; }
.teintes i:nth-child(5) { opacity: 1; }
.teintes.sur-aplat i { background: var(--sur-accent); }
.repere { display: flex; align-items: center; gap: .75rem; font-size: .8125rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-douce); margin: 0 0 1.1rem; }
.intro { font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); color: var(--encre-douce); max-width: 48ch; }

/* ---------- en-tête flottant ---------- */
.entete { position: fixed; top: var(--etiquette); left: 0; right: 0; z-index: 70; color: var(--encre); background: rgba(251, 250, 247, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: box-shadow .25s; }
html.defile .entete { top: 0; box-shadow: 0 1px 0 var(--ligne); }
.entete-interieur { display: flex; align-items: center; justify-content: space-between; min-height: var(--entete-h); gap: 1rem; }
.marque { display: inline-flex; align-items: center; gap: .65rem; min-height: 2.75rem; text-decoration: none; }
.marque-teintes i { width: .42rem; height: 1.7rem; }
.marque-nom { font-family: var(--police-titre); font-weight: 800; font-size: 1.45rem; letter-spacing: -.03em; line-height: 1; }
.marque-sous { display: none; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-douce); line-height: 1.15; max-width: 7.5rem; }
@media (min-width: 1200px) { .marque-sous { display: block; } }
.menu ul { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.menu a { text-decoration: none; font-weight: 600; }
.menu li a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.menu-telephone { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.1rem; background: var(--accent); color: var(--sur-accent); border-radius: var(--rayon); font-weight: 700; white-space: nowrap; }
.menu-bouton { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: 0 .9rem; background: transparent; color: inherit; border: 2px solid currentColor; border-radius: var(--rayon); font: inherit; font-weight: 700; }
.menu-bouton-barres { width: 1.1rem; height: 2px; background: currentColor; position: relative; }
.menu-bouton-barres::before, .menu-bouton-barres::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; }
.menu-bouton-barres::before { top: -6px; }
.menu-bouton-barres::after { top: 6px; }
@media (min-width: 900px) {
  .menu { display: flex; align-items: center; gap: 1.75rem; }
}
@media (min-width: 900px) and (max-width: 1099px) { .menu ul { gap: 1.1rem; } .menu a { font-size: .9375rem; } }
@media (max-width: 899px) {
  .menu { position: absolute; top: 100%; left: 0; right: 0; padding: 1rem var(--gouttiere) 1.5rem; background: var(--encre-profonde); color: #fff; }
  .menu ul { flex-direction: column; gap: 0; }
  .menu li a { display: block; padding: .85rem 0; }
  .menu-telephone { margin-top: .75rem; justify-content: center; }
}

/* ---------- boutons ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.5rem; background: var(--accent); color: var(--sur-accent); border: 2px solid var(--accent); border-radius: var(--rayon); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; transition: filter .2s; }
.bouton:hover { filter: brightness(.92); }
.bouton-contour { background: transparent; border-color: var(--encre); color: var(--encre); }
.bouton-contour:hover { background: var(--encre); color: #fff; filter: none; }
.bouton-plein { background: var(--encre-profonde); border-color: var(--encre-profonde); color: #fff; }
.bouton-plein:hover { filter: none; background: #000; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 0; }

/* ---------- ouverture : le mur à repeindre ---------- */
.ouverture { position: relative; padding-top: var(--entete-h); background: var(--creme); }
.ouverture-interieur { display: grid; grid-template-columns: minmax(0, 1fr); }
.ouverture-photo { order: -1; position: relative; isolation: isolate; overflow: hidden; height: clamp(230px, 32svh, 400px); background: #cfd2d3; container-type: size; --py: .78; }
/* le cadre est l'image « cover » refaite à la main : la photo et le calque de teinte partagent la même boîte, donc le même découpage du mur
   à toutes les largeurs ; --py règle quelle part du mur et du sol on garde (0 = haut de l'image, 1 = bas) */
.mur-cadre { position: absolute; inset: 0; --w: max(100cqw, calc(100cqh * .74534)); }
@supports (width: 1cqw) {
  .mur-cadre { inset: auto; width: var(--w); aspect-ratio: 2400 / 3220; left: calc((100cqw - var(--w)) / 2); top: calc((100cqh - var(--w) * 1.34167) * var(--py)); }
}
.mur-img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(1.14); }
.mur-calque { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; pointer-events: none; }
.mur-ancien, .mur-nouveau, .mur-rouleau { shape-rendering: crispEdges; }
.ouverture-texte { padding: 1.5rem var(--gouttiere) 2rem; display: flex; flex-direction: column; align-items: flex-start; }
.surtitre { order: 1; font-size: .8125rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-douce); margin: 0 0 .6rem; }
.ouverture h1 { order: 2; font-size: clamp(2.5rem, .8rem + 4.6vw, 5.6rem); line-height: .98; letter-spacing: -.045em; max-width: 12ch; margin: 0 0 .45em; }
.h1-trait { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: .08em; text-underline-offset: .09em; text-decoration-skip-ink: none; }
.nuancier { order: 3; }
.ouverture .actions { order: 4; margin-top: 1.1rem; }
.chapo { order: 5; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); max-width: 46ch; color: var(--encre-douce); margin: 1.1rem 0 0; }
@media (min-width: 600px) and (max-width: 999px) { .ouverture-photo { --py: .7; height: clamp(300px, 36svh, 420px); } }
@media (min-width: 1000px) {
  .ouverture { padding-top: 0; }
  .ouverture-interieur { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); min-height: calc(100svh - var(--etiquette)); }
  .ouverture-photo { order: 0; height: auto; min-height: 100%; --py: .9; }
  .ouverture-texte { padding: calc(var(--entete-h) + 1.1rem) clamp(1.5rem, 3vw, 3rem) 1.8rem max(var(--gouttiere), calc((100vw - var(--largeur-max)) / 2)); justify-content: center; }
  .chapo { order: 3; margin: 0 0 1.25rem; }
  .nuancier { order: 4; }
  .ouverture .actions { order: 5; }
}

/* ---------- le nuancier (signature) ---------- */
.nuancier { width: 100%; max-width: 33rem; background: #fff; border: 1px solid var(--ligne); border-top: 6px solid var(--accent); border-radius: var(--rayon); padding: .85rem 1rem 1rem; box-shadow: 0 26px 44px -30px rgba(29, 35, 48, .45); }
.nuancier-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .8125rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-douce); }
.nuancier-tete p { margin: 0; }
.nuancier-compte { font-variant-numeric: tabular-nums; }
.nuancier-nom { margin: .25rem 0 .1rem; font-family: var(--police-titre); font-weight: 800; font-size: clamp(2.3rem, 1.5rem + 2.2vw, 3.7rem); line-height: 1; letter-spacing: -.04em; color: var(--encre); }
.nuancier-note { margin: 0 0 .85rem; color: var(--encre-douce); font-size: .9375rem; line-height: 1.4; min-height: 2.8em; }
.nuancier-pastilles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; padding-top: .4rem; }
.pastille { position: relative; display: grid; place-items: center; min-width: 44px; height: 3.6rem; padding: 0; border: 0; border-radius: var(--rayon); background: var(--c); color: var(--sur); cursor: pointer; transition: transform .22s ease, box-shadow .22s ease; }
.pastille:hover { transform: translateY(-3px); }
.pastille[aria-checked="true"] { transform: translateY(-7px); box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--encre-profonde); }
.pastille:focus-visible { outline: 3px solid var(--encre-profonde); outline-offset: 5px; }
.pastille-coche { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .2s; }
.pastille[aria-checked="true"] .pastille-coche { opacity: 1; }
.nuancier-aide { margin: .75rem 0 0; font-size: .875rem; line-height: 1.4; color: var(--encre-douce); }
@media (max-width: 599px) {
  .nuancier-note { display: none; }
  .nuancier-nom { margin-bottom: .75rem; }
  .nuancier-aide { display: none; }
  .pastille { height: 3.1rem; }
}
/* sans JavaScript : la commande ne ferait rien, on ne la montre pas (teinte menthe fixe, contenu visible) */
html:not(.js) .nuancier, html:not(.js) [data-vers-nuancier] { display: none; }

/* ---------- prestations ---------- */
.prestations { padding-block: clamp(3.5rem, 8vw, 7rem); }
.prestations-interieur { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: start; }
@media (min-width: 1000px) { .prestations-interieur { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 5vw, 5rem); } }
.photo { margin: 0; }
.revele { overflow: hidden; border-radius: var(--rayon); }
.photo-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-rouleau { margin-top: 2rem; }
.photo-rouleau .photo-img { aspect-ratio: 16 / 9; height: auto; }
.prestations-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ligne); }
.prestation { display: grid; grid-template-columns: clamp(2.4rem, 5vw, 3.6rem) minmax(0, 1fr); gap: clamp(1rem, 2.4vw, 1.75rem); border-bottom: 1px solid var(--ligne); }
.prestation-chip { background: color-mix(in srgb, var(--accent) calc(var(--n) * 20%), var(--creme)); }
.prestation-corps { padding-block: 1.35rem 1.2rem; }
.prestation-num { display: block; font-size: .8125rem; font-weight: 800; letter-spacing: .14em; color: var(--encre-douce); margin-bottom: .3rem; font-variant-numeric: tabular-nums; }
.prestation h3 { margin-bottom: .35rem; }
.prestation p { margin: 0; color: var(--encre-douce); max-width: 52ch; }

/* ---------- savoir-faire : trois nuanciers de hauteurs différentes ---------- */
.savoir { background: var(--teinte-pale); padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.savoir h2 { max-width: 22ch; margin-bottom: 2rem; }
.savoir-cartes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.savoir-carte { margin: 0; display: flex; flex-direction: column; background: var(--creme); border-radius: var(--rayon); overflow: hidden; }
.savoir-photo { flex: 1 1 auto; border-radius: 0; min-height: 0; }
.savoir-photo .photo-img { aspect-ratio: 4 / 3; height: auto; }
.savoir-carte figcaption { display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.15rem 1.15rem; color: var(--encre); }
.savoir-carte figcaption b { font-family: var(--police-titre); font-weight: 800; font-size: clamp(1.4rem, 1.2rem + .8vw, 2rem); letter-spacing: -.03em; line-height: 1.05; }
.savoir-carte figcaption span { font-size: 1rem; line-height: 1.45; }
.savoir-1 figcaption { background: color-mix(in srgb, var(--accent) 24%, var(--creme)); }
.savoir-2 figcaption { background: color-mix(in srgb, var(--accent) 38%, var(--creme)); }
.savoir-3 figcaption { background: color-mix(in srgb, var(--accent) 52%, var(--creme)); }
@media (min-width: 900px) {
  .savoir-cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); align-items: start; }
  .savoir-carte { height: var(--plafond-photo); }
  .savoir-photo .photo-img { aspect-ratio: auto; height: 100%; }
  .savoir-1 figcaption { min-height: 6.5rem; }
  .savoir-2 figcaption { min-height: 9.5rem; }
  .savoir-3 figcaption { min-height: 12.5rem; justify-content: flex-end; }
  .savoir-1 { margin-top: 0; }
  .savoir-2 { margin-top: 0; }
}

/* ---------- conseil couleur ---------- */
.conseil { padding-block: clamp(3.5rem, 8vw, 7rem); overflow-x: clip; }
.conseil-interieur { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.75rem; align-items: center; }
@media (min-width: 900px) { .conseil-interieur { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 6rem); } }
.conseil-points { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .75rem; }
.conseil-points li { display: flex; align-items: center; gap: .9rem; font-weight: 600; }
.point { flex: none; width: 1.1rem; height: 1.1rem; background: var(--accent); border-radius: 2px; }
.conseil-photo { position: relative; margin: 0; z-index: 0; }
.conseil-plaque { position: absolute; inset: 1rem -.8rem -1rem .8rem; background: var(--accent); border-radius: var(--rayon); z-index: -1; opacity: .55; }
.conseil-photo .revele { height: auto; aspect-ratio: 4 / 5; }
.conseil-photo .photo-img { height: 100%; }
@media (min-width: 900px) { .conseil-photo .revele { aspect-ratio: auto; height: var(--plafond-photo); } .conseil-plaque { inset: 1.4rem -1.1rem -1.4rem 1.1rem; } }

/* ---------- méthode : fond encre, bandes de teintes croissantes ---------- */
.methode { background: var(--encre); color: #fff; padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.methode .repere { color: #c9ced9; }
.methode .intro { color: #d4d8e1; }
.methode-tete { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center; }
@media (min-width: 1000px) { .methode-tete { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2.5rem, 5vw, 5rem); } }
.phrase { font-family: var(--police-titre); font-weight: 800; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); line-height: 1.1; letter-spacing: -.03em; margin: 1.75rem 0 0; padding-left: 1.1rem; border-left: 6px solid var(--accent); max-width: 20ch; }
.photo-enduit .photo-img { aspect-ratio: 3 / 2; height: auto; }
.etapes { list-style: none; margin: clamp(2.5rem, 6vw, 4.5rem) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
.etape { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 1.25rem; align-content: start; }
.etape-bande { grid-row: 1 / span 3; background: color-mix(in srgb, var(--accent) calc(var(--n) * 20%), var(--encre)); border-radius: 2px; min-height: 6.5rem; }
.etape-num { grid-column: 2; font-family: var(--police-titre); font-weight: 800; font-size: 2.2rem; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.etape h3 { grid-column: 2; margin: .35rem 0 .3rem; }
.etape p { grid-column: 2; margin: 0; color: #d4d8e1; font-size: 1rem; }
@media (min-width: 1000px) {
  .etapes { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.4rem; }
  .etape { display: block; }
  .etape-bande { display: block; height: 4.6rem; min-height: 0; margin-bottom: 1rem; }
  .etape h3 { margin-top: .6rem; }
}

/* ---------- zone d'intervention ---------- */
.zone { padding-block: clamp(3.5rem, 8vw, 6.5rem); background: var(--creme); }
.zone-interieur { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .zone-interieur { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2.5rem, 5vw, 5rem); } }
.zone-liste { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.zone-liste li { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.1rem; border: 2px solid var(--accent); border-radius: var(--rayon); font-weight: 600; }
.avis { margin: 1.75rem 0 0; color: var(--encre-douce); font-style: italic; }
.zone-carte { position: relative; max-width: 36rem; width: 100%; justify-self: center; }
.carte { display: block; width: 100%; height: auto; }
.carte-cercle { stroke: rgba(29, 35, 48, .16); stroke-width: 1.5; }
.carte-cercle.c4 { fill: color-mix(in srgb, var(--accent) 10%, var(--creme)); }
.carte-cercle.c3 { fill: color-mix(in srgb, var(--accent) 20%, var(--creme)); }
.carte-cercle.c2 { fill: color-mix(in srgb, var(--accent) 32%, var(--creme)); }
.carte-cercle.c1 { fill: color-mix(in srgb, var(--accent) 46%, var(--creme)); }
.carte-route { fill: none; stroke: rgba(29, 35, 48, .3); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 9; }
.carte-lien { stroke: var(--encre); stroke-width: 1.5; opacity: .5; }
.carte-point { fill: var(--encre); stroke: var(--creme); stroke-width: 3; }
.carte-centre { fill: var(--accent); stroke: var(--encre); stroke-width: 3; }
.carte-nom { position: absolute; transform: translate(.9rem, -50%); padding: .2rem .65rem; background: #fff; color: var(--encre); border: 1px solid var(--ligne); border-radius: var(--rayon); font-size: .9375rem; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.carte-nom.fort { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); font-weight: 800; transform: translate(-50%, 1.3rem); }
.carte-nom.n1 { left: 50%; top: 50%; }
.carte-nom.n2 { left: 35.7%; top: 27.1%; }
.carte-nom.n3 { left: 26.8%; top: 75%; }
.carte-nom.n4 { left: 19.6%; top: 50%; }
.carte-nom.n5 { left: 71.4%; top: 31.25%; }
@media (max-width: 480px) { .carte-nom { font-size: .8125rem; padding: .15rem .45rem; } }

/* ---------- contact : grand aplat de la teinte ---------- */
.contact { background: var(--accent); color: var(--sur-accent); padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.contact .repere, .contact .intro { color: var(--sur-accent); }
.contact h2 { max-width: 14ch; }
.contact-interieur { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .contact-interieur { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); } }
.contact-tel { display: inline-block; padding-block: .3rem; font-family: var(--police-titre); font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3rem); font-weight: 800; letter-spacing: -.03em; text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .12em; }
address { font-style: normal; margin-bottom: 1.25rem; font-size: 1.125rem; }
.horaires { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1.25rem; margin: 0; }
.horaires dt { font-weight: 700; }
.horaires dd { margin: 0; }
.contact-formulaire { background: #fff; color: var(--encre); border-radius: var(--rayon); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: 0 30px 50px -32px rgba(16, 19, 26, .6); }
.formulaire { display: grid; gap: 1rem; }
.champ label { display: block; font-weight: 700; margin-bottom: .35rem; }
.champ-requis { color: var(--encre); }
.champ input, .champ textarea { width: 100%; min-height: 3rem; padding: .7rem .9rem; background: #fff; color: var(--encre); border: 2px solid #8a93a3; border-radius: var(--rayon); font: inherit; }
.champ input:focus-visible, .champ textarea:focus-visible { outline: 3px solid var(--encre-profonde); outline-offset: 2px; border-color: var(--encre-profonde); }
.champ textarea { min-height: 8rem; resize: vertical; }
.formulaire-statut { padding: .9rem 1rem; background: var(--teinte-pale); border-left: 6px solid var(--accent); border-radius: var(--rayon); margin: 0; color: var(--encre); }

/* ---------- pied ---------- */
.pied { background: var(--encre-profonde); color: #fff; }
.pied-interieur { padding-block: 3rem 1.25rem; }
.pied-teintes i { width: .7rem; height: 1.3rem; }
.pied-nom { font-family: var(--police-titre); font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; margin: 1rem 0 .5rem; }
.mention-pied { border-top: 1px solid rgba(255, 255, 255, .2); color: #d4d8e1; }

/* ---------- barre d'appel (téléphone) ---------- */
.barre-appel a { background: var(--accent); color: var(--sur-accent); font-weight: 800; font-size: 1.0625rem; }