/* =====================================================================
   Lave Mon Bac : identité visuelle
   Trois couleurs : marine, pétrole (le logo), menthe (le logo).
   Le reste en tons neutres. Aucun dégradé, aucune ombre décorative.
   ===================================================================== */

@font-face { font-family: "Inter"; src: url("fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Anton"; src: url("fonts/anton.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* Couleurs */
  --marine: #0B2530;
  --petrole: #004751;     /* couleur officielle du logo */
  --petrole-fonce: #003A43;
  --menthe: #35BDB1;      /* couleur officielle du logo */
  --menthe-fonce: #2AA79C;
  --encre: #13232A;
  --gris: #51626A;       /* 6,1 : 1 sur blanc */
  --gris-clair: #A9B7BC;
  --ligne: #DDE4E6;
  --craie: #F4F3EF;
  --brume: #E6ECEC;
  --blanc: #FFFFFF;
  --erreur: #B3261E;

  /* Typographie */
  --police: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --police-titre: "Anton", "Arial Narrow", Impact, sans-serif;
  --t-affiche: clamp(3.25rem, 1.4rem + 8vw, 8.5rem);
  --t-page: clamp(2.75rem, 1.5rem + 5.4vw, 6rem);
  --t-section: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem);
  --t-moyen: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  --t-chapeau: clamp(1.125rem, 1.02rem + .45vw, 1.375rem);
  --t-corps: 1.0625rem;
  --t-petit: .875rem;

  /* Espacement : une seule échelle, base 8 px */
  --e1: .5rem; --e2: 1rem; --e3: 1.5rem; --e4: 2rem; --e5: 3rem; --e6: 4rem; --e7: 6rem;
  --section: clamp(4.5rem, 2.5rem + 7vw, 9rem);
  --gouttiere: clamp(1.25rem, .6rem + 2.8vw, 3rem);
  --largeur: 84rem;
  --largeur-large: 84rem;  /* une seule grille : texte et photos alignés */
  --rayon: 4px;

  --duree: .5s;
  --courbe: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
body {
  margin: 0; background: var(--blanc); color: var(--encre);
  font: 400 var(--t-corps)/1.65 var(--police);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 var(--e2); }
h1, h2, h3 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--menthe); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--menthe); color: var(--marine); }

.visuellement-cache, .piege { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saut { position: absolute; left: var(--e2); top: -4rem; z-index: 100; background: var(--marine); color: var(--blanc); padding: var(--e1) var(--e2); border-radius: var(--rayon); }
.saut:focus { top: var(--e2); }

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

/* ---------- Typographie ---------- */
.titre-affiche, .titre-page, .titre-section {
  font-family: var(--police-titre); font-weight: 400; letter-spacing: .005em;
  color: var(--marine); text-wrap: balance;  /* en minuscules : les accents d'Anton ne se touchent pas */
}
.titre-affiche { font-size: var(--t-affiche); line-height: 1.04; }
.titre-page    { font-size: var(--t-page); line-height: 1.06; }
.titre-section { font-size: var(--t-section); line-height: 1.12; }
.titre-moyen   { font-size: var(--t-moyen); line-height: 1.2; font-weight: 700; letter-spacing: -.015em; color: var(--marine); margin-bottom: var(--e2); text-wrap: balance; }
.surtitre {
  font-size: var(--t-petit); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--petrole); margin-bottom: var(--e3);
  display: flex; align-items: center; gap: .75rem;
}
.surtitre::before { content: ""; width: 1.75rem; height: 2px; background: var(--menthe); }
.chapeau { font-size: var(--t-chapeau); line-height: 1.5; color: var(--gris); max-width: 34em; }
.petit { font-size: var(--t-petit); color: var(--gris); }
.facultatif { font-weight: 400; color: var(--gris); font-size: var(--t-petit); margin-left: .35rem; }

/* ---------- Boutons : une seule famille ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3rem; padding: .8rem 1.6rem;
  background: var(--petrole); color: var(--blanc);
  border: 2px solid var(--petrole); border-radius: var(--rayon);
  font: 600 1rem/1.2 var(--police); letter-spacing: .01em; text-decoration: none;
  cursor: pointer; transition: background-color .2s, border-color .2s, color .2s;
}
.bouton::after { content: "→"; transition: transform .2s var(--courbe); }
.bouton:hover { background: var(--marine); border-color: var(--marine); }
.bouton:hover::after { transform: translateX(3px); }
.bouton--grand { min-height: 3.75rem; padding: 1rem 2rem; font-size: 1.0625rem; }
.bouton--petit { min-height: 2.75rem; padding: .55rem 1.1rem; font-size: .9375rem; }
.bouton--petit::after { display: none; }
.bouton--plein { width: 100%; }
.bouton--contour { background: transparent; color: var(--petrole); }
.bouton--contour:hover { background: var(--petrole); color: var(--blanc); border-color: var(--petrole); }
.bouton--menthe { background: var(--menthe); border-color: var(--menthe); color: var(--marine); }
.bouton--menthe:hover { background: var(--blanc); border-color: var(--blanc); color: var(--marine); }

.lien-tel { display: inline-flex; flex-direction: column; text-decoration: none; font-weight: 700; font-size: 1.25rem; color: var(--marine); line-height: 1.25; }
.lien-tel span { font-size: var(--t-petit); font-weight: 500; color: var(--gris); }
.lien-tel:hover { color: var(--petrole); text-decoration: underline; text-underline-offset: 4px; }
.lien-tel--clair, .lien-tel--clair:hover { color: var(--blanc); }
.lien-tel--clair span { color: var(--gris-clair); }
.lien-fleche { font-weight: 600; color: var(--petrole); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: var(--menthe); }
.lien-fleche::after { content: " →"; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3) var(--e4); }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 50; background: var(--blanc); border-bottom: 1px solid var(--ligne); }
.entete__barre {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  max-width: var(--largeur-large); margin-inline: auto; padding: .75rem var(--gouttiere); min-height: 4.5rem;
}
.logo { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.logo img { height: 2.6rem; width: auto; }  /* le logo officiel, jamais redessiné */
.logo--pied img { height: 2.4rem; }
.pied__slogan { height: .95rem; width: auto; margin-top: var(--e2); }

.nav ul { display: flex; gap: var(--e4); }
.nav a { text-decoration: none; font-weight: 500; font-size: .9375rem; color: var(--encre); padding: .5rem 0; border-bottom: 2px solid transparent; transition: border-color .2s; }
.nav a:hover, .nav a[aria-current="page"] { border-color: var(--menthe); }
.entete__actions { display: flex; align-items: center; gap: var(--e3); }
.entete__tel { font-weight: 700; text-decoration: none; color: var(--marine); white-space: nowrap; }
.entete__tel:hover { color: var(--petrole); }

.menu-bouton { display: none; width: 3rem; height: 3rem; border: 0; background: transparent; cursor: pointer; padding: 0; margin-right: -.5rem; }
.menu-bouton__traits, .menu-bouton__traits::before, .menu-bouton__traits::after {
  display: block; width: 1.5rem; height: 2px; background: var(--marine); margin-inline: auto;
  transition: transform .25s var(--courbe), opacity .2s; content: "";
}
.menu-bouton__traits { position: relative; }
.menu-bouton__traits::before { position: absolute; top: -7px; }
.menu-bouton__traits::after { position: absolute; top: 7px; }
.menu-bouton[aria-expanded="true"] .menu-bouton__traits { background: transparent; }
.menu-bouton[aria-expanded="true"] .menu-bouton__traits::before { transform: translateY(7px) rotate(45deg); }
.menu-bouton[aria-expanded="true"] .menu-bouton__traits::after { transform: translateY(-7px) rotate(-45deg); }

.menu-mobile { border-top: 1px solid var(--ligne); background: var(--blanc); padding: var(--e2) var(--gouttiere) var(--e4); height: calc(100dvh - 4.5rem); overflow-y: auto; }
.menu-mobile li { border-bottom: 1px solid var(--ligne); }
.menu-mobile nav a { display: flex; align-items: center; min-height: 3.75rem; font-size: 1.25rem; font-weight: 600; color: var(--marine); text-decoration: none; }
.menu-mobile__pied { display: grid; gap: var(--e2); margin-top: var(--e4); }

/* ---------- Photos ---------- */
.photo { margin: 0; overflow: hidden; background: var(--brume); border-radius: var(--rayon); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--ouverture { aspect-ratio: 21 / 9; }
.photo--large { aspect-ratio: 16 / 9; }
.photo--service { aspect-ratio: 4 / 3; }
.photo--commerces { aspect-ratio: 4 / 5; }
.photo--attente { display: flex; align-items: flex-end; border: 1px solid var(--ligne); }
.photo--attente figcaption { padding: var(--e3); font-size: var(--t-petit); color: var(--gris); max-width: 28rem; line-height: 1.45; }
.photo--attente figcaption span { display: block; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--petrole); margin-bottom: .25rem; }
.bande-marine .photo--attente { background: var(--petrole-fonce); border-color: rgba(255,255,255,.12); }
.bande-marine .photo--attente figcaption { color: var(--gris-clair); }
.bande-marine .photo--attente figcaption span { color: var(--menthe); }

/* ---------- Sections ---------- */
.section { padding-block: var(--section); }
.section--serre { padding-block: calc(var(--section) * .6) var(--section); }
.section--craie { background: var(--craie); }
.entete-section { max-width: 48rem; margin-bottom: clamp(var(--e5), 5vw, var(--e7)); }
.entete-section--large { max-width: 56rem; }
.entete-section .chapeau { margin-top: var(--e3); }

/* Ouverture */
.ouverture { padding-top: clamp(var(--e5), 7vw, 7.5rem); }
.ouverture__texte { display: grid; gap: var(--e4); margin-bottom: clamp(var(--e5), 6vw, var(--e7)); }
.ouverture__cote .chapeau { margin-bottom: var(--e4); color: var(--encre); }
.chiffres {
  display: grid; grid-template-columns: repeat(4, 1fr); margin: 0;
  border-bottom: 1px solid var(--ligne);
}
.chiffres div { padding: var(--e4) var(--e3) var(--e4) 0; }
.chiffres div + div { padding-left: var(--e3); border-left: 1px solid var(--ligne); }
.chiffres dt { font: 400 clamp(2rem, 1.4rem + 2.2vw, 3.25rem)/1 var(--police-titre); color: var(--marine); }
.chiffres dd { margin: .5rem 0 0; font-size: var(--t-petit); color: var(--gris); }

/* Services */
.service { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(var(--e4), 5vw, var(--e7)); align-items: center; }
.service + .service { margin-top: clamp(var(--e6), 8vw, 8rem); }
.service--inverse { grid-template-columns: 5fr 7fr; }
.service--inverse .photo { order: 2; }
.service--inverse .service__texte { order: 1; }
.service--inverse .photo--service { aspect-ratio: 3 / 2; }
.service__num { font: 400 1rem/1 var(--police-titre); color: var(--petrole); letter-spacing: .08em; margin-bottom: var(--e2); }
.service__titre { font: 700 var(--t-moyen)/1.15 var(--police); letter-spacing: -.02em; color: var(--marine); margin-bottom: var(--e2); }
.service__texte > p { color: var(--gris); }
.avantages { margin: var(--e3) 0; border-top: 1px solid var(--ligne); }
.avantages li { padding: .85rem 0 .85rem 1.75rem; border-bottom: 1px solid var(--ligne); position: relative; }
.avantages li::before { content: ""; position: absolute; left: 0; top: 1.45rem; width: .9rem; height: 2px; background: var(--menthe); }
.prix { margin: var(--e3) 0 var(--e4); color: var(--gris); }
.prix strong { font: 400 2.5rem/1 var(--police-titre); color: var(--marine); margin-right: .35rem; }

/* Bande marine : commerces */
.bande-marine { background: var(--marine); color: var(--blanc); padding-block: var(--section); }
.bande-marine__grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--e4), 6vw, var(--e7)); align-items: center; }
.bande-marine .titre-section { color: var(--blanc); margin-bottom: var(--e3); }
.bande-marine .chapeau { color: var(--gris-clair); margin-bottom: var(--e4); }
.bande-marine .service__num { color: var(--menthe); }

/* Équipement */
.specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e4); margin-top: clamp(var(--e4), 4vw, var(--e6)); }
.specs li { border-top: 2px solid var(--marine); padding-top: var(--e3); }
.specs strong { display: block; font: 400 clamp(2.25rem, 1.6rem + 2vw, 3.5rem)/1 var(--police-titre); color: var(--marine); margin-bottom: var(--e2); }
.specs span { color: var(--gris); display: block; max-width: 22rem; }

/* Étapes */
.etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e4); counter-reset: etape; }
.photo--etape { aspect-ratio: 4 / 3; margin-bottom: var(--e3); }
.etapes li { counter-increment: etape; padding-top: var(--e3); border-top: 1px solid var(--gris-clair); }
.etapes li::before { content: "0" counter(etape); display: block; font: 400 1rem/1 var(--police-titre); color: var(--petrole); letter-spacing: .08em; margin-bottom: var(--e3); }
.etapes h3 { font: 700 1.1875rem/1.3 var(--police); color: var(--marine); margin-bottom: var(--e1); letter-spacing: -.01em; }
.etapes p { color: var(--gris); margin: 0; }

/* Engagements */
.engagements { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(var(--e4), 6vw, var(--e7)); }
.engagements__liste > div { padding-block: var(--e4); border-top: 1px solid var(--ligne); }
.engagements__liste > div:last-child { border-bottom: 1px solid var(--ligne); }
.engagements h3 { font: 700 1.3125rem/1.3 var(--police); color: var(--marine); margin-bottom: var(--e1); letter-spacing: -.01em; }
.engagements p { color: var(--gris); margin: 0; max-width: 36rem; }

/* Appel final */
.appel { background: var(--petrole); color: var(--blanc); padding-block: clamp(var(--e6), 8vw, 8rem); }
.appel__grille { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e4); }
.appel .titre-section { color: var(--blanc); max-width: 14em; }
.appel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3) var(--e4); }
.appel .lien-tel span { color: #B9D3D6; }

/* ---------- Pages intérieures ---------- */
.entete-page { padding-block: clamp(var(--e5), 7vw, 7.5rem) 0; }
.entete-page .chapeau { margin-top: var(--e4); }

.tarif { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(var(--e4), 6vw, var(--e7)); align-items: start; }
.tarif__prix { border-top: 2px solid var(--marine); padding-top: var(--e4); }
.tarif__montant { font: 400 clamp(4rem, 2.5rem + 6vw, 7rem)/.9 var(--police-titre); color: var(--marine); margin-bottom: var(--e1); }
.tarif__unite { font-weight: 600; color: var(--encre); margin-bottom: var(--e3); }
.tarif__prix .bouton { margin-top: var(--e3); }
.inclus { border-top: 1px solid var(--ligne); }
.inclus li { padding: var(--e3) 0; border-bottom: 1px solid var(--ligne); color: var(--gris); }
.inclus strong { color: var(--marine); }

.saison { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 2px solid var(--marine); counter-reset: mois; }
.saison li { counter-increment: mois; padding: var(--e3) var(--e2) 0 0; }
.saison li::before { content: counter(mois); display: block; font: 400 2.25rem/1 var(--police-titre); color: var(--marine); margin-bottom: var(--e1); }
.saison span { font-weight: 600; color: var(--gris); }

.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--e5), 7vw, 8rem); }
.deux-colonnes > div > p:not(.surtitre) { color: var(--gris); max-width: 32rem; }

.faq { max-width: 52rem; border-top: 1px solid var(--ligne); }
.faq__item { border-bottom: 1px solid var(--ligne); }
.faq__item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--e3);
  min-height: 4rem; padding-block: var(--e3); font: 600 clamp(1.0625rem, 1rem + .3vw, 1.25rem)/1.4 var(--police); color: var(--marine);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; flex: none; font: 300 1.75rem/1 var(--police); color: var(--petrole); transition: transform .25s var(--courbe); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { color: var(--gris); max-width: 42rem; padding-bottom: var(--e3); margin: 0; }

.texte-courant { max-width: 44rem; }

/* ---------- Formulaires ---------- */
.formulaire-page { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(var(--e4), 6vw, var(--e7)); align-items: start; }
.formulaire-page__intro .titre-section { margin-bottom: var(--e3); }
.formulaire-page__intro .lien-tel { margin: var(--e2) 0; }
.formulaire { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e3); background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: clamp(var(--e3), 4vw, var(--e5)); }
.section--craie .formulaire { border-color: transparent; }
.formulaire > * { flex: 1 1 100%; }
.groupe { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--e3); flex: 1 1 100%; }
.groupe > * { flex: 1 1 100%; }
.groupe legend { font: 700 1.1875rem/1.3 var(--police); color: var(--marine); margin-bottom: var(--e2); padding: 0; }
.champ { display: flex; flex-direction: column; gap: .4rem; }
.champ--demi { flex: 1 1 calc(50% - var(--e3)); min-width: 14rem; }
.champ label { font-weight: 600; font-size: .9375rem; color: var(--encre); }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 3.25rem; padding: .75rem .9rem;
  font: 400 1rem/1.4 var(--police); color: var(--encre);
  background: var(--blanc); border: 1px solid #B8C4C8; border-radius: var(--rayon);
  transition: border-color .15s;
}
.champ select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23004751' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--petrole); }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--petrole); box-shadow: 0 0 0 3px rgba(53,189,177,.45); }
.champ textarea { resize: vertical; }
.mauvais input, .mauvais select, .mauvais textarea { border-color: var(--erreur); }
.erreur-champ { color: var(--erreur); font-size: var(--t-petit); font-weight: 500; }

.choix { display: grid; gap: var(--e2); }
.choix__carte { display: flex; gap: var(--e2); align-items: flex-start; padding: var(--e3); border: 1px solid #B8C4C8; border-radius: var(--rayon); cursor: pointer; transition: border-color .15s, background-color .15s; }
.choix__carte:hover { border-color: var(--petrole); }
.choix__carte:has(input:checked) { border-color: var(--petrole); background: #EEF6F5; box-shadow: inset 0 0 0 1px var(--petrole); }
.choix__carte input, .case input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--petrole); flex: none; }
.choix__carte span { color: var(--gris); }
.choix__carte strong { display: block; color: var(--marine); font-size: 1.0625rem; }
.case { display: flex; gap: var(--e2); align-items: flex-start; cursor: pointer; color: var(--gris); }

.calendrier { border: 1px solid #B8C4C8; border-radius: var(--rayon); padding: var(--e3); max-width: 26rem; }
.calendrier__tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--e2); }
.calendrier__mois { margin: 0; font-weight: 700; color: var(--marine); }
.calendrier__nav { width: 2.75rem; height: 2.75rem; border: 1px solid var(--ligne); background: var(--blanc); border-radius: var(--rayon); font-size: 1.4rem; line-height: 1; color: var(--petrole); cursor: pointer; }
.calendrier__nav:disabled { opacity: .35; cursor: default; }
.calendrier__jours, .calendrier__grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; text-align: center; }
.calendrier__jours span { font-size: .75rem; font-weight: 600; color: var(--gris); padding-bottom: .35rem; }
.calendrier__grille button { aspect-ratio: 1; min-height: 2.75rem; border: 0; border-radius: var(--rayon); background: transparent; font: 500 .9375rem var(--police); color: var(--encre); cursor: pointer; }
.calendrier__grille button:hover:not(:disabled) { background: var(--brume); }
.calendrier__grille button:disabled { color: #B5C0C4; cursor: default; }
.calendrier__grille button[aria-pressed="true"] { background: var(--petrole); color: var(--blanc); }
.calendrier__choix { margin: var(--e2) 0 0; }

.avis { padding: var(--e2) var(--e3); border-radius: var(--rayon); font-weight: 600; margin: 0; }
.avis--ok { background: #E3F4EF; color: #0B4A3C; border-left: 4px solid var(--menthe-fonce); }
.avis--erreur { background: #FBEAE9; color: var(--erreur); border-left: 4px solid var(--erreur); }

/* ---------- Pied ---------- */
.pied { background: var(--marine); color: var(--gris-clair); padding-top: clamp(var(--e5), 6vw, var(--e7)); }
.pied__grille { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--e5); padding-bottom: var(--e5); }
.pied__marque p { margin-top: var(--e3); max-width: 22rem; }
.pied__titre { font: 600 var(--t-petit)/1 var(--police); letter-spacing: .12em; text-transform: uppercase; color: var(--blanc); margin-bottom: var(--e3); }
.pied li + li { margin-top: .6rem; }
.pied a { text-decoration: none; color: var(--gris-clair); }
.pied a:hover { color: var(--blanc); }
.pied__bas { border-top: 1px solid rgba(255,255,255,.12); padding-block: var(--e3); font-size: var(--t-petit); }
.pied__bas p { margin: 0; }

.barre-mobile { display: none; }

/* ---------- Animations discrètes ---------- */
.anim .apparait:not(.vu) { opacity: 0; transform: translateY(16px); transition: opacity var(--duree) var(--courbe), transform var(--duree) var(--courbe); }
.anim .apparait { transition: opacity var(--duree) var(--courbe), transform var(--duree) var(--courbe); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .anim .apparait:not(.vu) { opacity: 1; transform: none; }
}

/* =====================================================================
   Tablette
   ===================================================================== */
@media (max-width: 1080px) {
  .nav { display: none; }
  .menu-bouton { display: block; }
  .etapes { grid-template-columns: repeat(2, 1fr); row-gap: var(--e5); }
  .engagements { grid-template-columns: 1fr; }
}

@media (min-width: 900px) {
  .ouverture__texte { grid-template-columns: 7fr 5fr; align-items: end; }
}

/* =====================================================================
   Téléphone : une vraie mise en page, pas une réduction
   ===================================================================== */
@media (max-width: 899px) {
  body { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
  .entete__barre { min-height: 4rem; padding-block: .5rem; }
  .entete__tel, .entete__actions .bouton { display: none; }
  .logo img { height: 2.1rem; }
  .menu-mobile { height: calc(100dvh - 4rem); }
  html { scroll-padding-top: 4.75rem; }

  .photo { border-radius: 0; }
  .conteneur--large { padding-inline: 0; }
  .photo--ouverture { aspect-ratio: 4 / 5; }
  .photo--large { aspect-ratio: 4 / 3; }
  .photo--commerces { aspect-ratio: 4 / 3; }

  .chiffres { grid-template-columns: repeat(2, 1fr); }
  .chiffres div { padding: var(--e3) var(--e2) var(--e3) 0; }
  .chiffres div:nth-child(3) { padding-left: 0; border-left: 0; }
  .chiffres div:nth-child(n+3) { border-top: 1px solid var(--ligne); }

  .service, .service--inverse, .bande-marine__grille, .tarif, .deux-colonnes, .formulaire-page { grid-template-columns: 1fr; }
  .service .photo { margin-inline: calc(var(--gouttiere) * -1); }
  .service--inverse .photo { order: 0; }
  .bande-marine__grille .photo { margin-inline: calc(var(--gouttiere) * -1); order: -1; }
  .bande-marine { padding-top: 0; }
  .bande-marine__grille { gap: var(--e5); }

  .specs { grid-template-columns: 1fr; gap: var(--e4); }
  .etapes { grid-template-columns: 1fr; row-gap: var(--e4); }
  .saison { grid-template-columns: repeat(3, 1fr); row-gap: var(--e4); }

  .actions .bouton, .appel__actions .bouton, .tarif__prix .bouton { width: 100%; }
  .appel__grille { flex-direction: column; align-items: stretch; }
  .formulaire { padding: var(--e3) var(--e2); margin-inline: calc(var(--gouttiere) * -1); border-radius: 0; border-inline: 0; }
  .champ--demi { flex-basis: 100%; }
  .champ input, .champ select, .champ textarea { font-size: 1rem; min-height: 3.25rem; } /* 16 px : pas de zoom sur iPhone */
  .calendrier { max-width: none; }

  .pied__grille { grid-template-columns: 1fr; gap: var(--e4); }

  .barre-mobile {
    display: grid; grid-template-columns: 1fr 2fr; gap: .5rem;
    position: fixed; inset: auto 0 0 0; z-index: 60;
    padding: .5rem var(--gouttiere) calc(.5rem + env(safe-area-inset-bottom));
    background: var(--blanc); border-top: 1px solid var(--ligne);
  }
  .barre-mobile a {
    display: flex; align-items: center; justify-content: center; min-height: 3.25rem;
    border-radius: var(--rayon); font-weight: 600; text-decoration: none;
  }
  .barre-mobile__tel { border: 2px solid var(--petrole); color: var(--petrole); }
  .barre-mobile__action { background: var(--petrole); color: var(--blanc); }
  .menu-ouvert .barre-mobile { display: none; }
}

/* =====================================================================
   Direction retenue : corporatif marine (23 sept. 2026)
   Titres en Inter très gras, coins francs, ouverture sur fond marine.
   ===================================================================== */
body { --rayon: 0; --craie: #F1F4F6; }
body .titre-affiche, body .titre-page, body .titre-section {
  font-family: var(--police); font-weight: 800; letter-spacing: -.045em; line-height: 1.02;
}
body .titre-affiche { font-size: clamp(3rem, 1.4rem + 6.4vw, 7rem); }
body .chiffres dt, body .specs strong, body .prix strong,
body .tarif__montant, body .saison li::before, body .service__num,
body .etapes li::before { font-family: var(--police); font-weight: 800; letter-spacing: -.04em; }
body .entete { background: var(--marine); border-color: rgba(255,255,255,.1); }
body .nav a, body .entete__tel { color: var(--blanc); }
body .entete .bouton--petit { background: var(--menthe); border-color: var(--menthe); color: var(--marine); }
body .menu-bouton__traits, body .menu-bouton__traits::before, body .menu-bouton__traits::after { background: var(--blanc); }
body .menu-bouton[aria-expanded="true"] .menu-bouton__traits { background: transparent; }
body .menu-mobile { background: var(--marine); border-color: rgba(255,255,255,.1); }
body .menu-mobile li { border-color: rgba(255,255,255,.12); }
body .menu-mobile nav a { color: var(--blanc); }
body .menu-mobile .bouton--contour { color: var(--blanc); border-color: var(--blanc); }
body .ouverture { background: var(--marine); padding-bottom: clamp(var(--e5), 5vw, var(--e6)); }
body .ouverture .titre-affiche { color: var(--blanc); }
body .ouverture .surtitre { color: var(--menthe); }
body .ouverture .chapeau { color: #C9D6DA; }
body .ouverture .bouton { background: var(--menthe); border-color: var(--menthe); color: var(--marine); }
body .ouverture .lien-tel { color: var(--blanc); }
body .ouverture .lien-tel span { color: var(--gris-clair); }
body .ouverture .photo--attente { background: var(--petrole-fonce); border-color: rgba(255,255,255,.12); }
body .ouverture .photo--attente figcaption { color: var(--gris-clair); }
body .ouverture .photo--attente figcaption span { color: var(--menthe); }
body .chiffres { border-color: rgba(255,255,255,.14); }
body .chiffres div + div, body .chiffres div:nth-child(n+3) { border-color: rgba(255,255,255,.14); }
body .chiffres dt { color: var(--blanc); }
body .chiffres dd { color: var(--gris-clair); }
body .surtitre::before { width: .6rem; height: .6rem; }
body .avantages li::before { width: .5rem; height: .5rem; top: 1.3rem; }
body .appel { background: var(--marine); }

/* Cadrage de la photo d'ouverture : le camion est dans le bas de l'image. */
.photo--ouverture img { object-position: 50% 68%; }