/*
Theme Name:   Sevy Créations 2026 — thème enfant
Theme URI:    https://sevy-creations.net/
Description:  Thème enfant d'Astra pour sevy-creations.net. Concept « L'heure de Vinelz » :
              le site affiche l'heure qu'il est à l'atelier et change de discours selon elle.
              Couleurs mesurées dans le logo, polices auto-hébergées, aucun jQuery.
Author:       Sevy Créations — Yves Fleury
Author URI:   https://sevy-creations.net/
Template:     astra
Version:      1.0.0
Requires PHP: 7.4
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  sevy2026
Tags:         multilingue, sombre, une-colonne
*/

/* ═══════════════════════════════════════════════════════════════════════════
   COMMENT LIRE CE FICHIER

   Il reprend, dans l'ordre, la maquette validée `03_CREATION/MAQUETTE-ACCUEIL-V8.html`.
   Tout écart avec elle est signalé par un commentaire qui dit POURQUOI.

   Un seul fichier CSS, et non un dossier `assets/css/` découpé : la page d'accueil
   tient en ~14 Ko de style. Trois fichiers, ce sont trois requêtes de plus sur un
   téléphone en 4G, pour un site qui doit tenir 85 sur PageSpeed mobile. On découpera
   le jour où le CSS dépassera ce que le premier écran a besoin de connaître.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══ LES POLICES — AUTO-HÉBERGÉES, jamais appelées chez Google ═══════════════
   Deux raisons, et la seconde n'est pas négociable :
   1. performance — un appel à fonts.googleapis.com coûte une résolution DNS, une
      connexion TLS et un aller-retour avant la première lettre affichée ;
   2. protection des données — cet appel transmet l'adresse IP du visiteur à un
      tiers hors de Suisse. Un tribunal allemand l'a déjà jugé illicite ; la LPD
      suisse suit la même logique. Un site vitrine n'a aucune raison de le faire.

   `font-display: swap` : le texte s'affiche immédiatement dans la police système,
   puis bascule. On préfère un texte lisible tout de suite à un texte parfait plus tard.

   ⚠️ Les fichiers WOFF2 ne sont PAS livrés avec ce thème (licence OFL : ils se
   téléchargent, ils ne se recopient pas au hasard). Voir README.md § « Les polices ».
   Tant qu'ils manquent, la pile système prend le relais et la page reste lisible.
   ─────────────────────────────────────────────────────────────────────────── */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/space-grotesk-500.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/space-grotesk-700.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/dm-sans-400.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/dm-sans-500.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/dm-sans-700.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/jetbrains-mono-400.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/jetbrains-mono-500.woff2') format('woff2')}


/* ═══ LES JETONS ═════════════════════════════════════════════════════════════
   Les quatre couleurs sont MESURÉES dans le logo (960 × 454 px, 40 221 pixels
   analysés le 22.08.2026). Elles ne se retouchent pas « à l'œil » : chacune porte
   son contraste sur le fond #0C1020, et c'est ce contraste qui décide de son emploi.
     cyan    #46A8D2 — 6,78:1 → seul autorisé sur du texte courant
     bleu    #6270E0 — 4,27:1 → grands titres, lumière
     violet  #9A54C4 — 3,86:1 → lumière uniquement
     magenta #C4549A — 4,42:1 → lumière uniquement
   Les variables sont posées sur :root ET réécrites par le sélecteur « Votre
   couleur » : c'est la seule raison pour laquelle ce sélecteur tient en 20 lignes
   de JavaScript au lieu d'une feuille de style par palette.
   ─────────────────────────────────────────────────────────────────────────── */
:root{
  /* ══ CANEVAS « JOUR » — base claire, choisie avec Yves le 25.08.2026 ══════════
     Le fond nuit #0C1020 disait « tech / crypto / gaming » à une cible de
     commerçants : intimidant, froid, « pas pour moi ». On retourne le canevas —
     fond blanc, encre profonde, contraste élevé — et la couleur ne sert plus de
     décor permanent mais d'ACCENT. Les quatre teintes du logo restent, vives, dans
     le dégradé signature (boutons, filets, pastilles) ; pour le TEXTE en dégradé
     (grands titres), on prend une version plus profonde `--deg-tx`, car le cyan
     clair du logo (#46A8D2) ne porte que 2:1 sur blanc et ne serait pas lisible.
     Contrastes mesurés sur #FFFFFF :
       encre    #14171F ≈ 16:1   → texte courant, titres
       gris     #4B5566 ≈ 7,6:1  → texte secondaire
       gris-f   #6A7386 ≈ 4,7:1  → étiquettes mono, mentions
       accent   #147A9E ≈ 4,9:1  → liens et petit texte coloré (seul autorisé) */
  --fond:#FFFFFF; --surf:#F4F6FB; --surf-2:#EBEFF7; --bord:#E2E7F1;
  --cyan:#147A9E; --bleu:#5460D8; --violet:#8A44B8; --magenta:#B23F86;
  --clair:#14171F; --gris:#4B5566; --gris-f:#6A7386;
  --lumiere:linear-gradient(100deg,#46A8D2,#6270E0,#9A54C4,#C4549A);
  --deg-tx:linear-gradient(100deg,#2E86B0,#4F5ED8,#8A44B8,#B23F86);
  --tt:'Space Grotesk',system-ui,sans-serif;
  --tx:'DM Sans',system-ui,-apple-system,sans-serif;
  --mo:'JetBrains Mono',ui-monospace,monospace;
  --max:1240px; --g:1.5rem; --e:cubic-bezier(.22,1,.36,1);
  --r:14px; --r-s:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--tx);background:var(--fond);color:var(--clair);font-size:18.5px;
     line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;
     position:relative;isolation:isolate}
.w{max-width:var(--max);margin:0 auto;padding:0 var(--g);position:relative;z-index:2}
@media(min-width:900px){:root{--g:2.5rem}}

/* Astra pose ses propres marges sur #page et .site-content. On les neutralise :
   ce thème dessine sa page entière, il n'utilise pas la grille du parent. */
#page,.site-content,.ast-container{max-width:none;margin:0;padding:0;background:transparent}

/* Astra colore le <body> en blanc via une classe de conteneur
   (.ast-plain-container / .ast-separate-container). Une classe l'emporte sur
   « body{} », donc notre fond nuit perdait malgré le bon ordre de chargement.
   On rétablit le fond avec un sélecteur au moins aussi spécifique. */
body.ast-plain-container,
body.ast-separate-container,
body.ast-page-builder-template{background-color:var(--fond)}
img{max-width:100%;height:auto}
a{color:var(--cyan)}

/* Le lien d'évitement : premier élément atteint au clavier, invisible tant qu'il
   n'a pas le focus. Sans lui, un visiteur au clavier retraverse tout le menu à
   chaque page. */
.sevy-evitement{position:absolute;left:-9999px;top:0;z-index:100;padding:.9rem 1.2rem;
  background:var(--surf);color:var(--clair);border:1px solid var(--cyan);
  border-radius:var(--r-s);font-size:16px;text-decoration:none}
.sevy-evitement:focus{left:1rem;top:1rem}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ═══ LA LUMIÈRE — repris du site actuel, aux couleurs du logo ═══════════════ */
/* les taches, posées au hasard à chaque chargement */
#taches{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.tache{position:absolute;border-radius:50%;filter:blur(80px)}
/* le halo qui suit la souris */
#halo{position:fixed;inset:0;z-index:1;pointer-events:none;mix-blend-mode:multiply;
  background:radial-gradient(620px circle at var(--mx,72%) var(--my,18%),
    rgba(98,112,224,.14) 0%, rgba(154,84,196,.10) 26%, transparent 58%);
  opacity:.9;transition:opacity .4s var(--e)}
/* Sur un écran tactile il n'y a pas de souris : le halo ne suivrait rien et
   coûterait une couche composée à chaque défilement. Il disparaît, les taches
   s'atténuent — la page garde sa lumière sans payer le mouvement. */
@media(hover:none),(prefers-reduced-motion:reduce){#halo{display:none}#taches{opacity:.5}}

/* ═══ LE BANDEAU DÉFILANT — il ne défile pas pour décorer, il énumère ═══════ */
.ruban{position:relative;z-index:2;padding:1.4rem 0;overflow:hidden;
  background:var(--surf);backdrop-filter:blur(8px);
  border-block:1px solid var(--bord);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ruban__piste{display:flex;width:max-content}
/* L'animation n'est posée QUE si le JavaScript a doublé la piste : une seule copie
   qui glisse de 50 % sortirait de l'écran et ne reviendrait jamais. Sans script,
   la liste reste affichée, immobile et complète — les faits sont lisibles quand même. */
.ruban__piste--boucle{animation:glisse 42s linear infinite}
.ruban:hover .ruban__piste--boucle{animation-play-state:paused}
@keyframes glisse{to{transform:translateX(-50%)}}
.ruban__i{display:flex;align-items:baseline;gap:.85rem;padding:0 2.4rem;white-space:nowrap;
          border-right:1px solid var(--bord)}
.ruban__i b{font-family:var(--tt);font-weight:700;font-size:1.32rem;letter-spacing:-.02em;
            color:var(--clair)}
.ruban__i span{font-family:var(--mo);font-size:14px;color:var(--gris-f)}
.ruban__i em{font-style:normal;width:7px;height:7px;background:var(--lumiere);
             transform:rotate(45deg);flex:none;align-self:center}
@media(prefers-reduced-motion:reduce){.ruban__piste{animation:none;
  width:100%;overflow-x:auto;justify-content:flex-start}}

/* ═══ MENU MOBILE — sous 1080 px le menu de bureau disparaît.
       Sans ce panneau, la navigation n'existait tout simplement plus.        ═══ */
.burger{display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:48px;height:48px;padding:0 10px;background:transparent;border:1px solid var(--bord);
  border-radius:var(--r-s);cursor:pointer;flex:none}
.burger span{display:block;height:2px;width:100%;background:var(--clair);border-radius:2px;
  transition:transform .3s var(--e),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.burger:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
@media(min-width:1080px){.burger{display:none}}

.panneau{position:fixed;inset:0 0 0 auto;width:min(88vw,380px);z-index:70;
  background:#FFFFFF;border-left:1px solid var(--bord);box-shadow:-18px 0 50px -20px rgba(20,30,60,.22);
  padding:calc(76px + 1.5rem) 1.5rem 2rem;overflow-y:auto;
  transform:translateX(100%);transition:transform .34s var(--e);
  display:flex;flex-direction:column;gap:.2rem}
.panneau[data-ouvert="1"]{transform:none}
.panneau a{display:flex;align-items:center;min-height:56px;padding:.6rem .2rem;
  color:var(--clair);text-decoration:none;font-family:var(--tt);font-weight:500;
  font-size:1.28rem;border-bottom:1px solid var(--bord)}
.panneau a:active{color:var(--cyan)}
.panneau ul{list-style:none;margin:0;padding:0}
.panneau .lgm{display:flex;gap:.4rem;margin-top:1.6rem;list-style:none}
/* Les <li> sont les éléments de la grille flexible : c'est sur eux que porte le
   partage en quatre colonnes, pas sur les liens qu'ils contiennent. */
.panneau .lgm li{flex:1;display:flex}
.panneau .lgm a{flex:1;justify-content:center;border:1px solid var(--bord);
  border-radius:var(--r-s);font-family:var(--mo);font-size:15px;min-height:52px}
.panneau .lgm a[aria-current]{border-color:var(--cyan);color:var(--cyan)}
.voile{position:fixed;inset:0;z-index:65;background:rgba(18,24,44,.38);
  backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .34s}
.voile[data-ouvert="1"]{opacity:1;pointer-events:auto}
@media(min-width:1080px){.panneau,.voile{display:none}}
body[data-fige="1"]{overflow:hidden}

/* L'ALLEMAND EST 15 À 30 % PLUS LONG. Les cinq entrées du menu de bureau ne tiennent
   plus à 1080 px en allemand : elles passent sous le logo ou touchent le sélecteur
   de langue. On garde donc le menu mobile 100 px plus longtemps dans cette langue.
   ⚠️ 1180 px est une VALEUR ESTIMÉE — à mesurer sur la page allemande réelle, une
   fois les traductions saisies, et à corriger ici. Voir README.md § « À mesurer ». */
@media(min-width:1080px) and (max-width:1179px){
  html[lang|="de"] .nv{display:none}
  html[lang|="de"] .burger{display:flex}
  html[lang|="de"] .panneau{display:flex}
  html[lang|="de"] .voile{display:block}
}
/* ⚠️ `[lang|="de"]` et non `[lang="de"]` : WordPress écrit `lang="de-DE"` quand la
   locale est l'allemand d'Allemagne, et `lang="de-CH"` si l'on passe un jour au
   suisse allemand. L'égalité stricte ne mordrait sur aucun des deux — et la règle la
   plus importante du site (aucun bouton d'appel en allemand) serait silencieusement
   inactive. Le sélecteur `|=` couvre « de » et tout « de-… ». */

/* ═══ PETITS ÉCRANS — ce qui doit changer, et pourquoi ═══════════════════════ */
@media(max-width:760px){
  /* le tableau de prix : 4 valeurs sur 2 colonnes devenaient illisibles */
  .tf{grid-template-columns:1fr auto;gap:.15rem 1rem;padding:1.15rem 1.1rem}
  .tf__n{grid-column:1;font-size:1.14rem}
  .tf__p{grid-column:2;grid-row:1;font-size:1.16rem}
  .tf__a{grid-column:1}
  .tf__d{grid-column:2;text-align:right}
  /* la réalisation : la date au-dessus, l'adresse en dessous */
  .tv{padding:1.3rem 1.1rem;gap:.35rem}
  .tv:hover{padding-left:1.6rem}
  /* le bandeau : moins d'écart, sinon un seul fait tient à l'écran */
  .ruban__i{padding:0 1.5rem;gap:.6rem}
  .ruban__i b{font-size:1.18rem}
  .heure{padding:1.05rem 1.1rem}
  .b{width:100%}                      /* les boutons prennent la largeur, plus faciles à viser */
  .acts{gap:.6rem}
}
@media(max-width:420px){
  .mq img{height:30px}
  h1{font-size:clamp(2rem,8.5vw,2.6rem)}
  .visuel__img{aspect-ratio:1}
}

/* ═══ « VOTRE COULEUR » — une barre, toujours visible, un seul clic ══════════
   Première version : un bouton flottant qui ouvrait un panneau. Deux clics pour
   voir quoi que ce soit, et le panneau cachait la page qu'il modifiait.
   Yves : « c'est un peu compliqué ». Il avait raison — on regarde le résultat,
   pas le réglage.                                                             */
.pal{position:relative;z-index:2;max-width:var(--max);margin:0 auto;
     padding:2.2rem var(--g) 3rem;text-align:center}
.pal__t{font-size:1.06rem;color:var(--gris);line-height:1.6;margin-bottom:1.2rem}
.pal__t b{color:var(--clair);font-weight:600}
.pal__r{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem}
.pal__o{display:inline-flex;padding:4px;cursor:pointer;background:transparent;
  border:2px solid transparent;border-radius:50%;
  transition:transform .25s var(--e),border-color .25s}
.pal__o:hover{transform:translateY(-3px) scale(1.07)}
.pal__o[aria-pressed="true"]{border-color:var(--cyan)}
.pal__o:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.pal__s{width:54px;height:54px;border-radius:50%;flex:none;
        box-shadow:0 4px 18px rgba(20,30,60,.20)}

/* le balayage : la nouvelle lumière traverse l'écran */
#balai{position:fixed;inset:0;z-index:79;pointer-events:none;opacity:0;
       clip-path:inset(0 100% 0 0)}
#balai.va{animation:balaye 820ms var(--e) forwards}
@keyframes balaye{
  0%{opacity:.85;clip-path:inset(0 100% 0 0)}
  50%{opacity:.85;clip-path:inset(0 0 0 0)}
  100%{opacity:0;clip-path:inset(0 0 0 0)}}
@media(prefers-reduced-motion:reduce){#balai{display:none}}
@media(max-width:600px){.pal__s{width:44px;height:44px}}

/* ═══ LE TRAIT COTÉ — le seul motif graphique récurrent du site ══════════════
   `inset-inline` et non `left/right` : la largeur suit le bloc de titre, donc
   l'allemand ne peut pas le casser, quelle que soit sa longueur.
   `clip-path` et non `scaleX` : les deux repères d'extrémité gardent leur
   épaisseur exacte pendant le tracé.                                          */
.mesure{position:relative;display:block;height:9px;margin-block-start:14px;width:100%}
.mesure::before{content:"";position:absolute;inset-inline:0;top:4px;height:1px;
                background:var(--lumiere)}
.mesure::after{content:"";position:absolute;inset-inline:0;top:0;height:9px;
  border-inline-start:1px solid var(--cyan);border-inline-end:1px solid var(--magenta)}
.oeil{font-family:var(--mo);font-size:13.5px;letter-spacing:.17em;text-transform:uppercase;
      color:var(--gris-f)}

/* ═══ EN-TÊTE — la vraie bannière ═══════════════════════════════════════════ */
.top{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);
     backdrop-filter:blur(16px);border-bottom:1px solid var(--bord)}
.top__i{display:flex;align-items:center;justify-content:space-between;height:76px;gap:1rem}
.mq{display:block;line-height:0}
.mq img{height:44px;width:auto;display:block}
@media(max-width:640px){.mq img{height:34px}}
.nv{display:none;gap:1.8rem}
@media(min-width:1080px){.nv{display:flex}}
.nv ul{display:flex;gap:1.8rem;list-style:none;margin:0;padding:0}
.nv a{position:relative;color:var(--gris);text-decoration:none;font-size:16.5px;font-weight:500;
      padding:.35rem 0;transition:color .2s}
.nv a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;border-radius:2px;
             background:var(--lumiere);transition:width .34s var(--e)}
.nv a:hover{color:var(--clair)}.nv a:hover::after{width:100%}
.nv .current-menu-item>a{color:var(--clair)}
/* SÉLECTEUR DE LANGUE : « FR DE IT EN », jamais de drapeaux. Un drapeau désigne un
   pays, pas une langue — le drapeau allemand pour un Suisse alémanique est faux,
   et il se remarque. Décision du 22.08.2026. */
.lg{display:flex;font-family:var(--mo);font-size:14px;list-style:none;margin:0;padding:0}
.lg li{display:flex}
.lg a{color:var(--gris-f);text-decoration:none;padding:.6rem .4rem;min-height:44px;
      display:flex;align-items:center;transition:color .2s}
.lg a:hover{color:var(--gris)}
.lg a[aria-current]{color:var(--cyan)}
.nv a:focus-visible,.lg a:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}

/* ═══ HÉROS ═════════════════════════════════════════════════════════════════ */
.hero{padding:3.5rem 0 3.5rem}
@media(min-width:1000px){.hero{padding:5rem 0 4.5rem}}
.hero__i{display:grid;gap:2.8rem}
@media(min-width:1000px){.hero__i{grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:center}}
.lieu{font-family:var(--mo);font-size:13.5px;letter-spacing:.17em;text-transform:uppercase;
      color:var(--gris-f);margin-bottom:1.4rem}
h1{font-family:var(--tt);font-weight:700;letter-spacing:-.045em;line-height:1.02;
   font-size:clamp(2.4rem,6vw,4.4rem);color:var(--clair);max-width:15ch}
/* LE TITRE EN DÉGRADÉ — demandé par Yves. Autorisé ici, et ICI SEULEMENT :
   grand titre (≥ 24 px gras), seuil AA = 3:1. La plus sombre des quatre couleurs,
   le violet #9A54C4, donne 3,86:1 sur #0C1020. Elle passe.
   INTERDIT sur tout texte courant, où le seuil est de 4,5:1 — et un texte en
   dégradé a un contraste non mesurable : il varie sur la longueur du mot, donc il
   change avec la langue. Sur un site à quatre langues, c'est une garantie qu'on
   ne peut pas donner. Contrôle de recette : chercher `background-clip` dans ce
   fichier ne doit remonter QUE la règle ci-dessous.                            */
h1 em{font-style:normal;background:var(--deg-tx);-webkit-background-clip:text;
      background-clip:text;color:transparent}
/* Sous-titre du héros : dit CLAIREMENT le métier (sites, apps, agents), que le
   slogan seul n'exprime pas. Ajouté le 04.09.2026. */
.hero__sub{color:var(--gris);font-size:1.24rem;line-height:1.55;max-width:46ch;margin-top:1.4rem}
@media(max-width:600px){.hero__sub{font-size:1.1rem}}

/* ─── L'HEURE DE VINELZ ─── */
.heure{margin-top:2rem;padding:1.15rem 1.3rem;background:var(--surf);
       backdrop-filter:blur(8px);border:1px solid var(--bord);border-radius:var(--r);
       border-left:2px solid var(--cyan);max-width:52ch}
/* `tabular-nums` : le 1 occupe la place du 8. C'est la seule raison pour laquelle
   une horloge peut vivre dans le bloc d'accueil sans coûter de décalage (CLS) :
   le passage de 07:12 à 07:13 ne déplace rien. */
.heure__h{font-family:var(--mo);font-size:1.2rem;font-weight:500;color:var(--cyan);
          font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.heure__h time{display:inline-block;min-width:5ch}
.heure__h span{color:var(--gris-f);font-size:1rem;letter-spacing:.08em;
               text-transform:uppercase;margin-left:.5rem}
/* LES QUATRE PHRASES SONT TOUTES DANS LE HTML. Le CSS n'en montre qu'une.
   Conséquences : Polylang les traduit comme n'importe quel texte, Google les
   indexe, et elles restent lisibles si le script ne s'exécute pas.
   La première règle est le repli sans JavaScript : tant que <html> ne porte pas
   `data-quand`, c'est la variante « jour » qui s'affiche. C'est le cas le plus
   fréquent d'une visite, donc le repli le plus honnête. */
.moment{display:none;margin-top:.55rem;font-size:1.12rem;color:var(--gris);min-height:3.2em}
html:not([data-quand]) .moment[data-quand="jour"]{display:block}
html[data-quand="nuit"]  .moment[data-quand="nuit"]{display:block}
html[data-quand="matin"] .moment[data-quand="matin"]{display:block}
html[data-quand="jour"]  .moment[data-quand="jour"]{display:block}
html[data-quand="soir"]  .moment[data-quand="soir"]{display:block}
.moment b{color:var(--clair);font-weight:500}

.acts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.b{display:inline-flex;align-items:center;justify-content:center;min-height:52px;
   padding:.95rem 1.9rem;font-family:var(--tx);font-size:17px;font-weight:600;
   text-decoration:none;border:1px solid transparent;border-radius:var(--r-s);cursor:pointer;
   transition:transform .24s var(--e),box-shadow .24s var(--e),border-color .24s,color .24s}
.b--deg{background:var(--lumiere);color:var(--sur-lumiere,#080B16);box-shadow:0 4px 24px rgba(98,112,224,.34)}
.b--deg:hover{transform:translateY(-2px);box-shadow:0 8px 34px rgba(154,84,196,.5)}
.b--fil{background:var(--surf);color:var(--clair);border-color:var(--bord)}
.b--fil:hover{border-color:var(--cyan);color:var(--cyan)}
.b:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
/* LE BOUTON D'APPEL. Il n'apparaît qu'aux heures d'ouverture — et sans JavaScript,
   <html> ne porte pas `data-quand`, donc il n'apparaît pas du tout. C'est voulu :
   on ne provoque jamais un appel auquel personne ne répond. C'est l'inverse exact
   d'un dark pattern — le site perd un clic pour ne pas décevoir.
   En allemand il n'est même pas écrit dans le HTML (voir front-page.php) ; la règle
   ci-dessous est la seconde barrière, au cas où un gabarit l'oublierait. */
.tel{display:none}
html[data-quand="jour"] .tel{display:inline-flex}
html[lang|="de"] .tel{display:none!important}   /* « de », « de-DE », « de-CH » : voir la note plus haut */

.pr{margin-top:2.4rem;display:grid;gap:1.3rem}
@media(min-width:600px){.pr{grid-template-columns:repeat(3,1fr);gap:0}}
.pr>div{padding-left:1.1rem;border-left:1px solid var(--bord)}
.pr>div:first-child{padding-left:0;border-left:0}
@media(max-width:599px){.pr>div{padding-left:0;border-left:0}}
.pr b{display:block;font-family:var(--tt);font-weight:500;font-size:1.16rem;color:var(--clair)}
.pr span{font-size:1rem;color:var(--gris-f);line-height:1.5}

/* ═══ LE VISUEL D'ACCUEIL ═══════════════════════════════════════════════════ */
.visuel{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--bord);
        background:var(--surf);backdrop-filter:blur(6px);isolation:isolate}
.visuel__img{position:relative;aspect-ratio:4/3;display:grid;place-items:center;
  background:
    radial-gradient(70% 60% at 30% 25%,rgba(70,168,210,.20),transparent 62%),
    radial-gradient(60% 55% at 78% 72%,rgba(196,84,154,.16),transparent 64%),
    radial-gradient(50% 50% at 60% 40%,rgba(154,84,196,.14),transparent 66%),
    linear-gradient(150deg,#EEF2FB,#F7F9FE)}
.visuel__img img{width:62%;max-width:330px;height:auto;
  filter:drop-shadow(0 0 40px rgba(98,112,224,.5));animation:respire 7s ease-in-out infinite}
/* Quand la vraie image d'accueil sera posée, elle remplit le cadre : elle ne
   respire pas et ne porte pas d'ombre portée — c'est le logo, en attendant, qui
   tient la place et donne la lumière. */
.visuel__img--photo img{width:100%;max-width:none;height:100%;object-fit:cover;
  filter:none;animation:none}
@keyframes respire{0%,100%{transform:scale(1);opacity:.94}50%{transform:scale(1.035);opacity:1}}
.visuel__l{padding:.75rem 1rem;border-top:1px solid var(--bord);font-family:var(--mo);
           font-size:13px;color:var(--gris-f);line-height:1.6}
.visuel__l b{color:var(--cyan)}

/* ═══ L'AGENT ═══════════════════════════════════════════════════════════════ */
.ag{margin-top:1.2rem;background:var(--surf);backdrop-filter:blur(6px);
    border:1px solid var(--bord);border-radius:var(--r)}
.ag__t{padding:.9rem 1.15rem;border-bottom:1px solid var(--bord);font-family:var(--mo);
       font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--gris-f)}
.ag__c{padding:1.05rem}
.ag__q{font-family:var(--tt);font-weight:500;font-size:1.3rem;color:var(--clair);
       line-height:1.35;margin-bottom:.5rem}
.ag__d{font-size:1.02rem;color:var(--gris-f);line-height:1.55}
/* LA FRISE DES TRENTE JOURS. Chaque trait est un fait, pas une décoration : un
   jour manqué se montrerait par un trou. Les trente traits sont écrits par PHP
   et visibles par défaut ; le JavaScript ne fait que les révéler un par un. */
.frise{display:flex;gap:3px;align-items:flex-end;height:30px;margin:1.1rem 0 .55rem}
.frise i{flex:1;background:var(--cyan);opacity:.7;height:100%;border-radius:1px;
         transition:opacity 300ms var(--e)}
.frise--anime i{opacity:0}
.frise--anime i.vu{opacity:.7}
.frise__l{font-family:var(--mo);font-size:13px;color:var(--gris-f);line-height:1.6}
.frise__a{color:#C4549A}

/* ═══ SECTIONS ══════════════════════════════════════════════════════════════ */
.s{padding:4.5rem 0}
h2{font-family:var(--tt);font-weight:700;letter-spacing:-.035em;line-height:1.06;
   font-size:clamp(1.8rem,4vw,2.8rem);color:var(--clair);max-width:16ch;margin:.9rem 0}
.ch{color:var(--gris);max-width:52ch;font-size:1.18rem}
.ch--haut{margin-top:1.2rem}

/* ── Météo vitrine ───────────────────────────────────────────── */
.mv{margin-top:2.4rem;margin-bottom:1rem;background:var(--surf);border:1px solid var(--bord);
    border-radius:var(--r);padding:1.8rem 1.6rem;display:flex;flex-direction:column;
    gap:1.2rem;backdrop-filter:blur(4px)}
@media(min-width:820px){.mv{flex-direction:row;align-items:center;justify-content:space-between;gap:2rem}}
.mv__badge{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mo);
           font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan);
           margin-bottom:.5rem}
.mv__badge::before{content:"";width:6px;height:6px;border-radius:50%;
                   background:currentColor;flex-shrink:0;
                   animation:mv-pulse 2s ease-in-out infinite}
@keyframes mv-pulse{0%,100%{opacity:1}50%{opacity:.3}}
.mv__titre{font-family:var(--tt);font-weight:500;font-size:1.25rem;letter-spacing:-.02em;
           color:var(--clair);margin:0 0 .4rem}
.mv__desc{font-family:var(--mo);font-size:13.5px;color:var(--gris-f);margin:0;max-width:52ch}
.mv .b{flex-shrink:0;white-space:nowrap}

.tr{margin-top:2.4rem;background:var(--surf);border:1px solid var(--bord);
    border-radius:var(--r);overflow:hidden;backdrop-filter:blur(4px)}
.tv{position:relative;display:grid;gap:.2rem;padding:1.35rem 1.2rem;
    border-bottom:1px solid var(--bord);text-decoration:none;color:inherit;
    transition:padding-left .34s var(--e),background .3s}
.tv:last-child{border-bottom:0}
@media(min-width:820px){.tv{grid-template-columns:120px 1fr 250px;gap:1.8rem;
  align-items:baseline;padding:1.6rem 1.4rem}}
.tv::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--lumiere);transform:scaleY(0);transform-origin:top;
  transition:transform .34s var(--e)}
.tv:hover{padding-left:1.9rem;background:var(--surf-2)}
.tv:hover::before{transform:scaleY(1)}
.tv:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.tv__d{font-family:var(--mo);font-size:13px;color:var(--gris-f);letter-spacing:.06em}
.tv__n{font-family:var(--tt);font-weight:500;font-size:1.42rem;letter-spacing:-.02em;
       color:var(--clair)}
.tv__o{font-family:var(--mo);font-size:13.5px;color:var(--gris-f);display:flex;
       align-items:center;gap:.45rem;transition:color .3s}
.tv:hover .tv__o{color:var(--cyan)}
.tv__o::after{content:"→";transition:transform .3s var(--e)}
.tv:hover .tv__o::after{transform:translateX(5px)}

.tfs{margin-top:2.4rem;background:var(--surf);border:1px solid var(--bord);
     border-radius:var(--r);overflow:hidden;backdrop-filter:blur(4px)}
.tf{display:grid;grid-template-columns:1fr auto;gap:.3rem 1.3rem;padding:1.05rem 1.2rem;
    border-bottom:1px solid var(--bord);align-items:baseline}
.tf:last-child{border-bottom:0}
@media(min-width:760px){.tf{grid-template-columns:1fr 110px 110px 116px;padding:1.05rem 1.4rem}}
.tf--p{position:relative;background:linear-gradient(90deg,rgba(98,112,224,.12),transparent 70%)}
.tf--p::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--lumiere)}
.tf__n{font-family:var(--tt);font-weight:500;font-size:1.2rem;color:var(--clair)}
.tf__a,.tf__d{font-family:var(--mo);font-size:13.5px;color:var(--gris-f)}
.tf__p{font-family:var(--mo);font-size:1.2rem;text-align:right;white-space:nowrap;
       color:var(--clair);font-variant-numeric:tabular-nums}
.tf--p .tf__p{color:var(--cyan);font-weight:500}

/* ─────────────────────────────────────────────────────────────────────────
   PAGES INTERNES — composants riches (mêmes codes que l'accueil)
   Cartes de formules, check-list, bandeau, pour que Sites web / Applications /
   Agents IA ne soient plus du texte plat mais des pages composées.
   ───────────────────────────────────────────────────────────────────────── */

/* Bandeau de tête : sur-titre + trait de lumière, sous le titre de page */
.p-lead{color:var(--gris);font-size:1.22rem;line-height:1.55;max-width:56ch;margin:1.4rem 0 0}

/* Cartes de formules / offres (description longue, prix mis en avant) */
.formules{display:grid;gap:1rem;margin:1.8rem 0 0}
.formule{position:relative;display:grid;grid-template-columns:1fr auto;gap:.25rem 1.4rem;
  align-items:baseline;padding:1.35rem 1.45rem;background:var(--surf);
  border:1px solid var(--bord);border-radius:var(--r);backdrop-filter:blur(4px);
  transition:transform .28s var(--e),border-color .28s var(--e)}
.formule:hover{transform:translateY(-3px);border-color:var(--cyan)}
.formule__n{font-family:var(--tt);font-weight:500;font-size:1.32rem;color:var(--clair)}
.formule__p{font-family:var(--mo);font-size:1.22rem;color:var(--clair);text-align:right;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.formule__d{grid-column:1/-1;color:var(--gris);font-size:1.04rem;line-height:1.5;
  margin-top:.4rem;max-width:62ch}
.formule--p{background:linear-gradient(100deg,rgba(98,112,224,.10),transparent 62%);
  border-color:rgba(98,112,224,.45)}
.formule--p::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--lumiere);border-radius:var(--r) 0 0 var(--r)}
.formule--p .formule__p{color:var(--cyan);font-weight:500}
.formule__tag{display:inline-block;font-family:var(--mo);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cyan);margin-left:.7rem;vertical-align:middle}

/* Check-list « ce qui est compris » — coches cyan, deux colonnes */
.inclus{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:.75rem}
@media(min-width:640px){.inclus{grid-template-columns:1fr 1fr;gap:.75rem 2.2rem}}
.inclus li{position:relative;padding-left:2rem;color:var(--gris);font-size:1.05rem;line-height:1.5}
.inclus li::before{content:"";position:absolute;left:.15rem;top:.35em;width:12px;height:7px;
  border-left:2px solid var(--cyan);border-bottom:2px solid var(--cyan);
  transform:rotate(-45deg)}

/* ─────────────────────────────────────────────────────────────────────────
   « LA PREUVE VIVANTE » — pages internes qui vendent
   Hero éditorial + galerie de hublots (vraies captures des sites qui s'allument)
   ───────────────────────────────────────────────────────────────────────── */

/* Hero éditorial */
.pi-hero{margin:0 0 1rem}
.pi-hero__t{font-family:var(--tt);font-weight:700;font-size:clamp(2.3rem,5.5vw,4.2rem);
  line-height:1.03;letter-spacing:-.03em;color:var(--clair);margin:.5rem 0 0}
.pi-hero__t em{font-style:normal;background:var(--deg-tx);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.pi-hero__s{color:var(--gris);font-size:1.22rem;line-height:1.55;max-width:56ch;margin-top:1.3rem}

/* Galerie de hublots : la preuve vivante */
/* Un MUR de vignettes en mosaïque, façon photos épinglées, légèrement de travers.
   Elles se redressent et s'éclairent au survol — vivant, pas catalogue. */
.hublots{columns:1;column-gap:1.3rem;margin:2rem 0 0;padding:0;list-style:none}
@media(min-width:600px){.hublots{columns:2}}
@media(min-width:980px){.hublots{columns:3}}
.hublot{position:relative;display:inline-block;width:100%;break-inside:avoid;margin:0 0 1.3rem;
  border:1px solid var(--bord);border-radius:16px;overflow:hidden;background:#FFFFFF;
  box-shadow:0 10px 30px -18px rgba(20,30,60,.28);
  text-decoration:none;isolation:isolate;transform:rotate(var(--tilt,0deg));
  transition:transform .45s var(--e),border-color .4s var(--e),box-shadow .45s var(--e)}
.hublot:nth-child(4n+1){--tilt:-1.5deg}
.hublot:nth-child(4n+2){--tilt:1.2deg}
.hublot:nth-child(4n+3){--tilt:-.7deg;margin-top:1.4rem}
.hublot:nth-child(4n+4){--tilt:1.6deg}
.hublot__img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;
  filter:brightness(1) saturate(1);transition:filter .5s var(--e),transform .6s var(--e)}
.hublot:hover{transform:rotate(0) translateY(-6px) scale(1.025);border-color:var(--cyan);
  z-index:3;box-shadow:0 26px 64px -18px rgba(20,40,80,.28)}
.hublot:hover .hublot__img{filter:brightness(1.04) saturate(1.06)}
@media(prefers-reduced-motion:reduce){.hublot{--tilt:0deg!important;transition:none}}
.hublot__bar{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;
  border-top:1px solid var(--bord);background:rgba(248,250,253,.96)}
.hublot__dot{width:9px;height:9px;border-radius:50%;background:var(--cyan);flex:none;
  animation:hublotPulse 2.4s infinite}
@keyframes hublotPulse{0%{box-shadow:0 0 0 0 rgba(70,168,210,.55)}
  70%{box-shadow:0 0 0 9px rgba(70,168,210,0)}100%{box-shadow:0 0 0 0 rgba(70,168,210,0)}}
.hublot__txt{flex:1;min-width:0}
.hublot__url{font-family:var(--mo);font-size:13px;color:var(--clair);display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hublot:hover .hublot__url{color:var(--cyan)}
.hublot__tag{font-family:var(--mo);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gris-f);display:block;margin-top:2px}
.hublot__go{position:absolute;top:.85rem;right:.85rem;z-index:2;font-family:var(--mo);font-size:12px;
  color:var(--clair);background:rgba(255,255,255,.92);border:1px solid var(--bord);border-radius:20px;
  box-shadow:0 4px 14px -6px rgba(20,30,60,.3);
  padding:.32rem .75rem;opacity:0;transform:translateY(-5px);transition:.34s var(--e)}
.hublot:hover .hublot__go{opacity:1;transform:none;border-color:var(--cyan)}
.preuve-note{margin-top:1.4rem;color:var(--gris);font-size:1.05rem}
.preuve-note b{color:var(--clair)}

/* Réduction de mouvement : tout est déjà allumé, rien ne bouge */
@media(prefers-reduced-motion:reduce){
  .hublot__img{filter:brightness(1) saturate(1)!important}
  .hublot__dot{animation:none}
}

/* Formulaire de contact */
.fc{margin:1.8rem 0 0;max-width:none}
.fc__form{background:var(--surf);border:1px solid var(--bord);border-radius:16px;
  padding:1.7rem 1.6rem;backdrop-filter:blur(4px)}
.fc__row{display:grid;gap:1.1rem}
@media(min-width:640px){.fc__row{grid-template-columns:1fr 1fr}}
.fc__field{display:block;margin-top:1.1rem}
.fc__field:first-child,.fc__row .fc__field{margin-top:0}
.fc__row+.fc__field,.fc__field+.fc__field{margin-top:1.1rem}
.fc__field>span{display:block;font-family:var(--mo);font-size:12.5px;letter-spacing:.05em;
  color:var(--gris);margin-bottom:.45rem;text-transform:uppercase}
.fc__field input,.fc__field select,.fc__field textarea{width:100%;font-family:var(--tx);
  font-size:1.02rem;color:var(--clair);background:#FFFFFF;
  border:1px solid var(--bord);border-radius:10px;padding:.8rem .9rem;transition:border-color .25s}
.fc__field textarea{resize:vertical;min-height:120px}
.fc__field input:focus,.fc__field select:focus,.fc__field textarea:focus{outline:none;
  border-color:var(--cyan);box-shadow:0 0 0 3px rgba(70,168,210,.18)}
.fc__field select{appearance:none;cursor:pointer}
.fc__form .b{margin-top:1.5rem}
.fc__note{margin-top:1rem;color:var(--gris-f);font-size:.9rem}
.fc__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fc__ok{background:rgba(70,168,210,.12);border:1px solid var(--cyan);border-radius:12px;
  padding:1.1rem 1.2rem;color:var(--clair);margin-bottom:1.4rem}
.fc__err{background:rgba(196,84,154,.12);border:1px solid var(--magenta);border-radius:12px;
  padding:1.1rem 1.2rem;color:var(--clair);margin-bottom:1.4rem}

/* Blocs « autres chemins » + « ce qui se passe après » (confiance) */
.voies{display:grid;gap:1rem;margin:1.8rem 0 0}
@media(min-width:640px){.voies{grid-template-columns:repeat(3,1fr)}}
.voie{padding:1.3rem 1.35rem;background:var(--surf);border:1px solid var(--bord);
  border-radius:14px}
.voie__t{font-family:var(--tt);font-weight:500;font-size:1.14rem;color:var(--clair);margin:0 0 .4rem}
.voie__d{color:var(--gris);font-size:.98rem;line-height:1.5;margin:0 0 .8rem}
.voie__v{font-family:var(--mo);font-size:1.05rem;color:var(--cyan)}
.etapes{list-style:none;counter-reset:e;padding:0;margin:1.8rem 0 0;display:grid;gap:1rem}
@media(min-width:640px){.etapes{grid-template-columns:repeat(3,1fr)}}
.etape{counter-increment:e;position:relative;padding:1.4rem 1.35rem 1.3rem;
  background:var(--surf);border:1px solid var(--bord);border-radius:14px}
.etape::before{content:counter(e);position:absolute;top:1.1rem;right:1.2rem;font-family:var(--tt);
  font-size:2.2rem;font-weight:700;line-height:1;background:var(--deg-tx);
  -webkit-background-clip:text;background-clip:text;color:transparent;opacity:.95}
.etape__t{font-family:var(--tt);font-weight:500;font-size:1.14rem;color:var(--clair);margin:0 0 .4rem;max-width:11ch}
.etape__d{color:var(--gris);font-size:.98rem;line-height:1.5;margin:0}

/* Grille 2 colonnes générique (cas d'usage, comparatifs) */
.duo{display:grid;gap:1rem;margin:1.8rem 0 0}
@media(min-width:640px){.duo{grid-template-columns:1fr 1fr}}

/* Bloc preuve « application publiée » : la capture App Store + les faits */
.app-proof{display:grid;gap:1.4rem;margin:1.8rem 0 0;align-items:start}
@media(min-width:820px){.app-proof{grid-template-columns:1.15fr .85fr}}
.app-facts{padding:1.5rem 1.5rem;background:var(--surf);border:1px solid var(--bord);
  border-radius:16px;backdrop-filter:blur(4px)}
.app-facts dl{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1rem;margin:0 0 1.2rem}
.app-facts dt{font-family:var(--mo);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--gris-f)}
.app-facts dd{margin:0;color:var(--clair);font-size:1rem}
.app-badge{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mo);font-size:12px;
  color:var(--cyan);border:1px solid rgba(70,168,210,.4);border-radius:20px;padding:.35rem .8rem;margin-bottom:1rem}

/* Pipeline « en atelier » : les projets en cours, cartes compactes */
.pipe{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;margin:1.8rem 0 0}
.pipe__i{padding:1.15rem 1.2rem;background:var(--surf);border:1px solid var(--bord);
  border-radius:14px;transition:border-color .3s,transform .3s var(--e)}
.pipe__i:hover{border-color:var(--cyan);transform:translateY(-3px)}
.pipe__n{font-family:var(--tt);font-weight:500;font-size:1.16rem;color:var(--clair);margin:0 0 .5rem}
.pipe__b{display:inline-block;font-family:var(--mo);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cyan);border:1px solid rgba(70,168,210,.4);
  border-radius:20px;padding:.2rem .6rem}
.pipe__d{color:var(--gris);font-size:.95rem;line-height:1.45;margin:.6rem 0 0}

/* Phrase mise en avant (les temps forts émotionnels) */
.mise-avant{position:relative;margin:2rem 0 0;padding:1.7rem 1.8rem;border-radius:16px;
  background:linear-gradient(100deg,rgba(98,112,224,.12),var(--surf) 70%);
  border:1px solid rgba(98,112,224,.32)}
.mise-avant::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--lumiere);border-radius:16px 0 0 16px}
.mise-avant p{font-family:var(--tt);font-weight:500;font-size:1.4rem;line-height:1.32;
  color:var(--clair);margin:0;max-width:none}
.mise-avant small{display:block;margin-top:.8rem;font-family:var(--tx);font-weight:400;
  font-size:1.05rem;color:var(--gris);line-height:1.5}

/* Bande « aurore » : la lumière de marque, sans fichier image (façon lac la nuit) */
.aurora{height:170px;margin:1.6rem 0 0;border-radius:16px;border:1px solid var(--bord);
  background:
    radial-gradient(120% 140% at 78% 12%, rgba(196,84,154,.30), transparent 55%),
    radial-gradient(120% 150% at 55% 8%, rgba(154,84,196,.32), transparent 55%),
    radial-gradient(140% 160% at 32% 6%, rgba(98,112,224,.32), transparent 55%),
    radial-gradient(160% 170% at 12% 18%, rgba(70,168,210,.30), transparent 55%),
    linear-gradient(180deg,#EEF2FB,#F7F9FE);
  position:relative;overflow:hidden}
.aurora::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;
  background:linear-gradient(0deg,rgba(70,168,210,.10),transparent);
  filter:blur(2px)}

.qs{margin-top:2.2rem;background:var(--surf);border:1px solid var(--bord);
    border-radius:var(--r);overflow:hidden;backdrop-filter:blur(4px)}
.q{border-bottom:1px solid var(--bord)}.q:last-child{border-bottom:0}
.q summary{list-style:none;cursor:pointer;padding:1.2rem 1.3rem;display:flex;gap:1.3rem;
  justify-content:space-between;align-items:center;min-height:44px;font-family:var(--tt);
  font-weight:500;font-size:1.2rem;color:var(--clair)}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:"";width:9px;height:9px;flex:none;border-right:2px solid var(--cyan);
  border-bottom:2px solid var(--cyan);transform:rotate(45deg);margin-bottom:4px;
  transition:transform .3s var(--e)}
.q[open] summary::after{transform:rotate(-135deg);margin-bottom:-4px}
.q summary:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.q p{padding:0 1.3rem 1.3rem;color:var(--gris);max-width:58ch}

/* ═══ PIED DE PAGE ══════════════════════════════════════════════════════════ */
.pd{padding:3.5rem 0 2rem;border-top:1px solid var(--bord);position:relative;z-index:2}
.pd__g{display:grid;gap:2.2rem;margin-bottom:2.2rem}
@media(min-width:820px){.pd__g{grid-template-columns:1.6fr 1fr 1fr}}
.pd h3{font-family:var(--mo);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
       color:var(--gris-f);margin-bottom:.9rem;font-weight:400}
.pd ul{list-style:none;margin:0;padding:0}
.pd a{color:var(--gris);text-decoration:none;font-size:1.05rem;display:block;padding:.26rem 0;
      transition:color .2s}
.pd a:hover{color:var(--cyan)}
.pd p{color:var(--gris);font-size:1.05rem;max-width:32ch;line-height:1.6}
.pd__b{border-top:1px solid var(--bord);padding-top:1.3rem;font-family:var(--mo);
       font-size:13px;color:var(--gris-f);display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;
       justify-content:space-between}

/* ═══ PAGE COURANTE (page.php) ══════════════════════════════════════════════ */
.pg{padding:3.5rem 0 4.5rem}
.pg__t{font-family:var(--tt);font-weight:700;letter-spacing:-.04em;line-height:1.05;
       font-size:clamp(2rem,5vw,3.2rem);color:var(--clair);max-width:20ch}
.pg__c{margin-top:2.2rem;max-width:1040px}
/* La prose reste lisible (lignes courtes) ; les composants riches respirent large */
.pg__c>p,.pg__c>h2,.pg__c>h3,.pg__c>ul:not(.inclus){max-width:70ch}
.pg__c>.pi-hero__s{max-width:56ch}
.pg__c>*{margin-bottom:1.15rem}
.pg__c h2{margin:2.4rem 0 .9rem}
.pg__c h3{font-family:var(--tt);font-weight:500;font-size:1.4rem;color:var(--clair);
          margin:1.8rem 0 .7rem}
.pg__c ul,.pg__c ol{padding-left:1.4rem}
.pg__c li{margin-bottom:.5rem}
.pg__c a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.pg__c blockquote{border-left:2px solid var(--cyan);padding-left:1.2rem;color:var(--gris)}
.pg__c table{width:100%;border-collapse:collapse}
.pg__c th,.pg__c td{border-bottom:1px solid var(--bord);padding:.7rem .5rem;text-align:left}

/* ═══ LES APPARITIONS AU DÉFILEMENT ═════════════════════════════════════════
   ⚠️ POINT DÉLICAT, et un vrai défaut de la maquette corrigé ici.
   Dans la maquette, `.rv{opacity:0}` était écrit en dur : si le script ne
   s'exécutait pas, la moitié de la page restait INVISIBLE — c'est exactement le
   défaut du 22.08.2026, une page qui paraît inerte. Le masquage n'est donc appliqué
   que si le script en ligne du <head> a posé la classe `js-anim` sur <html>, ce
   qu'il fait avant la première peinture (donc sans clignotement).
   Sans JavaScript : tout est visible, tout de suite.                           */
.js-anim .rv{opacity:0;transform:translateY(16px);
    transition:opacity .65s var(--e),transform .65s var(--e)}
.js-anim .rv.vu{opacity:1;transform:none}
.js-anim .mesure:not(.mesure--fixe){clip-path:inset(0 100% 0 0);
    transition:clip-path 420ms var(--e)}
.js-anim .mesure.vu{clip-path:inset(0 0 0 0)}

/* ═══ MOUVEMENT RÉDUIT — tout s'éteint, sauf l'information ══════════════════
   L'HORLOGE, ELLE, CONTINUE DE TOURNER : une heure est une information, pas une
   animation. Le changement de chiffre reste un remplacement de texte, sans
   transition et sans fondu.                                                    */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .js-anim .rv{opacity:1;transform:none}
  .js-anim .mesure:not(.mesure--fixe){clip-path:inset(0 0 0 0)}
  .frise--anime i{opacity:.7}
  html{scroll-behavior:auto}}

/* Deux replis qu'on oublie toujours. Le premier : en couleurs forcées (Windows
   contraste élevé), les couches décoratives disparaissent — aucune information
   n'y est portée — et le trait coté reprend la couleur du texte système. */
@media(forced-colors:active){
  #halo,#taches,#balai{display:none}
  .mesure::before{background:CanvasText}
  .mesure::after{border-color:CanvasText}
}
@media(prefers-reduced-transparency:reduce){
  #halo,#taches{opacity:0}
  .top,.ruban,.heure,.visuel,.ag,.tr,.tfs,.qs{backdrop-filter:none;background:var(--surf)}
}

/* La barre d'administration de WordPress fait 32 px : sans cette règle, l'en-tête
   collant se cale sous elle et recouvre le premier élément de la page. */
body.admin-bar .top{top:32px}
@media(max-width:782px){body.admin-bar .top{top:46px}}

/* ═══ APPLICATIONS PUBLIÉES — grille 2 colonnes, épurée ══════════════════════
   Chaque app : sa capture, puis dessous le badge officiel Apple (cliquable) et
   le QR. Le QR ne sert qu'à l'ordinateur (on scanne avec le téléphone) : masqué
   sur mobile, où le badge se tape directement. */
.apps-pub{display:grid;gap:1.9rem;margin:2rem 0 0;grid-template-columns:1fr}
@media(min-width:720px){.apps-pub{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2.1rem}}
.app-pub{display:flex;flex-direction:column;gap:.95rem}
.app-pub__shot{display:block;border:1px solid var(--bord);border-radius:16px;overflow:hidden;
  background:#fff;box-shadow:0 10px 30px -18px rgba(20,30,60,.28);
  transition:transform .4s var(--e),box-shadow .4s var(--e),border-color .4s var(--e)}
.app-pub__shot img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center}
.app-pub__shot:hover{transform:translateY(-4px);border-color:var(--cyan);
  box-shadow:0 24px 52px -22px rgba(20,40,80,.34)}
.app-pub__shot:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.app-pub__meta{font-family:var(--mo);font-size:13px;color:var(--gris-f);margin:0}
.app-pub__meta b{color:var(--clair);font-weight:500}
.app-pub__desc{color:var(--gris);font-size:1.02rem;line-height:1.5;margin:0}
.app-pub__dl{display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap;margin-top:auto}
.app-pub__site{font-family:var(--mo);font-size:13px;color:var(--cyan);text-decoration:none;
  display:inline-flex;align-items:center;gap:.35rem;margin-top:.05rem}
.app-pub__site::after{content:"\2192";transition:transform .3s var(--e)}
.app-pub__site:hover{text-decoration:underline;text-underline-offset:3px}
.app-pub__site:hover::after{transform:translateX(4px)}
.app-store-badge{display:inline-block;line-height:0}
.app-store-badge img{width:168px;height:auto;display:block}
.app-store-badge:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:9px}
.app-pub__qr{width:92px;height:92px;flex:none;border:1px solid var(--bord);border-radius:8px}
@media(max-width:760px){.app-pub__qr{display:none}}

/* ═══════════════════════════════════════════════════════════════════════
   MISE EN ÉVIDENCE PAR LA COULEUR — 06.09.2026, demandé par Yves.
   Le gras est remplacé par la couleur de la palette choisie sur la première
   page, pour le texte courant comme pour les titres.

   Pourquoi une couleur ASSOMBRIE et non la couleur brute : les palettes sont
   composées pour un fond sombre. Sur le blanc du site, leurs couleurs
   plafonnent entre 1,6:1 (Braise, Or) et 3,3:1 (Améthyste) — très en dessous
   du seuil AA de 4,5:1 exigé pour du texte courant. `accentTexte()` dans
   assets/js/sevy.js les assombrit à teinte constante jusqu'à 4,6:1 : la
   couleur reste reconnaissable, le texte redevient lisible.

   Ce n'est PAS une entorse à la règle inscrite plus haut à propos du dégradé :
   celle-ci vise le texte en dégradé, dont le contraste varie sur la longueur
   du mot et n'est donc pas mesurable. Ici la couleur est unie et vérifiée.

   La variable est posée par le JS à chaque changement de palette ; la valeur
   ci-dessous est le repli avant tout choix.
   ═══════════════════════════════════════════════════════════════════════ */
:root{--accent-tx:#147A9E;--sur-lumiere:#080B16}

/* Texte courant : la couleur remplace le gras.
   Volontairement limité aux conteneurs de contenu — le bandeau défilant,
   le sélecteur de palette et les blocs `.moment` gardent leurs styles. */
.pg__c strong,.pg__c b,
.ch strong,.ch b,
.rv strong,.rv b{color:var(--accent-tx);font-weight:600}

/* Mises en évidence de la page d'accueil : la phrase forte du bloc horaire
   et les trois promesses. Elles étaient en gris foncé + gras.
   Volontairement exclus : `.ruban__i b` (les grands chiffres du bandeau, qui
   sont un élément d'affichage et non du texte) et `.pal__t b` (l'interface du
   sélecteur lui-même). */
.moment b,.pr b{color:var(--accent-tx)}

/* Titres : même couleur, pour l'homogénéité demandée. */
.pg__t,h2,.pg__c h2,.pg__c h3{color:var(--accent-tx)}

/* Liens de contenu : ils prenaient var(--cyan), qui devient la couleur VIVE
   de la palette et tombe alors sous le seuil de lisibilité sur blanc.
   On les passe à la teinte assombrie, comme le reste du texte. */
.pg__c a{color:var(--accent-tx)}

/* Un bouton n'est pas un lien de texte. La règle `.pg__c a` (deux classes)
   l'emportait sur `.b--deg` (une seule) : le bouton héritait de la couleur
   des liens ET du soulignement — d'où le texte turquoise souligné sur le
   dégradé, signalé le 06.09.2026. */
.pg__c a.b{text-decoration:none}
.pg__c a.b--deg{color:var(--sur-lumiere,#080B16)}
.pg__c a.b--fil{color:var(--clair)}
.pg__c a.b--fil:hover{color:var(--accent-tx)}