/* PurClean Services — styles globaux. Les styles de mise en page sont en ligne
   dans le HTML (repris tels quels des maquettes) ; ce fichier porte ce qu'un
   attribut style ne peut pas exprimer : polices, états (survol, ouvert, erreur),
   points de rupture. Les règles de survol .hN sont générées par build.py. */

@font-face{font-family:Sora;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/sora-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Manrope;font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/fonts/manrope-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

html{scroll-padding-top:120px;-webkit-text-size-adjust:100%}
body{margin:0;background:#FFFFFF;color:#0F1E33;font-family:Manrope,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#0B3C7D;text-decoration:none}
a:hover{color:#1F5FC4}
*{box-sizing:border-box}
img{max-width:100%}
input,textarea,select,button{font-family:Manrope,Helvetica,Arial,sans-serif}
input::placeholder,textarea::placeholder{color:#5B6B80;opacity:1}

/* Anneau de focus : bleu ciel (maquette) sur les fonds sombres, bleu action sur
   les fonds clairs (le bleu ciel n'y atteint que 1,8:1). */
:focus-visible{outline:2px solid #1F5FC4;outline-offset:3px}
header :focus-visible,#menu-mobile :focus-visible,footer :focus-visible,.bandeau-photo :focus-visible,
[style*="background:#0A1F3D"] :focus-visible,[style*="background:#0B3C7D"] :focus-visible{outline-color:#8EC3EA}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
[hidden]{display:none!important}

/* Lien d'évitement */
.evitement:focus{top:16px!important}

/* En-tête : transparent sur le bandeau photo, plein dès 24 px de défilement */
.entete{background:rgba(10,31,61,0);box-shadow:none;transition:background .3s ease,box-shadow .3s ease}
.entete.est-plein{background:rgba(10,31,61,.94);box-shadow:0 10px 30px rgba(5,15,30,.22);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.entete-large{display:none}
.entete-etroit{display:flex}
@media (min-width:1100px){.entete-large{display:flex}.entete-etroit{display:none}}

/* Texte sur photo : halo bleu nuit discret derrière les petits textes des bandeaux
   (sur-titre, fil d'Ariane, paragraphe, légende). Sur les photos claires, les couleurs
   de la maquette tombaient à 1,2–2:1 ; le halo leur donne un fond sombre local
   (≈ 8:1, technique WCAG « halo ») sans assombrir la photo. */
.bandeau-photo h1 span,.bandeau-photo h1~p,.bandeau-photo nav[aria-label="Fil d'Ariane"],.bandeau-photo .diapo-legende{
  text-shadow:0 0 1px #0A1F3D,0 0 2px #0A1F3D,0 1px 3px rgba(10,31,61,.9),0 0 14px rgba(10,31,61,.7)}

/* Mobile : toute cible tactile fait au moins 44 px de haut (README § 6 et § 13) */
@media (max-width:1099px){
  .entete-etroit a[aria-label]{display:flex!important;align-items:center;min-height:44px}
  nav[aria-label="Fil d'Ariane"]{align-items:center}
  nav[aria-label="Fil d'Ariane"] a,.pied-liens>a,.pied-liens>button,footer a,
  aside a,aside [data-mail],dd a,dd [data-mail]{display:inline-flex!important;align-items:center;min-height:44px}
  .pied-liens{gap:0!important}
  /* liens soulignés isolés : zone de clic agrandie sans déplacer le trait */
  .lien-souligne{position:relative}
  .lien-souligne::after{content:"";position:absolute;left:0;right:0;top:50%;height:48px;transform:translateY(-50%)}
}

/* Mentions légales, petits écrans : la colonne des intitulés (Contact, IDE…) prenait 200 px et
   l'adresse e-mail débordait de la colonne de droite (13 px à 375 px, page plus large à 320 px) */
@media (max-width:480px){
  [style*="grid-template-columns:minmax(120px,200px) minmax(0,1fr)"]{grid-template-columns:minmax(0,104px) minmax(0,1fr)!important;gap:8px 16px!important}
  dd [data-mail-text]{overflow-wrap:anywhere}
}

/* Diaporama de l'accueil */
.diapo-legende{display:none}
@media (min-width:640px){.diapo-legende{display:inline}}

/* Accordéon FAQ */
.faq-q{color:#0A1F3D}
.faq-ind{border:1px solid #DCE5F0;background:transparent;color:#0A1F3D}
.faq-btn[aria-expanded="true"] .faq-q{color:#1F5FC4}
.faq-btn[aria-expanded="true"] .faq-ind{border-color:#1F5FC4;background:#EAF1FB;color:#1F5FC4}

/* Formulaire */
.champ.err{border-color:#C0412F!important}
.accord.err{outline:2px solid #C0412F!important}
button[disabled]{opacity:.6;cursor:progress!important}

/* Choix d'abonnement (formulaire de devis) : boutons radio présentés en cartes. Le vrai bouton
   radio reste dans le flux (clavier, lecteurs d'écran), invisible ; la carte montre l'état. */
/* Grille : 1, 2 ou 4 colonnes selon la largeur RÉELLE du formulaire (requête de conteneur), jamais 3 + 1 ;
   carte ≥ 124 px (« Premium » + rond) : 2 colonnes dès 258 px, 4 dès 526 px */
.formules-bloc{container-type:inline-size}
.formules{grid-template-columns:minmax(0,1fr)}
@container (min-width:258px){.formules{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:526px){.formules{grid-template-columns:repeat(4,minmax(0,1fr))}}
@supports not (container-type:inline-size){.formules{grid-template-columns:repeat(auto-fit,minmax(min(100%,124px),1fr))}}
.formule-choix{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;opacity:0}
.formule-carte{transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease}
.formule-rond{position:absolute;top:13px;right:13px;width:18px;height:18px;border-radius:50%;border:1.5px solid #9FB1C8;background:#FFFFFF}
.formule:hover .formule-carte{border-color:#1F5FC4!important}
.formule-choix:checked+.formule-carte{border-color:#1F5FC4!important;background:#EAF1FB!important;box-shadow:inset 0 0 0 1px #1F5FC4}
.formule-choix:checked+.formule-carte .formule-rond{border-color:#1F5FC4;background:#1F5FC4;box-shadow:inset 0 0 0 3.5px #FFFFFF}
.formule-choix:focus-visible+.formule-carte{outline:2px solid #1F5FC4;outline-offset:3px}
/* Mode « contraste élevé » de Windows : fonds et ombres sont neutralisés, l'état coché passe par les couleurs système */
@media (forced-colors:active){
  .formule-carte{border-color:CanvasText!important}
  .formule-rond{forced-color-adjust:none;border-color:CanvasText;background:Canvas}
  .formule-choix:checked+.formule-carte{outline:3px solid Highlight;outline-offset:2px;border-color:Highlight!important}
  .formule-choix:checked+.formule-carte .formule-rond{background:Highlight;border-color:Highlight;box-shadow:inset 0 0 0 3.5px Canvas}
  .formule-choix:focus-visible+.formule-carte{outline:3px dashed Highlight}
}

/* Survols (générés depuis les style-hover des maquettes) */
.h1:hover{border-color:#8EC3EA!important;color:#8EC3EA!important}
.h2:hover{color:#8EC3EA!important}
.h3:hover{color:#FFFFFF!important}
.h4:hover{background:rgba(255,255,255,.12)!important}
.h5:hover{color:#1F5FC4!important}
.h6:hover{background:#8EC3EA!important;color:#0A1F3D!important}
.h7:hover{background:rgba(255,255,255,.12)!important;color:#FFFFFF!important}
.h8:hover{background:rgba(31,95,196,.7)!important;color:#FFFFFF!important}
.h9:hover{background:#1F5FC4!important;color:#FFFFFF!important}
.h10:hover{border-color:#1F5FC4!important}
.h11:hover{background:#0B3C7D!important;color:#FFFFFF!important}
.h12:hover{background:#EAF1FB!important;color:#0B3C7D!important}
.h13:hover{background:#0B3C7D!important}