/* ==========================================================================
   I'SOL ET CHAPE — i-sol-et-chape.bzh
   Feuille de style unique. Aucune dépendance externe, aucune police distante.
   ========================================================================== */

:root {
  /* Couleurs relevées au pixel sur le logo, pas choisies à l'œil :
     lettrage #223962, vague #244372, éclaboussure #EB8A39. */
  --marine: #223962;
  --marine-clair: #2e4e80;
  --marine-sombre: #17273f;
  --orange: #eb8a39;
  /* Variante lisible sur fond blanc : l'orange du logo ne passe pas le
     contraste AA en texte (≈2,3:1). Celle-ci est à 4,6:1. */
  --orange-fonce: #a85a17;

  --gris: #5b6572;
  --gris-clair: #8a93a1;
  --bordure: #e0e5ec;
  --fond: #ffffff;
  --fond-alt: #f4f6f9;

  --max: 1180px;
  --gouttiere: 1.5rem;
  --rayon: 8px;
  --ombre: 0 2px 14px rgba(34, 57, 98, .09);
  --ombre-forte: 0 14px 44px rgba(34, 57, 98, .18);
  --transition: .22s ease;

  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------- Base --------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 17px;
  line-height: 1.65;
  color: var(--marine-sombre);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .6em; font-weight: 700; letter-spacing: -.015em; color: var(--marine); }
h1 { font-size: clamp(2rem, 5vw, 3.05rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.25rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-color: var(--orange); text-underline-offset: 3px; }
a:hover { color: var(--orange-fonce); }

img { max-width: 100%; height: auto; display: block; }

ul { padding-left: 1.15rem; }
li { margin-bottom: .4em; }

.conteneur { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gouttiere); }

/* Lien d'évitement (accessibilité clavier) */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--orange); color: var(--marine-sombre);
  padding: .7rem 1.2rem; font-weight: 700;
}
.skip-link:focus { left: .5rem; top: .5rem; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* ------------------------------------------------------- Boutons -------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .82rem 1.5rem;
  font-weight: 700; font-size: .97rem;
  border: 2px solid transparent; border-radius: var(--rayon);
  cursor: pointer; text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.btn:hover { transform: translateY(-2px); }

.btn-primaire { background: var(--orange); color: #fff; border-color: var(--orange); }
.btn-primaire:hover { background: var(--orange-fonce); border-color: var(--orange-fonce); color: #fff; }

.btn-secondaire { background: transparent; color: var(--marine); border-color: var(--marine); }
.btn-secondaire:hover { background: var(--marine); color: #fff; }

.btn-clair { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .65); }
.btn-clair:hover { background: #fff; color: var(--marine); border-color: #fff; }

/* ----------------------------------------------------- Bandeau ---------- */

.bandeau-haut {
  background: var(--marine);
  color: rgba(255, 255, 255, .88);
  font-size: .84rem;
}
.bandeau-haut .conteneur {
  display: flex; flex-wrap: wrap; gap: .4rem 1.6rem;
  align-items: center; justify-content: flex-end;
  min-height: 40px;
}
.bandeau-haut a { text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.bandeau-haut a:hover { color: var(--orange); }
.bandeau-haut svg { width: 15px; height: 15px; flex: none; }
.bandeau-haut .bandeau-mention { display: inline-flex; align-items: center; gap: .4rem; }

/* ---------------------------------------------------- En-tête ----------- */

/* En-tête CLAIR : contrairement au logo de TP Services (lettrage blanc sur fond
   noir), celui d'I'SOL ET CHAPE est en bleu marine sur fond blanc. Un en-tête
   sombre le rendrait illisible. C'est le piège numéro un de ce projet. */
.entete {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bordure);
  color: var(--marine);
}
.entete .conteneur {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 96px;
}

/* Le logo est presque carré (420 × 323) : contraint en hauteur, il devient très
   étroit et la ligne « CHAPE LIQUIDE & ISOLATION » cesse d'être lisible.
   D'où une hauteur généreuse, et un en-tête plus haut en conséquence. */
.logo { display: flex; align-items: center; text-decoration: none; flex: none; }
.logo img { height: 80px; width: auto; display: block; }
@media (max-width: 1000px) {
  .entete .conteneur { min-height: 84px; }
  .logo img { height: 66px; }
}

.nav-principale ul {
  display: flex; align-items: center; gap: .2rem;
  list-style: none; margin: 0; padding: 0;
}
.nav-principale li { margin: 0; }
.nav-principale a {
  display: block; padding: .55rem .75rem;
  font-size: .93rem; font-weight: 600; text-decoration: none;
  border-radius: var(--rayon);
  transition: background var(--transition), color var(--transition);
}
.nav-principale a:hover { background: var(--fond-alt); color: var(--marine); }
.nav-principale a[aria-current="page"] { color: var(--orange-fonce); }
.nav-principale .btn { margin-left: .5rem; padding: .62rem 1.1rem; color: #fff; }
.nav-principale .btn:hover { color: #fff; background: var(--orange-fonce); }

.burger {
  display: none;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid var(--bordure); border-radius: var(--rayon);
  cursor: pointer;
}
.burger span {
  display: block; width: 20px; height: 2px; margin: 4px auto;
  background: var(--marine);
  transition: transform var(--transition), opacity var(--transition);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1000px) {
  .burger { display: block; }
  .nav-principale {
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--bordure);
    box-shadow: var(--ombre-forte);
    display: none;
  }
  .nav-principale.est-ouverte { display: block; }
  .nav-principale ul { flex-direction: column; align-items: stretch; gap: 0; padding: .6rem var(--gouttiere) 1.1rem; }
  .nav-principale a { padding: .85rem .2rem; border-bottom: 1px solid var(--bordure); border-radius: 0; }
  .nav-principale .btn { margin: .8rem 0 0; justify-content: center; border-bottom: 0; }
}

/* -------------------------------------------------------- Héros --------- */

.heros {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--marine);
  color: #fff;
}
.heros-texte {
  display: flex; align-items: center;
  padding: 3.5rem clamp(1.5rem, 5vw, 4.5rem);
}
.heros-texte > div { max-width: 34rem; margin-left: auto; }
.heros h1 { color: #fff; margin-bottom: .5em; }
.heros h1 em { font-style: normal; color: var(--orange); }
.heros-intro { font-size: 1.14rem; color: rgba(255, 255, 255, .85); }
.heros-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* Les photos de chantier sont en portrait. Laissée libre, la colonne image
   imposerait au héros une hauteur d'écran entière, majoritairement occupée par
   l'aplat marine du bloc texte. On borne donc la hauteur et on recadre. */
.heros-media { background: var(--marine-sombre); display: flex; overflow: hidden; height: 600px; }
.heros-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; align-self: stretch; }

@media (max-width: 760px) {
  .heros { grid-template-columns: 1fr; }
  /* Titre et bouton d'appel d'abord : visibles sans défiler. */
  .heros-texte { order: 1; padding: 2.5rem var(--gouttiere) 2rem; }
  .heros-texte > div { margin-left: 0; max-width: 100%; }
  .heros-media { order: 2; height: auto; aspect-ratio: 4 / 3; }
  .heros-media img { object-position: center 45%; }
}

.surtitre {
  display: inline-block;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1rem;
}
.surtitre-sombre { color: var(--orange-fonce); }

/* Bande d'atouts sous le héros */
.atouts { background: var(--fond-alt); border-bottom: 1px solid var(--bordure); }
.atouts ul {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem 2rem;
  list-style: none; margin: 0; padding: 1.5rem 0;
}
.atouts li { display: flex; align-items: center; gap: .7rem; margin: 0; font-weight: 600; font-size: .95rem; color: var(--marine); }
.atouts svg { width: 24px; height: 24px; flex: none; color: var(--orange-fonce); }

/* ------------------------------------------------------ Sections -------- */

.section { padding: 5rem 0; }
.section-alt { background: var(--fond-alt); }
.section-sombre { background: var(--marine); color: #fff; }
.section-sombre h2, .section-sombre h3 { color: #fff; }

.section-entete { max-width: 62ch; margin-bottom: 3rem; }
.section-entete.centree { margin-left: auto; margin-right: auto; text-align: center; }
.section-entete p { color: var(--gris); font-size: 1.05rem; }
.section-sombre .section-entete p { color: rgba(255, 255, 255, .8); }

/* --------------------------------------------------- Cartes service ----- */

.grille-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1.6rem;
}

.carte-service {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
a.carte-service:hover {
  transform: translateY(-5px);
  box-shadow: var(--ombre-forte);
  border-color: var(--orange);
  color: inherit;
}
.carte-service-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--fond-alt); }
.carte-service-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
a.carte-service:hover .carte-service-media img { transform: scale(1.05); }
.carte-service-corps { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.carte-service-corps h3 { margin-bottom: .5rem; }
.carte-service-corps p { color: var(--gris); font-size: .96rem; }
.carte-service-lien {
  margin-top: auto; padding-top: 1rem;
  font-weight: 700; font-size: .9rem; color: var(--orange-fonce);
  display: inline-flex; align-items: center; gap: .4rem;
}

/* ------------------------------------------------------ Deux colonnes --- */

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
.duo-media img { border-radius: var(--rayon); box-shadow: var(--ombre); }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; gap: 2.2rem; } }

.liste-cochee { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.liste-cochee li { position: relative; padding-left: 1.9rem; margin-bottom: .7rem; }
.liste-cochee li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 12px; height: 7px;
  border-left: 2.5px solid var(--orange-fonce);
  border-bottom: 2.5px solid var(--orange-fonce);
  transform: rotate(-45deg);
}
.section-sombre .liste-cochee li::before { border-color: var(--orange); }

/* -------------------------------------------------- Avant / après ------- */
/* Les photos vont par paires : même pièce avant préparation et après coulage. */

.paires { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 2rem; }
.paire { background: #fff; border: 1px solid var(--bordure); border-radius: var(--rayon); overflow: hidden; }
.section-alt .paire { background: #fff; }
.paire-images { display: grid; grid-template-columns: 1fr 1fr; }
.paire-images figure { margin: 0; position: relative; }
.paire-images img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.paire-images figcaption {
  position: absolute; top: .6rem; left: .6rem;
  padding: .2rem .6rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: rgba(34, 57, 98, .85); border-radius: 4px;
}
.paire-texte { padding: 1.2rem 1.4rem 1.4rem; }
.paire-texte h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.paire-texte p { font-size: .92rem; color: var(--gris); margin: 0; }

/* ------------------------------------------------------- Étapes --------- */

.etapes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2rem;
  counter-reset: etape;
}
.etape { counter-increment: etape; }
.etape::before {
  content: counter(etape, decimal-leading-zero);
  display: block;
  font-size: 2.1rem; font-weight: 800; color: var(--orange);
  line-height: 1; margin-bottom: .7rem;
}
.etape h3 { font-size: 1.08rem; }
.etape p { color: var(--gris); font-size: .95rem; }
.section-sombre .etape p { color: rgba(255, 255, 255, .78); }

/* -------------------------------------------------------- Vidéo --------- */

/* `preload="none"` : la vidéo pèse ~15 Mo, elle ne doit être téléchargée
   que si le visiteur la lance réellement. */
/* ⚠ La vidéo est filmée au téléphone, en PORTRAIT : elle s'affiche en 1080 × 1920
   malgré ce qu'annonce son en-tête (1920 × 1080 + matrice de rotation). D'où un
   bloc étroit, et non pleine largeur. */
.bloc-video {
  max-width: 420px; margin: 0 auto;
  border-radius: var(--rayon); overflow: hidden;
  box-shadow: var(--ombre-forte);
  background: var(--marine-sombre);
}
/* Ratio verrouillé : tant que les métadonnées ne sont pas chargées
   (preload="none"), l'élément prendrait sinon la proportion de son affiche. */
.bloc-video video { width: 100%; aspect-ratio: 9 / 16; height: auto; display: block; object-fit: cover; background: var(--marine-sombre); }
.video-legende { text-align: center; margin-top: 1rem; font-size: .88rem; color: var(--gris); }
.section-sombre .video-legende { color: rgba(255, 255, 255, .75); }

/* ------------------------------------------------------ Galerie --------- */

.filtres-galerie { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
.filtre {
  padding: .5rem 1.1rem;
  font-size: .9rem; font-weight: 600; font-family: inherit;
  background: #fff; color: var(--marine);
  border: 1px solid var(--bordure); border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.filtre:hover { border-color: var(--orange); }
.filtre[aria-pressed="true"] { background: var(--marine); border-color: var(--marine); color: #fff; }

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.galerie-element {
  position: relative;
  aspect-ratio: 1 / 1;
  margin: 0; padding: 0; border: 0; border-radius: var(--rayon);
  overflow: hidden; cursor: zoom-in; background: var(--fond-alt);
}
.galerie-element img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.galerie-element:hover img { transform: scale(1.07); }
.galerie-element figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.8rem .9rem .8rem;
  font-size: .82rem; font-weight: 600; color: #fff; text-align: left;
  background: linear-gradient(transparent, rgba(23, 39, 63, .88));
}
.galerie-element[hidden] { display: none; }

/* Visionneuse plein écran */
.visionneuse {
  position: fixed; inset: 0; z-index: 300;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(23, 39, 63, .96);
  padding: 1.5rem;
}
.visionneuse.est-ouverte { display: flex; }
.visionneuse img { max-width: 100%; max-height: 84vh; border-radius: var(--rayon); object-fit: contain; }
.visionneuse-legende {
  position: absolute; bottom: 1.4rem; left: 0; right: 0;
  text-align: center; color: rgba(255, 255, 255, .85); font-size: .9rem;
  padding: 0 4rem;
}
.visionneuse button {
  position: absolute;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .14); color: #fff;
  border: 0; border-radius: 50%;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: background var(--transition);
}
.visionneuse button:hover { background: rgba(255, 255, 255, .3); }
.visionneuse-fermer { top: 1.2rem; right: 1.2rem; }
.visionneuse-prec { left: 1.2rem; top: 50%; transform: translateY(-50%); }
.visionneuse-suiv { right: 1.2rem; top: 50%; transform: translateY(-50%); }

/* ------------------------------------------------------ Appel action ---- */

.appel-action { background: var(--marine); color: #fff; text-align: center; padding: 4.5rem 0; }
.appel-action h2 { color: #fff; }
.appel-action p { color: rgba(255, 255, 255, .82); max-width: 56ch; margin-inline: auto; }
.appel-action .actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2rem; }

/* -------------------------------------------------------- Contact ------- */

.grille-contact { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3.5rem; align-items: start; }
@media (max-width: 900px) { .grille-contact { grid-template-columns: 1fr; gap: 2.5rem; } }

.coordonnees { list-style: none; padding: 0; margin: 0; }
.coordonnees li { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.coordonnees svg { width: 22px; height: 22px; flex: none; margin-top: .28rem; color: var(--orange-fonce); }
.coordonnees strong { display: block; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); font-weight: 700; }
.coordonnees a { text-decoration: none; font-weight: 600; }
.coordonnees a:hover { text-decoration: underline; }

/* Il n'y a volontairement aucun formulaire : le contact se fait par téléphone
   ou par e-mail (mailto pré-rempli). Le site ne collecte donc aucune donnée. */
.contact-actions { display: flex; flex-direction: column; gap: .8rem; margin: 1.6rem 0 1rem; }
.contact-actions svg { flex: none; }

.contact-qr {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: 1.6rem; padding-top: 1.4rem;
  border-top: 1px solid var(--bordure);
}
.contact-qr img {
  width: 110px; height: 110px; flex: none;
  border: 1px solid var(--bordure); border-radius: var(--rayon); background: #fff;
}
.contact-qr p { margin: 0; min-width: 12ch; flex: 1; font-size: .86rem; color: var(--gris); }

/* Carte de zone d'intervention (Leaflet + tuiles OpenStreetMap). */
.zone-carte {
  position: relative;
  aspect-ratio: 16 / 11;
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre);
  background: var(--fond-alt);
}
#carte-zone { position: absolute; inset: 0; }
/* La carte ne doit pas passer au-dessus de l'en-tête sticky ni du burger. */
.zone-carte .leaflet-pane,
.zone-carte .leaflet-top,
.zone-carte .leaflet-bottom { z-index: 1; }
.zone-note { text-align: center; margin-top: 1rem; font-size: .84rem; color: var(--gris); }

/* ---------------------------------------------------------- Pages ------- */

.entete-page {
  position: relative;
  background: var(--marine);
  color: #fff;
  padding: 4.5rem 0 3.5rem;
  overflow: hidden;
}
.entete-page-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.entete-page::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(34, 57, 98, .92), rgba(34, 57, 98, .6));
}
.entete-page .conteneur { position: relative; z-index: 2; }
.entete-page h1 { color: #fff; margin-bottom: .3em; }
.entete-page p { color: rgba(255, 255, 255, .88); max-width: 60ch; }

.fil-ariane { font-size: .84rem; margin-bottom: 1.2rem; color: rgba(255, 255, 255, .75); }
.fil-ariane ol { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.fil-ariane li { margin: 0; }
.fil-ariane li + li::before { content: "/"; margin-right: .45rem; opacity: .55; }
.fil-ariane a { text-decoration: none; }
.fil-ariane a:hover { color: var(--orange); }

/* Contenu rédactionnel (pages prestations, pages légales) */
.contenu { max-width: 74ch; }
.contenu h2 { margin-top: 2.6rem; }
.contenu h2:first-child { margin-top: 0; }
.contenu h3 { margin-top: 1.9rem; }
.contenu ul { margin-bottom: 1.2rem; }
.contenu table { width: 100%; border-collapse: collapse; margin-bottom: 1.4rem; font-size: .95rem; }
.contenu th, .contenu td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--bordure); vertical-align: top; overflow-wrap: anywhere; }
.contenu th { width: 34%; font-weight: 700; }

.encadre {
  background: var(--fond-alt);
  border-left: 4px solid var(--orange);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  padding: 1.3rem 1.5rem;
  margin: 2rem 0;
}
.encadre h3 { margin-top: 0; font-size: 1.05rem; }
.encadre p:last-child { margin-bottom: 0; }

.grille-prestations { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.4rem; }
.prestation {
  background: #fff;
  border: 1px solid var(--bordure);
  border-top: 3px solid var(--orange);
  border-radius: var(--rayon);
  padding: 1.5rem;
}
.prestation h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.prestation p { font-size: .94rem; color: var(--gris); margin: 0; }

/* Questions fréquentes */
.faq { max-width: 74ch; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--bordure); padding: 1.1rem 0; }
.faq summary {
  font-weight: 700; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  color: var(--marine);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--orange-fonce); flex: none; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin-top: .9rem; color: var(--gris); }

/* ---------------------------------------------------- Pied de page ------ */

.pied {
  background: var(--marine);
  color: rgba(255, 255, 255, .75);
  font-size: .92rem;
  padding-top: 4rem;
}
.pied a { text-decoration: none; }
.pied a:hover { color: var(--orange); }
.pied h3 { color: #fff; font-size: .82rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 1.1rem; }
.pied-grille { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.3fr; gap: 2.5rem; padding-bottom: 3rem; }
@media (max-width: 860px) { .pied-grille { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 480px) { .pied-grille { grid-template-columns: 1fr; } }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: .55rem; }
.pied-marque p { margin-top: 1.1rem; max-width: 34ch; font-size: .9rem; }

/* Le lettrage du logo est bleu marine : sur le pied de page marine il
   disparaîtrait. On le pose donc sur un cartouche blanc, comme sur les
   supports imprimés du client. */
.pied-logo {
  display: inline-block;
  background: #fff;
  padding: .8rem 1rem;
  border-radius: var(--rayon);
}
.pied-logo img { width: 180px; height: auto; }

.pied-bas {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding: 1.4rem 0;
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem;
  justify-content: space-between; align-items: center;
  font-size: .85rem;
}
.pied-bas ul { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }
.pied-bas li { margin: 0; }

/* Bouton d'appel flottant sur mobile */
.appel-flottant {
  display: none;
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 90;
  box-shadow: var(--ombre-forte);
}
@media (max-width: 640px) {
  .appel-flottant { display: flex; }
  .pied { padding-bottom: 4.5rem; }
}

/* ------------------------------------------------- Préférences user ----- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .entete, .bandeau-haut, .pied, .appel-flottant, .heros-actions, .visionneuse { display: none !important; }
  body { font-size: 12pt; color: #000; }
}