/* Page SOLAR — palette « ciel » propre à la page (body.page-solar), posée sur le système de site.css.
   Contrastes mesurés (WCAG AA) : gris #545862 sur papier 6,4:1, sur ciel 5,5:1, sur horizon 5,4:1 ;
   braise #A5421A sur papier 5,6:1 ; brume #B7BCC8 sur nuit 9,8:1 ; or #F0B86A sur nuit 10,5:1.
   L'orange de l'icône (#EF6B26) ne sert qu'aux formes, jamais au texte. */
.page-solar{
  --s-papier:#F7F3EC; --s-encre:#16181D; --s-gris:#545862; --s-filet:#E3DACB;
  --s-braise:#A5421A; --s-soleil:#EF6B26; --s-horizon:#F2E7DA;
  --s-nuit:#0C1220; --s-nuit-2:#17213A; --s-lune:#EEE9DF; --s-brume:#B7BCC8; --s-or:#F0B86A;
  background:var(--s-papier); color:var(--s-encre);
}
.page-solar .entete{background:color-mix(in srgb,var(--s-papier) 84%,transparent);border-bottom-color:rgba(22,24,29,.08)}
.page-solar .langues{border-left-color:rgba(22,24,29,.14)}
.page-solar :focus-visible{outline-color:var(--s-encre);box-shadow:0 0 0 5px var(--s-papier)}
.page-solar .etiquette{color:var(--s-braise)}
.page-solar .titre-geant em,.page-solar h2 em{color:var(--s-braise)}
.page-solar .chapeau{color:var(--s-gris)}
.page-solar .bouton{color:var(--s-encre)}
.page-solar .bouton.plein{background:var(--s-encre);border-color:var(--s-encre);color:#fff}
.page-solar .bouton.plein:hover{background:var(--s-braise);border-color:var(--s-braise)}
.page-solar .actions{align-items:center;column-gap:var(--e4)}
.page-solar .pied .marque{color:var(--s-encre)}
.page-solar h1,.page-solar h2,.page-solar h3{text-wrap:balance}
.solar-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.solar-mention{font-size:.875rem;line-height:1.5;color:var(--s-gris);margin:var(--e3) 0 0}

/* ——— Cadre de téléphone autour des captures (rayons calculés pour 1320 × 2868) ——— */
.solar-tel{padding:3.2%;background:#0D0F14;border-radius:15% / 7.15%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 44px 70px -36px rgba(74,46,26,.55),0 12px 24px -14px rgba(22,24,29,.4);transition:transform .8s var(--ease)}
.solar-tel img{width:100%;border-radius:12.6% / 5.8%}
.solar-tel:hover{transform:translateY(-6px)}
.solar-capture{margin:0 auto;width:100%;max-width:19rem}
.solar-capture figcaption{margin-top:var(--e3);padding-top:var(--e2);border-top:1px solid var(--s-filet);font-size:.875rem;line-height:1.5;color:var(--s-gris)}
.solar-tete{max-width:46rem;margin-bottom:var(--e5)}
.solar-tete h2{margin-bottom:var(--e3)}

/* ——— 1. Ouverture : un ciel du soir ——— */
.solar-ouverture{position:relative;overflow:hidden;padding:var(--e3) 0 var(--e6);
  background:radial-gradient(44rem 22rem at 74% 62%,rgba(246,190,142,.55),transparent 70%),linear-gradient(180deg,#DCE4EA 0%,#ECEBE7 42%,#F6E3D0 80%,var(--s-papier) 100%)}
.solar-ouverture>.cadre{display:grid;gap:var(--e5);grid-template-columns:1fr;align-items:center}
.page-solar .ariane{margin:0 0 var(--e4);font-size:.9375rem;font-weight:550}
.page-solar .ariane a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--s-gris)}
.page-solar .ariane a:hover{color:var(--s-encre)}
.solar-signature{display:flex;align-items:center;gap:var(--e2);margin:0 0 var(--e4)}
.solar-signature p{margin:0;font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;font-weight:650}
.solar-signature strong{font-weight:750;letter-spacing:.22em}
.solar-icone{width:3.5rem;height:3.5rem;border-radius:22.5%;box-shadow:0 12px 26px -12px rgba(239,107,38,.7),0 2px 6px -2px rgba(22,24,29,.22)}
.solar-ouverture .titre-geant{font-size:clamp(var(--t4),6.4vw,var(--t6))}
.solar-ouverture .chapeau{margin-top:var(--e4);max-width:31rem}
.solar-vitrine{width:100%;max-width:46rem;margin-inline:auto}
.solar-trois{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.75rem,2.4vw,2.125rem);align-items:start}
.solar-trois figure{margin:0}
/* le Soleil descend d'un écran à l'autre : après-midi, heure dorée, après le coucher */
.solar-trois figure:nth-child(2){margin-top:clamp(1.3rem,4vw,3.4375rem)}
.solar-trois figure:nth-child(3){margin-top:clamp(3.4rem,10vw,8.5rem)}
.solar-trois figcaption{display:flex;flex-direction:column;padding:var(--e2) .15rem 0;font-size:.875rem;line-height:1.35;color:var(--s-gris)}
.solar-heure{font-family:var(--serif);font-size:var(--t1);line-height:1.2;color:var(--s-encre);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em}
.solar-note{margin:var(--e4) 0 0;font-size:.875rem;color:var(--s-gris)}

/* ——— 2. L'idée ——— */
.solar-idee{padding-bottom:var(--e4)}
.solar-horizon{position:relative;height:1px;background:var(--s-filet);margin:0 0 var(--e4)}
.solar-horizon::before{content:"";position:absolute;left:0;bottom:0;width:2.75rem;height:1.375rem;border-radius:2.75rem 2.75rem 0 0;background:var(--s-soleil)}
.solar-idee-grille{display:grid;gap:var(--e3);grid-template-columns:1fr}
.solar-phrase{font-size:clamp(var(--t3),5.2vw,var(--t6));line-height:1;max-width:16ch;margin:0 0 var(--e3)}
.solar-idee-textes{display:grid;gap:var(--e3)}
.solar-idee-textes p{margin:0;color:var(--s-gris);max-width:30rem}

/* ——— 3. Quatre façons de lire le temps ——— */
.solar-horloges-grille{display:grid;gap:var(--e5);grid-template-columns:1fr;align-items:center}
.solar-quatre{list-style:none;margin:0;padding:0;display:grid;gap:var(--e4) var(--e5);grid-template-columns:1fr}
.solar-quatre li{display:grid;grid-template-columns:2.4rem 1fr;column-gap:var(--e2);align-content:start;border-top:1.5px solid var(--s-encre);padding-top:var(--e3)}
.solar-quatre li>*{grid-column:2}
.solar-quatre .solar-num{grid-column:1;grid-row:1 / span 3;font-family:var(--serif);font-style:italic;font-size:var(--t1);line-height:1.15;color:var(--s-braise)}
.solar-quatre h3{margin:0 0 .15rem}
.solar-accroche{font-family:var(--serif);font-style:italic;font-size:1.1875rem;line-height:1.35;margin:0 0 var(--e1);font-variation-settings:"SOFT" 100,"WONK" 1}
.solar-quatre li p:last-child{margin:0;color:var(--s-gris)}
.solar-citation{margin:var(--e5) 0 0;padding-left:var(--e3);border-left:3px solid var(--s-soleil);font-family:var(--serif);font-size:clamp(var(--t1),2.4vw,var(--t2));line-height:1.2;letter-spacing:-.015em;max-width:26ch}

/* ——— 4. Le jour, dans l'ordre ——— */
.solar-jour{background:linear-gradient(180deg,var(--s-papier) 0%,var(--s-horizon) 22%,var(--s-horizon) 100%)}
.solar-jour-grille{display:grid;gap:var(--e5);grid-template-columns:1fr;align-items:center}
.solar-releve{background:var(--s-papier);border-radius:1.25rem;padding:clamp(1.3125rem,3.6vw,3.4375rem);box-shadow:0 34px 60px -44px rgba(74,46,26,.45)}
.solar-releve-lieu{margin:0 0 var(--e3);font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;font-weight:650;color:var(--s-gris)}
.solar-arc{display:block;width:100%;height:auto;overflow:visible}
.solar-arc .sol{stroke:var(--s-filet);stroke-width:1}
.solar-arc .trajet{fill:none;stroke:#E39A57;stroke-width:2.5;stroke-dasharray:9 8;stroke-linecap:round}
.solar-arc .halo{fill:rgba(239,107,38,.16)}
.solar-arc .astre{fill:var(--s-soleil)}
.solar-arc-legende{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--e2);margin:var(--e1) 0 var(--e4);font-size:.875rem;line-height:1.3;color:var(--s-gris)}
.solar-arc-legende span{display:flex;flex-direction:column}
.solar-arc-legende .milieu{text-align:center}
.solar-arc-legende .fin{text-align:right}
.solar-arc-legende strong{font-family:var(--serif);font-weight:450;font-size:var(--t1);color:var(--s-encre);font-variant-numeric:lining-nums tabular-nums}
.solar-heures{list-style:none;margin:0;padding:0;border-top:1px solid var(--s-filet)}
.solar-heures li{position:relative;display:grid;grid-template-columns:6.5rem 1fr;gap:var(--e2);align-items:baseline;padding:var(--e2) 0 var(--e2) 1.75rem;border-bottom:1px solid var(--s-filet)}
:lang(fr) .solar-heures li{grid-template-columns:4.6rem 1fr}
.solar-heures li::before{content:"";position:absolute;left:0;top:calc(var(--e2) + .75rem);width:.8125rem;height:.8125rem;margin-top:-.40625rem;border-radius:50%}
/* la couleur du ciel à chaque étape : nuit, aube nautique, heure bleue, heure dorée, lever, jour */
.solar-heures li:nth-child(1)::before{background:#1E2A4A}
.solar-heures li:nth-child(2)::before{background:#34507E}
.solar-heures li:nth-child(3)::before{background:#5D86BC}
.solar-heures li:nth-child(4)::before{background:#E9A85C}
.solar-heures li:nth-child(5)::before{background:var(--s-soleil);box-shadow:0 0 0 5px rgba(239,107,38,.18)}
.solar-heures li:nth-child(6)::before{background:#F4D6A6}
.solar-heures time{font-family:var(--serif);font-size:var(--t1);line-height:1.2;font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em}
.solar-heures li:nth-child(5) time{color:var(--s-braise)}
.solar-heures li:nth-child(5) span{font-weight:650}
.solar-atouts{list-style:none;margin:var(--e6) 0 0;padding:0;display:grid;gap:var(--e4);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.solar-atouts li{border-top:1.5px solid var(--s-encre);padding-top:var(--e3)}
.solar-atouts p{margin:0;color:var(--s-gris)}

/* ——— 5. Après le coucher : la Lune, l'Apple Watch ——— */
.solar-nuit{padding:var(--e6) 0;background:linear-gradient(180deg,var(--s-nuit) 0%,var(--s-nuit-2) 100%);color:var(--s-lune)}
.solar-nuit :focus-visible{outline-color:var(--s-or);box-shadow:0 0 0 5px var(--s-nuit)}
.solar-nuit .etiquette{color:var(--s-or)}
.solar-nuit h2 em{color:var(--s-or)}
.solar-nuit .chapeau,.solar-nuit .solar-mention,.solar-nuit p{color:var(--s-brume)}
.solar-nuit .chapeau{max-width:32rem}
.solar-nuit h3{color:var(--s-lune)}
.solar-nuit-grille{display:grid;gap:var(--e5);grid-template-columns:1fr;align-items:center}
.solar-nuit .solar-capture figcaption{color:var(--s-brume);border-top-color:rgba(255,255,255,.14)}
.solar-nuit .solar-tel{background:#05070C;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 44px 80px -36px rgba(0,0,0,.85)}
.solar-crepuscule{max-width:30rem;margin:var(--e4) 0 0;padding-top:var(--e3);border-top:1px solid rgba(255,255,255,.14)}
.solar-montres-bloc{display:grid;gap:var(--e4);grid-template-columns:1fr;align-items:center;margin-top:var(--e6);padding-top:var(--e5);border-top:1px solid rgba(255,255,255,.14)}
.solar-montres-texte p{max-width:28rem}
.solar-montres{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8125rem,2.6vw,2.125rem);max-width:38rem}
.solar-montre{margin:0}
.solar-boitier{display:block;padding:9%;border-radius:30% / 26%;background:#1F1F1F;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 30px 50px -28px rgba(0,0,0,.9)}
.solar-montre.noir .solar-boitier{background:#000}
.solar-montre img{width:100%;aspect-ratio:400 / 484;object-fit:cover}
.solar-montre figcaption{margin-top:var(--e2);font-size:.875rem;text-align:center;color:var(--s-brume)}

/* ——— 6. Une année, et comprendre ——— */
.solar-annee-grille{display:grid;gap:var(--e5);grid-template-columns:1fr;align-items:center}
.solar-annee h2 em{display:block}
.solar-comprendre{margin-top:var(--e5)}
.solar-comprendre>p{color:var(--s-gris);max-width:32rem}
.solar-lecons{list-style:none;margin:var(--e4) 0 var(--e3);padding:0;border-top:1px solid var(--s-filet)}
.solar-lecons a{display:grid;grid-template-columns:2.4rem 1fr auto;gap:var(--e2);align-items:baseline;min-height:44px;padding:var(--e3) 0;border-bottom:1px solid var(--s-filet);text-decoration:none}
.solar-lecons .n{font-family:var(--serif);font-style:italic;font-size:var(--t0);color:var(--s-braise)}
.solar-lecons .sujet{display:block;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;font-weight:650;color:var(--s-gris)}
.solar-lecons .phrase{display:block;font-family:var(--serif);font-size:var(--t1);line-height:1.2;letter-spacing:-.01em}
.solar-lecons .fleche{transition:transform .35s var(--ease)}
.solar-lecons a:hover .fleche{transform:translate(3px,-3px)}
.solar-lecons a:hover .phrase{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}

/* ——— 7. Fin : le Soleil se couche sur le pied de page ——— */
.solar-fin{position:relative;overflow:hidden;padding:var(--e6) 0 calc(var(--e6) + var(--e4));text-align:center;
  background:radial-gradient(56rem 26rem at 50% 104%,rgba(242,170,112,.55),transparent 72%),linear-gradient(180deg,var(--s-papier) 0%,#F6E6D4 100%)}
.solar-fin::after{content:"";position:absolute;left:50%;bottom:0;width:clamp(6rem,13vw,10rem);aspect-ratio:2 / 1;transform:translateX(-50%);border-radius:999px 999px 0 0;background:linear-gradient(180deg,#F4914A,var(--s-soleil))}
.solar-fin .solar-icone.grande{width:4.75rem;height:4.75rem;margin:0 auto var(--e4)}
.solar-fin h2{max-width:16ch;margin-inline:auto;font-size:clamp(var(--t3),5vw,var(--t5))}
.solar-vers{font-family:var(--serif);font-style:italic;font-size:clamp(var(--t0),1.8vw,var(--t1));line-height:1.5;color:var(--s-gris);margin:var(--e3) auto 0;font-variation-settings:"SOFT" 100,"WONK" 1}
.solar-fin .actions{justify-content:center}
.solar-fiche{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1px;margin:var(--e6) 0 0;background:var(--s-filet);border:1px solid var(--s-filet);border-radius:1.2rem;overflow:hidden;text-align:left}
.solar-fiche div{background:var(--s-papier);padding:var(--e3)}
.solar-fiche dt{margin-bottom:.3rem;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;font-weight:650;color:var(--s-braise)}
.solar-fiche dd{margin:0;font-family:var(--serif);font-size:1.1875rem;line-height:1.3}
.solar-fin .solar-mention{max-width:34rem;margin-inline:auto}

/* ——— Tablettes ——— */
@media (min-width:40rem){
  .solar-quatre{grid-template-columns:1fr 1fr}
  .solar-capture{max-width:20rem}
}
/* ——— Grands écrans : grille de 12 colonnes, images en alternance ——— */
@media (min-width:60rem){
  .solar-ouverture{padding:var(--e5) 0 var(--e6)}
  .solar-ouverture>.cadre{grid-template-columns:5fr 7fr;gap:var(--e5)}
  .solar-ouverture .ariane{margin-bottom:var(--e5)}
  .solar-note{text-align:right;margin-top:var(--e3)}
  .solar-idee-grille{grid-template-columns:repeat(12,1fr);column-gap:var(--e4);align-items:end}
  .solar-phrase{grid-column:1 / 9;margin:0}
  .solar-idee-textes{grid-column:9 / 13;padding-bottom:.6rem}
  .solar-horloges-grille{grid-template-columns:4fr 8fr;gap:var(--e6)}
  .solar-jour-grille{grid-template-columns:7fr 5fr;gap:var(--e6)}
  .solar-nuit-grille{grid-template-columns:5fr 7fr;gap:var(--e6)}
  .solar-montres-bloc{grid-template-columns:5fr 7fr;gap:var(--e6)}
  .solar-montres{justify-self:start}
  .solar-annee-grille{grid-template-columns:7fr 5fr;gap:var(--e6)}
  .solar-capture{max-width:21rem}
}
/* ——— Téléphones ——— */
@media (max-width:40rem){
  .solar-trois figure:nth-child(3){margin-top:clamp(2.6rem,12vw,4.2rem)}
  .solar-capture{max-width:16rem}
  .solar-heure{font-size:1.0625rem}
  .solar-trois figcaption{font-size:.8125rem}
  .solar-arc-legende{font-size:.8125rem}
  .solar-arc-legende strong{font-size:1.0625rem}
  .solar-heures li{grid-template-columns:5.4rem 1fr;padding-left:1.5rem}
  :lang(fr) .solar-heures li{grid-template-columns:3.9rem 1fr}
  .solar-heures time{font-size:1.1875rem}
  .solar-lecons .phrase{font-size:1.1875rem}
  .solar-fiche dd{font-size:1.0625rem}
}