/* Marque Beringia Systems : réglages copiés de beringiasystems.com (systems/beringia-site/styles.css), sans lien vers
   le site principal. Toutes les pages des démos commencent par ce fichier ; les autres feuilles n'ajoutent que ce
   qui est propre à une page (carte, tableau, fiche).
   Deux styles d'action seulement : .btn (principal, un seul visible par écran) et .link (secondaire). */

/* Manrope auto-hébergée (aucune requête vers un tiers). Jamais de graisse au-delà de 600. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/polices/manrope-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/polices/manrope-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/polices/manrope-latin-600-normal.woff2') format('woff2')}

:root{
  --marine:#0F1E2E; --ardoise:#2E3D4D; --glace:#8DB6C7; --creme:#F5F3EE; --blanc:#FFFFFF;
  --ligne:#D9DDE1; --texte-doux:#4A5866; --gris-pied:#C9D3DB;
  /* Erreurs : pas de rouge, comme sur beringiasystems.com. Texte marine, trait glace à gauche (.erreur-form, .erreur-tel…). */
  --erreur:var(--marine);
  --f:'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --s-1:.8125rem; --s0:1rem; --s1:1.125rem; --s2:1.5rem; --s3:2.25rem; --s4:clamp(2.25rem,5vw,3.5rem);
  --max:72rem; color-scheme:light;
  /* Noms courts gardés pour les feuilles de page. */
  --fond:var(--creme); --surface:var(--blanc); --texte:var(--marine); --doux:var(--texte-doux);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--creme);color:var(--marine);font-family:var(--f);font-size:var(--s0);font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
b,strong,th{font-weight:600}
button,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--glace);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-weight:500;letter-spacing:-.015em;line-height:1.15;text-wrap:balance;margin:0}
h1{font-size:var(--s4)}
h2{font-size:var(--s3)}
h3{font-size:var(--s1)}
p{margin:0;max-width:62ch}
.label,.surtitre{display:block;font-size:var(--s-1);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-doux);margin:0}
.pont{display:block;width:48px;height:2px;background:var(--glace);margin-top:1.25rem}
.enveloppe,.wrap{max-width:var(--max);margin:0 auto;padding:0 max(16px,env(safe-area-inset-left,0px))}

/* En-tête : fond crème, ligne fine au défilement, logo 34 px, liens ardoise → marine. */
header.bande{position:sticky;top:0;z-index:45;background:var(--creme);border-bottom:1px solid transparent;transition:border-color .2s}
header.bande.scrolled{border-bottom-color:var(--ligne)}
.bande-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1rem;min-height:4.9rem}
/* Hauteur fixe : le bouton qui devient discret ne doit pas faire bouger la page. */
.bande-in .logo{height:34px;width:auto;display:block}
.bande nav{display:flex;align-items:center;gap:1.75rem;font-size:.9375rem;margin-left:auto}
.bande nav a{text-decoration:none;color:var(--ardoise)}
.bande nav a:hover{color:var(--marine)}
/* Le menu n'est jamais coupé : s'il manque de place, il passe dans un bouton « Menu » (commun/marque.js). */
.bande-in > *{flex-shrink:0}
.bande nav a,.bande .btn{white-space:nowrap}
.bande .bouton-menu{display:none}
header.menu-replie .bouton-menu{display:inline-block;margin-left:auto}
header.menu-replie .bande-in{gap:1.25rem}
header.menu-replie nav{display:none}
header.menu-replie.menu-ouvert nav{display:grid;gap:0;position:absolute;left:0;right:0;top:100%;margin:0;background:var(--creme);
  border-bottom:1px solid var(--ligne);padding:.25rem max(16px,env(safe-area-inset-left,0px)) .75rem}
header.menu-replie.menu-ouvert nav a{padding:.7rem 0;border-bottom:1px solid var(--ligne);max-width:var(--max)}
header.menu-replie.menu-ouvert nav a:last-child{border-bottom:0}

/* Action principale : une seule visible par écran. */
.btn{display:inline-block;background:var(--marine);color:var(--creme);text-decoration:none;font:inherit;font-weight:500;line-height:1.3;
  padding:.8rem 1.4rem;border:0;border-radius:2px;cursor:pointer;text-align:center;transition:background-color .15s}
.btn:hover{background:var(--ardoise)}
.btn:disabled{opacity:.6;cursor:default}
/* Sur fond marine : version inversée. */
.sur-marine .btn{background:var(--creme);color:var(--marine)}
.sur-marine .btn:hover{background:var(--blanc)}
/* Action secondaire : texte souligné d'un trait glace (comme « Le fondateur » sur le site). */
.link{display:inline;background:none;border:0;padding:0 0 2px;font:inherit;font-weight:500;color:inherit;text-decoration:none;
  border-bottom:1px solid var(--glace);cursor:pointer;transition:border-color .15s}
.link:hover{border-bottom-color:var(--marine)}
.sur-marine .link:hover{border-bottom-color:var(--creme)}

/* Choix : pastilles arrondies, comme le choix de langue du site. */
.pastilles{display:flex;flex-wrap:wrap;gap:.4rem;border:0;margin:0;padding:0;min-width:0}
.pastilles > legend{width:100%;padding:0;margin:0 0 .4rem}
.pastilles label,.pastilles button{position:relative;display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-size:var(--s-1);font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--marine);background:var(--blanc);border:1px solid var(--ligne);border-radius:999px;
  padding:.3rem .8rem;cursor:pointer;line-height:1.4;white-space:nowrap;transition:border-color .15s,background-color .15s}
.pastilles label:hover,.pastilles button:hover{border-color:var(--marine)}
.pastilles input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.pastilles label:has(input:checked),.pastilles button[aria-pressed="true"]{background:var(--marine);color:var(--creme);border-color:var(--marine)}
.pastilles label:has(input:focus-visible){outline:2px solid var(--glace);outline-offset:3px}

/* Panneaux et fiches : fond blanc, bordure 1 px gris clair, coins 2 px, sans ombre ni dégradé. */
.panneau-blanc{background:var(--blanc);border:1px solid var(--ligne);border-radius:2px}

/* Formulaires : mêmes libellés et champs que le formulaire de contact du site. */
/* Le texte tapé est en 400 : sans cela, font:inherit lui donne le 600 du libellé qui l'entoure. */
form label:not(.case){display:flex;flex-direction:column;gap:.35rem;font-size:var(--s-1);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--texte-doux)}
input:not([type=checkbox]):not([type=radio]),textarea,select{font:inherit;font-size:var(--s0);font-weight:400;letter-spacing:0;text-transform:none;color:var(--marine);
  background:var(--blanc);border:1px solid var(--ligne);border-radius:2px;padding:.75rem .85rem;width:100%}
input:not([type=checkbox]):not([type=radio]):focus,textarea:focus,select:focus{outline:none;border-color:var(--marine)}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--glace);outline-offset:3px}
textarea{min-height:9rem;resize:vertical}
/* Une pastille dans un formulaire reste une pastille (pas un libellé en majuscules). */
form .pastilles label{display:inline-flex;flex-direction:row;font-size:var(--s-1);letter-spacing:0;text-transform:none;color:var(--marine)}
label.case{display:flex;align-items:flex-start;gap:.6rem;font-size:var(--s0);font-weight:400;letter-spacing:0;text-transform:none;color:var(--marine);cursor:pointer}
label.case input{margin-top:.3rem;accent-color:var(--marine);flex:none}
.legal{font-size:var(--s-1);color:var(--texte-doux);max-width:none}
.legal a{color:inherit}
.piege{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.merci{border-left:2px solid var(--glace);padding:.75rem 1rem;background:var(--blanc)}
.erreur-form{color:var(--erreur);font-size:var(--s-1);margin:0;border-left:2px solid var(--glace);padding-left:.75rem;font-weight:600}
.erreur-form:empty{display:none}

/* Pied de page marine, comme le site. */
footer.pied{background:var(--marine);color:var(--gris-pied);padding-block:2.25rem calc(2.25rem + env(safe-area-inset-bottom,0px));font-size:var(--s-1)}
footer.pied p{max-width:none}
footer.pied p + p{margin-top:.5rem}
footer.pied a{color:var(--gris-pied)}

/* Réduire les animations. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* Un seul bouton principal visible : quand un autre .btn est à l'écran (formulaire, fiche, bas de page), ou quand
   le petit panneau de l'en-tête est ouvert, le bouton de l'en-tête prend l'allure secondaire. (commun/marque.js) */
.cta-ailleurs header.bande .bande-in > .btn,.cta-ailleurs header.bande .parler > .btn,header.bande .btn[aria-expanded="true"]{
  background:none;color:var(--marine);padding:0 0 2px;border-radius:0;border-bottom:1px solid var(--glace)}