/*
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{
  --fond:#0C1020; --surf:#141A2E; --bord:#252C48;
  --cyan:#46A8D2; --bleu:#6270E0; --violet:#9A54C4; --magenta:#C4549A;
  --clair:#F0F2F8; --gris:#A8AEC4; --gris-f:#79819C;
  --lumiere:linear-gradient(100deg,#46A8D2,#6270E0,#9A54C4,#C4549A);
  --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:screen;
  background:radial-gradient(620px circle at var(--mx,72%) var(--my,18%),
    #6270E0 0%, rgba(154,84,196,.34) 26%, transparent 58%);
  opacity:.22;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:rgba(20,26,46,.55);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:#0E1324;border-left:1px solid var(--bord);
  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(6,8,16,.72);
  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:flex;flex-direction:column;align-items:center;gap:.55rem;
  padding:.75rem .9rem;min-width:104px;min-height:88px;cursor:pointer;
  background:rgba(20,26,46,.5);border:1px solid var(--bord);border-radius:var(--r);
  color:var(--gris);font-family:var(--tx);font-size:14.5px;font-weight:500;
  transition:border-color .25s,transform .25s var(--e),color .25s}
.pal__o:hover{transform:translateY(-3px);color:var(--clair);border-color:var(--gris-f)}
.pal__o[aria-pressed="true"]{color:var(--clair);border-color:var(--cyan);
  background:rgba(37,44,72,.72)}
.pal__o:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.pal__s{width:56px;height:56px;border-radius:50%;flex:none;
        box-shadow:0 4px 20px rgba(0,0,0,.4)}

/* 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__o{min-width:88px;font-size:13.5px}.pal__s{width:46px;height:46px}}

/* ═══ 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(12,16,32,.86);
     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(--lumiere);-webkit-background-clip:text;
      background-clip:text;color:transparent;
      filter:drop-shadow(0 0 26px rgba(98,112,224,.28))}

/* ─── L'HEURE DE VINELZ ─── */
.heure{margin-top:2rem;padding:1.15rem 1.3rem;background:rgba(20,26,46,.72);
       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:#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:rgba(20,26,46,.5);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:rgba(20,26,46,.55);backdrop-filter:blur(6px)}
.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,.30),transparent 62%),
    radial-gradient(60% 55% at 78% 72%,rgba(196,84,154,.28),transparent 64%),
    radial-gradient(50% 50% at 60% 40%,rgba(154,84,196,.24),transparent 66%),
    linear-gradient(150deg,#151B33,#0C1020)}
.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:rgba(20,26,46,.6);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}

.tr{margin-top:2.4rem;background:rgba(20,26,46,.45);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:rgba(37,44,72,.4)}
.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:rgba(20,26,46,.45);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,.18),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:rgba(20,26,46,.5);
  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,.16),transparent 62%);
  border-color:rgba(98,112,224,.5)}
.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)}

.qs{margin-top:2.2rem;background:rgba(20,26,46,.45);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:70ch}
.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}}