/* ==========================================================================
   Purelec - socle : jetons, typographie, composants simples
   Code couleur : celui du métier.
   - Bleu nuit #0B2447 : la profondeur, le fond. Aussi l'encre sur fond clair.
   - Courant #FFD21A : le jaune de l'électricité (signalisation, voyants). Ce qui est sous
     tension, ce qui s'actionne. En aplat partout ; en trait fin sur fond sombre seulement
     (sur fond clair, un trait jaune ne se lit pas : --at bascule alors sur le bleu).
   - Porcelaine #EEF1F4 : le blanc froid de l'appareillage. Fonds clairs, texte sur sombre.
   - Cuivre #C47A48 : le conducteur au repos. Les fils et traits qui peuvent s'alimenter.
   - Arc #A8E3EE : la lumière froide d'un contact. Reflets du verre, données, courant faible.
   - Lampe #FFC58F : la lumière chaude d'une pièce éclairée. Schémas uniquement.
   Formes : la coupe à 37 degrés du symbole. Le verre ne sert que sur la couche des commandes.
   ========================================================================== */

/* ---------------------------------------------------------------- Polices
   Titres : Inter Tight. Texte : Inter. Même paire que le site Atlas JJB.
   Inter Tight est chargée depuis Google Fonts tant que assets/fonts/inter-tight.woff2
   est absent ; php outils/polices.php la télécharge pour un hébergement local. */
@font-face{font-family:"Inter";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/inter-400.woff") format("woff")}
@font-face{font-family:"Inter";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/inter-500.woff") format("woff")}
@font-face{font-family:"Inter";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/inter-600.woff") format("woff")}
@font-face{font-family:"Inter Display";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/inter-display-700.woff") format("woff")}
/* Police de repli calée sur les métriques d'Inter : pas de saut de mise en page au chargement. */
@font-face{font-family:"Inter repli";src:local("Arial");size-adjust:107.4%;ascent-override:90.2%;descent-override:22.5%;line-gap-override:0%}

/* ----------------------------------------------------------------- Jetons */
:root{
  /* Fond, courant, porcelaine. Les noms --petrole et --energie datent de la première
     charte (pétrole et jaune) : ils désignent aujourd'hui le bleu nuit et le jaune. */
  --petrole:#0B2447;
  --energie:#FFD21A;
  --epure:#EEF1F4;           /* porcelaine */
  --technique:#566579;

  /* Le métier */
  --cuivre:#C47A48;          /* conducteur au repos */
  --cuivre-clair:#E0A070;
  --arc:#A8E3EE;             /* lumière froide : contact, données */
  --lampe:#FFC58F;           /* lumière chaude d'une pièce */
  --coffret:#D5DAE0;         /* gris clair des coffrets */

  /* Profondeurs et lumières dérivées */
  --nuit:#06142B;            /* le plus profond */
  --nuit-2:#081B38;
  --petrole-2:#123463;
  --lagon:#1B4B8C;           /* bleu éclairé */
  --lagon-clair:#5F9FDD;     /* ce que le verre reflète du bleu */
  --brume:#B4C3D8;           /* texte secondaire sur fond sombre */
  --flamme:#FFE066;          /* jaune éclairé */
  --braise:#EBB800;          /* jaune à l'ombre */
  --ambre:#FFC58F;           /* = lampe (ancien nom conservé) */
  --albatre:#F6F8FA;
  --lin:#DFE4EA;

  --f-texte:"Inter","Inter repli",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-titre:"Inter Tight","Inter Display","Inter","Inter repli",system-ui,-apple-system,"Segoe UI",sans-serif;

  --pente:-37deg;            /* inclinaison des barres du symbole Purelec */
  --r-s:6px; --r-m:10px; --r-l:14px; --r-xl:20px; --r-capsule:999px;
  --gouttiere:clamp(20px,5vw,56px);
  --wrap:1240px;
  --nav-h:60px;

  --aise:cubic-bezier(.22,.8,.2,1);
  --aise-sortie:cubic-bezier(.4,0,.2,1);
  --aise-entree:cubic-bezier(.64,0,.78,0);
  /* Ressorts : le verre est un liquide, il rebondit un peu. */
  --ressort:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1.004 83.8%,1);
  --ressort-doux:linear(0,.006,.024 2.2%,.098 5.2%,.38 11.4%,.6 15.3%,.83 20.2%,.96 25.5%,1.028 31%,1.052 36%,1.05 42%,1.02 51%,1.004 60%,.997 70%,1);

  interpolate-size:allow-keywords;
}
@media (min-width:1000px){:root{--nav-h:68px}}

/* ------------------------------------------------------------------- Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 32px);scroll-behavior:smooth}
html.lisse{scroll-behavior:auto}
/* Lenis (défilement adouci à la molette) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}
body{margin:0;font:400 1.0625rem/1.62 var(--f-texte);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;text-rendering:optimizeLegibility;font-kerning:normal}
h1,h2,h3,p,ul,ol,dl,dd,figure,table{margin:0}
:where(ul,ol)[role="list"]{list-style:none;padding:0}
h1,h2,h3{font-family:var(--f-titre);font-weight:700;text-wrap:balance;font-optical-sizing:auto}
h2{font-size:clamp(2rem,1.1rem + 3vw,3.7rem);line-height:1.02;letter-spacing:-.036em}
h3{font-family:var(--f-texte);font-weight:600;font-size:1.1rem;line-height:1.3;letter-spacing:-.012em}
p{text-wrap:pretty}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
address{font-style:normal}
strong{font-weight:600}
::selection{background:var(--energie);color:var(--petrole)}
:focus-visible{outline:2.5px solid var(--at);outline-offset:3px;border-radius:6px}
[data-ton="energie"] :focus-visible{outline-color:var(--petrole)}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.evitement{position:fixed;left:16px;top:-80px;z-index:300;padding:12px 18px;border-radius:var(--r-s);background:var(--epure);color:var(--petrole);font-weight:600;transition:top .2s}
.evitement:focus{top:16px}

.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--gouttiere));margin-inline:auto;padding-inline:var(--gouttiere)}
.section{padding-block:clamp(80px,10vw,152px)}

/* ------------------------------------------------------------- Ambiances
   La couleur est un lieu : chaque section a la sienne, et la page entière passe de l'une
   à l'autre pendant le défilement (fond, lames, encre, verre). app.js pose data-t (famille)
   et data-amb (nuance) sur <html> ; sans JavaScript, chaque section garde son propre aplat.
   .ilot : un bloc qui garde son ton quel que soit le lieu (cartes, pied de page). */
@property --fond{syntax:"<color>";inherits:true;initial-value:#0B2447}
@property --encre{syntax:"<color>";inherits:true;initial-value:#EEF1F4}
@property --doux{syntax:"<color>";inherits:true;initial-value:#B2BBC7}
@property --trait{syntax:"<color>";inherits:true;initial-value:rgb(238 241 244/.2)}
@property --l1{syntax:"<color>";inherits:true;initial-value:#0D2445}
@property --l2{syntax:"<color>";inherits:true;initial-value:#06152B}
@property --at{syntax:"<color>";inherits:true;initial-value:#FFD21A}
@property --l3{syntax:"<color>";inherits:true;initial-value:#FFD21A}

:is(html,html[data-t="sombre"],html:not(.amb) [data-ton="sombre"],.ilot[data-ton="sombre"]){--fond:#0B2447;--encre:var(--epure);--doux:#B9C5D8;--trait:rgb(238 241 244/.2);--at:var(--energie);--l1:#123463;--l2:#081A36;--l3:#1B4B8C}
:is(html[data-t="nuit"],html:not(.amb) [data-ton="nuit"],.ilot[data-ton="nuit"]){--fond:#06142B;--encre:var(--epure);--doux:#A9B8CF;--trait:rgb(238 241 244/.18);--at:var(--energie);--l1:#0B2248;--l2:#030B1A;--l3:#123463}
:is(html[data-t="clair"],html:not(.amb) [data-ton="clair"],.ilot[data-ton="clair"]){--fond:#EDF0F3;--encre:var(--petrole);--doux:#4A566A;--trait:rgb(11 36 71/.16);--at:var(--petrole);--l1:#E2E6EB;--l2:#F5F7F9;--l3:#D5DBE3}
:is(html[data-t="blanc"],html:not(.amb) [data-ton="blanc"],.ilot[data-ton="blanc"]){--fond:#F6F8FA;--encre:var(--petrole);--doux:#4A566A;--trait:rgb(11 36 71/.14);--at:var(--petrole);--l1:#ECEFF3;--l2:#FFFFFF;--l3:#E0E5EB}
:is(html[data-t="energie"],html:not(.amb) [data-ton="energie"],.ilot[data-ton="energie"]){--fond:#FFD21A;--encre:var(--petrole);--doux:var(--petrole);--trait:rgb(11 36 71/.3);--at:var(--petrole);--l1:#FFDF5C;--l2:#F2BF00;--l3:#FFEB99}
/* Nuances : mêmes familles, autre température. */
html[data-amb="courant"]{--fond:#0A2040;--l1:#133A6E;--l2:#06162F;--l3:var(--energie)}
html[data-amb="abysse"]{--fond:#040E20;--l1:#0A2046;--l2:#020812;--l3:#133A6E}
html[data-amb="lagon"]{--fond:#0D3162;--l1:#154583;--l2:#0A2549;--l3:#3F82CC}
html[data-amb="aube"]{--fond:#EEF0F2;--l1:#E3E7EB;--l2:#F6F8FA;--l3:#F2E7B8;--trait:rgb(11 36 71/.15)}
html[data-amb="sable"]{--fond:#E7EAEE;--l1:#DBE0E6;--l2:#F2F4F7;--l3:#C4D3E6}
html[data-amb="givre"]{--fond:#ECF0F4;--l1:#DBE2EA;--l2:#F8FAFC;--l3:#BACDE6}
html[data-amb="braise"]{--fond:#FFD21A;--l1:#FFDF5C;--l2:#F2BF00;--l3:#FFEFAD}

html{background:var(--fond);transition:--fond 1.1s var(--aise-sortie),--encre .6s var(--aise-sortie),--doux .6s var(--aise-sortie),--trait .6s var(--aise-sortie),--l1 1.4s var(--aise-sortie),--l2 1.4s var(--aise-sortie),--l3 1.4s var(--aise-sortie)}
body{background:transparent;color:var(--encre)}
[data-ton]{--surface:var(--fond)}
html:not(.amb) [data-ton],.ilot[data-ton]{background:var(--fond);color:var(--encre)}

/* Les lames : trois barres du symbole, à l'échelle de l'écran, fixes derrière le contenu.
   Elles changent de couleur et de place avec le lieu, et dérivent avec le défilement.
   C'est aussi ce que le verre réfracte. */
.atmo{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--fond);contain:strict}
html:not(.amb) .atmo{display:none}
.atmo i{position:absolute;top:-12%;height:124%;left:var(--x);width:var(--w);background:var(--c);
  transform:translate3d(calc(var(--derive,0)*var(--k)*1px),0,0) skewX(var(--pente));
  transition:left 1.5s var(--ressort-doux),width 1.5s var(--ressort-doux),opacity .8s;will-change:transform}
.atmo i:nth-child(1){--c:var(--l1);--x:58%;--w:34%;--k:-1}
.atmo i:nth-child(2){--c:var(--l2);--x:-22%;--w:40%;--k:.6}
.atmo i:nth-child(3){--c:var(--l3);--x:96%;--w:5%;--k:-1.7}
html[data-pose="1"] .atmo i:nth-child(1){--x:8%;--w:46%}
html[data-pose="1"] .atmo i:nth-child(2){--x:74%;--w:40%}
html[data-pose="1"] .atmo i:nth-child(3){--x:60%;--w:3.5%}
html[data-pose="2"] .atmo i:nth-child(1){--x:40%;--w:26%}
html[data-pose="2"] .atmo i:nth-child(2){--x:70%;--w:48%}
html[data-pose="2"] .atmo i:nth-child(3){--x:20%;--w:4%}
html[data-pose="3"] .atmo i:nth-child(1){--x:-10%;--w:52%}
html[data-pose="3"] .atmo i:nth-child(2){--x:50%;--w:30%}
html[data-pose="3"] .atmo i:nth-child(3){--x:86%;--w:7%}
@media (max-width:760px){
  .atmo i:nth-child(1){--w:62%}
  .atmo i:nth-child(2){--w:70%}
  .atmo i:nth-child(3){--w:9%}
  html[data-pose] .atmo i:nth-child(1){--w:70%}
  html[data-pose] .atmo i:nth-child(2){--w:64%}
  html[data-pose] .atmo i:nth-child(3){--w:8%}
  /* Sur petit écran, la lame jaune reste dans le coin : jamais derrière le texte. */
  html[data-amb="courant"] .atmo i:nth-child(3){--x:158%;--w:11%}
}
@media (prefers-reduced-motion:reduce){html,.atmo i{transition:none}}

.ico{width:24px;height:24px;flex:none}
.ico--sm{width:20px;height:20px}
.ico--xs{width:14px;height:14px}

.tete{max-width:46rem}
.tete--large{margin-bottom:clamp(40px,5vw,72px)}
.tete__texte{margin-top:22px;font-size:clamp(1.06rem,1rem + .3vw,1.2rem);color:var(--doux);max-width:56ch}

.prose p{max-width:64ch}
.prose p + p{margin-top:1.1em}
.prose a,.faq__reponse a,.lot a,.formulaire__note a,.grille-donnees a,.encart__source a{text-decoration:underline;text-decoration-color:var(--at);text-decoration-thickness:2px;text-underline-offset:.22em;transition:text-decoration-color .2s}
.prose a:hover,.faq__reponse a:hover,.lot a:hover{text-decoration-color:currentColor}
.prose--page{max-width:46rem}
.prose--page h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);margin:2.2em 0 .6em}
.prose--page h2:first-child{margin-top:0}
.prose--page h3{margin:1.6em 0 .4em}

/* La barre inclinée du symbole sert de puce dans quelques listes, jamais de décor. */
.barre{display:inline-block;flex:none;width:18px;height:6px;background:var(--energie);transform:skewX(var(--pente))}

/* --------------------------------------------------------------- Boutons
   Le bouton reprend la barre du symbole : un parallélogramme coupé à 37°.
   --h donne la hauteur, la coupe en découle (h x tan 37°). */
.btn{--h:52px;--c:calc(var(--h)*.75);position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.55em;height:var(--h);padding:0 calc(var(--c) + .75em);
  font-weight:600;font-size:1rem;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;
  clip-path:polygon(var(--c) 0,100% 0,calc(100% - var(--c)) 100%,0 100%);
  transition:transform .5s var(--ressort),background-color .25s,color .25s}
.btn:active{transform:scale(.97);transition-duration:.12s}
.btn--energie{color:var(--petrole);background:var(--energie)}
.btn--energie:hover{background:var(--flamme)}
.btn--compact{--h:42px;font-size:.94rem}
.btn--grand{--h:60px;font-size:1.06rem}
/* Variante ligne : trait fin autour du parallélogramme, fond transparent. */
.btn--ligne{color:inherit;background:rgb(255 255 255/.07);-webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);box-shadow:inset 0 1px 0 rgb(255 255 255/.34),inset 0 12px 18px -14px rgb(255 255 255/.22)}
:is([data-ton="clair"],[data-ton="blanc"]) .btn--ligne{background:rgb(255 255 255/.5);box-shadow:inset 0 1px 0 #fff,inset 0 12px 18px -14px rgb(255 255 255/.8)}
@media (prefers-reduced-transparency:reduce){.btn--ligne{-webkit-backdrop-filter:none;backdrop-filter:none}}
.btn--ligne::before{content:"";position:absolute;inset:0;z-index:-1;background:currentColor;opacity:.55;
  clip-path:polygon(evenodd,var(--c) 0,100% 0,calc(100% - var(--c)) 100%,0 100%,calc(var(--c) + 2px) 1.5px,calc(100% - 2px) 1.5px,calc(100% - var(--c) - 2px) calc(100% - 1.5px),2px calc(100% - 1.5px));transition:opacity .25s}
.btn--ligne:hover{background:rgb(255 255 255/.16)}
.btn--ligne:hover::before{opacity:1}
:is([data-ton="clair"],[data-ton="blanc"]) .btn--ligne:hover{background:rgb(255 255 255/.85)}

/* Lien d'action : un trait jaune sous le texte, qui s'épaissit au survol. Pas de flèche. */
.lien-fleche{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:underline;text-decoration-color:var(--at);text-decoration-thickness:2px;text-underline-offset:.32em;transition:text-decoration-thickness .25s var(--aise),text-underline-offset .25s var(--aise)}
.lien-fleche .ico{display:none}
.lien-fleche:hover{text-decoration-thickness:4px;text-underline-offset:.38em}


/* Puce : lien court (zones). */
.puce{position:relative;display:inline-flex;align-items:center;gap:.45em;min-height:44px;padding:0 1.15em;border-radius:var(--r-s);font-weight:500;font-size:.95rem;text-decoration:none;box-shadow:inset 0 0 0 1px var(--trait);transition:background-color .25s,color .25s}
[data-ton="sombre"] .puce:hover{background:var(--epure);color:var(--petrole)}
[data-ton="clair"] .puce:hover,[data-ton="blanc"] .puce:hover{background:var(--petrole);color:var(--epure)}
.puce--plus{font-weight:600}


@media (max-width:420px){
  .btn:not(.btn--fixe){height:auto;min-height:var(--h);padding-block:8px;white-space:normal;text-align:center;line-height:1.15;max-width:100%}
}
/* Verre réservé à une taille d'écran : neutre ailleurs. */
@media (max-width:999px){
  html[data-t] .verre.verre--bureau:not([data-verre]){background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;color:inherit;--encre:inherit;--doux:inherit;--trait:inherit;isolation:auto}
  html[data-t] .verre.verre--bureau:not([data-verre])::before,html[data-t] .verre.verre--bureau:not([data-verre])::after{display:none}
}
@media (min-width:1000px){
  html[data-t] .verre.verre--mobile:not([data-verre]){background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;color:inherit;--encre:inherit;--doux:inherit;--trait:inherit;isolation:auto;position:static}
  html[data-t] .verre.verre--mobile:not([data-verre])::before,html[data-t] .verre.verre--mobile:not([data-verre])::after{display:none}
}