/* =====================================================================
   PIXELIS — charte du site vitrine.

   Sauge et crème, comme les produits : le prospect qui voit une
   démonstration après le site doit reconnaître la même main.

   Aucune police distante. Les polices système d'abord : la page
   s'affiche instantanément, et l'argument « aucun script tiers » reste
   vrai jusqu'au bout.
   ===================================================================== */
:root{
  --sauge:#7d8f69; --sauge-f:#5f7050; --sauge-c:#eef2ea;
  --creme:#f7f5ef; --blanc:#fff;
  --encre:#22251f; --gris:#5d6157; --gris-c:#8b9086;
  --ligne:#e3e0d6; --ambre:#8a6320; --ambre-c:#fdf3e3;
  --r:14px; --tap:44px;
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--creme);color:var(--encre);font-family:var(--sans);
  font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--sauge-f)}
/* La marge normale d'abord, en dur. Les encoches ensuite, et seulement
   si le navigateur sait faire : calc(20px + env(...)) est rejeté par
   certains moteurs, et la marge tombait alors a ZERO — le texte collait
   au bord de l'ecran. Une amelioration ne doit jamais pouvoir casser le
   cas de base. */
.wrap{width:100%;max-width:1080px;margin:0 auto;padding-left:20px;padding-right:20px}
@supports (padding: max(0px)){
  .wrap{padding-left:max(20px, env(safe-area-inset-left));
        padding-right:max(20px, env(safe-area-inset-right))}
}
.mut{color:var(--gris-c)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:10px 14px;border-radius:8px}

/* ---------- En-tête ---------- */
.hd{position:sticky;top:0;z-index:40;background:rgba(247,245,239,.94);
  backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--ligne)}
.hdin{display:flex;align-items:center;gap:16px;min-height:62px}
/* La marque, puis le mot. L'empreinte est en gris argentes : elle se pose
   sur le creme sans se battre avec le sauge, ce que le carre bleu du logo
   complet n'aurait pas fait. */
.logo{text-decoration:none;font-family:var(--serif);font-size:23px;font-weight:700;
  color:var(--sauge-f);letter-spacing:.3px;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:9px}
.logo .lg-m{width:34px;height:34px;display:block;flex:0 0 auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 13px;
  text-decoration:none;color:var(--gris);font-size:15px;font-weight:600;border-radius:100px}
.nav a:hover{background:var(--sauge-c);color:var(--sauge-f)}
.nav a.on{color:var(--sauge-f);background:var(--sauge-c)}
.nav a.cta{background:var(--sauge);color:#fff;padding:0 18px;margin-left:6px}
.nav a.cta:hover{background:var(--sauge-f);color:#fff}
.bg{display:none}

/* ---------- Titres et texte ---------- */
h1{font-family:var(--serif);font-size:clamp(30px,5.2vw,46px);line-height:1.15;
  font-weight:700;margin:0 0 14px;letter-spacing:-.4px}
h2{font-family:var(--serif);font-size:clamp(23px,3.4vw,32px);line-height:1.2;
  font-weight:700;margin:44px 0 12px;letter-spacing:-.2px}
h3{font-size:18.5px;font-weight:700;margin:30px 0 8px}
p{margin:0 0 14px}
.lead{font-size:19px;color:var(--gris);max-width:60ch}
/* `section.sec` et non `.sec` : le bouton secondaire porte `class="btn sec"`,
   et la regle de section lui appliquait son padding vertical. Sur petite
   largeur, ou la regle passe APRES celle du bouton, il devenait un ovale
   de 96 px de haut. Une classe de mise en page et une classe de composant
   ne doivent pas porter le meme nom — a defaut, on qualifie par la balise. */
/* ---------------------------------------------------------------------
   LES BANDES.

   Une page d'une seule couleur se lit comme un mur : on ne voit pas ou
   une idee finit et ou la suivante commence, et le pouce ne sait pas ou
   il en est. On alterne donc les fonds — creme, blanc, creme — et une
   ou deux bandes SOMBRES par page, la ou l'on veut que l'oeil s'arrete.

   L'alternance est automatique (nth-of-type) : ajouter une section plus
   tard ne demande aucune classe, et personne n'a a se souvenir de la
   regle. Les bandes sombres, elles, se declarent — c'est une decision
   editoriale, pas une consequence de l'ordre du HTML.

   Le filet de separation ne sert qu'entre deux fonds IDENTIQUES : entre
   deux couleurs differentes, il fait sale. */
section.sec{padding:52px 0;background:var(--creme)}
section.sec:nth-of-type(even){background:var(--blanc)}
section.sec+section.sec{border-top:1px solid transparent}

/* ---------- La bande sombre ----------
   Tous les tons se redefinissent ICI, pas au cas par cas dans les pages :
   une bande sombre est un contexte, pas une couleur de fond. */
section.sec.sec-fonce{background:var(--sauge-f);color:#eef1e9;border-top-color:transparent}
.sec-fonce h1,.sec-fonce h2,.sec-fonce h3,.sec-fonce h4{color:#fff}
.sec-fonce .lead{color:#e2e8dc}
.sec-fonce .mut,.sec-fonce small,.sec-fonce em.mut{color:#bfcbb6}
.sec-fonce a{color:#fff;text-decoration-color:rgba(255,255,255,.5)}
.sec-fonce strong{color:#fff}
.sec-fonce .card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);color:#eef1e9}
.sec-fonce .card h3{color:#fff}
.sec-fonce .card p{color:#dfe6d9}
.sec-fonce .btn{background:#fff;color:var(--sauge-f);border-color:#fff}
.sec-fonce .btn.sec{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.sec-fonce .tb{background:transparent;box-shadow:none;border:1px solid rgba(255,255,255,.2)}
.sec-fonce .tb th,.sec-fonce .tb td{border-color:rgba(255,255,255,.18);color:#eef1e9}
.sec-fonce .tb th{background:rgba(255,255,255,.10);color:#fff}
.sec-fonce .tb tr.nous td{background:rgba(255,255,255,.14);color:#fff}
.sec-fonce .tb td.src,.sec-fonce .tb th.src{color:#c6d1bd}
.sec-fonce .tb .mut{color:#b9c5af}
.sec-fonce .pxs,.sec-fonce .s3{color:#cfd9c7}
.sec-fonce .kpi{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2)}
.sec-fonce .kpi b{color:#fff}
.sec-fonce .kpi span{color:#cfd9c7}
/* Les accordeons et les tableaux comparatifs ont leur propre fond blanc :
   sans ces deux regles, c'est du texte blanc sur du blanc. Toute brique a
   fond clair doit etre reprise ici — c'est le prix d'une bande sombre, et
   c'est pour ca qu'on n'en met qu'une ou deux par page. */
.sec-fonce .qa{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.sec-fonce .qa>summary{color:#fff}
.sec-fonce .qa>summary::after{border-right-color:#dbe4d3;border-bottom-color:#dbe4d3}
.sec-fonce .qa .rep{color:#dfe6d9}
.sec-fonce .mk,.sec-fonce .mk td,.sec-fonce .mk th{border-color:rgba(255,255,255,.2);color:#eef1e9}
.sec-fonce .mk th{background:rgba(255,255,255,.08);color:#fff}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);
  padding:0 22px;border-radius:100px;text-decoration:none;font-weight:700;font-size:16px;
  background:var(--sauge);color:#fff;border:1px solid var(--sauge);cursor:pointer;font-family:inherit}
.btn:hover{background:var(--sauge-f);border-color:var(--sauge-f)}
.btn.sec{background:#fff;color:var(--sauge-f);border-color:var(--ligne)}
.btn.sec:hover{background:var(--sauge-c)}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 0}

/* ---------- Héros ---------- */
/* .hero est posé sur le MÊME élément que .wrap : un raccourci `padding`
   écraserait la marge latérale de .wrap et collerait le texte au bord de
   l'écran. On ne règle donc que le vertical. */
.hero{padding-top:56px;padding-bottom:40px}
/* 16ch coupait l'accroche en quatre lignes des qu'elle a grandi. Une
   accroche de trois lignes maximum : au-dela, on ne la lit plus, on la
   parcourt. */
.hero h1{max-width:21ch}
.hero .lead{font-size:20px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:14px;margin:32px 0 0}
.kpi{background:#fff;border:1px solid var(--ligne);border-radius:var(--r);padding:18px}
/* LE CHIFFRE S'ADAPTE A LA CARTE, PAS L'INVERSE.

   « 1 application » et « Sans engagement » debordaient de leur carte sur
   telephone : trente pixels de serif dans un bloc de cent trente, et le
   mot « application » ne se coupe pas tout seul. La taille se calcule
   donc sur la largeur de l'ecran, et la cesure francaise prend le relais
   pour les mots trop longs — la page declare lang="fr", le navigateur
   sait ou couper. `overflow-wrap` reste en dernier recours : mieux vaut
   un mot coupe qu'un mot qui sort du cadre. */
.kpi b{display:block;font-family:var(--serif);font-size:clamp(21px,5.6vw,30px);
  line-height:1.12;color:var(--sauge-f);hyphens:auto;overflow-wrap:break-word}
.kpi span{display:block;font-size:14px;color:var(--gris);margin-top:5px}
/* LA METHODE, SOUS LE CHIFFRE. Un seuil affiché sans son calcul est une
   allégation ; avec son calcul, c'est une division que le visiteur peut
   refaire avec ses propres chiffres. Elle ne doit jamais être coupée
   d'un seuil affiché plus haut. */
.note-seuil{font-size:12.5px;line-height:1.55;margin-top:12px}

/* ---------- Cartes ----------
   CES REGLES ONT DISPARU UNE FOIS, ET C'EST INSTRUCTIF. Le bloc de
   l'en-tete photo avait ete insere JUSTE AU-DESSUS ; en le remplacant
   plus tard d'un marqueur a l'autre, j'ai emporte ce qui s'etait
   retrouve entre les deux. La page Modules s'est affichee en liens nus,
   sans une seule erreur : ni 404, ni erreur JavaScript, ni debordement —
   donc rien que la verification automatique pouvait voir. Une regle CSS
   qui manque ne se detecte qu'a l'image. */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
/* QUATRE COLONNES, PAS « AUTANT QUE CA RENTRE ».

   .g2 est en auto-fit : a la largeur du site il tombe a trois colonnes et
   laisse la quatrieme carte seule sur une deuxieme ligne, ce qui donne
   l'impression d'un element ajoute apres coup. Quand le titre dit
   « quatre », la grille doit dire quatre. D'ou des paliers fixes :
   4 colonnes, puis 2, puis 1 — jamais 3, qui est justement la valeur
   qui casse la lecture. */
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g4{grid-template-columns:1fr}}
/* A quatre colonnes la carte fait environ 240 px : une adresse e-mail
   dans du <code> depasserait et ferait glisser la page en largeur. */
.g4 .card code{overflow-wrap:anywhere}

/* LE DEPLIAGE, ET POURQUOI L'ETAT REPLIE N'EST PAS ICI PAR DEFAUT.

   `rv-on` est posee par le script, jamais dans le HTML. Consequence : si
   le JavaScript ne tourne pas, ou si le visiteur a demande moins
   d'animation, aucune de ces regles ne s'applique et les cartes sont
   simplement visibles. Un bloc invisible en attente d'une animation qui
   ne viendra pas, c'est du contenu perdu — et sur une page de vente,
   c'est l'argument perdu.

   `transform-origin: top center` : les cartes s'ouvrent vers le bas
   depuis leur bord haut. C'est ce qui se lit comme un depliage plutot
   que comme une apparition. */
.rv.rv-on > *{opacity:0;transform:translateY(14px) scaleY(.965);transform-origin:top center}
.rv.rv-on.rv-go > *{opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.22,.7,.28,1),transform .6s cubic-bezier(.22,.7,.28,1)}
.rv.rv-on.rv-go > :nth-child(2){transition-delay:.17s}
.rv.rv-on.rv-go > :nth-child(3){transition-delay:.34s}
.rv.rv-on.rv-go > :nth-child(4){transition-delay:.51s}
.card{background:#fff;border:1px solid var(--ligne);border-radius:var(--r);padding:22px}
.card h3{margin-top:0}
.card.lien{text-decoration:none;color:inherit;display:block}
.card.lien:hover{border-color:var(--sauge);box-shadow:0 6px 20px rgba(93,110,80,.10)}
.card .px{font-weight:800;color:var(--sauge-f);font-size:16px;margin-top:10px}
.card .px small{font-weight:600;color:var(--gris-c)}
.card .pxs{font-size:13px;color:var(--sauge-f);font-weight:600;margin-top:5px;line-height:1.4}
.card .pxs strong{font-weight:800}

/* ===== L'EN-TETE PLEINE LARGEUR, PHOTO PUIS VIDEO =========================

   Le modele est l'accueil de La Taverne : l'image occupe tout, le menu
   flotte dessus sans fond, le texte est en blanc a meme la photo. Pas de
   panneau, pas de cadre — ce qui tient la lisibilite, c'est un voile
   sombre pose sur l'image et une ombre portee sous les lettres.

   Actif seulement quand `assets/hero.webp` existe (px_hero()) ET sur la
   page d'accueil (`body.p-hero`, pose par _tpl.php). Sans le fichier,
   tout ce bloc reste inerte et le site garde son en-tete creme.
   ========================================================================= */

/* --- Le menu par-dessus l'image ---------------------------------------
   `absolute` et non `sticky` : le menu doit laisser passer la video
   dessous. Il defile donc avec la page, comme chez La Taverne. Un menu
   collant et transparent deviendrait illisible des qu'il quitte l'image. */
.p-hero .hd{position:absolute;top:0;left:0;right:0;background:none;border-bottom:0;
  backdrop-filter:none;z-index:40}
.p-hero .hd .logo{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.p-hero .hd .nav a{color:rgba(255,255,255,.94);text-shadow:0 1px 12px rgba(0,0,0,.4)}
.p-hero .hd .nav a:hover{background:rgba(255,255,255,.16);color:#fff}
.p-hero .hd .nav a.on{background:rgba(255,255,255,.18);color:#fff}
.p-hero .hd .nav a.cta{background:var(--sauge);color:#fff;text-shadow:none}
.p-hero .hd .nav a.cta:hover{background:var(--sauge-f)}
.p-hero .hd .bg span{background:#fff}

.hx{position:relative;isolation:isolate;overflow:hidden;padding:0}
.hx-in{padding-top:clamp(96px,11vw,150px);padding-bottom:clamp(34px,5vw,64px)}
.hx-media .hx-in{min-height:min(86vh,860px);display:flex;flex-direction:column;justify-content:center}

.hx-img,.hx-vid{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;
  transition:filter .5s ease, transform .5s ease}
.hx-vid{z-index:-2;opacity:0;transition:opacity 1.1s ease, filter .5s ease, transform .5s ease}
.hx-vid.vu{opacity:1}
/* Le voile permanent : sans lui, un titre blanc sur une cuisine eclairee
   disparait des que l'image bouge. Plus dense en haut et en bas, ou se
   trouvent le menu et les briques. */
.hx-voile{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,18,12,.62) 0%,rgba(14,18,12,.34) 38%,
                             rgba(14,18,12,.40) 70%,rgba(14,18,12,.66) 100%)}

/* --- Le texte, en blanc, a meme l'image ------------------------------- */
.hx-txt{max-width:24ch}
.hx-media .hx-txt{max-width:min(62ch,88%)}
.hx-media .hx-txt h1{color:#fff;max-width:19ch;margin:0 0 14px;
  text-shadow:0 2px 26px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.35)}
.hx-media .hx-txt .lead{color:rgba(255,255,255,.95);max-width:54ch;margin:0 0 26px;
  text-shadow:0 1px 18px rgba(0,0,0,.6)}
.hx-media .hx-txt .btns{margin:0}

/* --- LA RANGEE DE MODULES DU BANDEAU (28/08) --------------------------
   Elle remplace une enumeration en prose. Chaque puce est un dessin et un
   mot ; elles s'enveloppent, jamais de defilement horizontal.

   POURQUOI UN FOND ET UN CONTOUR : le bandeau est pose sur une PHOTO, et
   une photo de cuisine a des zones claires. Du texte blanc seul y
   disparait par endroits — le voile global ne suffit pas, c'est deja la
   raison pour laquelle le titre porte une ombre. Chaque puce porte donc
   son propre fond, comme les briques plus bas. */
.hxmods{list-style:none;margin:0 0 18px;padding:0;
  display:flex;flex-wrap:wrap;gap:8px 10px;max-width:60ch}
.hxmods li{display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px 7px 11px;border-radius:100px;
  font-size:14.5px;font-weight:600;line-height:1;white-space:nowrap;
  /* Blanc, pas creme : sans photo, le bandeau est sur le fond creme de la
     page — une puce creme sur fond creme n'existe que par son contour. */
  background:var(--blanc,#fff);color:var(--sauge-f,#5f7050);
  border:1px solid var(--ligne,rgba(0,0,0,.10))}
.hxmods li svg{width:17px;height:17px;flex:0 0 auto;opacity:.85}
/* Sur la photo, les puces passent en verre sombre, comme les briques. */
.hx-media .hxmods li{background:rgba(18,22,16,.42);color:#fff;
  border-color:rgba(255,255,255,.28);
  backdrop-filter:blur(8px) saturate(1.15);
  box-shadow:0 6px 18px rgba(0,0,0,.22)}
.hx-media .hxmods li svg{opacity:.95}
/* La phrase qui suit la rangee : elle conclut, elle n'introduit plus. */
.hx-media .hx-txt .hxmods + .lead{font-weight:700}
@media(max-width:620px){
  .hxmods{gap:6px 7px;margin-bottom:15px}
  .hxmods li{font-size:13px;padding:6px 11px 6px 9px;gap:6px}
  .hxmods li svg{width:15px;height:15px}
}
/* Le bouton clair : contour blanc et fond transparent, comme « Commander
   en ligne » chez La Taverne. Il ne porte pas la classe `sec`, qui est
   aussi celle des sections. */
.btn.clair{background:rgba(255,255,255,.10);color:#fff;border:1.6px solid rgba(255,255,255,.85);
  backdrop-filter:blur(4px)}
.btn.clair:hover{background:#fff;color:var(--sauge-f);border-color:#fff}

/* --- Les briques, plus bas, en verre sombre --------------------------- */
.hx-media .kpis{margin-top:clamp(40px,7vw,86px)}
.hx-media .kpi{background:rgba(18,22,16,.34);backdrop-filter:blur(10px) saturate(1.2);
  border:1px solid rgba(255,255,255,.22);box-shadow:0 12px 34px rgba(0,0,0,.26);
  transition:transform .3s ease, background .3s ease, border-color .3s ease}
.hx-media .kpi b{color:#fff}
.hx-media .kpi span{color:rgba(255,255,255,.88)}
.hx-media .kpi:hover{transform:translateY(-3px);background:rgba(18,22,16,.5);
  border-color:rgba(255,255,255,.4)}
/* Au survol d'une brique, l'image s'assombrit — plus de flou. */
.hx-media:has(.kpi:hover) .hx-img,
.hx-media:has(.kpi:hover) .hx-vid{filter:brightness(.52) saturate(1.05)}

/* --- L'arrivee, un bloc apres l'autre, tres lentement ----------------- */
@keyframes hxmonte{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hx-media .hx-a1,.hx-media .hx-a2,.hx-media .hx-a3,
.hx-media .hx-a4,.hx-media .hx-a5,.hx-media .hx-a6,.hx-media .hx-a7{
  animation:hxmonte 1.6s cubic-bezier(.19,.72,.24,1) both}
.hx-media .hx-a1{animation-delay:.15s}
.hx-media .hx-a2{animation-delay:.55s}
.hx-media .hx-a3{animation-delay:.95s}
.hx-media .hx-a4{animation-delay:1.45s}
.hx-media .hx-a5{animation-delay:1.85s}
.hx-media .hx-a6{animation-delay:2.25s}
.hx-media .hx-a7{animation-delay:2.65s}

@media (max-width:820px){
  /* Le menu deplie sur fond transparent serait illisible : on lui rend un
     fond des qu'il s'ouvre.

     Et il se DETACHE de la barre : l'en-tete etant en position absolue,
     un menu qui reste dans le flux fait grandir la barre, qui centre alors
     son logo au milieu de l'ecran — par-dessus le titre. Le menu est donc
     pose sous la barre, sans toucher a sa hauteur. */
  .p-hero .hdin{position:relative}
  .p-hero .bg-cb:checked~.nav{position:absolute;top:calc(100% + 4px);right:0;
    width:min(280px,74vw);background:rgba(14,18,12,.94);backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:8px;
    box-shadow:0 18px 40px rgba(0,0,0,.4)}
  .p-hero .hd .nav a{text-shadow:none}
}
@media (max-width:700px){
  .hx-media .hx-in{min-height:min(78vh,700px)}
  .hx-media .hx-txt{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .hx-media .hx-a1,.hx-media .hx-a2,.hx-media .hx-a3,.hx-media .hx-a4,
  .hx-media .hx-a5,.hx-media .hx-a6,.hx-media .hx-a7{animation:none}
  .hx-img,.hx-vid{transition:filter .2s linear}
}

/* --- LES CARTES DE MODULES : repliées, dépliées au survol ---------------

   Le picto est celui du schéma d'architecture (px_icone()), à la même
   place que sur les tuiles du tableau de bord du produit : un prospect
   qui voit la démonstration après le site doit reconnaître la même main.

   Le dépliage se fait PAR-DESSUS les voisines. C'est la raison du couple
   .mslot / .mcard : le créneau garde une hauteur fixe dans la grille, la
   carte est posée dedans en absolu et peut grandir sans rien pousser.
   Sans ça, survoler une carte réorganise la grille sous le curseur. --- */
.mod-i{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:var(--sauge-c);color:var(--sauge-f)}
.mod-i svg{width:21px;height:21px}
.socle-c{display:flex;gap:16px;align-items:flex-start}
.socle-c h3{margin-top:0}

.mtete{display:flex;gap:12px;align-items:center;margin:0 0 4px}
.mtete h3{margin:0;font-size:18px;line-height:1.25}
.mcard .plus{margin-top:12px}
.mcard .mgo{margin:12px 0 0;font-weight:700;color:var(--sauge-f);font-size:14.5px}

@media (hover:hover) and (min-width:820px){
  .mods{align-items:start}
  .mslot{position:relative;min-height:126px}
  .mcard{position:absolute;left:0;right:0;top:0;transition:box-shadow .2s ease,border-color .2s ease}
  .mcard .plus{max-height:0;opacity:0;overflow:hidden;margin-top:0;
    transition:max-height .3s ease,opacity .22s ease,margin-top .3s ease}
  .mcard:hover,.mcard:focus-visible{z-index:3;box-shadow:0 14px 36px rgba(40,50,35,.16)}
  .mcard:hover .plus,.mcard:focus-visible .plus{max-height:260px;opacity:1;margin-top:12px}
}
@media (max-width:819px){ .mslot{min-height:0} }

/* Le retour vers la liste : un vrai bouton, pas une ligne grise. */
.retour{display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 13px;
  border:1px solid var(--ligne);border-radius:100px;background:#fff;
  text-decoration:none;color:var(--sauge-f);font-weight:700;font-size:14.5px}
.retour:hover{border-color:var(--sauge);background:var(--sauge-c)}
.retour span{font-size:16px;line-height:1}
.mtitre{display:flex;gap:14px;align-items:center;margin:0 0 10px}
.mod-i.grand{width:52px;height:52px;border-radius:14px}
.mod-i.grand svg{width:28px;height:28px}
@media(max-width:600px){ .mod-i.grand{width:44px;height:44px} .mod-i.grand svg{width:24px;height:24px} }

/* ---------- Preuve chiffrée ---------- */
.pv{margin:16px 0;padding:16px 18px;background:#fff;border:1px solid var(--ligne);
  border-left:4px solid var(--sauge);border-radius:0 var(--r) var(--r) 0}
.pv p{margin:0 0 8px;font-weight:600}
.pv cite{font-style:normal;font-size:13px;color:var(--gris-c)}

/* ---------- Listes de fonctions ---------- */
.fx{list-style:none;padding:0;margin:12px 0 0}
.fx li{position:relative;padding:7px 0 7px 28px;border-bottom:1px solid var(--ligne)}
.fx li:last-child{border-bottom:0}
.fx li::before{content:"";position:absolute;left:4px;top:15px;width:9px;height:5px;
  border-left:2px solid var(--sauge);border-bottom:2px solid var(--sauge);transform:rotate(-45deg)}
.lim{list-style:none;padding:0;margin:12px 0 0}
.lim li{position:relative;padding:7px 0 7px 28px;color:var(--gris)}
.lim li::before{content:"—";position:absolute;left:4px;top:7px;color:var(--ambre);font-weight:800}
.enc-amb{background:var(--ambre-c);border:1px solid #efdcb6;border-radius:var(--r);padding:18px 20px;margin:16px 0}
.enc-amb h3{margin-top:0;color:var(--ambre)}

/* ---------- Tableaux ---------- */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:12px 0}
.tb{width:100%;border-collapse:collapse;font-size:14.5px;background:#fff;
  border:1px solid var(--ligne);border-radius:var(--r);overflow:hidden}
.tb th,.tb td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--ligne);vertical-align:top}
.tb th{background:var(--sauge-c);color:var(--sauge-f);font-size:13px;text-transform:uppercase;
  letter-spacing:.4px;white-space:nowrap}
.tb tbody tr:last-child td{border-bottom:0}
.tb tr.nous td{background:var(--sauge-c);font-weight:700}
.tb td.src,.tb th.src{font-size:12.5px;color:var(--gris-c)}
.tb .num{text-align:right;white-space:nowrap}

/* ---------- Formules ---------- */
.form-g{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));margin-top:18px}
.fo{background:#fff;border:1px solid var(--ligne);border-radius:var(--r);padding:20px;display:flex;flex-direction:column}
.fo.reco{border-color:var(--sauge);box-shadow:0 8px 26px rgba(93,110,80,.13)}
.fo .eti-slot{display:flex;align-items:center;justify-content:center;height:26px;margin:0 0 8px}
.fo .eti{background:var(--sauge);color:#fff;font-size:11.5px;font-weight:800;
  letter-spacing:.5px;text-transform:uppercase;padding:3px 10px;border-radius:100px;margin-bottom:10px}
/* L'en-tête est centré : le nom du pack et son prix sont ce qu'on compare
   d'une colonne à l'autre, et l'œil compare mieux sur un axe. La liste,
   elle, reste alignée à gauche — on ne centre pas du texte qui se lit. */
.fo h3{margin:0 0 4px;font-family:var(--serif);font-size:21px;text-align:center}
.fo .pr{font-family:var(--serif);font-size:36px;font-weight:700;color:var(--sauge-f);line-height:1.1;text-align:center}
.fo .pr small{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--gris)}
.fo .av{font-size:13px;color:var(--gris-c);margin:2px 0 14px;text-align:center}
/* LE SEUIL, SOUS LE PRIX.

   Encadré et centré comme le prix, parce qu'il se lit avec lui : c'est
   la même information vue de l'autre côté. Deux lignes maximum — la
   première est de l'argent, la seconde du temps — et la seconde est
   volontairement plus discrète : le temps appuie l'argument, il ne le
   porte pas. */
.seuil{margin:10px 0 12px;padding:10px 12px;border-radius:10px;text-align:center;
  background:var(--creme-f,#f4f2ea);border:1px solid var(--ligne)}
/* Trois lignes fixes : l'etiquette, la valeur, le temps. Ecrites d'un
   trait, « Rentabilise des 10 couverts par mois » passait sur trois
   lignes pour les packs a deux chiffres et sur deux pour les autres :
   les cinq encadres n'avaient plus la meme hauteur, dans la seule zone
   de la page faite pour etre comparee colonne par colonne. */
.seuil .s0{display:block;font-size:12px;color:var(--gris);text-transform:uppercase;letter-spacing:.4px}
.seuil .s1{display:block;font-size:13.5px;color:var(--ink,#22251f);line-height:1.35;margin-top:2px}
.seuil .s1 strong{color:var(--sauge-f);white-space:nowrap;font-size:15.5px}
.seuil .s2{display:block;font-size:12.5px;color:var(--gris);margin-top:5px;line-height:1.35;
  padding-top:5px;border-top:1px solid var(--ligne)}
/* La variante « en ligne » de l'encadre : sur une fiche de module il n'y
   a qu'une colonne, donc pas de hauteur a egaliser — le seuil et sa
   methode se lisent l'un sous l'autre, en pleine largeur. */
.seuil-l{text-align:left;max-width:74ch;margin:18px 0 0;padding:14px 16px}
.seuil-l .s1{font-size:16px;margin:0}
.seuil-l .s0{display:inline;font-size:12px;letter-spacing:.4px}
.seuil-l .s1 strong{color:var(--sauge-f);font-size:17px}
/* Le nombre de couverts ne se coupe pas ; la phrase de gain, SI — sinon
   « Le service s'ouvre en un apres-midi, pas en trois semaines » sort de
   l'ecran sur un telephone. Le nowrap herite de la carte de tarifs, ou
   le strong ne contient jamais qu'un nombre. */
.seuil-l .s1 strong.g{white-space:normal;font-size:16px}
.seuil-l .s3{font-size:12.5px;line-height:1.55;color:var(--gris);margin:8px 0 0;padding-top:8px;
  border-top:1px solid var(--ligne)}
.fo ul{list-style:none;padding:0;margin:0 0 16px;font-size:14.5px}
.fo ul li{padding:5px 0 5px 26px;position:relative}
/* Une coche, pas un point. Le point disait « ligne d'une liste » ; la coche
   dit « compris ». Dessinee en SVG dans l'URL : aucun fichier, aucune
   requete, nette a toutes les tailles d'ecran. */
.fo ul li::before{content:"";position:absolute;left:0;top:8px;width:17px;height:17px;
  background:no-repeat center/17px 17px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8f69' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5 9.2 17.5 4 12.2'/%3E%3C/svg%3E")}
/* « Tout Vitrine, plus : » — ce n'est pas une fonctionnalité de plus, donc
   pas de coche : une puce cochée devant cette ligne ferait croire à un
   onzième module qui s'appellerait « Tout Vitrine ». */
.fo ul li.tout{padding-left:0;color:var(--gris);font-size:13.5px;
  border-bottom:1px solid var(--ligne);margin:0 0 6px;padding-bottom:8px}
.fo ul li.tout::before{display:none}
.fo ul li.tout strong{color:var(--sauge-f)}
/* L'encadré « Offert » : plus foncé que la carte, pour qu'on le voie
   avant de lire. C'est le seul endroit de la grille où l'on donne
   quelque chose — il ne doit pas ressembler au reste. */
.fo-off{background:var(--sauge-c);border:1px solid var(--sauge);border-radius:12px;
  padding:11px 14px;margin:0 0 16px}
.fo-off-t{margin:0 0 5px;font-size:11px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--sauge-f)}
.fo-off ul{margin:0;padding:0;list-style:none;font-size:14.5px}
.fo-off ul li{padding:3px 0 3px 24px;position:relative;font-weight:700;color:var(--sauge-f)}
.fo-off ul li::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f7050' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5 9.2 17.5 4 12.2'/%3E%3C/svg%3E")}
.fo ul li.off{color:var(--sauge-f);font-weight:700}

/* ---------------------------------------------------------------------
   LE PICTO DU MODULE A LA PLACE DE LA COCHE (25/08/2026).

   Une coche devant un nom de module repetait « inclus », qu'on avait
   deja compris en lisant le titre du pack. Le picto identifie : c'est le
   meme dessin que sur la liste des modules et sur le schema
   d'architecture, et l'oeil le reconnait d'un pack a l'autre. La coche
   descend d'un cran, devant les fonctionnalites, la ou elle dit vraiment
   quelque chose.
   --------------------------------------------------------------------- */
.fo ul li.mod{padding-left:28px}
.fo ul li.mod::before{display:none}
.mi{position:absolute;left:0;top:6px;width:19px;height:19px;color:var(--sauge-f);
  display:inline-flex;align-items:center;justify-content:center}
.mi svg{width:19px;height:19px;display:block}
.fo-off ul li.mod{padding-left:26px}
.fo-off ul li.mod::before{display:none}
.fo-off .mi{top:4px;width:17px;height:17px}
.fo-off .mi svg{width:17px;height:17px}

/* ---------------------------------------------------------------------
   « TOUT CE QU'IL CONTIENT » : REPLIE PAR DEFAUT.

   Cent dix-huit lignes cochees ne convainquent pas, elles epuisent — et
   depliees, elles feraient d'une comparaison de cinq colonnes une page
   de trois metres. Le compte est visible, la liste s'ouvre a la demande.
   `<details>` est natif : rien a charger, ca marche au clavier et a
   l'impression.
   --------------------------------------------------------------------- */
.fdets{margin:26px 0 0;display:flex;flex-direction:column;gap:10px}
.fdet{background:#fff;border:1px solid var(--ligne);border-radius:14px;padding:14px 18px}
.fdet > summary{cursor:pointer;font-size:15px;font-weight:600;color:var(--encre);
  list-style:none;display:flex;align-items:center;gap:6px;padding:2px 0}
.fdet > summary::-webkit-details-marker{display:none}
.fdet > summary::after{content:"▾";font-size:11px;transition:transform .15s}
.fdet[open] > summary::after{transform:rotate(180deg)}
/* Trois colonnes sur un ecran large, une seule sur un telephone : le
   texte d'une fonctionnalite fait souvent deux lignes, il lui faut de la
   largeur pour ne pas se couper a trois mots. */
.fdg{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px 26px;margin:16px 0 4px}
.fdm{margin:0;break-inside:avoid}
.fdm-t{margin:0 0 5px;padding-left:26px;position:relative;font-size:13px;font-weight:800;
  color:var(--encre);display:flex;align-items:center;gap:7px}
.fdm-t em{font-style:normal;font-weight:600;font-size:11.5px;color:var(--gris);
  background:var(--sauge-c);border-radius:99px;padding:1px 7px}
.fdm-l{list-style:none;padding:0;margin:0;font-size:12.5px;line-height:1.45}
.fdm-l li{padding:3px 0 3px 20px;position:relative;color:var(--gris)}
.fdm-l li::before{content:"";position:absolute;left:2px;top:8px;width:11px;height:11px;
  background:no-repeat center/11px 11px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a6b3f' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E")}
.fo ul li.off::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f7050' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5 9.2 17.5 4 12.2'/%3E%3C/svg%3E")}
/* Le montant a la carte, barre, a cote du prix de la formule. */
.fo .av .barre{text-decoration:line-through;opacity:.75;margin-left:2px}
/* Le compte est collé au bouton, en bas de colonne : c'est le dernier
   chiffre qu'on lit avant de cliquer. Le « margin-top:auto » vit donc ici
   et plus sur le bouton, sinon un blanc s'ouvrait entre les deux. */
.fo-tot{margin:auto 0 12px;font-size:14px;color:var(--ink,#22251f);font-weight:800;text-align:center}
.fo .btn{margin-top:0}

/* ---------- Calculateur ---------- */
.calc{background:#fff;border:1px solid var(--ligne);border-radius:var(--r);padding:8px 18px}

/* --- UNE LIGNE DE MODULE : picto, nom cliquable, prix, interrupteur ----
   Le nom est un lien vers la fiche ; l'interrupteur est un bouton, pas une
   case a cocher. Les deux gestes sont distincts et ne se genent pas : on
   peut lire la fiche sans allumer le module, et l'allumer sans quitter la
   page. --- */
.mo{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--ligne)}
.mo:last-of-type{border-bottom:0}
.mo-i{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;
  background:var(--sauge-c);color:var(--sauge-f)}
.mo-i svg{width:20px;height:20px}
.mo-c{flex:1;min-width:0;display:block}
.mo-n{display:inline-block;font-weight:700;font-size:16px;color:var(--ink,#22251f);text-decoration:none}
.mo-n:hover{color:var(--sauge-f);text-decoration:underline}
.mo-p{display:block;font-size:14px;color:var(--sauge-f);font-weight:700;margin-top:1px}
.mo-p small{font-weight:600;color:var(--gris-c)}
.mo-p em{font-style:normal;font-weight:600}
.mo-s{display:block;font-size:13px;color:var(--sauge-f);font-weight:600;margin-top:3px}
.mo-s strong{font-weight:800}
/* LA LIGNE BLOQUEE RESTE LISIBLE. Grisee jusqu'a l'illisible, elle
   disparaitrait du catalogue pour le visiteur — on veut qu'il voie le
   module ET la raison, pas qu'il ne voie plus rien. */
.mo.bloq .mo-n,.mo.bloq .mo-p,.mo.bloq .mo-s,.mo.bloq .mo-d{opacity:.5}
.mo.bloq .mo-i{opacity:.35}
.mo-x{display:block;font-size:13px;color:#8a5a1a;background:#fdf6e7;border:1px solid #e8d8b0;
  border-radius:9px;padding:8px 10px;margin-top:7px;line-height:1.45}
.itg:disabled{cursor:not-allowed;opacity:.45}
.mo-d{display:block;font-size:13.5px;color:var(--gris);margin-top:3px}
.mo.fixe{opacity:.92}

/* L'interrupteur. `role=switch` : un lecteur d'ecran annonce « active /
   desactive », ce qu'une case a cocher detournee n'aurait pas fait. */
.itg{flex:0 0 auto;position:relative;width:52px;height:30px;border-radius:100px;cursor:pointer;
  border:1px solid var(--ligne);background:#e8e6de;transition:background .2s ease,border-color .2s ease}
.itg::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:transform .2s ease}
.itg[aria-checked="true"],.itg.on{background:var(--sauge);border-color:var(--sauge)}
.itg[aria-checked="true"]::after,.itg.on::after{transform:translateX(22px)}
.itg:focus-visible{outline:3px solid var(--sauge);outline-offset:2px}
.itg.fige{cursor:default;opacity:.65}

.alc-tot{position:sticky;top:16px}
@media(max-width:820px){ .alc-tot{position:static} }

.tot{background:var(--sauge-c);border-radius:var(--r);padding:18px 20px;margin-top:18px}
.tot .l{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:15px}
.tot .l.gros{font-size:20px;font-weight:800;color:var(--sauge-f);border-top:1px solid #d6ddd0;margin-top:8px;padding-top:12px}
.fld{display:block;margin:14px 0 0}
.fld span{display:block;font-size:14px;font-weight:700;margin-bottom:5px}
.fld input,.fld select,.fld textarea{width:100%;min-height:var(--tap);padding:10px 13px;
  border:1px solid var(--ligne);border-radius:10px;font-size:16px;font-family:inherit;background:#fff;color:var(--encre)}
.fld textarea{min-height:120px;resize:vertical}

/* ---------- FAQ ---------- */
.qa{background:#fff;border:1px solid var(--ligne);border-radius:var(--r);margin:10px 0;overflow:hidden}
.qa>summary{list-style:none;cursor:pointer;padding:15px 18px;font-weight:700;
  display:flex;align-items:center;gap:12px;min-height:var(--tap)}
.qa>summary::-webkit-details-marker{display:none}
.qa>summary::after{content:"";margin-left:auto;width:9px;height:9px;flex:0 0 auto;
  border-right:2px solid var(--sauge);border-bottom:2px solid var(--sauge);
  transform:rotate(45deg);transition:transform .15s}
.qa[open]>summary::after{transform:rotate(-135deg)}
.qa .rep{padding:0 18px 16px;color:var(--gris)}

/* ---------- Pied ---------- */
.ft{background:var(--encre);color:#cfd2ca;margin-top:56px;padding:40px 0 26px}
.ftin{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.ft-t{font-family:var(--serif);font-size:18px;font-weight:700;color:#fff;margin-bottom:10px}
.ft-p{font-size:14.5px;margin:0 0 6px}
.ft a{color:#cfd2ca}
.ft-l{display:flex;align-items:center;min-height:36px;padding:3px 0;font-size:14.5px;text-decoration:none}
.ft-l:hover{color:#fff;text-decoration:underline}
/* Les modules du pied de page : deux colonnes des qu'il y a la place.

   `columns` et non une grille : une grille remplit EN LIGNES — on lit
   « Reservations, Plan de table » puis « Click & Collect, Carte
   numerique », c'est-a-dire de gauche a droite, alors qu'une liste se lit
   de haut en bas. Le multicolonne coule la liste dans la premiere colonne
   puis dans la seconde, et l'ordre du catalogue est conserve a l'oeil.
   Il evite aussi les trous : chaque entree prend sa hauteur, sans etre
   alignee sur sa voisine de droite qui tient sur trois lignes.

   `column-width` et non `column-count` : dans une colonne de pied de page
   etroite, ou sur un telephone, deux colonnes de 90 px couperaient les
   noms en morceaux — sous ~300 px, le bloc redevient une colonne seul. */
.ft-mods{columns:150px 2;column-gap:14px}
.ft-mods .ft-l{break-inside:avoid}
.ft-m{align-items:flex-start;gap:8px;line-height:1.3}
.ft-i{flex:0 0 16px;display:flex;align-items:center;justify-content:center;
  height:22px;color:#9aa392}
.ft-m:hover .ft-i{color:#fff}
.ft-bas{border-top:1px solid #3a3d36;margin-top:28px;padding-top:18px;font-size:12.5px;color:#8f938a}
.ft-bas p{margin:0 0 7px;max-width:80ch}
.ft-mini{font-size:12px}

/* ---------- Téléphone ---------- */
@media(max-width:820px){
  body{font-size:16px}
  section.sec{padding:38px 0}
  .hero{padding-top:34px;padding-bottom:26px}
  .bg{display:flex;flex-direction:column;justify-content:center;gap:5px;margin-left:auto;
    width:var(--tap);height:var(--tap);cursor:pointer}
  .bg span{display:block;height:2px;background:var(--sauge-f);border-radius:2px}
  .nav{display:none;order:3;width:100%;flex-direction:column;align-items:stretch;
    gap:0;padding:6px 0 12px;border-top:1px solid var(--ligne);margin-left:0}
  .bg-cb:checked~.nav{display:flex}
  .nav a{border-radius:10px}
  .nav a.cta{margin:8px 0 0}
  /* Un tableau à cinq colonnes ne tient pas dans 390 px. Plutôt que de le
     faire défiler à l'aveugle, chaque ligne devient un bloc étiqueté. */
  .tb,.tb thead,.tb tbody,.tb tr,.tb td{display:block;width:100%}
  .tb thead{display:none}
  .tb{border:0;background:transparent}
  .tb tr{background:#fff;border:1px solid var(--ligne);border-radius:var(--r);margin-bottom:12px;padding:6px 4px}
  .sec-fonce .tb{border:0}
  .sec-fonce .tb tr{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
  .sec-fonce .tb td::before{color:#c6d1bd}
  .tb tr.nous{border-color:var(--sauge)}
  .tb td{border-bottom:1px solid var(--ligne);display:flex;gap:12px;padding:9px 13px}
  .tb tr td:last-child{border-bottom:0}
  .tb td::before{content:attr(data-l);flex:0 0 42%;font-size:12.5px;text-transform:uppercase;
    letter-spacing:.4px;color:var(--gris-c);font-weight:700}
}

/* =====================================================================
   LE SCHÉMA D'ARCHITECTURE (accueil).

   Fond sombre, mais teinté sauge : c'est un moment à part dans la page,
   pas une greffe. Aucune police n'est appelée ici — on reprend --serif
   et --sans du reste du site, qui sont des polices déjà présentes sur la
   machine du visiteur.
   ===================================================================== */
/* Les variables du schéma vivent sur :root, PAS sur .ar. Le panneau
   latéral et son voile sont posés à la racine du document, hors de la
   section : déclarées sur .ar, ces variables n'auraient pas existé pour
   eux, et chaque couleur du panneau serait retombée sur l'héritage — un
   panneau « presque juste », le pire des cas parce qu'il ne se voit pas. */
:root{--ar-bg:#171c15;--ar-sur:rgba(38,45,35,.92);--ar-line:rgba(255,255,255,.09);
  --ar-txt:#eceee8;--ar-mut:#98a291;--ar-soc:#a8be8f}
.ar{scroll-margin-top:74px;
  background:
    radial-gradient(ellipse at 50% 38%,rgba(168,190,143,.09) 0%,transparent 62%),
    radial-gradient(ellipse at 82% 14%,rgba(74,163,224,.05) 0%,transparent 52%),
    var(--ar-bg);
  color:var(--ar-txt);padding:44px 0 34px;margin-top:8px;
  border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);overflow:hidden}
.ar-h{font-family:var(--serif);font-size:clamp(23px,3.4vw,32px);line-height:1.2;
  font-weight:700;margin:0 0 10px;color:#fff;letter-spacing:-.2px}
.ar-l{font-size:18px;color:#c8cfc2;max-width:62ch;margin:0}
.ar-l2{display:block;font-size:15px;color:var(--ar-mut);margin-top:5px}
.ar-ns{background:var(--ar-sur);border:1px solid var(--ar-line);border-radius:var(--r);
  padding:16px 18px;color:#c8cfc2}
.ar-ns a{color:var(--ar-soc)}

.ar-stage{position:relative;width:100%;max-width:960px;margin:16px auto 0;
  height:clamp(560px,70vw,760px)}
.ar-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  z-index:1;overflow:visible}
.ar-t{stroke:rgba(255,255,255,.11);stroke-width:1;fill:none;stroke-linecap:round;
  transition:stroke .35s,stroke-width .35s}
.ar-t.socle{stroke:rgba(255,255,255,.15)}
.ar-t.caisse{stroke:rgba(224,168,48,.26);stroke-dasharray:6 4}
.ar-t.on{stroke-width:1.6;stroke-dasharray:8 5;animation:ar-flux .9s linear infinite}
@keyframes ar-flux{to{stroke-dashoffset:-26}}

/* --- Le socle --- */
.ar-hub{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:12;
  background:none;border:0;padding:0;cursor:pointer;font-family:inherit;color:inherit}
.ar-hub-in{width:156px;height:156px;border-radius:50%;
  background:radial-gradient(circle at 38% 30%,rgba(168,190,143,.16),#20261d);
  border:1.5px solid rgba(168,190,143,.34);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 12px;
  box-shadow:0 0 46px rgba(168,190,143,.09),0 0 96px rgba(168,190,143,.04);
  transition:transform .3s,box-shadow .3s,border-color .3s}
.ar-hub:hover .ar-hub-in,.ar-hub:focus-visible .ar-hub-in{transform:scale(1.05)}
.ar-hub.on .ar-hub-in{border-color:var(--ar-soc);
  box-shadow:0 0 62px rgba(168,190,143,.2),0 0 130px rgba(168,190,143,.08)}
.ar-hub-i{width:34px;height:34px;color:var(--ar-soc);opacity:.9;margin-bottom:7px}
.ar-hub-i svg{width:100%;height:100%;display:block}
.ar-hub-n{font-family:var(--serif);font-size:16px;font-weight:700;color:#fff;line-height:1.15}
.ar-hub-p{font-size:11px;color:var(--ar-soc);margin-top:6px;font-weight:700;letter-spacing:.4px}

/* --- La caisse --- */
.ar-cai{position:absolute;left:50%;top:95%;transform:translate(-50%,-50%);z-index:11;
  display:flex;align-items:center;gap:10px;padding:9px 16px;border-radius:var(--r);
  background:var(--ar-sur);border:1px dashed rgba(224,168,48,.34);
  cursor:pointer;font-family:inherit;color:inherit;text-align:left;
  transition:border-color .3s,box-shadow .3s}
.ar-cai:hover,.ar-cai.on{border-color:#E0A830;box-shadow:0 0 20px rgba(224,168,48,.14)}
.ar-cai-i{width:32px;height:32px;flex:0 0 auto;border-radius:9px;display:flex;
  align-items:center;justify-content:center;background:rgba(224,168,48,.12);color:#E0A830}
.ar-cai-i svg{width:17px;height:17px}
.ar-cai-n{display:block;font-size:12.5px;font-weight:700;color:var(--ar-txt);line-height:1.2}
.ar-cai-s{display:block;font-size:9.5px;font-weight:700;color:#E0A830;
  text-transform:uppercase;letter-spacing:1px;margin-top:2px}

/* --- Les modules --- */
.ar-mod{position:absolute;transform:translate(-50%,-50%);z-index:10;cursor:pointer;
  background:none;border:0;padding:0;font-family:inherit;color:inherit;
  opacity:0;animation:ar-in .5s ease-out forwards;transition:transform .28s}
@keyframes ar-in{from{opacity:0;transform:translate(-50%,-50%) scale(.65)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.ar-mod:hover,.ar-mod:focus-visible{transform:translate(-50%,-50%) scale(1.09);z-index:16}
.ar-mod.on{transform:translate(-50%,-50%) scale(1.09);z-index:16}
.ar-mod-c{display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:112px;min-height:98px;padding:13px 7px;border-radius:var(--r);
  background:var(--ar-sur);border:1px solid var(--ar-line);text-align:center;
  position:relative;transition:border-color .3s,box-shadow .3s}
.ar-mod:hover .ar-mod-c,.ar-mod:focus-visible .ar-mod-c,.ar-mod.on .ar-mod-c{
  border-color:var(--c);box-shadow:0 8px 30px rgba(0,0,0,.34)}
.ar-mod-i{width:38px;height:38px;border-radius:11px;margin:0 auto 8px;display:flex;
  align-items:center;justify-content:center;color:var(--c);
  background:color-mix(in srgb,var(--c) 12%,transparent);transition:background .3s}
.ar-mod-i svg{width:20px;height:20px}
.ar-mod:hover .ar-mod-i,.ar-mod.on .ar-mod-i{background:color-mix(in srgb,var(--c) 24%,transparent)}
.ar-mod-n{display:block;font-size:11.5px;font-weight:700;line-height:1.25;color:var(--ar-txt)}
.ar-eti{position:absolute;top:-8px;right:-8px;padding:2px 7px;border-radius:100px;
  font-size:8.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  box-shadow:0 2px 8px rgba(0,0,0,.35)}
.ar-eti.soon{background:#E0A830;color:#1a1a1a}
.ar-eti.inc{background:#38C07B;color:#fff}
.ar-eti.fixe{position:static;box-shadow:none;vertical-align:middle;margin-left:8px}

/* --- Légende --- */
.ar-leg{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:8px 18px;margin-top:26px}
.ar-lg{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#c8cfc2}
.ar-lg.mut{color:var(--ar-mut)}
.ar-lg i{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.ar-lg-s{width:1px;height:14px;background:var(--ar-line)}

/* --- Le panneau --- */
.ar-ov{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:60;opacity:0;
  transition:opacity .3s}
.ar-ov.open{opacity:1}
.ar-pan{position:fixed;right:0;top:0;bottom:0;width:440px;max-width:94vw;z-index:61;
  background:#1b211a;border-left:1px solid var(--ar-line);color:#eceee8;
  transform:translateX(100%);transition:transform .38s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
.ar-pan.open{transform:translateX(0)}
.ar-pan-h{padding:26px 26px 18px;border-bottom:1px solid var(--ar-line);position:relative}
.ar-x{position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.07);border:1px solid var(--ar-line);color:#c8cfc2;
  font-size:22px;line-height:1;cursor:pointer;font-family:inherit}
.ar-x:hover{background:rgba(255,255,255,.14);color:#fff}
.ar-pan-cat{display:inline-block;padding:3px 12px;border-radius:100px;margin:0 0 10px;
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;
  background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c)}
.ar-pan-t{font-family:var(--serif);font-size:25px;font-weight:700;line-height:1.2;
  margin:0;color:#fff;padding-right:44px}
.ar-pan-p{margin:9px 0 0;font-size:15.5px;font-weight:800;color:var(--c)}
.ar-pan-s{display:block;font-size:12.5px;color:var(--ar-mut);font-weight:600;margin-top:2px}
.ar-pan-b{padding:22px 26px 34px}
.ar-pan-d{font-size:14.5px;line-height:1.7;color:#c8cfc2;margin:0 0 16px}
.ar-pan-note{font-size:13px;line-height:1.6;color:var(--ar-mut);margin:0 0 16px;
  padding:11px 14px;border-radius:11px;background:rgba(255,255,255,.035);
  border:1px solid var(--ar-line)}
.ar-pan-s2{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.4px;
  color:var(--ar-mut);margin:22px 0 9px}
.ar-fl{list-style:none;margin:0;padding:0}
.ar-fl li{padding:9px 0 9px 24px;position:relative;font-size:13.5px;line-height:1.55;
  border-bottom:1px solid var(--ar-line);color:#dfe3da}
.ar-fl li:last-child{border-bottom:0}
.ar-fl li b{color:#fff}
.ar-fl li::before{content:"";position:absolute;left:3px;top:15px;width:8px;height:4px;
  border-left:2px solid var(--c);border-bottom:2px solid var(--c);transform:rotate(-45deg)}
.ar-fl.lim li{color:#b9c0b2}
.ar-fl.lim li::before{border:0;width:9px;height:2px;background:#8a9382;top:19px;transform:none}
.ar-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.ar-tag{padding:5px 12px;border-radius:100px;background:rgba(255,255,255,.05);
  border:1px solid var(--ar-line);font-size:11.5px;color:#c8cfc2;font-weight:600;
  cursor:pointer;font-family:inherit}
.ar-tag:hover{background:rgba(255,255,255,.11);color:#fff}
.ar-fiche{margin:22px 0 0;font-size:13.5px}
.ar-fiche a{color:var(--c);font-weight:700;text-decoration:none}
.ar-fiche a:hover{text-decoration:underline}
/* La capture cachee tant que le cadre en direct tient : sur le panneau
   « Site web », les deux montraient la meme page. Elle reste dans le
   DOM — cadre_echec() la revele si la page reelle ne repond pas. */
.ar-shot-repli{display:none}
.mod-ia{max-width:60ch;margin:0 0 16px;padding:11px 0 11px 14px;
  border-left:3px solid var(--sauge);font-size:15px;line-height:1.55}
/* Le mot sur les IA : au-dessus de la description, et il doit se voir
   sans crier. Un filet a gauche, pas un encadre : le panneau en a deja
   assez. */
.ar-pan-ia{margin:0 0 12px;padding:9px 0 9px 12px;border-left:2px solid var(--c);
  font-size:13px;line-height:1.5;color:var(--ar-txt)}
.ar-shot{margin:0 0 18px;border-radius:12px;overflow:hidden;border:1px solid var(--ar-line);
  background:#0f130e}
.ar-shot img{display:block;width:100%;height:auto}
.ar-shot figcaption{font-size:11px;color:var(--ar-mut);padding:7px 11px;
  border-top:1px solid var(--ar-line);background:rgba(255,255,255,.02)}

/* --- La page publique d'un vrai établissement, en direct dans le panneau.

   Le cadre est dessiné à 1280 px puis réduit par transform : à 700 px de
   large, un site responsive basculerait en mise en page mobile et le
   prospect verrait un téléphone au lieu d'un site.

   La capture d'écran reste en fond du conteneur : si le serveur refuse
   d'être encadré, ou s'il est lent, on voit la capture — jamais un
   rectangle blanc en rendez-vous. --- */
.ar-vif-c{position:relative;width:100%;overflow:hidden;background:#0f130e}
.ar-vif-c iframe{position:absolute;inset:0;width:1024px;height:1000px;border:0;
  transform-origin:0 0;opacity:0;transition:opacity .35s ease}
.ar-vif-c.vu iframe{opacity:1}
.ar-vif-att{position:absolute;left:50%;top:14px;transform:translateX(-50%);
  max-width:86%;text-align:center;font-size:11px;color:var(--ar-mut);
  background:rgba(10,12,9,.8);padding:5px 11px;border-radius:100px;transition:opacity .3s ease}
.ar-vif-c.vu .ar-vif-att{opacity:0}
/* Le cadre a echoue : on garde la capture, on le dit, et le bouton
   « Ouvrir la page » reste — c'est lui qui sauve la demonstration. */
/* Echec : pas de fausse image, une ligne qui le dit. La capture de
   l'administration, elle, est juste en dessous et n'a pas bougé. */
.ar-vif-c.rate{min-height:0;padding:26px 14px;text-align:center}
.ar-vif-c.rate .ar-vif-att{position:static;transform:none;display:inline-block;max-width:100%}
.ar-vif-p{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ar-vif-p span{flex:1;min-width:150px}
.ar-vif-p b{color:var(--c);letter-spacing:.03em;text-transform:uppercase;font-size:10px}
.ar-vif-p a{color:var(--c);font-weight:700;text-decoration:none;white-space:nowrap}
.ar-vif-p a:hover{text-decoration:underline}

/* --- La capture d'écran s'agrandit au clic ------------------------------
   Dans le panneau elle fait 385 px de large pour un écran dessiné en
   1280 : on voit qu'il y a des tuiles, pas ce qu'elles disent. --- */
.ar-loupe{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;position:relative;font:inherit}
.ar-loupe img{display:block;width:100%;height:auto}
.ar-loupe-i{position:absolute;right:9px;bottom:9px;font-size:11px;font-weight:700;letter-spacing:.02em;
  color:#fff;background:rgba(10,12,9,.72);padding:5px 10px;border-radius:100px;opacity:0;transition:opacity .2s ease}
.ar-loupe:hover .ar-loupe-i,.ar-loupe:focus-visible .ar-loupe-i{opacity:1}
.ar-loupe-g{position:fixed;inset:0;z-index:120;background:rgba(8,10,7,.92);
  display:flex;align-items:center;justify-content:center;padding:26px;cursor:zoom-out}
.ar-loupe-g figure{margin:0;max-width:1280px;width:100%}
.ar-loupe-g img{display:block;width:100%;height:auto;max-height:82vh;object-fit:contain;
  border-radius:10px;box-shadow:0 24px 70px rgba(0,0,0,.5)}
.ar-loupe-g figcaption{margin:12px 0 0;text-align:center;font-size:12.5px;color:#c9d2c2}
.ar-loupe-x{position:fixed;top:16px;right:18px;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);color:#fff;
  font-size:24px;line-height:1;cursor:pointer}
.ar-loupe-x:hover{background:rgba(255,255,255,.14)}

/* --- Petites largeurs : le schéma devient une grille de tuiles.
       Un diagramme radial de 13 nœuds sur 360 px est illisible ; on ne
       le rétrécit pas, on change de représentation. --- */
@media(max-width:900px){
  .ar{padding:32px 0 26px}
  .ar-stage{height:auto;display:grid;gap:10px;
    grid-template-columns:repeat(auto-fill,minmax(102px,1fr));max-width:560px}
  .ar-svg,.ar-cai{display:none}
  .ar-hub{position:relative;left:auto;top:auto;transform:none;grid-column:1/-1;width:100%}
  .ar-mod-c{min-height:0}
  .ar-hub-in{width:100%;height:auto;border-radius:var(--r);padding:16px 18px;
    flex-direction:row;gap:13px;text-align:left;justify-content:flex-start}
  .ar-hub-i{margin-bottom:0;flex:0 0 auto}
  .ar-hub-n{font-size:17px;flex:1 1 auto;white-space:nowrap}
  .ar-hub-p{margin-top:0;margin-left:auto;text-align:right;white-space:nowrap;flex:0 0 auto}
  /* « Les traits pleins partent du socle » : il n'y a plus de traits en
     petite largeur, la phrase n'a plus d'objet. */
  .ar-lg.mut,.ar-lg-s{display:none}
  .ar-mod{position:relative;left:auto!important;top:auto!important;transform:none;
    opacity:1;animation:none}
  .ar-mod:hover,.ar-mod:focus-visible,.ar-mod.on{transform:scale(1.03)}
  .ar-mod-c{width:100%}
  .ar-pan{width:100%;max-width:100%;border-left:0}
}
@media(max-width:460px){
  .ar-stage{grid-template-columns:repeat(3,1fr);gap:8px}
  .ar-mod-c{padding:11px 4px 9px}
  .ar-mod-n{font-size:10.5px}
  .ar-mod-i{width:32px;height:32px}
  .ar-mod-i svg{width:17px;height:17px}
  .ar-hub-p{width:100%;margin-left:0;text-align:left;margin-top:4px}
}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* =====================================================================
   LE MOT DU CREATEUR.

   Le texte occupe TOUTE la largeur du bloc, en deux colonnes. En une
   seule colonne etroite a cote de la photo, la section faisait plus de
   mille pixels de haut : elle coupait la page en deux, et on arrivait
   aux arguments en ayant deja decroche.

   Deux colonnes de 44 a 52 caracteres restent confortables a lire, et
   la hauteur est divisee par deux. Ca ne tient que parce que le texte
   est court : au-dela d'une hauteur d'ecran, deux colonnes obligent a
   remonter, et il faudrait revenir a une seule.
   ===================================================================== */
section.sec.sec-cr{background:var(--creme-f,#f4f2ea)}
/* L'identite en une ligne, en tete : le visage arrive avant le texte,
   et il ne mange pas une colonne entiere. */
.cr-tete{display:flex;align-items:center;gap:18px}
.cr-photo{width:96px;height:96px;object-fit:cover;border-radius:14px;display:block;flex:0 0 auto;
  border:1px solid var(--ligne);background:#fff}
.cr-nom{font-family:var(--serif);font-size:18px;font-weight:700;margin:6px 0 0;line-height:1.25}
.cr-role{font-family:var(--sans);font-size:14px;font-weight:700;color:var(--sauge-f)}
.cr-lieu{font-size:13.5px;color:var(--gris);margin:3px 0 0}
/* L'accroche est la phrase qu'on retient si l'on ne lit rien d'autre :
   elle reste sur toute la largeur, au-dessus des colonnes. */
.cr-acc{font-family:var(--serif);font-size:20px;line-height:1.5;color:var(--sauge-f);
  border-left:3px solid var(--sauge);padding-left:16px;margin:20px 0 18px;max-width:80ch}
.cr-cols{columns:2;column-gap:44px}
.cr-cols h3{font-family:var(--serif);font-size:18.5px;margin:0 0 7px;
  /* Un titre ne doit jamais finir une colonne : son texte serait dans
     l'autre, et on lirait un titre orphelin. */
  break-after:avoid;break-inside:avoid}
.cr-cols h3+p{margin-top:0}
.cr-cols p{font-size:15.5px;line-height:1.66;margin:0 0 13px;break-inside:avoid}
.cr-cols>*:first-child{margin-top:0}
.cr-fin{max-width:88ch;margin-top:18px;padding-top:16px;border-top:1px solid var(--ligne)}
.cr-fin p{font-size:15.5px;line-height:1.66;margin:0 0 11px}
.cr-fin p:last-child{margin-bottom:0;font-weight:600}
.cr-bas{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px;
  flex-wrap:wrap}
.cr-prom{background:#fff;border:1px solid var(--ligne);border-radius:12px;padding:13px 16px;
  font-size:14.5px;margin:0;flex:1 1 420px;line-height:1.6}
.cr-sig{font-family:var(--serif);font-size:17px;font-weight:700;color:var(--sauge-f);margin:0;
  flex:0 0 auto}
@media(max-width:820px){
  /* Deux colonnes sur un telephone donneraient des lignes de vingt
     caracteres : on revient a une seule, et la photo retrecit. */
  .cr-cols{columns:1}
  .cr-photo{width:76px;height:76px}
  .cr-tete{gap:14px}
  .cr-acc{font-size:17.5px;margin:16px 0 14px}
  .cr-bas{margin-top:16px}
  .cr-sig{width:100%;text-align:right}
}