/* Qora Verre cannelé: la version du 21.10.2026 devenue la base du site le 22.10 (sa décision).
   Lumière lilas et bleue derrière du verre strié, pilule de verre sur «l'IA», sections sombres pour le partenariat et la fin.
   22.10: le fond et la mise en page du haut d'Aurore en option, les logos clients qui défilent dans le haut, plus de parenthèses;
   puis trois mises en page du haut, trois dispositions des trois offres, les 13 polices des six maquettes;
   23.10: le lilas clair en fond du haut, l'offre principale en violet avec l'aurore en bas, cinq premières phrases à essayer.
   Le socle (couleurs, tons, marge, verre des sections, panneau) est dans base.css. */

:root{
  --police:"Host Grotesk","Helvetica Neue",Arial,sans-serif;
  --police-titre:var(--police);
  --poids-titre:500; --serre:-.03em; --rayon:14px;
}
/* Les 13 polices des six maquettes (Funnel Display retirée le 22.10); Gabarito et Bricolage en titres, Hanken Grotesk dans le texte */
html[data-police="mona"]{--police:"Mona Sans","Helvetica Neue",Arial,sans-serif;--poids-titre:540;--serre:-0.035em}
html[data-police="onest"]{--police:"Onest","Helvetica Neue",Arial,sans-serif;--poids-titre:500;--serre:-0.035em}
html[data-police="manrope"]{--police:"Manrope","Helvetica Neue",Arial,sans-serif;--poids-titre:600;--serre:-0.036em}
html[data-police="gabarito"]{--police:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;--police-titre:"Gabarito","Helvetica Neue",Arial,sans-serif;--poids-titre:600;--serre:-0.03em}
html[data-police="archivo"]{--police:"Archivo","Helvetica Neue",Arial,sans-serif;--poids-titre:600;--serre:-0.03em}
html[data-police="bricolage"]{--police:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;--police-titre:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;--poids-titre:600;--serre:-0.035em}
html[data-police="figtree"]{--police:"Figtree","Helvetica Neue",Arial,sans-serif;--poids-titre:600;--serre:-0.03em}
html[data-police="urbanist"]{--police:"Urbanist","Helvetica Neue",Arial,sans-serif;--poids-titre:600;--serre:-0.025em}
html[data-police="lexend"]{--police:"Lexend","Helvetica Neue",Arial,sans-serif;--poids-titre:500;--serre:-0.045em}
html[data-police="rethink"]{--police:"Rethink Sans","Helvetica Neue",Arial,sans-serif;--poids-titre:600;--serre:-0.03em}
html[data-police="albert"]{--police:"Albert Sans","Helvetica Neue",Arial,sans-serif;--poids-titre:600;--serre:-0.03em}
html[data-police="hanken"]{--police:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;--poids-titre:600;--serre:-0.03em}
.reglage-aide{display:block;margin-top:2px;font-size:11px;color:#77778a}
.liste-offres li[id]{scroll-margin-top:140px}

h1,h2,h3{font-family:var(--police-titre);font-weight:var(--poids-titre);letter-spacing:var(--serre)}
h2 em,.manifeste mark{color:var(--accent)}
.manifeste mark{background:none}

/* ---------- Boutons, étiquettes ---------- */
.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;height:54px;padding:0 1.55em;border-radius:999px;font-family:inherit;font-size:16px;font-weight:500;line-height:1;white-space:nowrap;border:1px solid transparent;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.btn-petit{height:42px;padding:0 1.15em;font-size:15px}
.btn-plein{background:var(--encre);color:var(--creme)}
.btn-plein:hover{background:#2e2d2a}
.btn-verre{background:color-mix(in srgb,#ffffff 46%,transparent);border-color:var(--ligne2);color:var(--texte);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btn-verre:hover{background:color-mix(in srgb,#ffffff 78%,transparent)}
[data-ton="sombre"] .btn-plein,.nav[data-sur="sombre"] .btn-plein{background:var(--creme);color:var(--nuit)}
[data-ton="sombre"] .btn-plein:hover,.nav[data-sur="sombre"] .btn-plein:hover{background:#ffffff}
[data-ton="sombre"] .btn-verre{background:rgba(250,247,242,.07);border-color:rgba(250,247,242,.24);color:var(--creme)}
[data-ton="sombre"] .btn-verre:hover{background:rgba(250,247,242,.15)}
.btn .fleche{transition:transform .25s}
.btn:hover .fleche{transform:translateX(3px)}

.etiquette{font-size:13px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--texte3);margin-bottom:22px}
.chapo{font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--texte2);max-width:46ch}
.partenariat h2,.methode h2,.realisations h2{font-size:clamp(36px,4.8vw,70px);line-height:1}
.h2-moyen{font-size:clamp(28px,3.2vw,46px);line-height:1.04;max-width:22ch}

/* Le bouton «Buvons un café», le seul appel à l'action du site (décidé à deux le 25.10): une tasse, dont la vapeur se dessine au survol */
.btn-cafe{gap:.6em}
.hero .btn-cafe,.partenariat .btn-cafe{height:60px;padding:0 1.75em 0 1.45em;font-size:17px;box-shadow:0 18px 36px -18px rgba(61,42,102,.7)}
.tasse{width:1.5em;height:1.5em;flex:none;overflow:visible;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-petit .tasse{width:1.3em;height:1.3em}
.tasse-vapeur{stroke-dasharray:6;stroke-dashoffset:0;opacity:.9}
.tasse-tasse{transform-box:fill-box;transform-origin:50% 70%;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.btn-cafe:hover .tasse-vapeur,.btn-cafe:focus-visible .tasse-vapeur{animation:vapeur 1.5s ease-in-out infinite}
.btn-cafe:hover .tasse-vapeur:nth-child(2),.btn-cafe:focus-visible .tasse-vapeur:nth-child(2){animation-delay:.22s}
.btn-cafe:hover .tasse-vapeur:nth-child(3),.btn-cafe:focus-visible .tasse-vapeur:nth-child(3){animation-delay:.44s}
.btn-cafe:hover .tasse-tasse,.btn-cafe:focus-visible .tasse-tasse{transform:rotate(-9deg)}
@keyframes vapeur{0%{stroke-dashoffset:6;opacity:0;transform:translateY(2px)}30%{opacity:1}65%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.btn-cafe:hover .tasse-vapeur{animation:none}.btn-cafe:hover .tasse-tasse{transform:none}}

/* ---------- Les boutons d'appel du haut, à l'essai (25.10, réglage «Le bouton»): l'actuel, puis six styles ---------- */
.cta-v{display:none}
html[data-cta="actuel"] .cta-actuel,html[data-cta="remplir"] .cta-remplir,html[data-cta="badge"] .cta-badge,html[data-cta="halo"] .cta-halo{display:inline-flex}
html[data-cta="tasses"] .cta-tasses,html[data-cta="semaine"] .cta-semaine,html[data-cta="formulaire"] .cta-formulaire{display:flex}

/* 1. La tasse qui se remplit: au survol, un café au lait monte dans le bouton, avec sa vague */
.cta-remplir{position:relative;overflow:hidden;isolation:isolate;transition:color .4s .12s}
.remplir-liquide{position:absolute;left:0;right:0;bottom:0;height:0;z-index:-1;background:linear-gradient(180deg,#dcbc98 0%,#b98a5f 100%);transition:height .8s cubic-bezier(.2,.8,.2,1)}
.remplir-vague{position:absolute;left:0;bottom:calc(100% - 1px);width:200%;height:9px;fill:#dcbc98;animation:cta-vague 1.5s linear infinite;opacity:0;transition:opacity .2s}
.cta-remplir:hover .remplir-vague,.cta-remplir:focus-visible .remplir-vague{opacity:1}
@keyframes cta-vague{to{transform:translateX(-50%)}}
.cta-remplir:hover .remplir-liquide,.cta-remplir:focus-visible .remplir-liquide{height:118%}
.cta-remplir:hover,.cta-remplir:focus-visible{color:#2a1a0e;background:var(--encre)}

/* 2. Le badge qui tourne: un rond de texte autour d'une tasse; au survol, il accélère et la tasse grandit */
.cta-badge{align-items:center;gap:18px;color:var(--texte)}
.badge-rond{position:relative;flex:none;width:124px;height:124px}
.badge-tour{position:absolute;inset:0;transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.badge-texte{width:100%;height:100%;fill:currentColor;font-family:var(--police-titre);font-size:17px;font-weight:600;animation:cta-tourne 18s linear infinite}
@keyframes cta-tourne{to{transform:rotate(360deg)}}
.cta-badge:hover .badge-tour,.cta-badge:focus-visible .badge-tour{transform:rotate(240deg)}
.badge-coeur{position:absolute;inset:28px;border-radius:50%;display:grid;place-items:center;background:var(--encre);color:var(--creme);box-shadow:0 16px 32px -14px rgba(61,42,102,.75);transition:transform .45s cubic-bezier(.2,.8,.2,1),background-color .3s}
.badge-coeur .tasse{width:32px;height:32px}
.cta-badge:hover .badge-coeur,.cta-badge:focus-visible .badge-coeur{transform:scale(1.12);background:var(--violet)}
.cta-badge:hover .tasse-vapeur{animation:vapeur 1.5s ease-in-out infinite}
.cta-badge:hover .tasse-vapeur:nth-child(2){animation-delay:.22s}
.cta-badge:hover .tasse-vapeur:nth-child(3){animation-delay:.44s}
.badge-legende{display:grid;gap:4px}
.badge-legende b{font-size:20px;font-weight:600;font-family:var(--police-titre);letter-spacing:-.01em}
.badge-legende span{font-size:14px;color:var(--texte2)}
.cta-badge:hover .badge-legende b{color:var(--violet)}
.hero[data-ton="sombre"] .badge-coeur{background:var(--creme);color:var(--nuit)}
.hero[data-ton="sombre"] .cta-badge:hover .badge-legende b{color:var(--lilas)}

/* 3. Les deux tasses: au survol, deux tasses se dessinent au trait, s'approchent et trinquent (l'idée de Flavio, en version tasses) */
.cta-tasses{align-items:center;gap:6px}
.tasses-dessin{width:180px;height:96px;flex:none;overflow:visible;fill:none;stroke:var(--violet);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tasses-dessin .trait{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1)}
.tasses-dessin .tasse-g .trait:nth-child(2),.tasses-dessin .tasse-d .trait:nth-child(2){transition-delay:.15s}
.tasses-dessin .fumee{transition-delay:.9s!important}
.tasses-dessin .tasse-g,.tasses-dessin .tasse-d{transform-box:fill-box;transform-origin:50% 100%;transition:transform .5s cubic-bezier(.3,1.4,.5,1) .55s}
.tasses-dessin .tchin path{stroke:var(--lumiere-2);stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .25s ease 1s}
.cta-tasses:hover .trait,.cta-tasses:focus-within .trait{stroke-dashoffset:0}
.cta-tasses:hover .tasse-g,.cta-tasses:focus-within .tasse-g{transform:translateX(13px) rotate(14deg)}
.cta-tasses:hover .tasse-d,.cta-tasses:focus-within .tasse-d{transform:translateX(-13px) rotate(-14deg)}
.cta-tasses:hover .tchin path,.cta-tasses:focus-within .tchin path{stroke-dashoffset:0}
.hero[data-ton="sombre"] .tasses-dessin{stroke:var(--lilas)}
@media (hover:none){.tasses-dessin{display:none}}

/* 4. Le halo: une lumière tourne autour du bouton, qui suit un peu la souris */
@property --angle-halo{syntax:'<angle>';initial-value:0deg;inherits:false}
.cta-halo{position:relative;align-items:center;gap:16px;height:64px;padding:0 9px 0 28px;border-radius:999px;color:#f4f1ea;isolation:isolate;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.cta-halo::before,.cta-halo::after{content:"";position:absolute;border-radius:inherit;background:conic-gradient(from var(--angle-halo),#a47bea,#658dec,#d8cded,#a47bea);animation:cta-halo 3.2s linear infinite}
.cta-halo::before{inset:0;z-index:-1}
.cta-halo::after{inset:-12px;z-index:-2;filter:blur(18px);opacity:.5;transition:opacity .35s}
.cta-halo:hover::after,.cta-halo:focus-visible::after{opacity:.95}
@keyframes cta-halo{to{--angle-halo:360deg}}
.halo-fond{position:absolute;inset:2px;border-radius:inherit;background:var(--encre);z-index:-1}
.halo-texte{display:inline-flex;align-items:center;gap:.6em;font-size:17px;font-weight:500}
.halo-fleche{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#f4f1ea;color:var(--encre);transition:transform .35s cubic-bezier(.2,.8,.2,1),background-color .3s}
.cta-halo:hover .halo-fleche,.cta-halo:focus-visible .halo-fleche{transform:rotate(-45deg);background:#ffffff}
.cta-halo:hover .tasse-vapeur{animation:vapeur 1.5s ease-in-out infinite}

/* 5. Les jours de la semaine: un café cette semaine ? chaque jour ouvre Calendly sur ce jour-là */
.cta-semaine{flex-direction:column;align-items:flex-start;gap:12px}
.semaine-titre{display:inline-flex;align-items:center;gap:.55em;font-size:18px;font-weight:600;font-family:var(--police-titre);letter-spacing:-.01em}
.semaine-titre .tasse{width:1.4em;height:1.4em;color:var(--violet)}
.semaine-jours{display:flex;flex-wrap:wrap;gap:8px}
.semaine-jours a{display:grid;justify-items:center;gap:1px;min-width:62px;padding:9px 8px 8px;border-radius:14px;background:color-mix(in srgb,var(--fond-section) 72%,transparent);border:1px solid var(--ligne2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .25s cubic-bezier(.2,.8,.2,1),background-color .25s,color .25s,border-color .25s,box-shadow .25s}
.semaine-jours span{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--texte3)}
.semaine-jours b{font-size:22px;line-height:1.1;font-weight:600;font-family:var(--police-titre)}
.semaine-jours i{font-style:normal;font-size:12px;color:var(--texte3)}
.semaine-jours a:hover,.semaine-jours a:focus-visible{transform:translateY(-4px);background:var(--encre);border-color:var(--encre);color:#f4f1ea;box-shadow:0 16px 30px -16px rgba(61,42,102,.7)}
.semaine-jours a:hover span,.semaine-jours a:hover i{color:#b9bccd}
.semaine-jours .semaine-plus{display:flex;align-items:center;min-width:0;padding:0 16px;font-size:14px;font-weight:500;color:var(--texte2)}

/* 6. Le champ à remplir (son idée, comme l'URL des agences web): on écrit sa tâche, Calendly s'ouvre avec la réponse */
.cta-formulaire{flex-direction:column;align-items:flex-start;gap:10px;width:min(560px,100%)}
.form-titre{display:inline-flex;align-items:center;gap:.55em;font-size:18px;font-weight:600;font-family:var(--police-titre);letter-spacing:-.01em}
.form-titre .tasse{width:1.4em;height:1.4em;color:var(--violet)}
.form-ligne{display:flex;width:100%;padding:6px;border-radius:999px;background:color-mix(in srgb,#ffffff 80%,transparent);border:1px solid var(--ligne2);box-shadow:0 18px 40px -24px rgba(61,42,102,.6);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:border-color .2s,box-shadow .2s}
.form-ligne:focus-within{border-color:var(--violet);box-shadow:0 0 0 4px color-mix(in srgb,var(--lilas) 70%,transparent),0 18px 40px -24px rgba(61,42,102,.6)}
.form-ligne input{flex:1;min-width:0;border:0;background:none;padding:0 16px;font:inherit;font-size:16px;color:var(--encre);outline:none}
.form-ligne input::placeholder{color:#9a968e}
.form-ligne .btn{height:48px;flex:none}
.form-aide{font-size:13px;color:var(--texte3);padding-left:4px}
.hero[data-ton="sombre"] .form-ligne{background:rgba(255,255,255,.08);border-color:rgba(244,241,234,.22)}
.hero[data-ton="sombre"] .form-ligne input{color:#f4f1ea}
@media (max-width:520px){
  .form-ligne{flex-direction:column;border-radius:20px;gap:6px}
  .form-ligne input{height:44px}
  .form-ligne .btn{width:100%}
  .badge-rond{width:108px;height:108px}
  .badge-coeur{inset:24px}
}
@media (prefers-reduced-motion:reduce){.remplir-vague,.badge-texte,.cta-halo::before,.cta-halo::after{animation:none}.badge-tour,.tasses-dessin .tasse-g,.tasses-dessin .tasse-d{transition:none}}

/* ---------- Navigation ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;color:var(--encre);padding-top:env(safe-area-inset-top,0px);border-bottom:1px solid transparent;transition:background-color .35s,border-color .35s,color .35s}
.nav-dedans{max-width:calc(var(--max) + 2 * var(--marge));margin:0 auto;padding-block:16px;padding-left:max(var(--marge),env(safe-area-inset-left,0px));padding-right:max(var(--marge),env(safe-area-inset-right,0px));display:flex;align-items:center;gap:32px}
.nav-logo svg{display:block;height:30px;width:auto;fill:currentColor}
.nav-liens{display:flex;gap:28px;margin-left:auto;font-size:15px;color:rgba(20,20,19,.66)}
.nav-liens a{transition:color .2s}
.nav-liens a:hover{color:var(--encre)}
.nav .btn{margin-left:4px}
.nav.colle{background:color-mix(in srgb,var(--fond) 84%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border-bottom-color:var(--ligne)}
.nav[data-sur="sombre"]{color:#f4f1ea}
.nav[data-sur="sombre"].colle{background:rgba(15,17,34,.78);border-bottom-color:rgba(244,241,234,.1)}
.nav[data-sur="sombre"] .nav-liens{color:rgba(244,241,234,.72)}
.nav[data-sur="sombre"] .nav-liens a:hover{color:#ffffff}

/* ---------- Haut de page ---------- */
.hero{--voile:var(--fond-section);--estompe:color-mix(in srgb,var(--violet) 58%,var(--fond-section));min-height:max(700px,100svh);display:flex;flex-direction:column;padding-top:110px;padding-bottom:clamp(20px,3vh,32px);overflow:hidden;isolation:isolate;background:var(--fond-section)}
.hero[data-ton="sombre"]{--estompe:color-mix(in srgb,var(--lilas) 58%,transparent)}
/* Le fond du haut «Lilas clair»: le verre cannelé sur un lilas pâle; une couleur en hexadécimal, que le fond animé sait lire */
.hero[data-ton="teinte"]{--fond-section:#f1ecf8}
.hero-voile{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(90deg,var(--voile) 0%,color-mix(in srgb,var(--voile) 86%,transparent) 30%,color-mix(in srgb,var(--voile) 32%,transparent) 54%,transparent 72%),
  linear-gradient(180deg,transparent 70%,var(--voile) 100%)}
html[data-fond="trame"] .hero-voile,html[data-fond="flux"] .hero-voile{background:
  linear-gradient(90deg,var(--voile) 0%,color-mix(in srgb,var(--voile) 80%,transparent) 32%,color-mix(in srgb,var(--voile) 20%,transparent) 56%,transparent 70%),
  linear-gradient(180deg,transparent 70%,var(--voile) 100%)}
html[data-fond="aurore"] .hero[data-ton="sombre"]{--fond-section:#0a0b14}
.hero-corps{margin-block:auto;display:grid;gap:26px;justify-items:start}
.hero h1{font-size:clamp(46px,7.3vw,116px);line-height:.95;max-width:12.5ch}
html[data-pilule="noms"] .hero h1{max-width:13.6ch}
.hero-cote{display:grid;gap:26px;justify-items:start;min-width:0}
.hero .chapo{max-width:54ch}
.hero-rassure{display:none;margin-top:-10px;font-size:14px;color:var(--texte3)}
html[data-rassure="avec"] .hero-rassure{display:block}
html[data-haut="aurore"] .hero-rassure{margin-top:12px}
.hero[data-ton="sombre"] .hero-rassure{color:#9ea3bc}

/* Nos trois offres en une phrase chacune, à la place des preuves (22.10); cinq dispositions (réglage «Les trois offres») */
.hero-offres{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.hero-offres a{display:inline-flex;align-items:center;gap:.6em;padding:.7em 1.05em;border-radius:999px;font-size:14px;line-height:1.2;color:var(--texte2);background:color-mix(in srgb,var(--fond-section) 58%,transparent);border:1px solid var(--ligne);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:color .2s,border-color .2s,background-color .2s,transform .25s}
.ho-tete{display:none}
.hero-offres .ico{width:14px;height:14px;flex:none;color:var(--violet);transition:transform .25s}
.hero-offres a:hover{color:var(--texte);border-color:var(--ligne2);background:color-mix(in srgb,var(--fond-section) 82%,transparent)}
.hero-offres a:hover .ico{transform:translateX(3px)}
.hero[data-ton="sombre"] .hero-offres a{background:rgba(15,17,34,.45);border-color:rgba(184,201,235,.22);color:#d2d5e2}
.hero[data-ton="sombre"] .hero-offres a:hover{color:#ffffff;border-color:rgba(184,201,235,.4)}
.hero[data-ton="sombre"] .hero-offres .ico{color:var(--bleu)}
.ho-court{display:none}
html[data-offres="bandeau"] .ho-long{display:none}
html[data-offres="bandeau"] .ho-court{display:inline}
.ho-num{font-size:12px;font-variant-numeric:tabular-nums;color:var(--texte3)}
.ho-nom{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--texte3)}

/* Bandeau: une bande en trois colonnes sous un filet, plus bas, le nom de l'offre au-dessus de sa phrase */
html[data-offres="bandeau"] .hero-offres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;justify-self:stretch;width:100%;margin-top:clamp(24px,3.8vh,56px);border-top:1px solid var(--ligne2)}
html[data-offres="bandeau"] .hero{padding-top:94px}
html[data-offres="bandeau"] .hero-corps,html[data-offres="bandeau"] .hero-cote{gap:22px}
html[data-offres="bandeau"] .hero h1{font-size:clamp(46px,6.8vw,108px)}
html[data-offres="bandeau"] .hero-offres a,html[data-offres="bandeau"] .hero[data-ton="sombre"] .hero-offres a{position:relative;display:grid;align-content:start;gap:10px;height:100%;padding:16px 56px 18px 24px;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;font-size:clamp(17px,1.45vw,21px);font-weight:500;line-height:1.28;letter-spacing:-.012em;color:var(--texte)}
html[data-offres="bandeau"] .hero-offres li:first-child a{padding-left:0}
html[data-offres="bandeau"] .ho-tete{display:flex;gap:10px;align-items:baseline}
html[data-offres="bandeau"] .ho-phrase{font-family:var(--police-titre)}
html[data-offres="bandeau"] .hero-offres .ico{position:absolute;top:22px;right:20px;width:18px;height:18px}
html[data-offres="bandeau"] .hero-offres a:hover{background:color-mix(in srgb,var(--fond-section) 50%,transparent)}

/* Liste numérotée: trois lignes, comme un sommaire */
html[data-offres="liste"] .hero-offres{display:grid;gap:0;width:100%;max-width:620px;margin-top:4px;border-top:1px solid var(--ligne2)}
html[data-offres="liste"] .hero-offres a,html[data-offres="liste"] .hero[data-ton="sombre"] .hero-offres a{display:grid;grid-template-columns:2.2em minmax(0,1fr) auto;align-items:baseline;gap:12px;padding:13px 2px;border:0;border-bottom:1px solid var(--ligne2);border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;font-size:clamp(17px,1.4vw,20px);font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--texte)}
html[data-offres="liste"] .ho-tete{display:contents}
html[data-offres="liste"] .ho-nom{display:none}
html[data-offres="liste"] .ho-phrase{font-family:var(--police-titre)}
html[data-offres="liste"] .hero-offres .ico{align-self:center;width:18px;height:18px}
html[data-offres="liste"] .hero-offres a:hover{padding-left:8px}

/* Le survol des trois offres, plus présent (23.10): un trait de lumière, un fond qui monte, la flèche dans une pastille violette */
.hero-offres a{position:relative;isolation:isolate}
.hero-offres a::before,.hero-offres a::after{content:"";position:absolute;pointer-events:none}
.hero-offres a::before{inset:0;z-index:-1;opacity:0;transition:opacity .35s}
.hero-offres a::after{left:0;right:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--lumiere-1),var(--lumiere-2));transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.hero-offres a:hover::before,.hero-offres a:focus-visible::before{opacity:1}
.hero-offres a:hover::after,.hero-offres a:focus-visible::after{transform:scaleX(1)}
.hero-offres a:hover .ho-num,.hero-offres a:hover .ho-nom{color:var(--violet)}
.hero[data-ton="sombre"] .hero-offres a:hover .ho-num,.hero[data-ton="sombre"] .hero-offres a:hover .ho-nom{color:var(--lilas)}
html[data-offres="pastilles"] .hero-offres a::after{display:none}
html[data-offres="pastilles"] .hero-offres a::before{border-radius:inherit;background:linear-gradient(120deg,color-mix(in srgb,var(--lilas) 55%,transparent),color-mix(in srgb,var(--bleu) 45%,transparent))}
html[data-offres="pastilles"] .hero-offres a:hover{transform:translateY(-3px);color:var(--texte);border-color:color-mix(in srgb,var(--violet) 35%,transparent);box-shadow:0 16px 30px -16px rgba(91,69,160,.55)}
html[data-offres="bandeau"] .hero-offres a::before,html[data-offres="liste"] .hero-offres a::before{background:linear-gradient(180deg,color-mix(in srgb,var(--lilas) 40%,transparent),color-mix(in srgb,var(--lilas) 0%,transparent))}
html[data-offres="bandeau"] .hero-offres li:first-child a::before{left:-16px}
html[data-offres="bandeau"] .hero-offres a::after{top:-1px}
html[data-offres="liste"] .hero-offres a::after{bottom:-1px}
html[data-offres="bandeau"] .hero-offres .ico,html[data-offres="liste"] .hero-offres .ico{box-sizing:content-box;padding:6px;border-radius:50%;transition:transform .3s,background-color .3s,color .3s}
html[data-offres="bandeau"] .hero-offres .ico{top:15px;right:13px}
html[data-offres="bandeau"] .hero-offres a:hover .ico,html[data-offres="liste"] .hero-offres a:hover .ico{background:var(--violet);color:#ffffff;transform:translateX(4px)}
html[data-offres="bandeau"] .hero-offres a:hover .ho-phrase{transform:translateY(-2px)}
.ho-phrase{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.hero[data-ton="sombre"] .hero-offres a::before{background:linear-gradient(180deg,rgba(216,205,237,.14),rgba(216,205,237,0))}
html[data-offres="pastilles"] .hero[data-ton="sombre"] .hero-offres a::before{background:linear-gradient(120deg,rgba(164,123,234,.35),rgba(101,141,236,.3))}
@media (prefers-reduced-motion:reduce){.hero-offres a,.hero-offres a::after,.hero-offres .ico,.ho-phrase{transition:none}}

/* Ils nous font confiance: les logos défilent en bas du haut de page */
html[data-offres="bandeau"] .hero-clients{margin-top:clamp(10px,2vh,24px)}
.hero-clients{width:100%;margin-top:clamp(32px,5vh,60px)}
.hero-clients-dedans{display:flex;align-items:center;gap:clamp(20px,3vw,48px);padding-top:clamp(16px,2.2vh,24px);border-top:1px solid var(--ligne)}
.hero-clients-titre{flex:none;font-size:14px;line-height:1.3;color:var(--texte3);max-width:9ch}
.defile{flex:1;min-width:0;display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.defile-groupe{display:flex;align-items:center;flex:none;animation:defile 46s linear infinite}
.defile:hover .defile-groupe{animation-play-state:paused}
.defile-groupe li{flex:none;height:56px;display:flex;align-items:center;padding-inline:clamp(20px,2.3vw,34px)}
.defile img{height:28px;width:auto;filter:grayscale(1) contrast(1.3) brightness(.8);mix-blend-mode:multiply;opacity:.82;transition:opacity .2s}
.defile img[data-logo*="ozevents"],.defile img[data-logo*="sanichauffe"],.defile img[data-logo*="yb_sanitaire"],.defile img[data-logo*="esay"]{height:42px}
.defile img[data-logo*="bibiss"],.defile img[data-logo*="pharmaciens"]{height:34px}
.defile img[data-logo="synergie-associes"]{height:26px}
.defile img[data-logo*="la-finestra"]{height:21px}
.defile img:hover{opacity:1}
.hero[data-ton="sombre"] .defile img{filter:none;mix-blend-mode:normal;opacity:.8}
@keyframes defile{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){
  .defile{-webkit-mask-image:none;mask-image:none}
  .defile-groupe{animation:none;flex:1 1 auto;flex-wrap:wrap;row-gap:4px}
  .defile-groupe[aria-hidden="true"]{display:none}
}

/* Écrans d'ordinateur peu hauts (1366 x 768): les logos restent dans le premier écran */
@media (min-width:861px) and (max-height:820px){
  .hero{padding-top:96px}
  .hero-corps,.hero-cote{gap:20px}
  .hero-clients{margin-top:26px}
  html[data-offres="bandeau"] .hero-offres{margin-top:30px}
  html[data-offres="bandeau"] .hero{padding-top:92px}
  html[data-offres="bandeau"] .hero-clients{margin-top:6px}
}

/* La mise en page d'Aurore (réglage «Mise en page du haut»): quatre lignes géantes, la colonne de droite sous le titre */
html[data-haut="aurore"] .hero-corps{--t:min(clamp(48px,7.6vw,128px),calc((100vw - 2 * var(--marge)) / 6.75),12.6svh);margin-top:auto;margin-bottom:0;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,48px);row-gap:0;align-items:start;justify-items:stretch}
html[data-haut="aurore"] .hero .hero-titre{grid-column:1 / -1;font-size:var(--t);line-height:.92;max-width:none}
html[data-haut="aurore"] .hero-titre .l{display:block;white-space:nowrap}
html[data-haut="aurore"] .l-estompe{color:var(--estompe)}
html[data-haut="aurore"] .hero-cote{grid-column:2;margin-top:calc(var(--t) * -.8);gap:0}
html[data-haut="aurore"] .hero .chapo{font-size:clamp(18px,1.6vw,23px);line-height:1.38;color:var(--texte);max-width:25em}
html[data-haut="aurore"] .hero .actions{margin-top:clamp(22px,2.2vw,30px)}
html[data-haut="aurore"] .hero-offres{grid-column:2;margin-top:24px}
html[data-haut="aurore"][data-offres="bandeau"] .hero-offres{grid-column:1 / -1;margin-top:clamp(40px,6vh,64px)}

/* Centré: tout au milieu, le verre de part et d'autre */
html[data-haut="centre"] .hero-corps{justify-items:center;text-align:center}
html[data-haut="centre"] .hero .hero-titre{max-width:15ch}
html[data-haut="centre"] .hero-cote{justify-items:center}
html[data-haut="centre"] .hero .chapo{max-width:50ch}
html[data-haut="centre"] .hero .actions,html[data-haut="centre"] .hero-offres{justify-content:center}
html[data-haut="centre"] .hero-offres{text-align:left}
html[data-haut="centre"][data-offres="liste"] .hero-offres{justify-self:center}
html[data-haut="centre"] .hero .hero-voile{background:radial-gradient(62% 60% at 50% 46%,var(--voile) 34%,color-mix(in srgb,var(--voile) 72%,transparent) 58%,color-mix(in srgb,var(--voile) 10%,transparent) 88%),linear-gradient(180deg,transparent 70%,var(--voile) 100%)}

/* Le fond Aurore: la lumière monte du bas, le voile ne garde que le haut (après les voiles des mises en page) */
html[data-fond="aurore"] .hero .hero-voile{background:linear-gradient(180deg,color-mix(in srgb,var(--voile) 62%,transparent) 0%,transparent 34%)}

/* ---------- La pilule de verre du titre, et ses icônes d'IA qui défilent (réglage «Encadré du titre») ---------- */
@property --angle-pilule{syntax:'<angle>';initial-value:0deg;inherits:false}
.pilule{position:relative;display:inline-flex;vertical-align:baseline;padding:.02em .2em .07em;margin:0 .01em;border-radius:.22em;line-height:.95;background:color-mix(in srgb,#ffffff 52%,transparent);border:1px solid rgba(20,20,19,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 18px 40px -22px rgba(61,42,102,.5);-webkit-backdrop-filter:blur(12px) saturate(1.5);backdrop-filter:blur(12px) saturate(1.5)}
[data-ton="sombre"] .pilule{background:rgba(216,205,237,.12);border-color:rgba(216,205,237,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 18px 40px -22px rgba(0,0,0,.6)}
.pilule-fenetre{display:block;height:1.02em;overflow:hidden;transition:width .55s cubic-bezier(.2,.8,.2,1)}
.pilule-rail{display:flex;flex-direction:column;align-items:center}
.pilule-rail.anime{transition:transform .65s cubic-bezier(.7,0,.2,1)}
.pilule-item{height:1.02em;display:flex;align-items:center;gap:.16em;white-space:nowrap;width:max-content}
.pilule-nom{display:none;font-size:.62em;letter-spacing:-.02em;padding-right:.04em}
html[data-pilule="noms"] .pilule-nom{display:inline}
.ia-ico{width:.72em;height:.72em;flex:none;display:block}
.ia-claude{fill:#d97757}
.ia-chatgpt{fill:currentColor}
.ia-euria{width:.7em;height:.7em;border-radius:50%;flex:none;background:radial-gradient(circle at 34% 30%,#ffffff 0%,#bfe2ff 12%,#5aa9ff 34%,#1f6fff 62%,#0b3ccf 86%,#082c9a 100%);box-shadow:inset 0 -.04em .08em rgba(4,20,90,.45),0 .04em .14em rgba(15,60,200,.3)}
.pilule::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;transition:opacity .4s;
  background:conic-gradient(from var(--angle-pilule),transparent 0 62%,color-mix(in srgb,var(--lumiere-1) 90%,transparent) 80%,color-mix(in srgb,var(--lumiere-2) 90%,transparent) 90%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:comete-pilule 4.5s linear infinite}
html[data-pilule="icones"] .pilule::after,html[data-pilule="noms"] .pilule::after{opacity:1}
@keyframes comete-pilule{to{--angle-pilule:360deg}}
@media (prefers-reduced-motion:reduce){.pilule::after{animation:none}.pilule-rail.anime,.pilule-fenetre{transition:none}}

/* ---------- L'offre principale ---------- */
.partenariat{padding-block:clamp(110px,13vw,190px);overflow:hidden;isolation:isolate;background:var(--fond-section)}
.partenariat .verre{bottom:auto;height:min(860px,78%)}
.partenariat .verre .lumiere{inset:-12% -10% -12% 30%}
.partenariat .verre .voile{background:
  linear-gradient(90deg,var(--fond-section) 0%,color-mix(in srgb,var(--fond-section) 94%,transparent) 36%,color-mix(in srgb,var(--fond-section) 40%,transparent) 60%,color-mix(in srgb,var(--fond-section) 6%,transparent) 84%),
  linear-gradient(180deg,transparent 45%,var(--fond-section) 100%)}
.partenariat .conteneur{position:relative;z-index:1}
.partenariat-tete{display:grid;gap:26px;justify-items:start;max-width:780px}
.partenariat-tete .etiquette{margin-bottom:-4px}
.partenariat h2{max-width:15ch}
.partenariat-etapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);margin-top:clamp(64px,8vw,120px);border-top:1px solid var(--ligne2);padding-top:30px}
.partenariat-etapes li{display:grid;gap:10px;align-content:start}
.num{font-size:14px;color:var(--texte3);font-variant-numeric:tabular-nums}
.partenariat-etapes h3,.etape h3{font-size:clamp(20px,1.7vw,24px);letter-spacing:-.012em;line-height:1.2}
.partenariat-etapes p,.etape p{color:var(--texte2);font-size:16px;max-width:34ch}
.chiffre{display:flex;align-items:flex-end;flex-wrap:wrap;column-gap:clamp(20px,3vw,44px);row-gap:12px;margin-top:clamp(64px,8vw,110px);padding-top:clamp(36px,4vw,56px);border-top:1px solid var(--ligne)}
.chiffre-grand{font-size:clamp(92px,15vw,230px);line-height:.78;letter-spacing:-.055em;font-weight:var(--poids-titre);font-family:var(--police-titre)}
.chiffre-texte{font-size:clamp(18px,1.6vw,23px);line-height:1.35;max-width:24ch;color:var(--texte2);padding-bottom:.25em}
.note{display:block;margin-top:12px;font-size:13px;color:var(--texte3)}

/* Le fond de l'offre principale (réglage, 23.10): violet profond, le verre et son dégradé comme avant, l'aurore qui monte du bas; ou lilas clair */
html[data-principale="violet"] .partenariat[data-ton="sombre"]{--fond-section:var(--fond-principale)}
.partenariat::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .4s}
html[data-principale="violet"] .partenariat[data-ton="sombre"]::after{opacity:1;background:radial-gradient(72% 54% at 12% 106%,var(--aurore-1),transparent 72%),radial-gradient(64% 50% at 60% 110%,var(--aurore-2),transparent 72%),radial-gradient(52% 42% at 97% 104%,var(--aurore-3),transparent 70%),radial-gradient(110% 34% at 50% 100%,rgba(216,205,237,.22),transparent 82%)}
html[data-principale="lilas"] .partenariat .verre{height:100%}

/* ---------- Les autres offres ---------- */
.offres{padding-block:clamp(96px,10vw,150px)}
.liste-offres{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--ligne2)}
.liste-offres li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto;gap:clamp(16px,3vw,40px);align-items:center;padding:26px 0;border-bottom:1px solid var(--ligne2)}
.offre-nom{font-size:clamp(20px,1.8vw,26px);font-weight:var(--poids-titre);font-family:var(--police-titre);letter-spacing:-.015em;line-height:1.2}
.offre-texte{color:var(--texte2);max-width:52ch}
.offre-lien{width:46px;height:46px;border-radius:999px;border:1px solid var(--ligne2);display:grid;place-items:center;transition:background-color .2s,color .2s,border-color .2s}
.offre-lien .ico{width:18px;height:18px}
.offre-lien:hover{background:var(--encre);border-color:var(--encre);color:var(--creme)}

/* ---------- Méthode ---------- */
.methode{padding-block:clamp(110px,12vw,180px)}
.methode h2{max-width:14ch}
.rail{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,44px);margin-top:clamp(56px,7vw,100px);padding-top:44px}
.rail-ligne{position:absolute;top:0;left:0;right:0;height:1px;background:var(--ligne2)}
.rail-progres{position:absolute;left:0;top:-.5px;height:2px;width:calc(var(--p,0) * 100%);background:linear-gradient(90deg,var(--lumiere-1),var(--lumiere-2));transition:width .15s linear}
.etape{position:relative;display:grid;gap:10px;align-content:start}
.etape .point{position:absolute;top:-51px;left:0;width:15px;height:15px;border-radius:50%;background:var(--fond);border:1px solid var(--ligne2);transition:background-color .4s,border-color .4s,box-shadow .4s}
.etape.atteinte .point{background:var(--lumiere-1);border-color:var(--lumiere-1);box-shadow:0 0 0 5px color-mix(in srgb,var(--lilas) 65%,transparent)}

/* ---------- Réalisations: la carte au repos, puis l'avant et l'après au survol (23.10: plus aucune capture d'un client) ---------- */
.realisations{padding-block:clamp(110px,12vw,180px)}
.realisations h2{max-width:16ch}
.tete-ligne{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 48px}
.realisations-aide{max-width:34ch;color:var(--texte2);font-size:15px;padding-bottom:6px}
.aide-tactile{display:none}
@media (hover:none){.aide-survol{display:none}.aide-tactile{display:inline}.cas-lecture{display:none}}
.grille-cas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,2.4vw,32px);row-gap:clamp(44px,5vw,70px);margin-top:clamp(50px,6vw,84px)}
.cas{display:grid;gap:18px;align-content:start;min-width:0;outline:none;cursor:default}
.cas-visuel{position:relative;aspect-ratio:16/11;border-radius:calc(var(--rayon) + 4px);overflow:hidden;container-type:inline-size;transition:box-shadow .4s,transform .4s}
.cas-visuel::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(20,20,19,.05),rgba(20,20,19,0) 30%,rgba(255,255,255,0) 60%,rgba(255,255,255,.35) 80%,rgba(255,255,255,0) 90%,rgba(20,20,19,.05)) 0 0/24px 100% repeat-x}
.cas:hover .cas-visuel,.cas:focus-visible .cas-visuel{box-shadow:0 34px 70px -34px rgba(28,44,85,.45);transform:translateY(-4px)}
.cas:focus-visible .cas-visuel{outline:2px solid var(--violet);outline-offset:3px}
.teinte-lilas{background:linear-gradient(160deg,#ece5f7,#cfc1ec)}
.teinte-bleu{background:linear-gradient(160deg,#e3eaf8,#b8c9eb)}
.cas-repos{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .35s,transform .5s cubic-bezier(.2,.8,.2,1)}
.cas-plaque{display:grid;place-items:center;width:56%;aspect-ratio:2.3/1;border-radius:18px;background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.9);box-shadow:0 24px 50px -28px rgba(28,44,85,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cas-logo{width:68%;max-height:58%;object-fit:contain;mix-blend-mode:multiply}
.cas-mot{font-family:var(--police-titre);font-weight:600;font-size:clamp(18px,4.6cqw,30px);letter-spacing:-.02em;color:var(--marine)}
/* Radical Admin (28.10): le logo de son outil (radical-admin-demo.vercel.app), l'emblème et son nom, un peu plus haut que les autres */
.cas-logo-radical{max-height:78%}
.cas-lecture{position:absolute;left:4.5%;bottom:6%;display:inline-flex;align-items:center;gap:.55em;padding:.5em .9em;border-radius:999px;background:rgba(20,20,19,.82);color:#f4f1ea;font-size:13px;line-height:1;transition:opacity .3s}
.cas-lecture::before{content:"";border-left:7px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.cas.joue .cas-repos,.cas.fixe .cas-repos{opacity:0;transform:scale(.96)}
.cas.joue .cas-lecture,.cas.fixe .cas-lecture{opacity:0}
.cas-infos{display:grid;gap:8px}
.cas-meta{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--texte3)}
.cas h3{font-size:clamp(22px,2vw,28px);line-height:1.15}
.cas-texte{color:var(--texte2);max-width:44ch}
.cas-aa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:8px;padding-top:14px;border-top:1px solid var(--ligne2)}
.cas-aa dt{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--texte3);margin-bottom:4px}
.cas-aa div + div dt{color:var(--violet)}
.cas-aa dd{font-size:15px;line-height:1.45;color:var(--texte2)}

/* Le film, rendu plus lisible le 25.10 («pas assez clairs»): une fenêtre d'outil avec de vrais mots (données d'exemple),
   l'avant en couleurs éteintes, l'après qui balaie l'avant de gauche à droite, une légende à lire, 9 secondes en tout */
.cas-film{position:absolute;inset:0;font-size:clamp(8.5px,2.05cqw,13px);opacity:0;transition:opacity .35s;color:#141413}
.cas.joue .cas-film,.cas.fixe .cas-film{opacity:1}
.cas-etat{position:absolute;top:4.2%;left:5.5%;display:grid;z-index:3}
.cas-etat b{grid-area:1/1;padding:.4em .95em;border-radius:999px;font-size:.95em;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.2}
.etat-avant{background:#3b3a37;color:#f4f1ea}
.etat-apres{background:var(--violet);color:#ffffff;opacity:0}
.cas-illus{position:absolute;top:5.3%;right:5.5%;font-size:.82em;color:var(--marine);opacity:.65;z-index:3}
.plan{position:absolute;inset:14% 5.5% 23%;display:grid}
.plan-avant .fen{filter:saturate(.15)}
.plan-apres{clip-path:inset(0 100% 0 0)}
.cas-volet{position:absolute;top:12.5%;bottom:21.5%;left:5.5%;width:3px;border-radius:2px;background:linear-gradient(180deg,var(--lumiere-1),var(--lumiere-2));box-shadow:0 0 18px 4px rgba(164,123,234,.55);opacity:0;z-index:2}
.cas-legende{position:absolute;left:5.5%;right:5.5%;bottom:8%;min-height:2.7em;display:grid;align-items:center;z-index:3}
.cas-legende span{grid-area:1/1;font-size:1.18em;line-height:1.32;font-weight:500;color:#2b2a27}
.cas-legende .leg-apres{opacity:0;color:var(--violet-fonce)}
.cas-barre{position:absolute;left:5.5%;right:5.5%;bottom:4.3%;height:3px;border-radius:2px;background:rgba(20,20,19,.1);overflow:hidden}
.cas-barre i{display:block;height:100%;background:linear-gradient(90deg,var(--lumiere-1),var(--lumiere-2));transform:scaleX(0);transform-origin:left}
.fen{position:relative;display:flex;flex-direction:column;min-height:0;background:#ffffff;border-radius:1em;box-shadow:0 1.6em 3em -1.6em rgba(28,44,85,.45),0 0 0 1px rgba(20,20,19,.06);overflow:hidden}
.fen-tete{display:flex;justify-content:space-between;align-items:center;gap:.8em;padding:.7em 1em;border-bottom:1px solid rgba(20,20,19,.07)}
.fen-tete b{font-weight:600;font-size:1.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fen-tag{flex:none;font-size:.85em;padding:.25em .65em;border-radius:999px;background:#f1efeb;color:#6b6760}
.fen-tag-ok{background:color-mix(in srgb,var(--lilas) 55%,#ffffff);color:var(--violet-fonce)}
.fen-corps{flex:1;min-height:0;display:grid;gap:.8em;padding:.9em 1em;align-content:start}
.fen-2{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.fen-fin{display:flex;align-items:center;gap:.5em;margin:0 1em .9em;padding:.55em .8em;border-radius:.7em;background:#eef6f1;color:#2f6f4f;font-weight:600;font-size:.95em}
.fen-fin .ico{width:1.1em;height:1.1em;flex:none}
.petit-titre{font-size:.78em;letter-spacing:.08em;text-transform:uppercase;color:#8b867c;margin:.1em 0 .35em}
.champs{display:grid;gap:.4em;align-content:start;min-width:0}
.champs li{display:flex;justify-content:space-between;align-items:center;gap:.6em;min-width:0;padding:.48em .7em;border-radius:.55em;background:#f7f6f3;border:1px solid rgba(20,20,19,.05)}
.champs span{color:#6b6760;font-size:.9em;flex:none}
.champs em{font-style:normal;font-weight:600;color:#141413;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.champs-ia li{background:#f6f3fd;border-color:rgba(91,69,160,.14)}
.champs-ia em{color:var(--violet-fonce)}
.piece{display:grid;gap:.22em;align-content:start;padding:.75em .85em;border-radius:.5em;background:#fbfaf7;border:1px solid rgba(20,20,19,.08);box-shadow:0 .5em 1.2em -.8em rgba(20,20,19,.35);min-width:0}
.piece p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.piece-type{font-size:.74em;letter-spacing:.1em;text-transform:uppercase;color:#8b867c}
.piece-nom{font-weight:600}
.piece-ligne{color:#6b6760;font-size:.9em}
.piece-total{margin-top:.25em;font-weight:600}
.pile{position:relative;display:grid;gap:.4em;align-content:start;min-width:0}
.piece-mini{padding:.45em .7em}
.rayon{position:absolute;left:-6%;right:-6%;top:-14%;height:2.6em;background:linear-gradient(180deg,transparent,rgba(101,141,236,.32) 72%,#658dec 96%,transparent);opacity:0}
.bulles{display:grid;gap:.45em;align-content:start;min-width:0}
.bulle{padding:.5em .75em;border-radius:.8em .8em .8em .2em;background:#eef1fa;color:#2f3a57;font-size:.92em}
.bulle b{display:block;font-size:.74em;letter-spacing:.08em;text-transform:uppercase;color:#6b7aa0;font-weight:600}
.tableaux{display:grid;align-content:start;min-width:0}
.badge-encore{font-style:normal;margin-left:.4em;padding:.1em .55em;border-radius:999px;background:#f6e3df;color:#9a3d2c;letter-spacing:0;text-transform:none;font-size:1em}
.commandes{display:grid;gap:.45em}
.commandes li{display:flex;justify-content:space-between;align-items:center;gap:.8em;padding:.6em .8em;border-radius:.6em;background:#f7f6f3;border:1px solid rgba(20,20,19,.05)}
.commandes li span:first-child{font-weight:600}
.statut{font-size:.85em;padding:.2em .6em;border-radius:999px;background:#e9e6f6;color:var(--violet-fonce)}
.statut-ok{background:#e3f3ea;color:#2f6f4f}
.notes{display:grid;gap:.45em;align-content:start;padding-top:.2em;min-width:0}
.note-papier{padding:.5em .7em;border-radius:.3em;background:#f3eedc;color:#4a4740;font-size:.88em;font-style:italic;box-shadow:0 .4em .8em -.5em rgba(20,20,19,.3);transform:rotate(-2deg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.note-papier:nth-child(2){transform:rotate(1.5deg) translateX(.4em);background:#ece6f6}
.note-papier:nth-child(3){transform:rotate(-1deg);background:#e6eef8}
.page{display:grid;gap:.45em;align-content:start;padding:.8em .9em;border-radius:.6em;background:#fbfaf8;border:1px solid rgba(20,20,19,.06);min-width:0}
.page i{display:block;height:.5em;width:var(--w,80%);border-radius:.25em;background:#d8d3ca}
.page-titre-texte{font-weight:600;color:var(--violet-fonce)}
.page-sous-texte{font-size:.76em;letter-spacing:.08em;text-transform:uppercase;color:#8b867c;margin-top:.25em}
.page-texte{color:#3b3a37;line-height:1.4}
.page-texte em{font-style:normal}
.vocal{display:grid;justify-items:center;align-content:center;gap:.55em;padding:.8em;border-radius:.8em;background:#f2eefb}
.vocal p{font-size:.85em;color:var(--violet-fonce);font-weight:600}
.vocal-play{width:2.2em;height:2.2em;border-radius:50%;background:var(--violet);position:relative}
.vocal-play::after{content:"";position:absolute;left:52%;top:50%;transform:translate(-40%,-50%);border-left:.6em solid #ffffff;border-top:.38em solid transparent;border-bottom:.38em solid transparent}
.onde{display:flex;align-items:center;gap:.22em;height:2.2em}
.onde i{display:block;width:.28em;height:100%;border-radius:.2em;background:linear-gradient(180deg,var(--lumiere-1),var(--lumiere-2));transform:scaleY(.4)}
.recherche-texte{padding:.45em 1em;border-radius:999px;background:#f1efeb;color:#6b6760;font-size:.92em}
.tuiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55em}
.tuiles p{display:grid;place-items:center;aspect-ratio:1.7/1;border-radius:.6em;background:#efece6;color:#8b867c;font-size:.88em}
.tuiles .tuile-eux{background:#ece5f7;color:var(--violet-fonce);font-weight:600;outline:2px dashed #b9a4ee;outline-offset:-2px}
.resas{display:grid;gap:.4em;align-content:start;min-width:0}
.resa{padding:.45em .7em;border-radius:.5em;background:#f7f6f3;border:1px solid rgba(20,20,19,.05);font-size:.9em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.resa-nouvelle{background:color-mix(in srgb,var(--lilas) 60%,#ffffff);border-color:#b9a4ee;font-weight:600;color:var(--violet-fonce)}

/* Le minutage: l'avant jusqu'à 4,4 s, le balayage, puis l'après; la barre suit les 9 secondes */
@keyframes aa-tape{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes aa-surgit{from{opacity:0;transform:translateY(.6em)}to{opacity:1;transform:none}}
@keyframes aa-sortir{from{opacity:1}to{opacity:0}}
@keyframes aa-entrer{from{opacity:0}to{opacity:1}}
@keyframes aa-volet{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes aa-trait{0%{left:5.5%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:94.5%;opacity:0}}
@keyframes aa-barre{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes aa-rayon{0%{top:-14%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:96%;opacity:0}}
@keyframes aa-onde{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.cas.joue .tape{animation:aa-tape var(--t,.7s) steps(var(--n,12),end) var(--d,0s) both}
.cas.joue .surgit{animation:aa-surgit .45s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
.cas.joue .plan-apres{animation:aa-volet .75s cubic-bezier(.7,0,.2,1) 4.4s both}
.cas.joue .cas-volet{animation:aa-trait .75s cubic-bezier(.7,0,.2,1) 4.4s both}
.cas.joue .etat-avant,.cas.joue .leg-avant{animation:aa-sortir .3s ease 4.5s both}
.cas.joue .etat-apres,.cas.joue .leg-apres{animation:aa-entrer .35s ease 4.75s both}
.cas.joue .cas-barre i{animation:aa-barre 9s linear both}
.cas.joue .rayon{animation:aa-rayon 1s ease-in-out var(--d,0s) both}
.cas.joue .onde i{animation:aa-onde .9s ease-in-out calc(var(--d,0s) + var(--k) * .07s) infinite both}
.cas.fixe .plan-apres{clip-path:none}
.cas.fixe .etat-avant,.cas.fixe .leg-avant{opacity:0}
.cas.fixe .etat-apres,.cas.fixe .leg-apres{opacity:1}
.cas.fixe .cas-barre i{transform:none}

/* ---------- Qui on est ---------- */
.qui{padding-block:clamp(110px,12vw,190px)}
.qui-grille{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);column-gap:clamp(32px,5vw,88px);row-gap:0;align-items:start}
.qui .etiquette{grid-column:1/-1}
.qui-cote{max-width:380px;justify-self:end;width:100%}
.manifeste{font-size:clamp(26px,3.05vw,46px);line-height:1.16;letter-spacing:-.022em;font-weight:var(--poids-titre);font-family:var(--police-titre)}
.photo-attente{aspect-ratio:4/5;max-width:100%;border-radius:var(--rayon);display:grid;place-items:center;padding:24px;text-align:center;font-size:14px;color:var(--texte3);border:1px dashed var(--ligne2);background:repeating-linear-gradient(135deg,transparent 0 12px,color-mix(in srgb,var(--lilas) 30%,transparent) 12px 13px)}
/* La photo du bureau (28.10, envoyée par Güney), en attendant celle de Flavio au travail */
.qui-photo{margin:0;aspect-ratio:4/5;border-radius:var(--rayon);overflow:hidden;background:var(--fond-alt)}
.qui-photo img{display:block;width:100%;height:100%;object-fit:cover}
.faits{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.faits dt{font-size:13px;color:var(--texte3)}
.faits dd{font-size:17px;font-weight:500;line-height:1.3}

/* ---------- Questions ---------- */
.faq{padding-block:clamp(100px,11vw,170px)}
.faq-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(32px,5vw,88px);align-items:start}
.faq-liste{border-top:1px solid var(--ligne2);min-width:0}
.faq details{border-bottom:1px solid var(--ligne2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:24px 0;font-size:clamp(18px,1.45vw,21px);font-weight:500;letter-spacing:-.01em;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.plus{position:relative;flex:none;width:16px;height:16px;margin-top:6px}
.plus::before,.plus::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;transition:transform .3s}
.plus::after{transform:rotate(90deg)}
details[open] .plus::after{transform:rotate(0)}
.faq details p{padding:0 40px 26px 0;color:var(--texte2);max-width:62ch}

/* ---------- Fin et pied ---------- */
.fin{padding-top:clamp(120px,14vw,210px);overflow:hidden;isolation:isolate;background:var(--fond-section)}
.fin .verre .voile{background:
  radial-gradient(62% 58% at 50% 42%,color-mix(in srgb,var(--fond-section) 78%,transparent),color-mix(in srgb,var(--fond-section) 18%,transparent) 72%),
  linear-gradient(180deg,transparent 45%,var(--fond-section) 88%)}
.fin-corps{position:relative;z-index:1;display:grid;justify-items:center;text-align:center;gap:28px}
.signature{font-size:clamp(50px,8.6vw,140px);line-height:.94;letter-spacing:-.045em;font-weight:var(--poids-titre);font-family:var(--police-titre);max-width:11ch;text-wrap:balance}
.fin .chapo{text-align:center}
.fin .actions{justify-content:center}
.pied{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px;margin-top:clamp(100px,12vw,170px);padding-top:40px;padding-bottom:calc(48px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--ligne)}
.pied-logo{display:block;height:34px;width:auto;fill:currentColor}
.pied-marque p{margin-top:12px;color:var(--texte2);font-size:15px}
.pied-cols{display:flex;flex-wrap:wrap;gap:clamp(32px,5vw,80px)}
.pied-cols div{display:grid;gap:8px;align-content:start;font-size:15px;color:var(--texte2)}
.pied-titre{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--texte3);margin-bottom:4px}
.pied-legal{flex-basis:100%;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-top:22px;border-top:1px solid var(--ligne);font-size:13px;color:var(--texte3)}
.pied-legal-liens{display:flex;flex-wrap:wrap;gap:8px 24px}
.pied a{transition:color .2s}
.pied a:hover{color:var(--texte)}

/* ---------- Écrans moyens et petits ---------- */
@media (max-width:1060px){
  .nav-liens{display:none}
  .nav .btn{margin-left:auto}
}
@media (max-width:860px){
  .hero{min-height:max(640px,100svh);padding-top:96px}
  .hero-voile,html[data-fond] .hero-voile{background:linear-gradient(180deg,color-mix(in srgb,var(--voile) 10%,transparent) 0%,color-mix(in srgb,var(--voile) 55%,transparent) 34%,color-mix(in srgb,var(--voile) 92%,transparent) 58%,var(--voile) 100%)}
  .hero-corps{margin-top:auto;margin-bottom:0}
  html[data-fond] .hero .hero-voile{background:linear-gradient(180deg,color-mix(in srgb,var(--voile) 10%,transparent) 0%,color-mix(in srgb,var(--voile) 55%,transparent) 34%,color-mix(in srgb,var(--voile) 92%,transparent) 58%,var(--voile) 100%)}
  html[data-fond="aurore"] .hero .hero-voile{background:linear-gradient(180deg,color-mix(in srgb,var(--voile) 55%,transparent) 0%,transparent 30%,color-mix(in srgb,var(--voile) 35%,transparent) 100%)}
  html[data-haut] .hero-corps{grid-template-columns:minmax(0,1fr);row-gap:24px}
  html[data-haut] .hero-cote,html[data-haut] .hero-offres,html[data-haut][data-offres] .hero-offres{grid-column:1;grid-row:auto}
  html[data-haut="aurore"] .hero-cote{margin-top:clamp(24px,6vw,36px)}
  html[data-offres="bandeau"] .hero-offres{grid-template-columns:minmax(0,1fr);margin-top:28px}
  html[data-offres="bandeau"] .hero-offres a,html[data-offres="bandeau"] .hero-offres li:first-child a{padding:16px 44px 18px 0}
  html[data-offres="bandeau"] .hero-offres .ico{right:4px}
  .hero-clients-dedans{flex-direction:column;align-items:stretch;gap:6px}
  .hero-clients-titre{max-width:none}
  .defile-groupe li{height:52px}
  .partenariat .verre{height:62%}
  .partenariat .verre .lumiere{inset:-12% -30% -12% 10%}
  .partenariat .verre .voile{background:linear-gradient(180deg,color-mix(in srgb,var(--fond-section) 25%,transparent) 0%,color-mix(in srgb,var(--fond-section) 80%,transparent) 40%,var(--fond-section) 100%)}
  .partenariat-etapes{grid-template-columns:1fr;gap:28px}
  .liste-offres li{grid-template-columns:1fr auto;row-gap:6px}
  .offre-texte{grid-column:1;grid-row:2}
  .offre-lien{grid-column:2;grid-row:1 / span 2}
  .rail{grid-template-columns:1fr;padding-top:0;padding-left:34px;row-gap:34px}
  .rail-ligne{top:0;bottom:0;left:7px;right:auto;width:1px;height:auto}
  .rail-progres{left:-.5px;top:0;width:2px;height:calc(var(--p,0) * 100%)}
  .etape .point{top:4px;left:-34px}
  .grille-cas{grid-template-columns:1fr}
  .cas-aa{grid-template-columns:1fr;gap:10px}
  .realisations-aide{max-width:none}
  .qui-grille{grid-template-columns:1fr;row-gap:36px}
  .qui-cote{justify-self:start;max-width:420px}
  .faq-grille{grid-template-columns:1fr}
  .faq details p{padding-right:0}
  .pied{flex-direction:column}
}
@media (max-width:520px){
  .btn{height:50px;padding:0 1.3em}
  .nav-logo svg{height:26px}
  .hero-offres a{font-size:13px}
  .cas-visuel{aspect-ratio:10/9.6}
  .cas-film{font-size:9.6px}
  .plan{inset:13% 5% 25%}
  .cas-legende{bottom:8.5%}
  .defile img{height:24px}
  .defile img[data-logo*="ozevents"],.defile img[data-logo*="sanichauffe"],.defile img[data-logo*="yb_sanitaire"],.defile img[data-logo*="esay"]{height:36px}
  .defile img[data-logo*="bibiss"],.defile img[data-logo*="pharmaciens"]{height:29px}
  .defile img[data-logo="synergie-associes"]{height:22px}
  .defile img[data-logo*="la-finestra"]{height:18px}
}

/* ---------- Les autres boutons «Buvons un café» (navigation, partenariat, fin), à l'essai le 27.10 (réglage «Les autres boutons»):
   avec la tasse (actuel), sans la tasse, ou «Un café cette semaine ?» comme le bouton du haut ---------- */
.mot-semaine{display:none}
html[data-autres="sans"] .cafe-autre .tasse,html[data-autres="semaine"] .cafe-autre .tasse{display:none}
html[data-autres="semaine"] .cafe-autre .mot-cafe{display:none}
html[data-autres="semaine"] .cafe-autre .mot-semaine{display:inline}

/* ---------- La version téléphone, revue le 27.10 (sa demande: «la hiérarchie visuelle ne joue pas»).
   Une seule échelle: le grand titre, puis les titres de section, tous à la même taille, puis les sous-titres, le chapeau,
   le texte courant et les petites lignes. Le chiffre, le manifeste et la signature restent des moments forts sans passer
   devant les titres. Moins de vide entre les sections, l'étiquette collée à son titre. L'ordinateur ne change pas:
   tout est sous 860 px. ---------- */
@media (max-width:860px){
  .partenariat,.methode,.realisations,.qui{padding-block:84px}
  .offres,.faq{padding-block:80px}
  .fin{padding-top:96px}
  .etiquette{font-size:12px;margin-bottom:14px}
  .partenariat-tete{gap:20px}
  .partenariat-tete .etiquette{margin-bottom:-6px}

  .hero h1,html[data-offres="bandeau"] .hero h1{font-size:clamp(44px,11.6vw,58px)}
  html[data-offres="bandeau"] .hero-offres{margin-top:20px}
  html[data-offres="bandeau"] .hero-offres a,html[data-offres="bandeau"] .hero[data-ton="sombre"] .hero-offres a{font-size:16px;gap:6px}
  html[data-offres="bandeau"] .hero-offres a,html[data-offres="bandeau"] .hero-offres li:first-child a{padding:14px 44px 14px 0}

  .partenariat h2,.methode h2,.realisations h2,.h2-moyen{font-size:clamp(31px,8.4vw,40px);line-height:1.05}
  .partenariat-etapes h3,.etape h3,.offre-nom,.cas-infos h3{font-size:21px;line-height:1.2;letter-spacing:-.012em}
  .partenariat-etapes p,.etape p,.offre-texte,.cas-texte,.faq details p{font-size:16px;line-height:1.55}
  .cas-aa dd{font-size:15px}
  .faq summary{font-size:17px;padding:20px 0}

  .partenariat-etapes{margin-top:48px;gap:26px;padding-top:28px}
  .chiffre{margin-top:48px;padding-top:28px}
  .chiffre-grand{font-size:64px}
  .chiffre-texte{font-size:16px}
  .liste-offres{margin-top:32px}
  .liste-offres li{padding:20px 0}
  .rail{margin-top:36px}
  .grille-cas{margin-top:36px;row-gap:48px}
  .manifeste{font-size:clamp(21px,5.6vw,26px);line-height:1.3;letter-spacing:-.016em}
  .qui-grille{row-gap:28px}
  .qui .etiquette{margin-bottom:-14px}
  .faq-grille{gap:24px}
  .signature{font-size:clamp(44px,12vw,58px)}
  .fin-corps{gap:22px}
  .pied{margin-top:72px}
}
/* Le bouton des jours sur ordinateur (27.10): un peu plus compact que le bouton seul, et le haut resserré de quelques pixels,
   pour que les logos restent dans le premier écran (sa règle du 22.10); les tailles de texte ne changent pas */
@media (min-width:861px){
  html[data-cta="semaine"] .cta-semaine{gap:8px}
  html[data-cta="semaine"] .semaine-titre{line-height:1.2}
  html[data-cta="semaine"] .semaine-jours a{padding:7px 8px 6px}
  html[data-cta="semaine"] .semaine-jours span,html[data-cta="semaine"] .semaine-jours i{line-height:1.25}
  html[data-cta="semaine"][data-offres="bandeau"] .hero{padding-top:86px}
  html[data-cta="semaine"][data-offres="bandeau"] .hero-corps,html[data-cta="semaine"][data-offres="bandeau"] .hero-cote{gap:18px}
  html[data-cta="semaine"][data-offres="bandeau"] .hero-offres{margin-top:22px}
  html[data-cta="semaine"][data-offres="bandeau"] .hero-clients{margin-top:8px}
}
/* Le bouton des jours sur téléphone: les six jours sur une ligne, «Un autre jour» dessous */
@media (max-width:520px){
  .hero-cote .actions{justify-self:stretch}
  .actions .cta-semaine{width:100%}
  .semaine-jours{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;width:100%}
  .semaine-jours a{min-width:0;padding:8px 2px 7px}
  .semaine-jours b{font-size:20px}
  .semaine-jours span,.semaine-jours i{font-size:11px}
  .semaine-jours .semaine-plus{grid-column:1 / -1;justify-content:center;padding:12px 16px}
}

/* ---------- Le bouton de la navigation, à l'essai le 27.10 (sa demande: «plein d'exemples de boutons interactifs pour les headers»):
   l'actuel, puis douze versions; le réglage «Le bouton de la navigation» en montre une, la version publiée ne garde qu'elle ---------- */
.nav-cta{position:relative;flex:none;margin-left:4px}
.nav-cta .btn{margin-left:0}
.nv{display:none}
html[data-nav="actuel"] .nv-actuel,html[data-nav="sans"] .nv-sans,html[data-nav="semaine"] .nv-semaine,html[data-nav="jour"] .nv-jour,
html[data-nav="remplir"] .nv-remplir,html[data-nav="halo"] .nv-halo,html[data-nav="eclat"] .nv-eclat,html[data-nav="deplie"] .nv-deplie,
html[data-nav="mots"] .nv-mots,html[data-nav="aimant"] .nv-aimant,html[data-nav="verre"] .nv-verre,html[data-nav="pastille"] .nv-pastille,
html[data-nav="halo-fleche"] .nv-halo-fleche{display:inline-flex}
html[data-nav="menu"] .nv-menu{display:block}
@media (max-width:1060px){.nav-cta{margin-left:auto}}

/* 3. Le prochain jour dans le bouton: une pastille avec la date, qui ouvre Calendly ce jour-là */
.nv-date{display:inline-flex;align-items:center;height:26px;margin-right:-.55em;padding:0 10px;border-radius:999px;background:var(--violet);color:#ffffff;font-size:12.5px;font-weight:600;letter-spacing:.01em;transition:transform .3s cubic-bezier(.2,.8,.2,1),background-color .3s}
.nv-date:empty{display:none}
.nv-jour:hover .nv-date,.nv-jour:focus-visible .nv-date{transform:translateX(3px);background:linear-gradient(110deg,var(--lumiere-1),var(--lumiere-2))}
.nav[data-sur="sombre"] .nv-date{background:var(--violet-fonce)}

/* 4. Le menu des jours: au clic, les six prochains jours sous la barre, comme le bouton du haut */
.nv-menu-bouton{gap:.45em}
.nv-chevron{width:16px;height:16px;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.nv-menu-bouton[aria-expanded="true"] .nv-chevron{transform:rotate(180deg)}
.nv-menu-panneau{position:absolute;top:calc(100% + 12px);right:0;z-index:60;width:max-content;max-width:min(470px,calc(100vw - 2 * var(--marge)));padding:14px;border-radius:20px;background:#ffffff;border:1px solid rgba(20,20,19,.12);box-shadow:0 26px 50px -24px rgba(31,28,74,.5),0 2px 6px rgba(31,28,74,.06);color:var(--encre);animation:nv-ouvre .28s cubic-bezier(.2,.8,.2,1)}
.nv-menu-panneau[hidden]{display:none}
.nav.menu-ouvert{z-index:120}
.nv-menu-panneau .semaine-jours a{-webkit-backdrop-filter:none;backdrop-filter:none;--fond-section:#ffffff;--ligne2:rgba(20,20,19,.14);--texte3:#8a877f;--texte2:#55534f;color:var(--encre)}
@keyframes nv-ouvre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* 5. La tasse qui se remplit: au survol, un café au lait monte dans le bouton */
.nv-remplir{position:relative;overflow:hidden;isolation:isolate;transition:color .4s .12s,background-color .2s}
.nv-liquide{position:absolute;left:0;right:0;bottom:0;height:0;z-index:-1;background:linear-gradient(180deg,#dcbc98 0%,#b98a5f 100%);transition:height .8s cubic-bezier(.2,.8,.2,1)}
.nv-vague{position:absolute;left:0;bottom:calc(100% - 1px);width:200%;height:7px;fill:#dcbc98;opacity:0;animation:cta-vague 1.5s linear infinite;transition:opacity .2s}
.nv-remplir:hover .nv-liquide,.nv-remplir:focus-visible .nv-liquide{height:118%}
.nv-remplir:hover .nv-vague,.nv-remplir:focus-visible .nv-vague{opacity:1}
.nv-remplir:hover,.nv-remplir:focus-visible{color:#2a1a0e}

/* 6. Le halo qui tourne: une lumière lilas et bleue fait le tour du bouton */
.nv-halo,.nv-halo-fleche{position:relative;align-items:center;gap:.55em;height:42px;padding:0 1.15em;border-radius:999px;font-size:15px;font-weight:500;line-height:1;white-space:nowrap;color:#f4f1ea;isolation:isolate}
.nv-halo::before,.nv-halo::after,.nv-halo-fleche::before,.nv-halo-fleche::after{content:"";position:absolute;border-radius:inherit;background:conic-gradient(from var(--angle-halo),#a47bea,#658dec,#d8cded,#a47bea);animation:cta-halo 3.2s linear infinite}
.nv-halo::before,.nv-halo-fleche::before{inset:0;z-index:-1}
.nv-halo::after,.nv-halo-fleche::after{inset:-6px;z-index:-2;filter:blur(10px);opacity:.45;transition:opacity .35s}
.nv-halo:hover::after,.nv-halo:focus-visible::after,.nv-halo-fleche:hover::after,.nv-halo-fleche:focus-visible::after{opacity:.9}
.nv-halo-fond{position:absolute;inset:2px;border-radius:inherit;background:var(--encre);z-index:-1}
.nv-halo .tasse{width:1.3em;height:1.3em}

/* 7. Le reflet qui passe: un éclat de verre traverse le bouton toutes les quelques secondes, et tout de suite au survol */
.nv-eclat{position:relative;overflow:hidden;isolation:isolate}
.nv-eclat::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);animation:nv-eclat 4.8s ease-in-out infinite;pointer-events:none}
.nv-eclat:hover::after,.nv-eclat:focus-visible::after{animation-duration:1.1s}
.nav[data-sur="sombre"] .nv-eclat::after{background:linear-gradient(100deg,transparent,rgba(164,123,234,.55),transparent)}
@keyframes nv-eclat{0%,72%{left:-60%}100%{left:130%}}

/* 8. La tasse qui se déplie: un rond avec la tasse, qui s'ouvre au survol sur «Buvons un café» (ouvert sur téléphone) */
.nv-deplie{gap:0;padding:0 .7em}
.nv-deplie-mot{display:inline-block;max-width:0;overflow:hidden;opacity:0;white-space:nowrap;transition:max-width .5s cubic-bezier(.2,.8,.2,1),opacity .3s,margin-left .5s cubic-bezier(.2,.8,.2,1)}
.nv-deplie:hover .nv-deplie-mot,.nv-deplie:focus-visible .nv-deplie-mot{max-width:160px;opacity:1;margin-left:.55em}
@media (hover:none){.nv-deplie{padding:0 1.15em}.nv-deplie .nv-deplie-mot{max-width:none;opacity:1;margin-left:.55em}}

/* 9. Les mots qui défilent: «Buvons un café», «30 minutes», «Chez vous ou en visio» */
.nv-mots-fenetre{display:inline-block;width:10.6em;height:1.2em;overflow:hidden;text-align:center}
.nv-mots-rail{display:grid;line-height:1.2em;animation:nv-mots 7.5s cubic-bezier(.6,0,.3,1) infinite}
.nv-mots-rail span{height:1.2em;white-space:nowrap}
.nv-mots:hover .nv-mots-rail{animation-play-state:paused}
@keyframes nv-mots{0%,26%{transform:translateY(0)}33%,59%{transform:translateY(-1.2em)}66%,92%{transform:translateY(-2.4em)}100%{transform:translateY(-3.6em)}}

/* 10. La flèche aimantée: le bouton suit un peu la souris, la flèche se tourne vers le haut */
.nv-aimant{gap:12px;padding:0 5px 0 1.15em;transition:background-color .2s,color .2s,transform .3s cubic-bezier(.2,.8,.2,1)}
.nv-fleche{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--creme);color:var(--encre);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.nv-aimant:hover .nv-fleche,.nv-aimant:focus-visible .nv-fleche{transform:rotate(-45deg)}
.nav[data-sur="sombre"] .nv-fleche{background:var(--nuit);color:var(--creme)}

/* 11. Le verre cannelé: le bouton en verre strié, la lumière lilas et bleue glisse derrière au survol */
.nv-verre{color:var(--encre);background:repeating-linear-gradient(90deg,rgba(255,255,255,.62) 0 5px,rgba(255,255,255,.18) 5px 10px),linear-gradient(110deg,#c3aff0,#9fb6ee 50%,#c3aff0) 0 0/200% 100%;border:1px solid rgba(20,20,19,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 12px 26px -16px rgba(61,42,102,.7);transition:background-position .7s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.nv-verre:hover,.nv-verre:focus-visible{background-position:0 0,100% 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 14px 30px -14px rgba(61,42,102,.85)}
.nav[data-sur="sombre"] .nv-verre{color:#f4f1ea;background:repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 5px,rgba(255,255,255,.04) 5px 10px),linear-gradient(110deg,#5b45a0,#3d4fa0 50%,#5b45a0) 0 0/200% 100%;border-color:rgba(244,241,234,.22)}

/* 12. La pastille qui respire: un point lilas qui pulse devant «Un café cette semaine ?» */
.nv-pastille{gap:.65em}
.nv-point{width:8px;height:8px;flex:none;border-radius:50%;background:var(--lumiere-1);box-shadow:0 0 0 0 rgba(164,123,234,.65);animation:nv-point 2.2s ease-out infinite}
@keyframes nv-point{70%{box-shadow:0 0 0 9px rgba(164,123,234,0)}100%{box-shadow:0 0 0 0 rgba(164,123,234,0)}}

/* 13. Le halo et la flèche, son choix du 27.10 (le 6 et le 10 ensemble, sans la tasse): la lumière tourne autour du bouton,
   la flèche se tourne vers le haut au survol, le bouton suit un peu la souris */
.nv-halo-fleche{gap:12px;padding:0 5px 0 1.15em;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.nv-halo-fleche .nv-fleche,.nav[data-sur="sombre"] .nv-halo-fleche .nv-fleche{background:#f4f1ea;color:var(--encre);transition:transform .35s cubic-bezier(.2,.8,.2,1),background-color .3s}
.nv-halo-fleche:hover .nv-fleche,.nv-halo-fleche:focus-visible .nv-fleche{transform:rotate(-45deg);background:#ffffff}

@media (prefers-reduced-motion:reduce){
  .nv-halo::before,.nv-halo::after,.nv-halo-fleche::before,.nv-halo-fleche::after,.nv-eclat::after,.nv-mots-rail,.nv-point,.nv-vague{animation:none}
  .nv-eclat::after{display:none}
}
/* Sur un petit téléphone, la place manque: la tasse du «prochain jour» s'efface, le menu s'ouvre sur toute la largeur */
@media (max-width:420px){
  .nv-jour .tasse{display:none}
  .nv-menu-panneau{position:fixed;top:calc(env(safe-area-inset-top,0px) + 70px);left:12px;right:12px;width:auto;max-width:none}
  .nv-menu-panneau .semaine-jours{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
  .nv-menu-panneau .semaine-jours a{min-width:0;padding:8px 2px 7px}
  .nv-menu-panneau .semaine-jours .semaine-plus{grid-column:1 / -1;justify-content:center;padding:12px 16px}
}

/* ---------- Les améliorations du 28.10, toutes en réglages (sa demande: «toutes les modifs, en réglage»; la version 1.0 reste la valeur de départ) ---------- */
/* Le bouton du menu, plus grand */
html[data-navtaille="grande"] .nav-cta .nv{height:50px;font-size:16.5px}
html[data-navtaille="grande"] .nv-halo-fleche{padding-left:1.35em}
html[data-navtaille="grande"] .nv-halo-fleche .nv-fleche{width:38px;height:38px}

/* L'animation de Charbon (28.10, corrigée le même jour): le rond part à gauche, flèche en diagonale; au survol il file jusqu'au bord
   droit et la flèche se couche, le texte prend sa place. Variante «tasse»: une tasse dans le rond, qui penche et fume en route.
   cta.js mesure les deux trajets (--ch-dx, --ch-dt) sur le bouton au repos. */
html:is([data-anim="charbon"],[data-anim="tasse"]) .ch-bouton .ch-rond{order:-1;transition:transform .6s cubic-bezier(.65,0,.35,1)}
html:is([data-anim="charbon"],[data-anim="tasse"]) .ch-bouton .ch-texte{padding:0 .8em;transition:transform .6s cubic-bezier(.65,0,.35,1)}
html:is([data-anim="charbon"],[data-anim="tasse"]) .ch-bouton:is(:hover,:focus-visible) .ch-rond{transform:translateX(var(--ch-dx,0px))}
html:is([data-anim="charbon"],[data-anim="tasse"]) .ch-bouton:is(:hover,:focus-visible) .ch-texte{transform:translateX(calc(-1 * var(--ch-dt,0px)))}
html[data-anim="charbon"] .ch-bouton .ch-rond .ico{transform:rotate(-45deg);transition:transform .6s cubic-bezier(.65,0,.35,1)}
html[data-anim="charbon"] .ch-bouton:is(:hover,:focus-visible) .ch-rond .ico{transform:rotate(0deg)}
html:is([data-anim="charbon"],[data-anim="tasse"]) .nv-halo-fleche{gap:0;padding:0 6px}
html:is([data-anim="charbon"],[data-anim="tasse"]) .nv-halo-fleche .ch-texte{padding:0 1em 0 .75em}
.ch-rond{display:inline-grid;place-items:center}
.ch-rond .tasse{display:none}
html[data-anim="tasse"] .ch-rond .ico{display:none}
html[data-anim="tasse"] .ch-rond .tasse{display:block;width:21px;height:21px;color:var(--encre)}
html[data-anim="tasse"] .ch-bouton:is(:hover,:focus-visible) .ch-rond .tasse-tasse{animation:ch-penche .6s cubic-bezier(.65,0,.35,1)}
html[data-anim="tasse"] .ch-bouton:is(:hover,:focus-visible) .ch-rond .tasse-vapeur{animation:vapeur 1.5s ease-in-out .35s infinite}
html[data-anim="tasse"] .ch-bouton:is(:hover,:focus-visible) .ch-rond .tasse-vapeur:nth-child(2){animation-delay:.55s}
html[data-anim="tasse"] .ch-bouton:is(:hover,:focus-visible) .ch-rond .tasse-vapeur:nth-child(3){animation-delay:.75s}
@keyframes ch-penche{35%{transform:rotate(-14deg)}70%{transform:rotate(6deg)}100%{transform:rotate(0)}}

/* Le menu en verre liquide: une capsule de verre qui flotte, un reflet qui suit la souris, une goutte qui glisse sous le lien survolé,
   et la capsule qui se resserre quand on descend (cta.js pose la goutte et le reflet) */
.nav-goutte{display:none}
html[data-navverre="liquide"] .nav,html[data-navverre="liquide"] .nav.colle{top:12px;left:50%;right:auto;width:min(1180px,calc(100% - 24px));transform:translateX(-50%);border-radius:999px;border:1px solid rgba(255,255,255,.62);background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.36));-webkit-backdrop-filter:blur(16px) saturate(1.8);backdrop-filter:blur(16px) saturate(1.8);box-shadow:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -1px 1px rgba(255,255,255,.35),0 14px 36px -16px rgba(31,28,74,.38);transition:width .7s cubic-bezier(.2,.9,.25,1.12),background-color .35s,border-color .35s,color .35s,box-shadow .35s}
html[data-navverre="liquide"] .nav.colle{width:min(1040px,calc(100% - 24px))}
html[data-navverre="liquide"] .nav::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(180px 70px at var(--mx,50%) var(--my,0%),rgba(255,255,255,.85),transparent 70%);opacity:0;transition:opacity .35s}
html[data-navverre="liquide"] .nav:hover::before{opacity:1}
html[data-navverre="liquide"] .nav-dedans{position:relative;z-index:1;padding-block:8px;padding-left:24px;padding-right:8px}
html[data-navverre="liquide"] .nav-liens{position:relative;gap:4px}
html[data-navverre="liquide"] .nav-liens a{position:relative;z-index:1;padding:8px 14px;border-radius:999px}
html[data-navverre="liquide"] .nav-goutte{position:absolute;z-index:0;top:50%;left:0;display:block;width:var(--gw,0px);height:38px;border-radius:999px;transform:translate(var(--gx,0px),-50%) scaleY(var(--gs,1));opacity:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.55));border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #ffffff,0 8px 18px -10px rgba(31,28,74,.45);transition:transform .5s cubic-bezier(.3,1.5,.4,1),width .5s cubic-bezier(.3,1.5,.4,1),opacity .25s}
html[data-navverre="liquide"] .nav-liens.survol .nav-goutte{opacity:1}
html[data-navverre="liquide"] .nav[data-sur="sombre"],html[data-navverre="liquide"] .nav[data-sur="sombre"].colle{border-color:rgba(255,255,255,.2);background:linear-gradient(180deg,rgba(60,58,90,.5),rgba(20,20,34,.42));color:#f4f1ea}
html[data-navverre="liquide"] .nav[data-sur="sombre"]::before{background:radial-gradient(180px 70px at var(--mx,50%) var(--my,0%),rgba(255,255,255,.22),transparent 70%)}
html[data-navverre="liquide"] .nav[data-sur="sombre"] .nav-goutte{background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.1));border-color:rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}

/* Les réalisations, plus simples: rien ne bouge. Avant et après côte à côte, ou le résultat en une phrase */
html[data-real="aa"] .cas-film,html[data-real="aa"] .cas-lecture,html[data-real="phrase"] .cas-film,html[data-real="phrase"] .cas-lecture,
html[data-real="aa"] .realisations-aide,html[data-real="phrase"] .realisations-aide{display:none}
html[data-real="aa"] .cas-visuel,html[data-real="phrase"] .cas-visuel{aspect-ratio:16/7}
html[data-real="aa"] .cas-repos,html[data-real="phrase"] .cas-repos{opacity:1!important;transform:none!important}
html[data-real="aa"] .cas-texte{display:none}
html[data-real="aa"] .cas-aa{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:10px;margin-top:4px;padding-top:0;border-top:0}
html[data-real="aa"] .cas-aa div{padding:16px 18px;border-radius:16px;background:rgba(20,20,19,.045)}
html[data-real="aa"] .cas-aa div+div{grid-column:3;background:color-mix(in srgb,var(--lilas) 48%,transparent)}
html[data-real="aa"] .cas-aa::after{content:"→";grid-column:2;grid-row:1;align-self:center;font-size:22px;color:var(--violet)}
html[data-real="aa"] .cas-aa dd{font-size:16px;color:var(--texte)}
html[data-real="phrase"] .cas-aa{display:none}
html[data-real="phrase"] .cas-texte{max-width:30ch;font-size:clamp(20px,1.8vw,24px);line-height:1.3;letter-spacing:-.012em;color:var(--texte)}

/* Le pied de page à la Makema, en foncé: une bande plate, des colonnes, un grand logo, la ligne légale */
.pied-geant{display:none}
html[data-pied="makema"] .pied{margin-top:clamp(90px,10vw,140px);padding-top:56px;border-top:0;background:#0b0d18;box-shadow:0 0 0 100vmax #0b0d18;clip-path:inset(0 -100vmax)}
html[data-pied="makema"] .pied-marque{display:none}
html[data-pied="makema"] .pied-cols{flex:1;justify-content:space-between}
html[data-pied="makema"] .pied-cols a{text-decoration:underline;text-decoration-color:rgba(244,241,234,.28);text-underline-offset:4px}
html[data-pied="makema"] .pied-cols div:nth-child(3) a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:34px;padding:0 12px;border-radius:9px;border:1px solid rgba(244,241,234,.28);text-decoration:none;font-size:14px}
html[data-pied="makema"] .pied-cols div:nth-child(3){display:flex;flex-wrap:wrap;align-content:start;gap:8px}
html[data-pied="makema"] .pied-cols div:nth-child(3) .pied-titre{flex-basis:100%}
html[data-pied="makema"] .pied-geant{display:block;flex:0 0 100%;width:100%;height:auto;box-sizing:border-box;padding-right:max(36%,calc(100% - 860px));margin:clamp(40px,6vw,80px) 0 0;fill:#f4f1ea}
html[data-pied="makema"] .pied-geant+.pied-legal{margin-top:clamp(28px,3vw,40px)}
html[data-pied="makema"] .pied-legal{border-top-color:rgba(244,241,234,.14)}

/* La vague (28.10, d'après makema.ch): une vague floue lilas, violette et bleue derrière le titre, à la place du fond animé */
html[data-fond="vague"] .hero{position:relative}
html[data-fond="vague"] .hero-voile{opacity:0}
html[data-fond="vague"] .hero::before{content:"";position:absolute;z-index:-1;left:-6%;top:6%;width:96%;height:62%;pointer-events:none;border-radius:48% 52% 46% 54% / 60% 42% 58% 40%;
  background:radial-gradient(60% 70% at 30% 45%,rgba(164,123,234,.62),transparent 72%),radial-gradient(55% 65% at 62% 60%,rgba(101,141,236,.5),transparent 72%),radial-gradient(40% 55% at 85% 35%,color-mix(in srgb,var(--lilas) 95%,transparent),transparent 70%);
  filter:blur(58px);transform:rotate(-8deg);animation:fond-vague 14s ease-in-out infinite alternate}
@keyframes fond-vague{to{transform:rotate(-2deg) translateX(-4%) scaleY(1.1)}}
@media (prefers-reduced-motion:reduce){html[data-fond="vague"] .hero::before{animation:none}}

/* ---------- Le même rendu sur tous les écrans d'ordinateur (28.10, sa demande: «il faudrait qu'on ait le même rendu dans les deux écrans»)
   Son grand écran (environ 1790 x 1385 points) et son Mac (1512 x 856) ne montraient pas le même haut de page: sur le Mac, le titre,
   calé sur la seule largeur, prenait trop de place, collait à la barre du haut et poussait «Ils nous font confiance» hors du premier écran.
   Le titre suit maintenant aussi la hauteur de l'écran; sur les écrans peu hauts, de l'air sous la barre, le texte d'accroche s'élargit
   (trois lignes au lieu de quatre), les offres se resserrent et se rapprochent des logos («ça ne me pose pas problème»).
   Le grand écran ne change pas (le titre y reste à son maximum). */
@media (min-width:861px){
  .hero h1{font-size:clamp(46px,min(7.3vw,9svh),116px)}
  html[data-offres="bandeau"] .hero h1{font-size:clamp(46px,min(6.8vw,8svh),108px)}
}
@media (min-width:861px) and (max-height:1000px){
  .hero,html[data-offres="bandeau"] .hero,html[data-cta="semaine"][data-offres="bandeau"] .hero{padding-top:clamp(92px,12svh,104px)}
  .hero .chapo{max-width:64ch}
  html[data-offres="bandeau"] .hero-offres a,html[data-offres="bandeau"] .hero[data-ton="sombre"] .hero-offres a{font-size:clamp(16px,min(1.45vw,2.2svh),21px)}
}
/* Les écrans encore moins hauts (un MacBook Air, 1440 x 780 visibles): les écarts se resserrent pour garder de l'air sous la barre */
@media (min-width:861px) and (max-height:820px){
  .hero,html[data-offres="bandeau"] .hero{padding-bottom:14px}
  .hero-corps,.hero-cote,html[data-offres="bandeau"] .hero-corps,html[data-offres="bandeau"] .hero-cote,
  html[data-cta="semaine"][data-offres="bandeau"] .hero-corps,html[data-cta="semaine"][data-offres="bandeau"] .hero-cote{gap:14px}
  html[data-offres="bandeau"] .hero-offres,html[data-cta="semaine"][data-offres="bandeau"] .hero-offres{margin-top:16px}
}

/* ---------- Le téléphone, revu le 28.10 (ses retours: «le titre est beaucoup trop collé au header», «tout est trop serré, on peut
   prendre un peu plus de place», le haut de page n'affiche que les jours, et l'animation du bouton «Buvons un café» se coupe au toucher,
   parce que la page suivante se charge tout de suite) ---------- */
/* Au toucher, pas d'animation de survol qui se couperait: une légère pression à la place */
@media (hover:none){
  html:is([data-anim="charbon"],[data-anim="tasse"]) .ch-bouton:is(:hover,:focus-visible) .ch-rond,
  html:is([data-anim="charbon"],[data-anim="tasse"]) .ch-bouton:is(:hover,:focus-visible) .ch-texte{transform:none}
  html[data-anim="charbon"] .ch-bouton:is(:hover,:focus-visible) .ch-rond .ico{transform:rotate(-45deg)}
  html[data-anim="tasse"] .ch-bouton:is(:hover,:focus-visible) .ch-rond .tasse-tasse,
  html[data-anim="tasse"] .ch-bouton:is(:hover,:focus-visible) .ch-rond .tasse-vapeur,
  .btn-cafe:hover .tasse-vapeur,.cta-badge:hover .tasse-vapeur{animation:none}
  .btn-cafe:hover .tasse-tasse{transform:none}
  .semaine-jours a:hover,.choix-rdv:hover{transform:none}
  .ch-bouton,.btn-cafe,.cta-badge,.semaine-jours a,.choix-rdv{-webkit-tap-highlight-color:transparent}
  .ch-bouton:active,.btn-cafe:active,.semaine-jours a:active,.choix-rdv:active{transform:scale(.97);transition:transform .1s ease}
}
/* Plus d'air: le titre s'éloigne de la barre du haut, les blocs du haut de page respirent */
@media (max-width:860px){
  .hero,html[data-offres="bandeau"] .hero{padding-top:132px;padding-bottom:32px}
  .hero-corps,.hero-cote,html[data-offres="bandeau"] .hero-corps,html[data-offres="bandeau"] .hero-cote{gap:30px}
  .hero-rassure{margin-top:-16px}
  .cta-semaine{gap:12px}
  html[data-offres="bandeau"] .hero-offres{margin-top:44px}
  .hero-clients,html[data-offres="bandeau"] .hero-clients{margin-top:36px}
}
/* Les jours ne se coupent jamais: sur les plus petits téléphones, trois par ligne */
@media (max-width:350px){
  .semaine-jours{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- Ils nous font confiance, sorti du haut de page (28.10, son vocal: «ça fait beaucoup trop entassé [...] l'ajouter en transition
   à l'offre partenariat»): la première chose de la section du partenariat, les logos en blanc sur le sombre; le haut de page respire ---------- */
.partenariat{padding-top:clamp(40px,4.5vw,64px)}
.partenariat-clients{margin-bottom:clamp(72px,9vw,140px)}
.partenariat-clients .hero-clients-dedans{border-top:0;padding-top:0;padding-bottom:clamp(18px,2.4vw,28px);border-bottom:1px solid var(--ligne)}
.partenariat[data-ton="sombre"] .defile img{filter:none;mix-blend-mode:normal;opacity:.8}
@media (max-width:860px){
  .partenariat{padding-top:40px}
  .partenariat-clients{margin-bottom:64px}
}

/* ---------- Le petit encadré au toucher (28.10, son retour: sur téléphone, un cadre apparaît autour du logo et de «Buvons un café»
   quand on les touche, et il reste): pas de surbrillance au toucher, ni de contour de focus sur les liens et les boutons touchés ---------- */
html{-webkit-tap-highlight-color:transparent}
@media (hover:none){
  a:focus,a:focus-visible,button:focus,button:focus-visible{outline:none}
}

/* ---------- Le haut de page sur téléphone, plein écran (28.10, ses retours: «le haut de page doit prendre tout le premier écran, le partenariat
   vient par la suite», la lumière «plus présente», «la mise en page n'est pas terrible»); réglage «Le haut sur téléphone» (plein ou avant) ---------- */
@media (max-width:860px){
  /* la lumière se voit: le voile ne blanchit plus que le bas, sous les jours */
  html[data-telephone="plein"] .hero .hero-voile,html[data-telephone="plein"][data-fond] .hero .hero-voile{background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--voile) 14%,transparent) 28%,color-mix(in srgb,var(--voile) 46%,transparent) 60%,color-mix(in srgb,var(--voile) 82%,transparent) 86%,var(--voile) 100%)}
  /* le premier écran: le titre et le texte en haut, les jours en bas de l'écran; les offres viennent juste après */
  html[data-telephone="plein"] .hero-cote{display:flex;flex-direction:column;min-height:calc(100svh - 132px - 3 * clamp(44px,11.6vw,58px) - 30px - 16px)}
  html[data-telephone="plein"] .hero-cote .actions{margin-top:auto}
  html[data-telephone="plein"] .hero-rassure{margin-top:-14px}
  /* «Un autre jour»: un lien discret sous les jours, plus un grand bouton vide */
  html[data-telephone="plein"] .semaine-jours .semaine-plus{grid-column:1 / -1;justify-content:flex-start;min-height:0;padding:4px 2px 0;border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;font-size:15px;color:var(--texte2);text-decoration:underline;text-decoration-color:var(--ligne2);text-underline-offset:3px}
}

/* ---------- La couleur sur toute la largeur du haut (28.10, son retour: «tout à gauche tout blanc, tout à droite coloré», mais «ça s'arrête à la
   moitié»): sur ordinateur, le voile blanc s'efface progressivement de la gauche vers la droite, au lieu de couvrir la moitié gauche ---------- */
@media (min-width:861px){
  .hero .hero-voile{background:
    linear-gradient(90deg,var(--voile) 0%,color-mix(in srgb,var(--voile) 72%,transparent) 16%,color-mix(in srgb,var(--voile) 40%,transparent) 34%,color-mix(in srgb,var(--voile) 14%,transparent) 56%,transparent 76%),
    linear-gradient(180deg,transparent 70%,var(--voile) 100%)}
}
/* Sur téléphone, le titre et le texte un peu plus bas («beaucoup trop hauts»): plus d'air sous la barre, les jours restent en bas de l'écran */
@media (max-width:860px){
  html[data-telephone="plein"] .hero,html[data-telephone="plein"][data-offres="bandeau"] .hero{--haut-tel:max(132px,22svh);padding-top:var(--haut-tel)}
  html[data-telephone="plein"] .hero-cote{min-height:calc(100svh - var(--haut-tel,132px) - 3 * clamp(44px,11.6vw,58px) - 30px - 16px)}
}
/* Les trois offres du haut, un peu plus grandes (28.10, sa demande: «un petit peu, pas trop»): la phrase et son étiquette */
html[data-offres="bandeau"] .hero-offres a,html[data-offres="bandeau"] .hero[data-ton="sombre"] .hero-offres a{font-size:clamp(18px,1.62vw,24px)}
html[data-offres="bandeau"] .ho-nom{font-size:12.5px}
html[data-offres="bandeau"] .ho-num{font-size:13px}
@media (min-width:861px) and (max-height:1000px){
  html[data-offres="bandeau"] .hero-offres a,html[data-offres="bandeau"] .hero[data-ton="sombre"] .hero-offres a{font-size:clamp(17px,min(1.62vw,2.5svh),23px)}
}
@media (max-width:860px){
  html[data-offres="bandeau"] .hero-offres a,html[data-offres="bandeau"] .hero[data-ton="sombre"] .hero-offres a{font-size:17.5px}
}
/* Encore plus de couleur (28.10, «il faut qu'il y en ait plus»): sur ordinateur, le voile blanc ne tient plus que le bord gauche */
@media (min-width:861px){
  .hero .hero-voile{background:
    linear-gradient(90deg,var(--voile) 0%,color-mix(in srgb,var(--voile) 60%,transparent) 12%,color-mix(in srgb,var(--voile) 28%,transparent) 30%,color-mix(in srgb,var(--voile) 8%,transparent) 50%,transparent 66%),
    linear-gradient(180deg,transparent 72%,var(--voile) 100%)}
}

/* ---------- Le haut de page sans bouton (28.10, sa décision: «enlève le un café par semaine et les dates»; réglage «Le bouton du haut de page»: Aucun) ---------- */
html[data-cta="aucun"] .hero-cote .actions{display:none}
@media (min-width:861px){
  /* le titre et le texte un peu plus bas, dans la place qui reste; les trois offres en bas de l'écran, comme avant */
  html[data-cta="aucun"] .hero-corps{flex:1 1 auto;margin-block:0;display:flex;flex-direction:column;align-items:flex-start}
  html[data-cta="aucun"] .hero-corps::before{content:"";flex:1 1 0}
  html[data-cta="aucun"] .hero-corps::after{content:"";flex:2 1 0;order:2;min-height:12px}
  html[data-cta="aucun"][data-offres="bandeau"] .hero-offres{order:3;align-self:stretch;margin-top:0}
}
@media (max-width:860px){
  /* sur téléphone: le titre et le texte restent où ils sont; la première offre se voit en bas du premier écran, les autres ensuite */
  html[data-cta="aucun"][data-telephone="plein"] .hero-cote{min-height:calc(100svh - var(--haut-tel,132px) - 3 * clamp(44px,11.6vw,58px) - 30px - 170px)}
  html[data-cta="aucun"][data-offres="bandeau"] .hero-offres{margin-top:44px}
}
/* Le halo de «Buvons un café» dans la barre: plus serré, il ne touche plus le bord de la barre (28.10, «on voit comment c'est coupé») */
.nv-halo-fleche::after{inset:-2px;filter:blur(6px);opacity:.32}
.nv-halo-fleche:hover::after,.nv-halo-fleche:focus-visible::after{opacity:.6}
/* La bande fixe du haut de l'écran (cta.js): seulement sur les écrans tactiles, où la barre d'état du téléphone en prend la couleur */
.barre-etat{display:none}
@media (hover:none){
  .barre-etat{display:block;position:fixed;top:0;left:0;right:0;height:max(env(safe-area-inset-top,0px),2px);z-index:49;pointer-events:none;background:#eee9fb}
}

/* ---------- Un seul bouton dans le haut de page, comme Charbon (29.10, sa décision: «juste le titre et les trois offres, un seul bouton, un seul CTA»;
   réglage «Le bouton du haut de page»: Un bouton, au départ; les jours, le champ, le badge et Aucun restent en réglage) ---------- */
html[data-cta="bouton"] .cta-bouton{display:inline-flex}
.cta-bouton{position:relative;align-items:center;height:58px;padding:0 6px;border-radius:999px;background:var(--encre);color:#f4f1ea;font-size:16.5px;font-weight:500;letter-spacing:.01em;line-height:1;white-space:nowrap;box-shadow:0 18px 36px -18px rgba(61,42,102,.7);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.cta-bouton:hover,.cta-bouton:focus-visible{box-shadow:0 22px 42px -18px rgba(61,42,102,.85)}
.cta-bouton .ch-rond{width:46px;height:46px;flex:none;border-radius:50%;background:#f4f1ea;color:var(--encre)}
.cta-bouton .ch-texte{padding:0 1.25em 0 .9em}
html[data-anim="tasse"] .cta-bouton .ch-rond .tasse{width:24px;height:24px}
@media (min-width:861px){
  /* le texte et le bouton côte à côte, comme chez Charbon; le titre et le texte un peu plus bas; les trois offres en bas de l'écran */
  html[data-cta="bouton"] .hero-cote{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:22px clamp(28px,4vw,64px)}
  html[data-cta="bouton"] .hero .chapo{max-width:58ch}
  html[data-cta="bouton"] .hero-corps{flex:1 1 auto;margin-block:0;display:flex;flex-direction:column;align-items:flex-start}
  html[data-cta="bouton"] .hero-corps::before{content:"";flex:1 1 0}
  html[data-cta="bouton"] .hero-corps::after{content:"";flex:2 1 0;order:2;min-height:12px}
  html[data-cta="bouton"][data-offres="bandeau"] .hero-offres{order:3;align-self:stretch;margin-top:0}
}
@media (max-width:860px){
  /* sur téléphone: le titre et le texte où ils sont, le bouton juste dessous, la première offre visible en bas du premier écran */
  html[data-cta="bouton"][data-telephone="plein"] .hero-cote{min-height:calc(100svh - var(--haut-tel,132px) - 3 * clamp(44px,11.6vw,58px) - 30px - 170px)}
  html[data-cta="bouton"][data-telephone="plein"] .hero-cote .actions{margin-top:0}
  html[data-cta="bouton"] .hero-cote .actions{justify-self:start;align-self:flex-start}
  html[data-cta="bouton"][data-offres="bandeau"] .hero-offres{margin-top:44px}
}

/* ---------- Le bouton qui flotte en bas à droite (29.10, sa demande: «un petit bouton en bas à droite qui doit tout le temps rester là, même quand on
   défile», pour boire un café); le bouton à côté du texte du haut de page est retiré (réglage «Le bouton du haut de page»: Aucun) ---------- */
.cafe-flottant{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:max(18px,calc(env(safe-area-inset-bottom,0px) + 10px));z-index:55;display:inline-flex;align-items:center;height:50px;padding:0 5px;border-radius:999px;background:var(--encre);color:#f4f1ea;font-size:15px;font-weight:500;letter-spacing:.01em;line-height:1;white-space:nowrap;box-shadow:0 16px 34px -14px rgba(31,28,74,.55),0 2px 6px rgba(20,20,19,.12);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.cafe-flottant:hover,.cafe-flottant:focus-visible{transform:translateY(-2px);box-shadow:0 20px 40px -14px rgba(31,28,74,.65),0 2px 6px rgba(20,20,19,.12)}
.cafe-flottant .ch-rond{width:40px;height:40px;flex:none;border-radius:50%;background:#f4f1ea;color:var(--encre)}
.cafe-flottant .ch-texte{padding:0 1.1em 0 .8em}
html[data-anim="tasse"] .cafe-flottant .ch-rond .tasse{width:22px;height:22px}
@media (max-width:520px){
  .cafe-flottant{height:46px;font-size:14.5px;right:max(14px,env(safe-area-inset-right,0px))}
  .cafe-flottant .ch-rond{width:36px;height:36px}
}
@media print{.cafe-flottant{display:none}}
/* Sur téléphone, les trois offres un peu plus haut (29.10, «elle reste un peu basse»); le bouton qui flottait en bas à droite est retiré pour l'instant */
@media (max-width:860px){
  html[data-cta="aucun"][data-telephone="plein"] .hero-cote{min-height:calc(100svh - var(--haut-tel,132px) - 3 * clamp(44px,11.6vw,58px) - 30px - 260px)}
}