/* Système visuel HMD : 1 unité = 8 px à la taille de texte par défaut.
   Les rem suivent l’agrandissement du texte. Les bordures ne suivent pas la grille.
   Couleurs de texte opaques : voir contrôle des contrastes dans la recette. */
:root {
  --espace-1: .5rem; --espace-2: 1rem; --espace-3: 1.5rem;
  --espace-4: 2rem; --espace-5: 2.5rem; --espace-6: 3rem;
  --espace-8: 4rem; --espace-10: 5rem;
  --fond: #ffffff; --surface: #f3f5f7; --texte: #012544;
  --texte-secondaire: #48596a; --lien: #914000; --bordure: #738291;
  --action: #ec7d1f; --texte-action: #012544;
  --erreur: #a91d16; --fond-erreur: #fdecea;
  --fond-succes: #eaf5ee; --texte-succes: #11492a;
  --focus: #012544; --halo-focus: #ffffff;
  color-scheme: light;
}
:root[data-theme="sombre"] {
  --fond: #101923; --surface: #192838; --texte: #f3f6fa;
  --texte-secondaire: #c4d0dc; --lien: #ffb875; --bordure: #889caf;
  --erreur: #ffb4ad; --fond-erreur: #3c1b1b;
  --fond-succes: #143322; --texte-succes: #bde8cc;
  --focus: #ffb875; --halo-focus: #101923;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --fond: #101923; --surface: #192838; --texte: #f3f6fa;
    --texte-secondaire: #c4d0dc; --lien: #ffb875; --bordure: #889caf;
    --erreur: #ffb4ad; --fond-erreur: #3c1b1b;
    --fond-succes: #143322; --texte-succes: #bde8cc;
    --focus: #ffb875; --halo-focus: #101923;
    color-scheme: dark;
  }
}
body { background: var(--fond); color: var(--texte); }
a { color: var(--texte); }
a:hover, .lien-fleche, .champ__obligatoire { color: var(--lien); }
.entete, .carte, .etape, .acces, .formulaire, .fichier-resume { background: var(--fond); color: var(--texte); }
.section--gris, .encart-contact, .zone-fichier { background: var(--surface); }
.chapo, .carte__texte, .etape p, .acces__detail, .champ__aide { color: var(--texte-secondaire); }
.champ input[type="text"], .champ input[type="email"], .champ input[type="tel"],
.champ select, .champ textarea, .zone-fichier input::file-selector-button {
  background: var(--fond); color: var(--texte); border-color: var(--bordure);
}
.zone-fichier, .bouton-menu { border-color: var(--bordure); }
.bouton-menu span:not(.visuellement-masque) { background: var(--texte); }
.nav-bureau a { color: var(--texte); }
.nav-bureau a:hover { background: var(--surface); color: var(--texte); }
.bouton, .nav-bureau .bouton, .menu-mobile__liens .bouton {
  min-height: 48px; padding: var(--espace-2) var(--espace-3);
}
.bouton--principal, .nav-bureau .bouton, .menu-mobile__liens .bouton {
  background: var(--action); color: var(--texte-action); border-color: var(--action);
}
.bouton--principal:hover, .nav-bureau .bouton:hover, .menu-mobile__liens .bouton:hover {
  background: #ffb875; border-color: #ffb875; color: #012544;
}
.bouton--secondaire { color: var(--texte); border-color: var(--texte); }
.bouton--sur-photo { color: #fff; border-color: #fff; }
.section--marine, .hero, .appel, .pied, .menu-mobile { color: #fff; }
.section--marine .chapo, .hero__accroche, .appel .chapo, .materiau p,
.preuve figcaption, .pied, .pied a { color: #e1e8ef; }
.surtitre, .etape__numero { color: var(--lien); }
.hero .surtitre, .section--marine .surtitre, .materiau h3, .pied h3 { color: #ffb875; }
.ico { color: var(--texte); }
.message--echec { color: var(--erreur); background: var(--fond-erreur); }
.message-erreur, .fichier-resume__retirer { color: var(--erreur); }
.message--succes { color: var(--texte-succes); background: var(--fond-succes); }
.message--info { color: var(--texte); background: var(--surface); }
:focus-visible, .champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 6px var(--halo-focus);
}
.menu-mobile :focus-visible, .pied :focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px #012544; }
/* Rythme des composants, sans multiplier les marges ponctuelles. */
.conteneur { padding-inline: var(--espace-3); }
.section { padding-block: var(--espace-8); }
.entete-section { margin-bottom: var(--espace-4); }
p, ul { margin-bottom: var(--espace-2); }
h1, h2, h3, h4 { margin-bottom: var(--espace-2); }
.grille, .preuves, .champs-deux, .formulaire, .groupe-boutons { gap: var(--espace-3); }
.carte, .etape, .materiau, .formulaire { padding: var(--espace-3); }
.encart-contact, .zone-fichier, .message { padding: var(--espace-2); }
.champ { gap: var(--espace-1); }
.champ input[type="text"], .champ input[type="email"], .champ input[type="tel"],
.champ select, .champ textarea { padding: var(--espace-2); }
.champ textarea { min-height: 8rem; }
.grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pied { padding-block: var(--espace-6) var(--espace-3); }
.pied__action { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-4); padding-bottom: var(--espace-4); margin-bottom: var(--espace-4); border-bottom: 1px solid #738291; }
.pied__action h2 { color: #fff; font-size: 1.5rem; }
.pied__action .bouton { flex-shrink: 0; min-height: 48px; color: #012544; }
.pied__grille { gap: var(--espace-6); padding-bottom: var(--espace-4); }
.pied ul { gap: 0; }
.pied li a { display: inline-flex; align-items: center; min-height: 48px; padding-block: var(--espace-1); }
.pied__bas { gap: var(--espace-3); padding-top: var(--espace-3); align-items: center; }
.choix-theme { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-1); }
.choix-theme select { min-height: 48px; padding: var(--espace-1) var(--espace-2); font: inherit; color: #012544; background: #fff; border: 1px solid #738291; border-radius: 8px; }
@media (max-width: 699px) {
  .grille--3 { grid-template-columns: minmax(0, 1fr); }
  .pied__action { flex-direction: column; align-items: stretch; }
  .pied__action .bouton { width: 100%; }
  .conteneur { padding-inline: var(--espace-2); }
  .section { padding-block: var(--espace-4); }
  .formulaire { padding: var(--espace-2); }
  .pied__grille { gap: var(--espace-4); }
}
@media (forced-colors: active) {
  .bouton, .carte, .champ input, .champ select, .champ textarea { border: 1px solid ButtonText; }
  :focus-visible { outline: 3px solid Highlight; }
}

.entete__logo { background: #fff; padding: var(--espace-1); border-radius: 8px; }
.pied .pied__action .bouton:hover { color: #012544; }

/* Cartes services : action visible et cible tactile de 48 px. */
#services .carte .service__action {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: var(--espace-2) var(--espace-3);
  border: 1px solid currentColor; border-radius: 8px;
  color: var(--texte); background: transparent; text-decoration: none;
  text-align: center;
}
#services .carte .service__action:hover,
#services .carte .service__action:focus-visible {
  background: var(--texte); color: var(--fond); border-color: var(--texte);
}
.decision__action { margin-top: var(--espace-4); text-align: center; }
.decision__action .bouton { max-width: 100%; white-space: normal; }
.preuve__zoom { display: block; position: relative; cursor: zoom-in; }
.preuve__zoom img { display: block; }
.preuve__indication {
  position: absolute; right: var(--espace-1); bottom: var(--espace-1);
  padding: var(--espace-1) var(--espace-2); border-radius: 8px;
  background: #012544; color: #fff; border: 1px solid #fff;
}
.preuve__zoom:hover .preuve__indication,
.preuve__zoom:focus-visible .preuve__indication { background: #fff; color: #012544; }
.preuve__zoom:focus-visible { outline: 3px solid #ffb875; outline-offset: -4px; box-shadow: none; }
.visionneuse {
  width: min(72rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem);
  margin: auto; padding: var(--espace-2); border: 1px solid var(--bordure);
  border-radius: 8px; color: var(--texte); background: var(--fond); overflow: auto;
}
.visionneuse:not([open]) { display: none; }
.visionneuse::backdrop { background: rgb(0 0 0 / .8); }
.visionneuse__barre { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-2); margin-bottom: var(--espace-2); }
.visionneuse__barre h2 { margin: 0; font-size: 1.125rem; }
.visionneuse__barre .bouton { flex-shrink: 0; }
.visionneuse .visionneuse__image { display: block; width: 100%; height: auto; max-height: 75vh; object-fit: contain; }
body.visionneuse-ouverte { overflow: hidden; }
@media (max-width: 399px) { .visionneuse__barre { align-items: flex-start; flex-direction: column; } }

.service__illustration { display: block; width: min(100%, 300px); height: auto; margin: 0 auto 24px; border-radius: 8px; }

.service__illustration--serie { aspect-ratio: 300 / 208; object-fit: contain; background: #fff; }

/* Liens légaux secondaires : contraste lisible sur le fond marine. */
.pied__bas { flex-direction: column; gap: 8px; text-align: center; }
.pied__bas p { margin: 0; }
.pied__legal { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0 12px; font-size: .8125rem; font-weight: 400; line-height: 1.5; }
.pied__legal a { display: inline-flex; align-items: center; min-height: 32px; color: rgba(255,255,255,.60); font-weight: 400; text-decoration: none; }
.pied__legal a:hover { color: rgba(255,255,255,.80); text-decoration: none; }
.pied__legal a:focus-visible { color: #fff; outline: 2px solid #fff; outline-offset: 3px; box-shadow: none; border-radius: 2px; }
.pied__legal span { color: rgba(255,255,255,.35); }

.carte-localisation { margin: 24px 0 0; }
.carte-localisation img { display: block; width: 100%; height: auto; }

/* Centrage du pied de page sur mobile. */
@media (max-width: 699px) {
  .pied { text-align: center; }
  .pied__logo { margin-inline: auto; }
  .pied__grille > div > p { margin-inline: auto; }
  .pied ul { justify-items: center; }
}

/* Legal Design — 26 octobre 2026 : lecture progressive et impression intégrale. */
.legal-design { max-width: 960px; }
.legal-design > section { margin-top: 2.5rem; }
.legal-reperes { display:grid; grid-template-columns:minmax(8rem,1fr) 3fr; margin:1.5rem 0; border:1px solid var(--bordure); border-radius:8px; overflow:hidden; }
.legal-reperes dt,.legal-reperes dd { margin:0; padding:.8rem 1rem; border-bottom:1px solid var(--bordure); }
.legal-reperes dt { background:var(--surface); font-weight:600; }
.legal-sommaire ul { display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; list-style:none; padding:0; }
.legal-sommaire a { display:inline-block; padding:.5rem 0; text-decoration:underline; text-underline-offset:3px; }
.legal-chapitre { border-bottom:1px solid var(--bordure); scroll-margin-top:7rem; }
.legal-chapitre summary { cursor:pointer; padding:1.2rem .5rem; font-weight:600; font-size:1.08rem; }
.legal-chapitre[open] summary { background:var(--surface); }
.legal-chapitre__texte { padding:1.25rem .5rem; }
.legal-chapitre__texte h3 { font-size:1.12rem; margin-top:1.5rem; }
.legal-garanties { white-space:pre-line; padding:1.25rem; margin:1.25rem 0; border:1px solid var(--bordure); font-size:1rem; }
@media(max-width:599px) { .legal-reperes { grid-template-columns:1fr; } .legal-reperes dd { padding-top:.6rem; } .legal-reperes dt { border-bottom:0; } }
@media print { .legal-design { max-width:none; } .legal-sommaire { display:none; } .legal-chapitre { break-inside:auto; } .legal-chapitre summary { break-after:avoid; } .legal-chapitre::details-content { content-visibility:visible; display:block; } .legal-reperes { break-inside:avoid; } }

/* Identité du pied de page centrée sur tous les écrans. */
.pied__identite { display: flex; justify-content: center; padding-block: 1rem; }
.pied__identite .pied__logo { display: block; margin: 0; }

/* Liens légaux compacts sur mobile. */
@media (max-width: 699px) {
  .pied__legal { font-size: .6875rem; gap: 0 6px; }
  .pied__legal a { white-space: nowrap; }
}
@media (max-width: 359px) {
  .pied__legal { font-size: .625rem; gap: 0 4px; }
}

/* Présentation centrée de la page Contact. */
.contact-centre { text-align: center; }
.contact-centre .champ label,
.contact-centre .champ__aide,
.contact-centre input,
.contact-centre select,
.contact-centre textarea { text-align: center; }
.contact-centre .profil-client legend { margin-inline: auto; }
.contact-centre .profil-client label { margin-inline: .75rem; }
.contact-centre .fichier-resume { justify-content: center; }
.contact-centre .message ul { padding-inline: 0; list-style-position: inside; }
.contact-centre .carte-localisation { margin-inline: auto; }