/* Charte de La Boucle Solaire : voir le skill charte-la-boucle-solaire. */
@font-face {
  font-family: "Inter";
  src: url("/assets/polices/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Marque */
  --pin: #0b5d4b;
  --pin-fonce: #084639;
  --encre: #0f2a24;
  --soleil: #efa906;
  --menthe-clair: #ddf3e8;
  --brume: #f2f7f4;
  --blanc: #ffffff;
  /* Rôles */
  --texte-doux: #3e5a52;
  --filet: #d6e6dd;
  --erreur: #a4262c; /* Proposé, absent de la charte (A7) */
  /* Propre à la maquette, disparaît avec les contenus manquants */
  --fond-a-fournir: #fdf1cf;

  --police: "Inter", "Segoe UI", Arial, sans-serif;

  --espace-1: 4px;
  --espace-2: 8px;
  --espace-4: 16px;
  --espace-6: 24px;
  --espace-10: 40px;
  --espace-16: 64px;
  --gouttiere: clamp(var(--espace-4), 4vw, var(--espace-10));

  --rayon-s: 8px;
  --rayon-m: 16px;
  --rayon-l: 24px;
  --rayon-plein: 999px;

  --legende: 500 13px/1.4 var(--police);
  --corps-fort: 600 16px/1.55 var(--police);

  /* Motion : à proposer à Mileidy, la charte n'en dit rien */
  --duree-rapide: 120ms;
  --duree: 200ms;
  --duree-lente: 320ms;
  --courbe: cubic-bezier(0.2, 0, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: var(--espace-4); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font: 400 16px/1.55 var(--police);
}

h1, h2, h3 { font-family: var(--police); font-weight: 700; letter-spacing: -0.01em; color: var(--pin); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(28px, 22px + 1.9vw, 40px); line-height: 1.1; }
h2 { font-size: clamp(24px, 22px + 0.6vw, 28px); line-height: 1.15; }
h3 { font-size: 20px; line-height: 1.2; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--pin); text-underline-offset: 2px; transition: color var(--duree-rapide) var(--courbe); }
a:hover { color: var(--pin-fonce); }
main:focus { outline: none; }

:focus-visible { outline: 3px solid var(--encre); outline-offset: 2px; border-radius: 2px; }
.pied :focus-visible, .bloc-vert :focus-visible { outline-color: var(--blanc); }

.conteneur { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gouttiere); }
.chapo { font: 500 19px/1.5 var(--police); }

/* Maquette */
.bandeau-maquette { background: var(--encre); color: var(--blanc); font: var(--legende); padding: 6px var(--gouttiere); text-align: center; }
.lien-evitement { position: absolute; left: var(--espace-2); top: -60px; z-index: 30; background: var(--blanc); padding: var(--espace-2) 12px; }
.lien-evitement:focus { top: var(--espace-2); }
.a-fournir { background: var(--fond-a-fournir); color: var(--encre); border: 1px dashed var(--texte-doux); border-radius: 4px; padding: 0 var(--espace-1); font-weight: 500; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.a-confirmer { display: inline-block; background: var(--encre); color: var(--blanc); border-radius: 4px; padding: 0 6px; font: var(--legende); vertical-align: 0.1em; white-space: nowrap; }

/* En-tête et menu */
.entete { background: var(--blanc); border-bottom: 1px solid var(--filet); position: relative; z-index: 10; }
.entete-ligne { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-6); padding-block: var(--espace-2); }
.entete-logo { display: inline-flex; padding: var(--espace-2) 0; }
.entete-logo img { display: block; width: 160px; height: auto; }
.menu-bouton { display: none; font: var(--corps-fort); color: var(--pin); background: none; border: 1px solid var(--pin); border-radius: var(--rayon-plein); padding: var(--espace-2) var(--espace-4); min-height: 44px; cursor: pointer; }
.menu > ul { display: flex; align-items: center; gap: var(--espace-1); }
.menu a, .menu summary { display: flex; align-items: center; min-height: 44px; padding: var(--espace-2) 12px; color: var(--encre); font-weight: 500; text-decoration: none; border-radius: var(--rayon-s); cursor: pointer; }
.menu a, .menu summary { transition: background-color var(--duree-rapide) var(--courbe), color var(--duree-rapide) var(--courbe); }
.menu a:hover, .menu summary:hover { background: var(--brume); color: var(--pin); }
.sous-menu summary::after { transition: transform var(--duree) var(--courbe); }
.sous-menu[open] ul { animation: apparition var(--duree) var(--courbe); }
.sous-menu { position: relative; }
.sous-menu summary { list-style: none; gap: 6px; }
.sous-menu summary::-webkit-details-marker { display: none; }
.sous-menu summary::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); }
.sous-menu[open] summary::after { transform: rotate(225deg) translate(-2px, -1px); }
.sous-menu ul { position: absolute; top: 100%; left: 0; min-width: 240px; padding: var(--espace-2); background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon-m); }

@media (max-width: 960px) {
  .menu-bouton { display: block; }
  .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--blanc); border-bottom: 1px solid var(--filet); padding: var(--espace-2) var(--gouttiere) var(--espace-4); }
  .menu.ouvert { display: block; animation: apparition var(--duree) var(--courbe); }
  .menu > ul { flex-direction: column; align-items: stretch; }
  .sous-menu ul { position: static; border: 0; padding: 0 0 0 12px; }
}

/* Fil d'Ariane */
.ariane { padding-block: var(--espace-1); font: var(--legende); }
.ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--espace-1); }
.ariane a { display: inline-block; padding-block: 13px; }
.ariane li + li::before { content: "/"; margin-right: var(--espace-1); color: var(--texte-doux); }
.ariane [aria-current] { color: var(--texte-doux); }

/* Sections */
.section { padding-block: clamp(var(--espace-10), 7vw, var(--espace-16)); }
.section-douce { background: var(--brume); }
.bloc-vert { background: var(--pin); color: var(--blanc); }
.bloc-vert h1, .bloc-vert h2, .bloc-vert h3 { color: var(--blanc); }
.bloc-vert a { color: var(--blanc); }
.bloc-vert a:hover { color: var(--menthe-clair); }
.section-titre { margin-bottom: clamp(var(--espace-6), 4vw, var(--espace-10)); max-width: 760px; display: grid; gap: 12px; }
.section-titre h1::after, .section-titre h2::after { content: ""; display: block; width: 40px; height: 4px; margin-top: 12px; border-radius: var(--rayon-plein); background: var(--soleil); }
/* Titre à côté du contenu sur grand écran, pour casser la répétition des blocs empilés. */
@media (min-width: 960px) {
  .duo { display: grid; grid-template-columns: 1fr 2fr; gap: var(--espace-16); align-items: start; }
  .duo > .section-titre { margin-bottom: 0; }
  .duo > .formulaire, .duo > .faq { max-width: none; }
}
.encadre.lecture { max-width: none; }
.encadre { padding: clamp(var(--espace-6), 5vw, var(--espace-10)); border-radius: var(--rayon-l); background: var(--menthe-clair); }
.encadre > * { max-width: 860px; }
.lecture { max-width: 760px; display: grid; gap: var(--espace-4); align-content: start; }
.lecture > h2:not(:first-child), .lecture > div > h2 { margin-top: var(--espace-6); }
.conteneur.lecture { max-width: 1280px; }
.conteneur.lecture > * { max-width: 860px; }
.espace-haut { margin-top: var(--espace-6); }
/* Lien seul sur sa ligne : zone tactile de 44 px sans changer le dessin. */
main p > a:only-child, main li > a:only-child, .carte-profil-entrees a { display: inline-block; padding-block: 10px; }
.grille-2, .grille-3, .grille-4 { display: grid; gap: var(--espace-6); }
@media (min-width: 720px) {
  .grille-2 { grid-template-columns: repeat(2, 1fr); }
  .grille-3 { grid-template-columns: repeat(3, 1fr); }
  .grille-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) { .grille-4 { grid-template-columns: repeat(4, 1fr); } }

.carte { display: grid; gap: 12px; align-content: start; background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon-m); padding: var(--espace-6); }
.carte > .a-fournir { justify-self: start; }
.numero { display: grid; place-items: center; justify-self: start; width: 32px; height: 32px; border-radius: 50%; background: var(--soleil); color: var(--encre); font: var(--corps-fort); }
/* Sur mobile, l'icône passe à gauche du texte pour raccourcir la page. */
@media (max-width: 719px) {
  .carte:has(> .icone) { grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--espace-4); }
  .carte:has(> .icone) > * { grid-column: 2; }
  .carte:has(> .icone) > .icone { grid-column: 1; grid-row: 1 / span 5; }
}
.carte-verte { background: var(--pin); border-color: var(--pin); color: var(--blanc); }
.carte-verte h3 { color: var(--blanc); }
.carte-verte .role-court { color: var(--soleil); }
.colonnes-roles .carte { padding: var(--espace-10); border-radius: var(--rayon-l); }
.liste-soleil li { position: relative; padding-left: 24px; }
.liste-soleil li::before { content: ""; position: absolute; left: 0; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--soleil); }
.liste-soleil li:has(> a:only-child)::before { top: 16px; }

/* Icônes : 64 px au maximum à l'écran */
.icone { display: block; flex: none; }
.avec-icone { display: flex; align-items: flex-start; gap: var(--espace-4); }

/* Boutons */
.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px var(--espace-6); border: 1px solid transparent; border-radius: var(--rayon-plein); font: var(--corps-fort); text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--duree-rapide) var(--courbe), transform var(--duree-rapide) var(--courbe); }
.bouton:active, .widget-bouton:active, .menu-bouton:active, .widget-fermer:active { transform: translateY(1px); }
.bouton-action { background: var(--pin); color: var(--blanc); }
.bouton-action:hover { background: var(--pin-fonce); color: var(--blanc); }
.bloc-vert .bouton-action { background: var(--soleil); color: var(--encre); }
.bloc-vert .bouton-action:hover { background: var(--blanc); color: var(--encre); }
.bouton-secondaire { border-color: var(--pin); background: transparent; color: var(--pin); }
.bouton-secondaire:hover { background: var(--menthe-clair); color: var(--pin); }
.bouton[aria-busy="true"] { opacity: 0.75; cursor: progress; }

/* Hero */
.hero { position: relative; overflow: hidden; padding-block: clamp(var(--espace-10), 6vw, var(--espace-16)); }
/* Le soleil en motif, coupé par le bord, une seule fois par page. */
.hero::after { content: ""; position: absolute; right: -140px; bottom: -220px; width: 640px; height: 640px; background: url("/assets/logo/symbole-blanc.svg") center / contain no-repeat; opacity: 0.12; pointer-events: none; }
.hero-grille { position: relative; z-index: 1; display: grid; gap: var(--espace-10); align-items: center; }
.hero .hero-visuel { background: transparent; border-color: var(--menthe-clair); }
.hero .hero-chiffre { color: var(--blanc); }
@media (min-width: 960px) { .hero-grille { grid-template-columns: 3fr 2fr; gap: var(--espace-16); } }
@media (max-width: 959px) {
  .hero .hero-visuel { display: none; }
  .hero::after { right: -120px; bottom: -120px; width: 320px; height: 320px; }
}
.hero-texte { display: grid; gap: 20px; justify-items: start; }
.hero-chiffre { position: relative; padding-left: 28px; font: 700 20px/1.4 var(--police); color: var(--pin); }
.hero-chiffre::before { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--soleil); }
.hero-visuel { display: grid; place-items: center; min-height: clamp(180px, 26vw, 340px); padding: var(--espace-6); text-align: center; background: var(--blanc); border: 1px dashed var(--texte-doux); border-radius: var(--rayon-m); }

/* Photos de vraies centrales et citations */
.hero-visuel.hero-photo { min-height: 0; padding: 0; background: none; border: 0; }
.photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--rayon-m); }
/* Collage du hero : trois photos superposées et légèrement inclinées. La marge intérieure garde les coins inclinés dans le cadre. */
.hero-collage { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(12, 1fr); aspect-ratio: 3 / 2; width: 100%; max-width: 454px; min-width: 0; padding: var(--espace-2); justify-self: center; }
.hero-collage .photo { width: 100%; height: 100%; min-width: 0; min-height: 0; aspect-ratio: auto; }
.hero-collage .photo:nth-child(1) { grid-area: 1 / 3 / 9 / 13; transform: rotate(1.5deg); }
.hero-collage .photo:nth-child(2) { grid-area: 6 / 1 / 13 / 8; transform: rotate(-2.5deg); }
.hero-collage .photo:nth-child(3) { grid-area: 8 / 7 / 12 / 12; transform: rotate(3deg); }
.citation { display: grid; gap: var(--espace-2); margin: 0; }
.citation blockquote { margin: 0; padding-left: var(--espace-4); border-left: 4px solid var(--soleil); font: var(--corps-fort); }
.citation figcaption { font: var(--legende); }

/* Aiguillage */
.aiguillage { display: grid; gap: var(--espace-4); }
@media (min-width: 720px) { .aiguillage { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .aiguillage { grid-template-columns: repeat(6, 1fr); } .aiguillage > :nth-child(-n+2) { grid-column: span 3; } .aiguillage > :nth-child(n+3) { grid-column: span 2; } }
.carte-profil { position: relative; transition: border-color var(--duree) var(--courbe), transform var(--duree) var(--courbe); }
.carte-profil h3 a { text-decoration: none; }
.carte-profil h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--rayon-m); }
/* Toute la carte est cliquable : c'est elle qui montre le focus, et la flèche annonce le lien. */
.carte-profil h3 a:focus-visible { outline: none; }
.carte-profil:has(h3 a:focus-visible) { outline: 3px solid var(--encre); outline-offset: 2px; }
.carte-profil h3::after { content: "→" / ""; display: inline-block; margin-left: var(--espace-2); color: var(--pin); transition: transform var(--duree) var(--courbe); }
@media (hover: hover) {
  .carte-profil:hover { border-color: var(--pin); transform: translateY(-2px); }
  .carte-profil:hover h3::after { transform: translateX(4px); }
}
.carte-profil-entrees { display: grid; gap: var(--espace-1); }

/* Preuves */
.preuves { display: grid; gap: var(--espace-6); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--espace-6); }
@media (min-width: 960px) { .preuves { grid-template-columns: repeat(5, 1fr); } }
.preuve-valeur { display: block; font: 700 40px/1.1 var(--police); letter-spacing: -0.01em; color: var(--soleil); }
.preuve-valeur .a-fournir { font-size: 20px; }
.preuve-texte { font-size: 28px; line-height: 1.15; }

/* Offres */
.offre-mise-en-avant { border: 2px solid var(--pin); background: var(--menthe-clair); }
.badge { justify-self: start; background: var(--pin); color: var(--blanc); border-radius: var(--rayon-plein); padding: 2px 12px; font: var(--legende); white-space: nowrap; }
.mention { font: var(--legende); color: var(--pin); }

/* Tableaux : seul le conteneur défile, la première colonne reste visible. */
.indice-defilement { margin-bottom: var(--espace-2); font: var(--legende); color: var(--texte-doux); }
.tableau-defilant { overflow-x: auto; border: 1px solid var(--filet); border-radius: var(--rayon-m); background: var(--blanc); }
table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 680px; }
th, td { padding: 14px var(--espace-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--filet); }
tbody tr:last-child > * { border-bottom: 0; }
thead th { color: var(--pin); vertical-align: bottom; }
tbody th { font-weight: 600; }
tr > :first-child { position: sticky; left: 0; background: var(--blanc); width: 24%; border-right: 1px solid var(--filet); }
@media (max-width: 720px) {
  table { min-width: 620px; }
  tr > :first-child { width: 112px; padding-inline: 12px; font: var(--legende); font-weight: 600; hyphens: auto; }
}
.colonne-forte { background: var(--menthe-clair); }
.colonne-titre { display: grid; gap: var(--espace-1); justify-items: start; }

/* Deux colonnes */
.role-court { font: 700 28px/1.15 var(--police); letter-spacing: -0.01em; color: var(--pin); }

/* FAQ */
.faq { display: grid; gap: var(--espace-2); max-width: 860px; }
.faq details { background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon-m); transition: border-color var(--duree) var(--courbe); interpolate-size: allow-keywords; }
.faq details:hover, .faq details[open] { border-color: var(--pin); }
/* Ouverture fluide là où le navigateur le permet, instantanée ailleurs. */
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size var(--duree-lente) var(--courbe), content-visibility var(--duree-lente) allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq summary { position: relative; padding: var(--espace-4) 52px var(--espace-4) 20px; font-weight: 600; cursor: pointer; border-radius: var(--rayon-m); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
/* Plus qui devient moins à l'ouverture : la barre verticale pivote sur l'horizontale. */
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 16px; height: 2px; margin-top: -1px; background: var(--pin); }
.faq summary::before { transform: rotate(90deg); transition: transform var(--duree) var(--courbe); }
.faq details[open] summary::before { transform: rotate(0); }
.faq-reponse { padding: 0 20px 20px; display: grid; gap: 12px; }

/* Formulaires */
.formulaire { display: grid; gap: 20px; max-width: 640px; }
.formulaire-deux { display: grid; gap: 20px; }
@media (min-width: 640px) { .formulaire-deux { grid-template-columns: repeat(2, 1fr); align-items: start; } }
.champ { display: grid; gap: 6px; min-width: 0; }
.champ label { font-weight: 600; }
.requis, .facultatif { font: var(--legende); color: var(--texte-doux); }
.aide { font: var(--legende); color: var(--texte-doux); }
input:not([type="checkbox"]), select, textarea { width: 100%; min-height: 48px; padding: 10px 12px; font: 400 16px/1.55 var(--police); color: var(--encre); background: var(--blanc); border: 1px solid var(--texte-doux); border-radius: var(--rayon-s); }
.champ-case { grid-template-columns: 24px 1fr; column-gap: 12px; }
.champ-case input { width: 24px; height: 24px; margin: 0; accent-color: var(--pin); }
.champ-case label { font-weight: 400; }
.champ-case .erreur { grid-column: 2; }
.erreur { color: var(--erreur); font: var(--legende); font-weight: 600; }
.erreur::before { content: "Erreur\00a0: "; }
[aria-invalid="true"]:not([type="checkbox"]) { border: 2px solid var(--erreur); }
.resume-erreurs { display: grid; gap: var(--espace-2); padding: var(--espace-4); background: var(--blanc); border: 2px solid var(--erreur); border-radius: var(--rayon-s); color: var(--erreur); font-weight: 600; }
.resume-erreurs a { display: inline-block; padding-block: 10px; color: var(--erreur); font-weight: 400; }
.resume-erreurs a:hover { color: var(--encre); }
.lecteurs-ecran { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.message-succes { padding: var(--espace-4); background: var(--menthe-clair); border-radius: var(--rayon-s); color: var(--pin); font-weight: 600; }
.choix-groupe { display: grid; gap: var(--espace-2); margin: 0; padding: 0; border: 0; }
.choix-groupe legend { margin-bottom: var(--espace-2); padding: 0; font-weight: 600; }
.choix { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: var(--espace-2) var(--espace-4); background: var(--blanc); border: 1px solid var(--texte-doux); border-radius: var(--rayon-s); cursor: pointer; transition: border-color var(--duree-rapide) var(--courbe); }
.choix:hover, .choix:has(input:checked) { border-color: var(--pin); }
.choix:has(input:checked) { background: var(--menthe-clair); }
.choix input { width: 24px; height: 24px; margin: 0; accent-color: var(--pin); }
input[type="file"] { padding-block: 9px; cursor: pointer; }
.coordonnees { display: grid; gap: var(--espace-4); margin-top: var(--espace-2); }
.coordonnees .avec-icone { align-items: center; }

/* Offres et parcours */
.bloc-vert .badge { background: var(--soleil); color: var(--encre); }
.formule { padding: clamp(var(--espace-6), 5vw, var(--espace-10)); border-radius: var(--rayon-l); background: var(--pin); color: var(--blanc); font: 700 clamp(20px, 16px + 1.2vw, 28px)/1.3 var(--police); letter-spacing: -0.01em; }
.conditions { display: grid; margin: 0; background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon-m); }
.conditions > div { display: grid; gap: var(--espace-1); padding: var(--espace-4) var(--espace-6); }
.conditions > div + div { border-top: 1px solid var(--filet); }
.conditions dt { font-weight: 600; }
.conditions dd { margin: 0; }
@media (min-width: 720px) { .conditions > div { grid-template-columns: 2fr 3fr; gap: var(--espace-6); } }
.choix-parcours { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); max-width: 640px; }
.parcours { display: grid; gap: var(--espace-6); }
.parcours .section-titre { margin-bottom: 0; }
.parcours h3 { font-size: clamp(24px, 22px + 0.6vw, 28px); line-height: 1.15; }
@media (min-width: 960px) {
  .parcours { grid-template-columns: 1fr 2fr; gap: var(--espace-16); align-items: start; }
  .parcours > .formulaire { max-width: none; }
}

/* Page des composants */
.composants { display: grid; gap: var(--espace-6); }
.composants > .section-titre { margin-bottom: 0; }
.composants h4 { margin: 0; color: var(--pin); font: 700 20px/1.2 var(--police); letter-spacing: -0.01em; }
.carte-verte h4 { color: var(--blanc); }
.carte-profil h4 a { text-decoration: none; }
.carte-profil h4 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--rayon-m); }
.carte-profil h4 a:focus-visible { outline: none; }
.carte-profil:has(h4 a:focus-visible) { outline: 3px solid var(--encre); outline-offset: 2px; }
.titre-hero { font-size: clamp(28px, 22px + 1.9vw, 40px); line-height: 1.1; }
.statuts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2) var(--espace-4); }
.statut { display: inline-block; padding: 2px 12px; border: 1px solid var(--pin); border-radius: var(--rayon-plein); font: var(--legende); }
.statut-service { background: var(--pin); color: var(--blanc); }
.statut-construction { background: var(--menthe-clair); color: var(--pin); }
.statut-attente { border-color: var(--texte-doux); background: var(--blanc); color: var(--texte-doux); }
.bandeau-cookies { display: grid; gap: var(--espace-4); padding: var(--espace-6); background: var(--blanc); border: 1px solid var(--texte-doux); border-radius: var(--rayon-m); }

/* Confirmation */
.etapes-suite { display: grid; gap: var(--espace-4); counter-reset: suite; }
.etapes-suite li { counter-increment: suite; display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; }
.etapes-suite li::before { content: counter(suite); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--pin); color: var(--blanc); font-weight: 700; }

/* Widget */
.entete-logo img { max-width: 100%; }
@media (max-width: 719px) {
  .entete-logo { padding: var(--espace-1) 0; }
  .entete-logo img { width: 128px; }
  .entete-ligne { padding-block: var(--espace-1); }
}
.widget-bouton { display: inline-flex; align-items: center; gap: var(--espace-2); position: fixed; right: var(--espace-4); bottom: var(--espace-4); z-index: 20; min-height: 48px; padding: 12px 20px; border: 2px solid var(--blanc); border-radius: var(--rayon-plein); background: var(--pin); color: var(--blanc); font: var(--corps-fort); cursor: pointer; transition: background-color var(--duree-rapide) var(--courbe), transform var(--duree) var(--courbe), opacity var(--duree) var(--courbe), visibility var(--duree); }
.widget-bouton:hover { background: var(--pin-fonce); }
.widget[open] { animation: entree-widget var(--duree-lente) var(--courbe); }
.widget[open]::backdrop { animation: fondu var(--duree-lente) var(--courbe); }
.widget { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: var(--espace-6); border: 0; border-radius: var(--rayon-m); color: var(--encre); }
.widget::backdrop { background: rgb(15 42 36 / 55%); }
.widget > p { margin-bottom: var(--espace-4); }
.widget-entete { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-4); margin-bottom: var(--espace-2); }
.widget-fermer { min-height: 44px; padding: var(--espace-2) var(--espace-4); font: 500 16px/1.25 var(--police); color: var(--pin); background: none; border: 1px solid var(--pin); border-radius: var(--rayon-plein); cursor: pointer; }
/* Le bouton fixe s'efface pendant la saisie, près d'un formulaire et quand le menu est ouvert. */
body.saisie-en-cours .widget-bouton, body.formulaire-visible .widget-bouton, body.menu-ouvert .widget-bouton { opacity: 0; visibility: hidden; transform: translateY(8px); }
@media (max-width: 720px) {
  body { padding-bottom: 80px; }
}

/* Pied de page */
.pied { background: var(--pin); color: var(--menthe-clair); padding-block: var(--espace-16); }
.pied-grille { display: grid; gap: var(--espace-10); }
@media (max-width: 719px) {
  .pied { padding-block: var(--espace-10); }
  .pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-6) var(--espace-4); }
  .pied-marque, .pied-grille > nav:first-of-type { grid-column: 1 / -1; }
  .pied-grille > nav:first-of-type ul { columns: 2; column-gap: var(--espace-4); }
}
@media (min-width: 720px) { .pied-grille { grid-template-columns: repeat(3, 1fr); } .pied-marque { grid-column: 1 / -1; } }
@media (min-width: 1040px) { .pied-grille { grid-template-columns: 2fr 1fr 1fr 1fr; } .pied-marque { grid-column: auto; } }
.pied-marque { display: grid; gap: var(--espace-6); justify-items: start; align-content: start; }
.pied-marque img { display: block; width: 300px; max-width: 100%; height: auto; }
.pied-marque p { font: var(--legende); }
.pied h2 { color: var(--blanc); font: var(--corps-fort); letter-spacing: 0; margin-bottom: var(--espace-2); }
.pied li a { display: inline-block; padding-block: 10px; color: var(--menthe-clair); }
.pied li a:hover { color: var(--blanc); }

/* Motion */
@keyframes apparition { from { opacity: 0; transform: translateY(-4px); } }
@keyframes entree-widget { from { opacity: 0; transform: translateY(12px); } }
@keyframes fondu { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::backdrop, ::details-content { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}