/* TAO Labs — feuille unique. Palette tirée de l'éclipse : disque noir, lueur, anneau de
   braise ; texte en Atkinson Hyperlegible Next, dessinée pour les personnes malvoyantes. */
@font-face{font-family:"Atkinson Hyperlegible Next";src:url("/fonts/atkinson-hyperlegible-next-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url("/fonts/atkinson-hyperlegible-next-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url("/fonts/atkinson-hyperlegible-next-800-normal.woff2") format("woff2");font-weight:800;font-display:swap}

:root{
  --papier:#fff;
  --nuit:#120502;          /* encre, et le fond des bandes sombres */
  --nuit-2:#241009;        /* surface sur la nuit */
  --encre-2:#5d4a44;       /* texte secondaire, 8,3:1 sur blanc */
  --braise:#ca2a02;        /* l'anneau : 5,5:1 sur blanc */
  --braise-claire:#ff6a3d; /* la braise sur la nuit : 7:1 */
  --cendre:#f6f1ee;
  --sur-nuit-2:#d8c9c3;    /* texte secondaire sur la nuit */
  --or:#e0ac48;
  --or-vif:#ffe2a3;
  --f:"Atkinson Hyperlegible Next",Verdana,sans-serif;
  --ease:cubic-bezier(.23,1,.32,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:1rem}
body{margin:0;background:var(--papier);color:var(--nuit);font:400 1.25rem/1.55 var(--f)}
img,svg{display:block;max-width:100%}
a{color:var(--braise);text-decoration-thickness:.09em;text-underline-offset:.2em}
:focus-visible{outline:3px solid var(--nuit);outline-offset:3px;box-shadow:0 0 0 6px #fff}
::selection{background:var(--braise);color:#fff}
p,ul,ol,dl{margin:0 0 1rem}
h1,h2,h3{text-wrap:balance}
h1{font:800 2.5rem/1.05 var(--f);letter-spacing:-.02em;margin:0 0 1.25rem}
h2{font:800 2rem/1.08 var(--f);letter-spacing:-.015em;margin:0 0 1.25rem}
h3{font:700 1.35rem/1.25 var(--f);margin:1.75rem 0 .5rem}
.cadre{max-width:76rem;margin:0 auto;padding-left:1.25rem;padding-right:1.25rem}
.etroit{max-width:46rem}
.evitement{position:absolute;left:1rem;top:-5rem;background:#fff;color:var(--nuit);padding:.75rem 1rem;z-index:10;font-weight:700}
.evitement:focus{top:1rem}
.visuel-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.secondaire{color:var(--encre-2)}
.petit{font-size:1.05rem}

/* en-tête : une bande de nuit sur toutes les pages */
.entete{background:var(--nuit);color:#fff}
.entete .cadre{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.9rem;padding-bottom:.9rem}
.marque{display:inline-flex;align-items:center;gap:.45em;font-size:1.6rem;line-height:1;color:#fff;text-decoration:none}
.marque svg{width:1.2em;height:1.2em}
.marque b{font-weight:800}
.outils-entete{display:flex;align-items:center;gap:.7rem}
.langue{display:inline-flex;align-items:center;justify-content:center;min-width:2.75rem;min-height:2.75rem;color:#fff;font-size:1rem;font-weight:700}
.entete nav{display:none;gap:1.75rem;font-size:1.1rem;font-weight:700}
.entete nav a{color:#fff;text-decoration:none;border-bottom:3px solid transparent;padding:.25rem 0}
.entete nav a[aria-current="page"]{border-color:var(--braise-claire)}
.appel-entete{display:inline-flex;align-items:center;min-height:2.75rem;padding:.4rem 1.1rem;border-radius:999px;box-shadow:inset 0 0 0 2px #fff;color:#fff;font-weight:700;font-size:1.05rem;text-decoration:none}

/* boutons */
.actions{display:grid;gap:.85rem;margin:0 0 1rem}
.btn{display:flex;align-items:center;justify-content:center;min-height:4rem;padding:.9rem 1.5rem;border-radius:999px;font:700 1.25rem/1.2 var(--f);text-decoration:none;text-align:center;transition:transform .16s var(--ease),background-color .2s var(--ease)}
.btn:active{transform:scale(.97)}
.btn-plein{background:var(--braise);color:#fff}
.btn-trait{box-shadow:inset 0 0 0 3px var(--nuit);color:var(--nuit)}
.nuit .btn-trait{box-shadow:inset 0 0 0 3px #fff;color:#fff}

/* bandes */
.bande{padding:3.5rem 0}
.nuit{background:var(--nuit);color:#fff}
.nuit a:not(.btn){color:var(--braise-claire)}
.nuit .secondaire{color:var(--sur-nuit-2)}
.cendre{background:var(--cendre)}
.suite{font-weight:700}

/* Accueil : couronne photographique, lumière CSS, raccord vectoriel. */
.hero{position:relative;isolation:isolate;padding:2.5rem 0 0;overflow:hidden;background:radial-gradient(ellipse at 50% 95%,#441506 0,transparent 58%),var(--nuit)}
.hero .cadre{position:relative;z-index:2}
.hero-intro{max-width:65rem;margin:0 auto;text-align:center}
.hero h1{font-size:clamp(2.4rem,5.1vw,4.6rem);line-height:1.05;letter-spacing:-.035em;max-width:24ch;margin:0 auto 1.25rem}
.reperes-hero{color:var(--or-vif);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;margin:0 0 1.2rem}
.reperes-hero span{padding:0 .45rem;color:var(--braise-claire)}
.chapo{font-size:1.35rem;max-width:30ch}
.nuit .chapo{color:var(--sur-nuit-2)}
.hero .chapo{font-size:clamp(1.1rem,1.7vw,1.35rem);max-width:54ch;margin:0 auto 1.3rem}
.tarif{margin:0 0 1.15rem}
.tarif b{display:block;font-size:1.65rem;line-height:1.25;font-weight:800;letter-spacing:-.01em;color:var(--or-vif)}
.tarif span{display:block;margin-top:.25rem;color:var(--sur-nuit-2);font-size:1rem}
.hero .actions{max-width:36rem;margin:0 auto .9rem;gap:.7rem}
.hero .btn{min-height:3.3rem;font-size:1.05rem;padding:.8rem 1.3rem}
.hero .btn-plein{background:linear-gradient(115deg,#bc2903,#ce3805 60%,#b42602);box-shadow:inset 0 1px 0 #ffad7b70,0 6px 26px #cb33032b}
.hero .btn-trait{box-shadow:inset 0 0 0 1px #d8c9c388;background:#12050299}
.hero .btn:hover{transform:translateY(-2px)}
.dispo{font-size:.85rem;margin:0;color:var(--sur-nuit-2)}
.scene-solaire{position:relative;height:15rem;pointer-events:none;margin-top:1rem}
.soleil{position:absolute;width:160vw;max-width:70rem;left:50%;top:-5.8rem;transform:translateX(-50%)}
.soleil-image{width:100%;height:auto;mask-image:radial-gradient(circle,#000 43%,transparent 70%)}
.souffle-solaire{position:absolute;inset:0 -20% -70%;background:radial-gradient(ellipse at 50% 70%,#ef781838,transparent 66%);opacity:.7}
.raccord-solaire{position:absolute;z-index:3;bottom:-1px;left:0;width:100%;height:clamp(5.2rem,14.6vw,13.2rem);overflow:visible;pointer-events:none}
.raccord-fond{fill:var(--cendre)}
.raccord-halo,.raccord-braise,.raccord-fil{fill:none;stroke:url(#lumiere-arc);vector-effect:non-scaling-stroke}
.raccord-halo{stroke-width:16;opacity:.5;filter:blur(12px)}
.raccord-braise{stroke-width:5;opacity:.6;filter:blur(3px)}
.raccord-fil{stroke-width:1.5}
@media (min-width:45rem){
  .hero{padding-top:3rem}
  .hero .actions{grid-template-columns:1fr 1fr}
  .scene-solaire{height:23rem;margin-top:.6rem}
  .soleil{width:70rem;top:-12rem}
}
@media (prefers-reduced-motion:no-preference){
  .souffle-solaire{animation:halo-solaire 12s ease-in-out infinite}
}
@keyframes halo-solaire{0%,100%{opacity:.45;transform:scale(.98)}50%{opacity:.85;transform:scale(1.03)}}

/* Le halo s'achève dans le papier ; la lecture reste sur un fond clair. */
.constat-solaire{position:relative;padding-top:2.7rem;padding-bottom:4rem;overflow:hidden;background:radial-gradient(ellipse at 75% 45%,#e9bc8033,transparent 60%),var(--cendre)}
.constat-solaire h2{font-size:clamp(2rem,3.3vw,2.9rem);letter-spacing:-.03em;margin:0 0 1.5rem;text-align:left}
.constat-solaire .bilan{gap:1.5rem}
.constat-texte{position:relative;order:-1;font-size:1.08rem;z-index:1}
.constat-visuel{position:relative;min-height:22rem;display:flex;align-items:center;isolation:isolate}
.vue-geneve{position:absolute;inset:-1rem -3rem -2rem 3rem;pointer-events:none;mask-image:linear-gradient(to right,transparent,#000 28%),linear-gradient(to bottom,transparent,#000 12%,#000 75%,transparent);mask-composite:intersect}
.vue-geneve img{width:100%;height:100%;object-fit:cover;object-position:25% center}
.constat-solaire .anneau{z-index:1;flex:none;width:min(15rem,66vw);margin:0 0 0 -.6rem;background:radial-gradient(circle,var(--cendre) 57%,#f6f1eeb3 64%,transparent 71%);border-radius:50%}
.constat-solaire .anneau b{font-size:3.7rem;letter-spacing:-.05em}
.constat-solaire .anneau span{font-size:.93rem;color:var(--nuit);line-height:1.4}
.constat-solaire .source{max-width:80ch;margin:2.5rem auto 0;padding-top:1.25rem;border-top:1px solid #dbc9bc;font-size:.86rem;line-height:1.6}
@media(min-width:60rem){
  .constat-solaire .bilan{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:2.5rem}
  .constat-texte{grid-column:1;grid-row:1}
  .constat-visuel{grid-column:2;grid-row:1;min-height:32rem}
  .vue-geneve{inset:-3rem -9vw -3rem 5rem}
  .vue-geneve img{object-position:52% center}
  .constat-solaire .anneau{width:18rem;margin-left:-1rem}
  .constat-solaire .anneau b{font-size:4.5rem}
  .constat-solaire .anneau span{font-size:1rem}
}

/* accueil : le constat */
.bilan{display:grid;gap:2rem;align-items:center}
.anneau{position:relative;width:min(17rem,78vw);aspect-ratio:1;margin:0 auto}
.anneau svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.anneau p{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.15}
.anneau b{font-size:3.4rem;font-weight:800;letter-spacing:-.02em}
.anneau span{font-size:1.05rem;color:var(--encre-2)}
.legende{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:1.05rem;color:var(--encre-2)}
.legende i{display:inline-block;width:1.2rem;height:.55rem;border-radius:.3rem;margin-right:.45rem;vertical-align:middle}
.i-ombre{background:linear-gradient(90deg,#ef8a37,#c43b07)}.i-lumiere{background:#e9e1d7;box-shadow:inset 0 0 0 1px #b9a99a}
.source{font-size:1.05rem;color:var(--encre-2);margin-top:2rem;max-width:48rem}

/* étapes numérotées dans un petit anneau */
.etapes{list-style:none;padding:0;margin:0 0 1.5rem;display:grid;gap:1.5rem;counter-reset:etape}
.etapes li{counter-increment:etape;display:grid;grid-template-columns:3rem 1fr;gap:1rem;align-items:start}
.etapes li::before{content:counter(etape);display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;background:var(--nuit);box-shadow:inset 0 0 0 3px var(--braise);color:#fff;font-weight:800;font-size:1.3rem}
.etapes b{display:block;font-size:1.3rem}
.etapes.etapes-verticales{grid-template-columns:1fr;gap:2rem}

/* listes à puces-anneaux */
.anneaux{list-style:none;padding:0;display:grid;gap:.6rem}
.anneaux li{position:relative;padding-left:1.9rem}
.anneaux li::before{content:"";position:absolute;left:0;top:.35em;width:.9rem;height:.9rem;border-radius:50%;background:var(--nuit);box-shadow:inset 0 0 0 2.5px var(--braise)}
.nuit .anneaux li::before{background:#000;box-shadow:inset 0 0 0 2.5px var(--braise-claire)}

/* formules */
.formules{display:grid;gap:1.5rem;margin:0 0 2rem}
.formule{border-top:5px solid var(--nuit);padding-top:1.25rem}
.formule.vive{border-color:var(--braise)}
.formule h3{margin:0 0 .25rem;font-size:1.6rem;font-weight:800}
.prix{font-size:2.2rem;font-weight:800;line-height:1.1;margin:0 0 .25rem}
.prix small{font-size:1.1rem;font-weight:400}

/* tableau comparatif */
.defile{overflow-x:auto;margin:0 0 2rem}
table{width:100%;border-collapse:collapse;font-size:1.05rem;min-width:30rem}
th,td{text-align:left;padding:.8rem .6rem;border-bottom:2px solid #e6dcd7;vertical-align:top}
thead th{border-bottom:4px solid var(--nuit);font-size:1.15rem}
tbody th{font-weight:400}

/* questions */
.faq details{border-bottom:2px solid #e6dcd7}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;padding:1.1rem 0;font-weight:700;font-size:1.3rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:2rem;height:2rem;border-radius:50%;box-shadow:inset 0 0 0 2px var(--nuit);display:flex;align-items:center;justify-content:center;font-weight:800}
.faq details[open] summary::after{content:"−";background:var(--nuit);color:#fff}
.faq details>div{padding:0 0 1.25rem;max-width:44rem}

/* l'équipe */
.equipe{display:grid;gap:1.5rem;align-items:start}
.portrait{display:block;aspect-ratio:4/5;width:100%;max-width:18rem;overflow:hidden;border-radius:.75rem;background:#262322;box-shadow:0 12px 32px #31140718}
.portrait img{display:block;width:100%;height:100%;object-fit:cover}
blockquote{margin:0 0 1rem;font-size:1.35rem;line-height:1.5}
.signature{font-weight:700}
.portrait-legende{margin:0;max-width:18rem;width:100%}
.portrait-legende .signature{margin:.9rem 0 0;font-size:1.1rem;text-align:center}

/* contact */
.coordonnees{display:grid;gap:1.25rem;margin:0 0 2rem}
.coordonnees dt{font-weight:700}
.coordonnees dd{margin:0;font-size:1.35rem}

/* Accueil : le même trait lumineux relie les trois changements de matière. */
.etapes-solaires{background:linear-gradient(var(--cendre),#fffcf9);padding-top:1.5rem}
.etapes-solaires h2{max-width:27ch;margin:0 auto 2.5rem;text-align:center;letter-spacing:-.025em}
.etapes-solaires .etapes li{grid-template-columns:3.5rem 1fr;gap:1.1rem}
.etapes-solaires .etapes li::before{width:3.5rem;height:3.5rem;background:linear-gradient(145deg,#fff,#f4e2ce);color:#a42f0a;box-shadow:inset 0 0 0 1px #b64b1744;font-size:1.5rem}
.etapes-solaires .etapes li div{font-size:1.1rem}
.etapes-solaires>.cadre>p{font-size:1.1rem;text-align:center;max-width:55ch;margin:1.2rem auto}
.contenu-solaire{background:radial-gradient(ellipse at 15% 65%,#f2d8b655,transparent 55%),linear-gradient(#fffcf9,var(--cendre));padding-bottom:8rem}
.contenu-solaire h2{font-size:clamp(1.8rem,2.9vw,2.6rem);letter-spacing:-.025em;max-width:20ch}
.contenu-solaire li,.contenu-solaire .secondaire{font-size:1.1rem}
.tarifs-solaires,.equipe-solaire,.contact-solaire{position:relative;padding-top:3rem}
.tarifs-solaires>.cadre,.equipe-solaire>.cadre,.contact-solaire>.cadre{position:relative}
.onde-section{position:absolute;top:clamp(-7rem,-9vw,-3.5rem);left:0;width:100%;height:clamp(4rem,11vw,9rem);pointer-events:none;overflow:visible}
.onde-fond{fill:var(--nuit)}
.equipe-solaire .onde-fond{fill:var(--cendre)}
.tarifs-solaires{background:radial-gradient(ellipse at 50% 50%,#36130666,transparent 70%),var(--nuit);padding-bottom:9rem}
.tarifs-solaires h2{max-width:25ch;margin:0 auto 2.5rem;text-align:center;letter-spacing:-.025em}
.tarifs-solaires .formules{gap:1.5rem}
.tarifs-solaires .formule{position:relative;padding:2rem;border:1px solid #875431;border-radius:.85rem;background:linear-gradient(150deg,#ffb16d0a,transparent 60%);box-shadow:inset 0 1px 0 #ffdeb211}
.tarifs-solaires .formule.vive{border-color:#c2824d;background:radial-gradient(ellipse at 100% 100%,#ca59041c,transparent 65%),linear-gradient(150deg,#ffb16d0a,transparent 60%)}
.tarifs-solaires .formule h3{margin:0 0 1rem}
.tarifs-solaires .prix{font-size:2.5rem;color:var(--or-vif)}
.tarifs-solaires .prix small{color:var(--sur-nuit-2)}
.tarifs-solaires .formule>p:not(.prix){font-size:1.05rem}
.tarifs-solaires>.cadre>p{font-size:1rem;max-width:85ch;margin:1rem auto}
.equipe-solaire{padding-bottom:4rem}
.equipe-solaire h2{margin:0 0 2rem;letter-spacing:-.025em}
.equipe-solaire .portrait{border-radius:50% 50% .75rem .75rem}
.equipe-solaire blockquote{font-size:1.2rem}
.equipe-solaire .secondaire{font-size:1.05rem}
.equipe-solaire+[aria-labelledby="questions"]{padding-bottom:9rem;background:linear-gradient(var(--cendre),#fff)}
.contact-solaire{isolation:isolate;min-height:29rem;display:flex;align-items:center;padding-top:5rem;padding-bottom:5rem;background:var(--nuit)}
.vue-vallee{position:absolute;inset:0;opacity:.85;pointer-events:none;overflow:hidden;mask-image:linear-gradient(to bottom,transparent 0%,transparent 12%,#000 55%)}
.vue-vallee img{width:100%;height:100%;object-fit:cover;object-position:70% center}
.contact-solaire::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#120502ed,#120502a8 48%,#12050230),linear-gradient(var(--nuit),transparent 28%,transparent 65%,var(--nuit))}
.contact-solaire>.cadre{width:100%;z-index:2}
.contact-solaire .onde-section{z-index:3}
.contact-solaire h2{letter-spacing:-.03em}
.contact-solaire .chapo{max-width:50ch;font-size:1.2rem}
.contact-solaire .btn{font-size:1.1rem;min-height:3.4rem}

/* textes longs : légal, conditions */
.texte{max-width:46rem}
.texte h2{font-size:1.6rem;margin-top:2.5rem}
.texte section h2{font-size:1.35rem;margin:2rem 0 .5rem}
.texte p,.texte li{font-size:1.15rem}

/* pied de page */
.pied{background:var(--nuit);color:var(--sur-nuit-2);padding:3rem 0 6rem;font-size:1.05rem}
.pied .cadre{display:grid;gap:1.5rem}
.pied b{color:#fff}
.pied a{color:#fff}
.pied ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}

/* le bouton d'appel toujours à portée du pouce */
.appel-fixe{position:fixed;left:.75rem;right:.75rem;bottom:.75rem;z-index:5;min-height:3.5rem;font-size:1.15rem;box-shadow:0 6px 24px rgba(18,5,2,.35)}

@media (hover:hover) and (pointer:fine){
  .btn-plein:hover{background:#a52202}
  .entete nav a:hover{border-color:#fff}
}
@media (min-width:60rem){
  body{font-size:1.375rem}
  .entete nav{display:flex}
  .appel-fixe{display:none}
  .pied{padding-bottom:3rem}
  .pied .cadre{grid-template-columns:2fr 3fr}
  h1{font-size:3.6rem}
  h2{font-size:3rem}
  .bande{padding:5rem 0}
  .bilan{grid-template-columns:5fr 6fr;gap:4rem}
  .anneau{width:100%;max-width:24rem}
  .anneau b{font-size:4.6rem}
  .actions.ligne{grid-template-columns:auto auto;justify-content:start}
  .etapes{grid-template-columns:repeat(3,1fr);gap:2rem}
  .formules{grid-template-columns:1fr 1fr;gap:3rem}
  .equipe{grid-template-columns:18rem 1fr;gap:3rem}
  .deux{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
}

/* titre des pages intérieures */
.bande-titre{padding:2.5rem 0 2.75rem}
.bande-titre .chapo{margin:0}
@media (min-width:60rem){.bande-titre{padding:4rem 0}}

/* la barre d'appel n'apparaît qu'une fois le premier écran passé (sans script) */
@supports (animation-timeline:scroll()){
  .appel-fixe{animation:apparait linear both;animation-timeline:scroll(root);animation-range:60vh 85vh}
  @media (prefers-reduced-motion:reduce){.appel-fixe{animation-name:apparait-sans-mouvement}}
}
@keyframes apparait{from{visibility:hidden;opacity:0;transform:translateY(160%)}to{visibility:visible;opacity:1;transform:none}}
@keyframes apparait-sans-mouvement{from{visibility:hidden;opacity:0}to{visibility:visible;opacity:1}}