/* ============================================================
bhoa — Site vitrine v2
Recréé depuis « Bhoa Site complet v2.dc.html » (design handoff)
Fidélité haute. Un seul CTA primary corail par vue.
============================================================ */
/* Les polices sont chargées par un dans l'en-tête du document, pas par un
@import : celui-ci n'est découvert qu'une fois cette feuille téléchargée et
analysée, ce qui ajoute un aller-retour complet avant le premier rendu. */
:root{
--coral:#E8545B;
--coral-hover:#D6414B;
--ink:#2B2724;
--ink2:#5a4f48;
--cream:#F7F2EB;
--paper:#fbf7f3;
--border:#EBE2D6;
--border-strong:#C5BAB0;
/* Trois mesures tiennent toute la mise en page horizontale et la hiérarchie
des titres. Elles ne doivent pas être redéclarées section par section :
c'est exactement ce qui faisait démarrer chaque titre à une abscisse
différente et changer de corps d'une section à l'autre.
--gutter : marge latérale de toute section (donc l'alignement à gauche ET
à droite de tous les titres). --measure : largeur utile maximale du
contenu, identique partout, pour que rien ne se recentre à sa façon. */
--h2:40px;
--gutter:80px;
--measure:1300px;
}
/* Le handoff s'appuie sur box-sizing:content-box (défaut navigateur) pour les
cartes à largeur fixe ; on ne force donc PAS border-box globalement.
Les éléments qui en ont besoin (inputs, pc-card, cartes internes) le déclarent
eux-mêmes, comme dans la maquette. */
html{scroll-behavior:smooth}
body{margin:0;background:#fbf7f3;font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--coral);text-decoration:none}
a:hover{color:var(--coral-hover)}
img{max-width:100%}
/* ---- Page shell ---- */
.wf-page{width:100%;max-width:none;margin:0;position:relative;background:var(--paper)}
.wf-page > div{position:relative;z-index:1}
.wf-section{padding:64px var(--gutter)}
.wf-page .wf-section{border-bottom:none !important}
/* Effet "page par écran" : réservé à l'onglet Quoi (celui du hard scroll
depuis le hero). Chaque section y fait la hauteur de l'écran (moins
l'en-tête, 72px) et centre son contenu dedans : sur un contenu plus court
qu'un écran, ça pose de l'espace au-dessus et en dessous plutôt que de
laisser deviner la section suivante. Un contenu plus long qu'un écran
déborde normalement (min-height ne le comprime pas). Le sélecteur #what
donne à cette règle une spécificité (id + classe) que les exceptions
ci-dessous (.who-band, .mq-band) doivent égaler pour continuer
à la neutraliser — d'où leur propre préfixe #what. Les autres onglets
gardent leur hauteur naturelle, comme avant. */
#what .wf-section{box-sizing:border-box;min-height:calc(100svh - 72px);display:flex;flex-direction:column;justify-content:center}
.wf-section-label{display:inline-block;font:700 10px 'Inter',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--coral);margin-bottom:12px}
/* Titre de section : un seul corps pour toute la page. Les titres qui portent
encore leur propre classe (.bd-title, .of-h, .cm-h…) reprennent --h2. */
.wf-h2{font:700 var(--h2)/1.15 'Source Serif 4',serif;color:var(--ink);letter-spacing:-.01em;margin:0 0 16px}
/* ---- Onglets = vues distinctes : une seule visible à la fois ---- */
.view{display:none}
.view.active{display:block}
/* le dock global en haut sert d'en-tête à chaque vue → on masque les en-têtes répétés
(les mini-headers ont un display:flex inline, d'où le !important) */
/* ============================================================
Header dock — barre fixe, transparente, aux couleurs adaptatives
============================================================ */
@keyframes dock-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-1px) scale(1.006)}}
.wf-dock-item{display:inline-block;transition:transform .5s cubic-bezier(.34,1.56,.64,1);will-change:transform}
.wf-dock-item:hover{transform:scale(1.08)}
.wf-dock-item:active{transform:scale(.9);transition:transform .12s cubic-bezier(.34,1.56,.64,1)}
.wf-tabs{position:relative}
.wf-tab{color:#5a4f48 !important;transition:color .3s ease}
.wf-tab.active{color:var(--coral) !important}
.wf-tab-underline{position:absolute;bottom:-2px;height:2px;background:var(--coral);border-radius:0;transition:left .35s cubic-bezier(.34,1.4,.5,1),width .35s cubic-bezier(.34,1.4,.5,1),opacity .35s ease;pointer-events:none}
/* L'en-tête ne se replie plus : il reste une seule et même barre, collée en haut
de la fenêtre, sans fond ni cadre. Les sections défilent DERRIÈRE elle et ce
sont ses écritures qui changent de couleur selon le fond qu'elles survolent
(classes .on-light / .on-mid / .on-dark posées par initHeaderTheme()).
Une seule durée pour toutes ces bascules : sinon le logo, les onglets et le
bouton changeraient de teinte à des instants différents. */
:root{--hdr-t:.42s;--hdr-e:cubic-bezier(.32,.72,0,1)}
.wf-dock.hdr{
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
gap:24px;padding:0 20px;height:72px;
max-width:none;margin:0;border-radius:0;
background:transparent;border:0;box-shadow:none;
/* Fond clair (papier) par défaut : c'est l'état du haut de page. */
--hdr-fg:var(--ink);
--hdr-dim:#5a4f48;
--hdr-accent:var(--coral);
--hdr-cta-bg:var(--coral);
--hdr-cta-fg:#fff;
--hdr-cta-bd:var(--coral);
--hdr-shadow:none;
--hdr-veil:rgba(251,247,243,.72);
}
/* Le voile est peint par un pseudo-élément, pas par la boîte : il peut ainsi
apparaître en fondu sans que les écritures, elles, ne changent d'opacité.
Il ne colore presque rien — c'est le flou d'arrière-plan qui fait le travail,
de sorte que la couleur de la section reste lisible à travers la barre. */
.wf-dock.hdr::before{
content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
background:var(--hdr-veil);
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
opacity:0;transition:opacity var(--hdr-t) var(--hdr-e),background-color var(--hdr-t) var(--hdr-e);
}
.wf-dock.hdr.scrolled::before{opacity:1}
/* Fond sombre (bandeaux terre cuite, footer) : tout passe au blanc. */
.wf-dock.hdr.on-dark{
--hdr-fg:#fff;
--hdr-dim:rgba(255,255,255,.74);
--hdr-accent:#fff;
--hdr-cta-bg:#fff;
--hdr-cta-fg:var(--ink);
--hdr-cta-bd:#fff;
--hdr-veil:rgba(46,24,24,.30);
}
/* Fond intermédiaire (gris) : ni le blanc ni l'encre ne contrastent assez, on
garde le blanc et on l'assoit sur une ombre douce plutôt que d'ajouter une
barre de fond qui trahirait la transparence demandée. */
.wf-dock.hdr.on-mid{
--hdr-fg:#fff;
--hdr-dim:rgba(255,255,255,.82);
--hdr-accent:#fff;
--hdr-cta-bg:#fff;
--hdr-cta-fg:var(--ink);
--hdr-cta-bd:#fff;
--hdr-shadow:0 1px 3px rgba(0,0,0,.35);
--hdr-veil:rgba(0,0,0,.26);
}
.hdr .hdr-brand{display:flex;align-items:center;gap:12px;padding:0 12px;border-radius:100px;background:transparent}
.hdr .hdr-logo{position:relative;width:58px;height:58px;flex:none;display:block}
.hdr .hdr-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity var(--hdr-t) var(--hdr-e)}
/* Les deux logos sont superposés : on ne fait que croiser leurs opacités, ce qui
évite tout rechargement d'image au changement de fond. */
.hdr .hdr-logo-c{opacity:1}
.hdr .hdr-logo-w{opacity:0}
.hdr.on-dark .hdr-logo-c,.hdr.on-mid .hdr-logo-c{opacity:0}
.hdr.on-dark .hdr-logo-w,.hdr.on-mid .hdr-logo-w{opacity:1}
.hdr .hdr-name{font:400 27px/1 'Bree Serif',serif;color:var(--hdr-fg) !important;letter-spacing:-.4px;white-space:nowrap;text-shadow:var(--hdr-shadow);transition:color var(--hdr-t) var(--hdr-e),text-shadow var(--hdr-t) var(--hdr-e)}
.hdr .hdr-tabs{display:flex;justify-content:center;gap:6px;padding:6px;border-radius:100px;background:transparent}
.hdr .wf-tab{font:400 20px/1 'Bebas Neue','Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--hdr-dim) !important;padding:8px 14px !important;cursor:pointer;text-shadow:var(--hdr-shadow);transition:color var(--hdr-t) var(--hdr-e),text-shadow var(--hdr-t) var(--hdr-e)}
.hdr .wf-tab:hover{color:var(--hdr-fg) !important}
.hdr .wf-tab.active{font-weight:400;color:var(--hdr-accent) !important;position:relative}
.hdr .wf-tab-underline{background:var(--hdr-accent) !important;height:2px !important;bottom:6px !important;transition:left .35s cubic-bezier(.34,1.4,.5,1),width .35s cubic-bezier(.34,1.4,.5,1),background-color var(--hdr-t) var(--hdr-e)}
.hdr .hdr-contact{display:flex;align-items:center;justify-content:flex-end}
/* Onglets et CTA sont des liens : on neutralise le soulignement hérité et on
rend le focus clavier visible — sans ça, un utilisateur au clavier traverse
la navigation sans jamais savoir où il est. */
.hdr .wf-tab,.hdr .hdr-cta,.hdr-mobile-menu .wf-tab{text-decoration:none}
.hdr a:focus-visible,.lang-cur:focus-visible,.hdr-burger:focus-visible,
.hdr-mobile-menu a:focus-visible{outline:2px solid var(--hdr-fg);outline-offset:3px}
/* CTA de l'en-tête : même grammaire que « Découvrir » — cadre carré, fond
transparent, rempli au survol. Les variables --hdr-cta-* portent la couleur
du moment (corail sur fond crème, blanc sur les bandeaux terre cuite). */
.hdr .hdr-cta{font:600 14px 'Inter',sans-serif;color:var(--hdr-cta-bd);cursor:pointer;padding:11px 22px;border:1.5px solid var(--hdr-cta-bd);border-radius:0;white-space:nowrap;background:transparent;transition:background-color var(--hdr-t) var(--hdr-e),color var(--hdr-t) var(--hdr-e),border-color var(--hdr-t) var(--hdr-e)}
.hdr .hdr-cta:hover{background:var(--hdr-cta-bd);color:var(--hdr-cta-fg)}
/* ---- Sélecteur de langue ----------------------------------------------
Un déclencheur compact (globe + code courant) qui ouvre un panneau flottant.
Le déclencheur vit sur l'en-tête transparente : il emprunte les variables
--hdr-* comme le CTA voisin. Le panneau, lui, retombe toujours sur la
palette papier — il se pose au-dessus du contenu, pas au-dessus de la photo,
et doit rester lisible quel que soit le fond du moment. */
.hdr .hdr-lang{position:relative;display:flex;align-items:center}
.lang-cur{
display:flex;align-items:center;gap:7px;
font:600 13px/1 'Inter',sans-serif;letter-spacing:.06em;
color:var(--hdr-fg);background:transparent;cursor:pointer;
padding:9px 11px;border:1.5px solid transparent;border-radius:0;
text-shadow:var(--hdr-shadow);
transition:color var(--hdr-t) var(--hdr-e),border-color var(--hdr-t) var(--hdr-e),background-color var(--hdr-t) var(--hdr-e);
}
.lang-cur:hover,.lang-cur:focus-visible,.hdr-lang.open .lang-cur{border-color:var(--hdr-cta-bd)}
.lang-globe{flex:none;opacity:.85}
.lang-caret{flex:none;opacity:.7;transition:transform .25s var(--hdr-e)}
.hdr-lang.open .lang-caret{transform:rotate(180deg)}
.lang-menu{
position:absolute;top:calc(100% + 10px);right:0;z-index:40;
min-width:186px;display:flex;flex-direction:column;padding:6px;
background:rgba(255,255,255,.94);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
border:1px solid var(--border);
box-shadow:0 18px 40px rgba(43,39,36,.16);
opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .22s var(--hdr-e),transform .22s var(--hdr-e),visibility .22s;
}
.hdr-lang.open .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-btn{
display:flex;align-items:center;gap:12px;
padding:10px 12px;cursor:pointer;
font:500 15px/1 'Inter',sans-serif;color:var(--ink);
transition:background-color .18s var(--hdr-e),color .18s var(--hdr-e);
}
.lang-btn:hover,.lang-btn:focus-visible{background:rgba(232,84,91,.08);outline:none}
.lang-ab{font:600 11px/1 'Inter',sans-serif;letter-spacing:.1em;color:#8b7f77;min-width:20px;transition:color .18s var(--hdr-e)}
.lang-btn.active{color:var(--coral);cursor:default}
.lang-btn.active .lang-ab{color:var(--coral)}
/* La coche de la langue active : dessinée en CSS pour ne pas alourdir le HTML
de quatre SVG identiques dont un seul est visible à la fois. */
.lang-btn::after{
content:"";margin-left:auto;width:6px;height:6px;border-radius:50%;
background:var(--coral);opacity:0;transition:opacity .18s var(--hdr-e);
}
.lang-btn.active::after{opacity:1}
/* Mouvement réduit : le panneau apparaît sans glisser ni faire pivoter le
chevron — l'ouverture reste lisible, seule l'animation disparaît. */
@media (prefers-reduced-motion:reduce){
.lang-menu{transform:none;transition:none}
.hdr-lang.open .lang-menu{transform:none}
.lang-caret{transition:none}
}
/* Hamburger + panneau : masqués par défaut, visibles seulement sous 820px
(voir le @media plus bas) — .hdr-tabs y disparaît, sans ça les onglets ne
seraient plus atteignables du tout en dessous de ce seuil. */
.hdr-burger{
display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
width:32px;height:32px;flex:none;background:transparent;border:0;padding:0;cursor:pointer;
}
.hdr-burger span{width:22px;height:2px;background:var(--hdr-fg);border-radius:2px;transition:transform .25s ease,opacity .25s ease}
.hdr-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hdr-burger.open span:nth-child(2){opacity:0}
.hdr-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hdr-mobile-menu{
display:none;flex-direction:column;
position:absolute;top:100%;left:0;right:0;
background:var(--paper);border-top:1px solid var(--border);
box-shadow:0 16px 32px rgba(43,39,36,.12);
max-height:0;overflow:hidden;
transition:max-height .3s ease;
}
.hdr-mobile-menu.open{max-height:400px}
.hdr-mobile-menu .wf-tab{
color:var(--ink) !important;font:500 17px/1 'Inter',sans-serif;
padding:18px 24px !important;border-bottom:1px solid var(--border);
}
/* ============================================================
Fil conducteur : reveal + séparations + flou
Les halos ambiants (taches corail/violet/vert en dégradé radial) ont été
retirés : le fond des vues est désormais uniformément #fbf7f3.
============================================================ */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
/* Questions de FAQ : transition bien plus courte que la base (.8s → .3s).
Avec le décalage réduit (20ms/question, voir stagger() dans script.js),
les 6 questions d'une FAQ apparaissent quasiment ensemble au lieu de
s'étaler sur plus d'une seconde — plus de moment où le bas de la FAQ
reste vide après le défilement jusqu'à elle. */
.bl-faq details.reveal{transition:opacity .3s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1)}
/* Entrée de section : assurée par `.reveal` ci-dessus (opacity + transform, tout
deux composités par le GPU). L'ancien `filter: blur()` animé sur la section
entière obligeait le navigateur à re-rastériser jusqu'à 700×1500px à chaque
frame — c'était la principale source de saccades. Classe conservée inerte. */
.bl-blur{}
.bl-blur.focus{}
/* ============================================================
Cas d'usage — marquees
============================================================ */
/* Mouvement volontairement très lent (plusieurs minutes par boucle) : les
bulles doivent se lire comme une toile de fond qui dérive, pas comme un
bandeau qui défile. Les 4 pistes ont chacune leur propre durée, encore plus
longue, posée en style inline dans le HTML (elle prime sur ces valeurs de
base, qui ne servent que de repli). */
@keyframes marquee-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marquee-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.mq-track-l{display:flex;gap:14px;width:max-content;animation:marquee-left 260s linear infinite}
.mq-track-r{display:flex;gap:14px;width:max-content;animation:marquee-right 300s linear infinite}
.mq-track-l:hover,.mq-track-r:hover{animation-play-state:paused}
/* Bandeau des cas d'usage : bulles quasi transparentes sur un fond terre
cuite. Le fond sort de la largeur de .wf-page pour couvrir toute la
fenêtre. Contrairement aux autres sections de l'onglet Quoi, ce bandeau
n'est PAS mis à la hauteur de l'écran (#what .wf-section) : avec son titre
et ses quatre rangées de bulles, il resterait trop vide sur un grand écran.
Il garde sa hauteur naturelle ; align-items le centre verticalement sur
son propre axe (il est déjà en ligne, mq-inner tient la largeur via
flex:1 — une colonne+justify-content l'étirerait plutôt que de le centrer). */
#what .mq-band{position:relative;z-index:1;display:flex;flex-direction:row;align-items:center;min-height:0}
.mq-band::before{content:'';position:absolute;inset:0 calc(50% - 50vw);background:#944646;z-index:-1}
/* Le bloc interne occupe toute la largeur : les bulles défilent d'un bord à
l'autre de la fenêtre, sans marge ni gouttière — seul le titre reprend la
marge (--gutter), lui. */
.mq-inner{
flex:1;min-width:0;box-sizing:border-box;
display:flex;flex-direction:column;padding:48px 0 56px;
}
.mq-title{padding:0 var(--gutter)}
/* Les rangées sont simplement empilées avec un interligne fixe. */
.mq-rows{display:flex;flex-direction:column;gap:16px}
/* Cartes quasi transparentes, cerclées d'un trait blanc fin : elles se
détachent à peine du bandeau plutôt que de trancher dessus en blanc plein. */
.mq-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.5);border-radius:24px;padding:12px 22px;flex-shrink:0;width: max-content;box-sizing:border-box}
.mq-q{font:400 13px/1.45 'Source Serif 4',serif;white-space: nowrap;color:#fff}
/* Aucun fondu latéral : il délavait les bulles des deux bords en un dégradé
blanchâtre. Les rangées sont simplement coupées net par le bord de la fenêtre,
et le défilement se lit comme un bandeau continu. */
.mq-mask{overflow:hidden}
/* ============================================================
Hero plein écran (onglet What)
Une photo occupe tout le viewport, jusque sous l'en-tête : margin-top:-72px
fait remonter le hero de la hauteur du dock (sticky, mais qui reste dans le
flux normal et pousse tout ce qui suit) pour que l'image parte du tout haut
de l'écran plutôt que de sous le dock. L'en-tête flotte donc en transparence
AU-DESSUS de la photo, comme partout ailleurs quand il survole un fond
sombre, avec un léger voile sombre (lisibilité du titre, sans que l'image ne
prenne le dessus). Le « hard scroll » vers la section suivante est géré en
JS (voir initHeroHardScroll dans script.js) avec un peu de résistance.
============================================================ */
.hero-full{
position:relative;overflow:hidden;text-align:center;
min-height:100svh;
margin-top:-72px;
display:flex;flex-direction:column;justify-content:center;align-items:center;
gap:22px;padding:8px 80px 28px;box-sizing:border-box;
/* Couleur de secours, invisible sous la photo : c'est elle qu'initHeaderTheme()
relève (backgroundColor, pas backgroundImage) pour savoir que l'en-tête doit
passer en blanc au-dessus du hero. */
background-color:#241b17;
}
.hero-full .hero-title{margin:0;position:relative;z-index:2}
.hero-bg{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center;z-index:0;
pointer-events:none;user-select:none;
}
/* Filtre léger : assombrit juste assez la photo pour que le titre reste lisible,
sans écraser le reste de la page qui suit en fond clair. */
.hero-veil{
position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,rgba(20,16,14,.32) 0%,rgba(20,16,14,.4) 55%,rgba(20,16,14,.52) 100%);
}
.hero-down{
position:relative;z-index:2;
width:44px;height:44px;border-radius:50%;
border:1.5px solid rgba(255,255,255,.6);background:rgba(255,255,255,.08);
display:flex;align-items:center;justify-content:center;cursor:pointer;
animation:hero-down-bounce 2.2s ease-in-out infinite;
transition:background-color .25s ease,border-color .25s ease;
}
.hero-down:hover{background:rgba(255,255,255,.18);border-color:#fff}
@keyframes hero-down-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
/* ============================================================
Offre
« Notre offre » ne s'anime plus : ni épinglage, ni arrivée de la démo par la
gauche. La section est posée dans le flux, telle qu'on la voyait une fois
l'animation terminée.
============================================================ */
.offre-scroll{position:relative}
.offre-scroll .offre-full{
display:flex;flex-direction:column;justify-content:center;
box-sizing:border-box;padding:24px 0 40px;
}
/* ============================================================
Cadre animé corail autour des 4 étapes
(se trace du dessus-milieu vers le bas-milieu, reste corail tant que la carte est active)
============================================================ */
@property --sa{syntax:'';inherits:false;initial-value:0deg}
.step-frame{position:relative}
.step-frame::before{
content:'';position:absolute;inset:0;border-radius:0;padding:2px;z-index:2;pointer-events:none;
background:conic-gradient(from 0deg, #E8545B 0 var(--sa), transparent var(--sa) calc(360deg - var(--sa)), #E8545B calc(360deg - var(--sa)) 360deg);
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
opacity:0;transition:opacity .3s ease;
}
.ha-card[data-active="1"] .step-frame::before{opacity:1;animation:step-frame-draw 1s cubic-bezier(.4,0,.2,1) forwards}
@keyframes step-frame-draw{from{--sa:0deg}to{--sa:180deg}}
@supports not (background:conic-gradient(from 0deg, red 0 10deg, red 10deg 20deg)){
.ha-card[data-active="1"] .step-frame::before{background:#E8545B}
}
/* ============================================================
Le comité — bandeau de portraits, puis la fiche du membre choisi
============================================================ */
/* Le bandeau terre cuite des 4 étapes s'arrête net juste au-dessus : sans une
vraie respiration, le titre semblait collé à la section précédente. */
.bd-head{padding:120px var(--gutter) 40px}
.bd-title{font:700 var(--h2)/1.15 'Source Serif 4',serif;color:var(--ink);letter-spacing:-.01em}
/* Le bandeau touche les deux bords de la fenêtre, hors gabarit de .wf-page.
Le rembourrage vertical laisse la place au cadre actif, plus haut que les
autres : sans lui, il serait rogné en haut comme en bas. */
/* On fixe la hauteur à 314px (282px max + 32px de padding) et on aligne par le bas */
.bd-strip {
display: flex;
align-items: flex-end;
gap: 2px;
background: var(--paper);
height: 314px;
box-sizing: border-box;
margin: 0 calc(50% - 50vw);
padding: 16px 0;
}
.bd-frame{position:relative;flex:1 1 0;min-width:0;height:250px;padding:0;border:0;cursor:pointer;
background-color:var(--tone);background-image:var(--photo,none);background-size:cover;background-position:center top;
transform-origin:50% 100%;will-change:transform;
transition:height .45s cubic-bezier(.32,.72,0,1),transform .45s cubic-bezier(.32,.72,0,1),filter .45s ease}
.bd-frame:not(.on){filter:saturate(.9)}
/* Survol : le portrait grandit sur place — c'est une mise à l'échelle, donc
aucun cadre voisin ne bouge et la rangée des noms reste alignée. Le survol ne
sélectionne plus personne : la fiche ne s'ouvre qu'au clic. L'origine est le
bas du cadre, sinon le portrait déborderait sous les noms. */
.bd-frame:hover{transform:scale(1.09);z-index:2;filter:saturate(1.05) brightness(1.03)}
.bd-frame:focus-visible{outline:2px solid var(--coral);outline-offset:3px;z-index:2}
@media (prefers-reduced-motion:reduce){.bd-frame:hover{transform:none}}
/* Le membre choisi dépasse de la rangée et porte le filet corail. */
.bd-frame.on{height:282px}
.bd-frame.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--accent,#e8595f)}
/* Monogramme : il tient la place du portrait tant qu'aucune image n'est posée. */
.bd-mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font:400 64px/1 'Bebas Neue','Inter',sans-serif;color:rgba(255,255,255,.32)}
.bd-frame[style*="--photo"] .bd-mono{display:none}
/* Les noms reprennent la grille des cadres : chaque nom reste centré sous le sien. */
.bd-names{display:flex;margin:0 calc(50% - 50vw);padding:14px 0 0}
.bd-names span{flex:1 1 0;min-width:0;text-align:center;font:400 26px/1 'Bebas Neue','Inter',sans-serif;
letter-spacing:.04em;color:var(--ink);opacity:0;transition:opacity .35s ease}
.bd-names span.on{opacity:1}
/* Les six fiches sont empilées dans la même cellule de grille : le bloc réserve
d'emblée la hauteur de la plus longue, donc changer de membre ne décale plus
d'un cran tout ce qui suit. `align-items:start` laisse en revanche chaque
fiche garder SA propre hauteur (donc son propre filet corail) au lieu
d'être étirée à la hauteur réservée : la barre suit la longueur du texte.
Un `min-height` sur .bd-text évite qu'un texte court ne donne un trait
trop court, pour que l'écart entre membres reste discret. */
.bd-bios{padding:80px var(--gutter) 56px;display:grid;align-items:start}
.bd-bio{grid-area:1/1;display:flex;gap:28px;align-items:stretch;visibility:hidden;opacity:0;pointer-events:none}
/* Fondu seul, sans translation : `fw-in` faisait remonter la fiche de 8px, ce
qui se lisait comme un rebond et donnait l'impression que la section du
dessous bougeait aussi (la mise en page, elle, ne bouge pas d'un pixel). */
.bd-bio.on{visibility:visible;pointer-events:auto;animation:bd-bio-in .45s ease both}
@keyframes bd-bio-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.bd-bio.on{animation:none;opacity:1}}
/* Nom vertical, lu de bas en haut, adossé au filet corail. */
.bd-vname{writing-mode:vertical-rl;transform:rotate(180deg);flex:none;
font:400 30px/1 'Bebas Neue','Inter',sans-serif;letter-spacing:.06em;color:var(--ink);
display:flex;align-items:center;justify-content:center}
.bd-text{position:relative;flex:1;min-width:0;padding-left:32px;max-width:1120px;min-height:130px}
.bd-text::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent,#e8595f)}
.bd-text p{margin:0 0 22px;font:400 19px/1.55 'Source Serif 4',serif;color:var(--ink)}
.bd-text p:last-child{margin-bottom:0}
/* Rôle : la ligne qui dit à quoi sert le membre, dans sa couleur. */
.bd-role{font:400 22px/1 'Bebas Neue','Inter',sans-serif;letter-spacing:.06em;text-transform:uppercase;
color:var(--accent,var(--coral));margin:0 0 10px}
/* Domaines : la liste des sujets qu'il couvre, volontairement discrète — on la
lit après le rôle, pas avant la bio. */
.bd-dom{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 24px}
.bd-dom span{font:500 11px/1 'Inter',sans-serif;letter-spacing:.04em;text-transform:uppercase;
color:#7d726b;border:1px solid var(--border);padding:6px 10px;white-space:nowrap}
/* Citation : la phrase que le membre pourrait dire en réunion. Adossée à un
filet de sa couleur, comme la fiche l'est au sien. */
.bd-cit{margin:26px 0 0;padding-left:18px;border-left:2px solid var(--accent,var(--coral));
font:600 18px/1.5 'Source Serif 4',serif;font-style:italic;color:var(--ink)}
/* ============================================================
Footer — une seule rangée sur fond brun
============================================================ */
.wf-footer-v2{position:relative;background:#503d3e;padding:0}
/* Le fond sort de la largeur de .wf-page pour toucher les deux bords. */
.wf-footer-v2::before{content:'';position:absolute;inset:0 calc(50% - 50vw);background:#503d3e}
.ft-row{position:relative;display:flex;align-items:center;gap:28px;padding:70px 106px;max-width:none;margin:0}
.ft-badge{width:48px;height:48px;flex:none;border-radius:50%;background:#F7F2EB;display:flex;align-items:center;justify-content:center}
/* Le lotus est un PNG corail : `brightness(0)` l'aplatit en noir pur, seul
moyen de le mettre au ton des textes sans refaire le fichier. */
.ft-badge img{width:44px;height:44px;object-fit:contain;display:block;filter:brightness(0)}
.ft-copy{font:400 11px/1.3 'Source Serif 4',serif;color:#F7F2EB}
.ft-links{display:flex;align-items:center;gap:44px;margin:0 auto}
.ft-links a{font:400 10px/1 'Bebas Neue','Inter',sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#F7F2EB;white-space:nowrap;transition:opacity .2s ease}
.ft-links a:hover{color:#fff;opacity:.7}
.ft-social{display:flex;align-items:center;gap:10px}
/* Pastilles pleines : le glyphe est en trait, comme les textes ; il passe en
version pleine au survol (les deux SVG sont superposés, on ne change que
leur opacité pour éviter tout saut de gabarit). */
.ft-social a{position:relative;width:34px;height:34px;border-radius:50%;background:#F7F2EB;color:#2B2724;display:inline-flex;align-items:center;justify-content:center;transition:transform .2s ease}
.ft-social a:hover{transform:scale(1.08);color:#2B2724}
.ft-social img {
display: block;
object-fit: contain;
transition: opacity .2s ease;
}
.ft-social a:hover img {
opacity: 0.8;
}
.ft-social .icon-insta {
width: 26px;
height: 26px;
}
.ft-social .icon-linkedin {
width: 18px;
height: 18px;
}
.ft-social .icon-mail {
width: 28px;
height: 28px;
}
.ft-social .ic-solid{position:absolute;opacity:0}
.ft-social a:hover .ic-line,.ft-social a:focus-visible .ic-line{opacity:0}
.ft-social a:hover .ic-solid,.ft-social a:focus-visible .ic-solid{opacity:1}
/* ============================================================
Nous contacter
============================================================ */
.ct-h{font:700 var(--h2)/1.15 'Source Serif 4',serif;color:var(--ink);margin-bottom:26px;letter-spacing:-.01em}
.ct-p{font:400 20px/1.55 'Source Serif 4',serif;color:var(--ink);max-width:420px}
/* ============================================================
L'équipe — trois colonnes décalées, puis les valeurs
============================================================ */
/* Les trois colonnes sont alignées sur la même ligne haute et occupent la même
hauteur : les citations n'ont pas toutes le même nombre de lignes, donc le
sigle LinkedIn est poussé en pied de colonne pour rester aligné lui aussi. */
.tm-col{display:flex;flex-direction:column;height:100%}
/* width:80% + margin:0 auto : le bandeau nom+rôle fait la même largeur que
la photo (.tm-photo, elle aussi à 80% — voir plus bas) ET est centré comme
elle dans la colonne — le rôle (aligné à droite) tombe ainsi exactement
au-dessus du bord droit de la photo, pas du bord droit de la colonne
entière. Le centrage (plutôt qu'un calage à gauche) est ce qui rend les
marges extérieures symétriques : la colonne de gauche (Lhéo) a autant de
vide à sa gauche que celle de droite (Bruno) en a à sa droite, et la photo
du milieu (Alex) tombe bien au centre de sa colonne. */
.tm-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:16px;width:80%;margin-left:auto;margin-right:auto}
.tm-name{display:inline-flex;align-items:center;gap:9px;font:400 34px/1 'Bebas Neue','Inter',sans-serif;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
/* Pastille sobre et discrète (gris, fine, petite) plutôt qu'un badge corail :
elle ne doit pas concurrencer le prénom. align-items:center sur .tm-name
(ci-dessus) l'aligne déjà sur le prénom, à sa hauteur. */
.tm-li-link{
display:inline-flex;align-items:center;justify-content:center;
width:18px;height:18px;flex:none;border-radius:50%;
border:1px solid #C5BAB0;background:transparent;
transition:border-color .25s ease,background-color .25s ease;
}
.tm-col .tm-quote{margin-bottom:18px}
.tm-li{width:9px;height:9px;flex:none;color:#8f8579;transition:color .25s ease}
.tm-li-link:hover{border-color:#6b6259;background:#6b6259}
.tm-li-link:hover .tm-li{color:#fff}
.tm-role{font:400 15px/1 'Bebas Neue','Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#6b6259;text-align:right}
/* `flex:none` est indispensable : en enfant flex, la photo se laissait comprimer
pour absorber les citations les plus longues — d'où trois formats différents
alors que l'aspect-ratio est le même. width:80% (pas 100%) : les photos sont
plus petites que la colonne, ce qui laisse de la place à la citation en
dessous — carré (1/1) oblige, une photo plus étroite est aussi moins haute. */
/* Plus de cadre corail tracé (.team-frame retiré du HTML) : juste la photo. */
.tm-photo{flex:none;width:80%;aspect-ratio:1/1;overflow:hidden;background:#EBD5D1;box-sizing:border-box;margin-left:auto;margin-right:auto}
/* Effet « podium » : toute la colonne du milieu remonte d'un bloc — nom,
photo et citation ensemble, donc rien ne se désolidarise. transform (pas
margin) : ça ne touche pas à la hauteur de la rangée de la grille (les
deux autres colonnes ne bougent pas), et comme le bloc entier se déplace
solidairement, aucun risque de chevauchement interne. Ajuste -32px pour
plus/moins de décalage. */
.tm-col:nth-child(2){transform:translateY(-32px)}
.tm-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* width:80% + margin auto : même largeur et même centrage que .tm-top et
.tm-photo (voir plus haut), pour que la citation ne déborde jamais de la
largeur de la photo au-dessus d'elle. */
.tm-quote{margin-top:16px;font:italic 400 15px/1.55 'Source Serif 4',serif;color:#5a4f48;width:80%;margin-left:auto;margin-right:auto}
/* Plus de cadre : la phrase est simplement mise entre guillemets. Ceux-ci sont
posés en pseudo-éléments et non dans le texte — la traduction remplace le
contenu du bloc et les emporterait avec elle. */
.tm-note{
max-width:none;margin:38px 0 0;padding:8px 0;
font:italic 400 22px/1.45 'Source Serif 4',serif;color:var(--ink);text-align:left;
}
.tm-note::before{content:'\201C'}
.tm-note::after{content:'\201D'}
/* ---- Nos valeurs : quatre colonnes séparées par de fins filets corail ---- */
.val-title{font:700 var(--h2)/1.15 'Source Serif 4',serif;color:var(--ink);letter-spacing:-.01em;max-width:none;margin:0 0 74px}
/* Plus d'icône : un filet vertical entre les colonnes (sauf avant la
première, qui n'a rien à sa gauche) fait maintenant office de séparation. */
.val-cell:not(:first-child){border-left:1px solid var(--coral);padding-left:32px}
.val-h{font:700 24px/1.25 'Source Serif 4',serif;color:var(--ink);margin:0 0 14px}
.val-p{font:400 15px/1.6 'Inter',sans-serif;color:#5a4f48}
/* ============================================================
Communauté — appel à rejoindre + FAQ
============================================================ */
.cm-band{position:relative;z-index:1}
.cm-band::before{content:'';position:absolute;inset:0 calc(50% - 50vw);background:#944646;z-index:-1}
.cm-quote{font:700 italic 30px/1.45 'Source Serif 4',serif;color:#fff;margin:0 0 26px}
.cm-join-row{display:flex;align-items:center;justify-content:space-between;gap:40px}
.cm-join-p{font:400 22px/1.4 'Source Serif 4',serif;color:#fff}
/* Bouton blanc à filet sombre : le seul élément non terre cuite du bandeau. */
.cm-join-btn{display:inline-block;background:#fff;border:2px solid var(--ink);color:var(--ink);font:600 17px/1 'Source Serif 4',serif;padding:16px 30px;text-decoration:none;white-space:nowrap;transition:background-color .25s ease,color .25s ease}
.cm-join-btn:hover{background:var(--ink);color:#fff}
/* ============================================================
Pourquoi — la mission, puis le récit
============================================================ */
/* La carte vit dans un cadre corail d'un seul trait, sans fond crème : c'est le
cadre animé (.eu-frame, tracé en JS) qui l'entoure, d'où l'absence de border.
`overflow:hidden` sur .why-map rognerait ce tracé, on le laisse visible. */
.why-map{background:#fbf7f3;overflow:visible !important}
.why-mission{flex:1;min-width:0;box-sizing:border-box}
.why-mission-h{font:700 var(--h2)/1.15 'Source Serif 4',serif;color:var(--ink);margin:0 0 26px;letter-spacing:-.01em}
.why-mission-q{font:400 italic 27px/1.4 'Source Serif 4',serif;color:var(--ink);margin:0 0 28px;max-width:420px}
.why-mission-p{font:400 18px/1.6 'Source Serif 4',serif;color:var(--ink);max-width:420px}
.why-story-h{font:700 var(--h2)/1.15 'Source Serif 4',serif;color:var(--ink);letter-spacing:-.01em;margin:0 0 28px}
/* C'était ÇA qui bloquait la largeur du texte, pas la colonne de grille
(voir index.html) : ce max-width:660px plafonnait le paragraphe bien avant
qu'il n'atteigne le bord de sa colonne, même une fois celle-ci élargie.
Retiré : le texte suit maintenant la largeur réelle de sa colonne. Remets
un max-width ici si tu veux à nouveau limiter la longueur des lignes. */
.why-story-p{font:400 19px/1.6 'Source Serif 4',serif;color:var(--ink);margin:0 0 24px}
/* Les mots mis en avant restent maigres : c'est la couleur qui les détache. */
/* Récit « Pourquoi bhoa ? » : les mots corail ne s'animent plus, ils sont
simplement en couleur (le script les laisse d'ailleurs de côté). */
.why-story-p .pop-word{color:#e8595f;font-weight:400;opacity:1;transform:none;filter:none}
/* Même principe que .cm-visual (communauté) : position:relative + image en
absolute:inset:0, plutôt que compter sur un height:100% qui ne se résout
pas de façon fiable ici (aspect-ratio, comme min-height, n'est pas une
"vraie" hauteur ferme pour un enfant en pourcentage). */
/* justify-self:end : le cadre (400×500px, fixé ci-dessous) est plus étroit
que sa colonne de grille (560px, voir index.html) — sans ça, il restait
collé au bord GAUCHE de sa colonne, à distance du bord droit de la section.
Avec :end, il colle toujours le bord droit de sa colonne, quelle que soit
sa propre largeur. */
.why-story-visual{position:relative;justify-self:end;background:#944646;height:450px;aspect-ratio:0.8/1;overflow:hidden}
.why-story-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* ---- Et quand ils ne sont pas d'accord ? (Plateforme) ----
Le duel permanent Maud ⇄ Gaspard, juste sous les six fiches. Chaque colonne
prend la couleur de son membre (--accent), comme les fiches au-dessus.
Angles droits et filets fins, comme partout ailleurs. */
.dl-sec{background:#fbf7f3;padding:72px var(--gutter) 64px}
.dl-lede{font:400 19px/1.6 'Source Serif 4',serif;color:#5a4f48;max-width:760px;margin:0 0 32px}
.dl-ask{display:flex;align-items:baseline;gap:16px;max-width:900px;margin:0 0 36px;padding:18px 22px;
background:#f3ede6;border-left:3px solid var(--ink)}
.dl-ask-who{flex:none;font:400 16px/1 'Bebas Neue','Inter',sans-serif;letter-spacing:.08em;color:#8b7f77}
.dl-ask-q{margin:0;font:600 20px/1.45 'Source Serif 4',serif;color:var(--ink)}
.dl-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:32px;align-items:stretch;max-width:1120px}
.dl-side{border-top:3px solid var(--accent);padding-top:22px}
.dl-who{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.dl-who img{width:48px;height:48px;object-fit:cover;flex:none;display:block}
.dl-who b{display:block;font:400 24px/1 'Bebas Neue','Inter',sans-serif;letter-spacing:.06em;color:var(--accent)}
.dl-who i{display:block;margin-top:4px;font:normal 400 13px/1.3 'Inter',sans-serif;color:#7d726b}
.dl-pos{margin:0 0 12px;font:700 24px/1.25 'Source Serif 4',serif;color:var(--ink)}
.dl-arg{margin:0 0 18px;font:400 17px/1.6 'Source Serif 4',serif;color:var(--ink2)}
.dl-give{margin:0;font:400 15px/1.5 'Source Serif 4',serif;color:var(--ink)}
.dl-give span{display:block;margin-bottom:4px;font:400 14px/1 'Bebas Neue','Inter',sans-serif;letter-spacing:.08em;color:var(--accent)}
.dl-vs{align-self:center;font:400 24px/1 'Bebas Neue','Inter',sans-serif;letter-spacing:.1em;color:#b3a79f}
.dl-rule{margin:40px 0 8px;max-width:760px;font:italic 400 17px/1.55 'Source Serif 4',serif;color:#7d726b}
.dl-end{margin:0;font:700 22px/1.35 'Source Serif 4',serif;color:var(--ink)}
/* ---- Pourquoi bhoa : genèse, difficultés, alternatives ----
Trois blocs tirés du deck, posés à même le fond crème. Même grammaire que le
reste du site : angles droits, filets fins, corail réservé à ce qui est bhoa. */
.wb-sec{background:#fbf7f3;padding:72px var(--gutter) 40px}
.wb-sec.wb-last{padding-bottom:130px}
.wb-inner{max-width:var(--measure)}
.wb-lede{font:400 19px/1.6 'Source Serif 4',serif;color:#5a4f48;max-width:720px;margin:0 0 40px}
/* Difficultés : la barre se remplit quand la section apparaît (classe .in posée
par initReveal) ; la valeur exacte reste lisible en toutes lettres à droite. */
.wb-bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:24px;max-width:1000px}
.wb-bar{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 72px;gap:28px;align-items:center}
.wb-bar-h{display:block;font:700 18px/1.3 'Source Serif 4',serif;color:var(--ink)}
.wb-bar-p{display:block;font:400 14px/1.45 'Source Serif 4',serif;color:#7d726b;margin-top:4px}
.wb-track{position:relative;height:10px;background:var(--border);overflow:hidden}
.wb-fill{position:absolute;left:0;top:0;bottom:0;background:var(--coral);
transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.wf-section.in .wb-fill{transform:scaleX(1)}
.wb-pct{font:400 32px/1 'Bebas Neue','Inter',sans-serif;color:var(--ink);text-align:right;white-space:nowrap}
.wb-note{font:400 13px/1.55 'Inter',sans-serif;color:#8b7f77;max-width:720px;margin:32px 0 0}
/* Alternatives : un vrai tableau (lu comme tel par les lecteurs d'écran), dont
chaque case porte aussi son sens en texte masqué — oui, partiellement, non. */
.wb-tablewrap{overflow-x:auto}
.wb-table{width:100%;border-collapse:collapse;min-width:640px}
.wb-table th,.wb-table td{border-top:1px solid var(--border);padding:18px 12px;vertical-align:middle}
.wb-table thead th{border-top:0;padding:0 8px 14px;font:500 11px/1.35 'Inter',sans-serif;letter-spacing:.06em;
text-transform:uppercase;color:#7d726b;text-align:center}
.wb-table tbody th{text-align:left;font-weight:400;width:48%}
.wb-table td{text-align:center;width:13%}
.wb-opt{display:block;font:700 18px/1.3 'Source Serif 4',serif;color:var(--ink)}
.wb-opt-p{display:block;font:400 14px/1.45 'Source Serif 4',serif;color:#7d726b;margin-top:4px}
.wb-mark{display:inline-block;width:14px;height:14px;border:1.5px solid var(--border-strong);vertical-align:middle}
.wb-mark.on{background:var(--ink);border-color:var(--ink)}
.wb-mark.half{background:linear-gradient(90deg,var(--ink) 50%,transparent 50%);border-color:var(--ink)}
.wb-table tr.us th,.wb-table tr.us td{background:#fbeee8;border-top:1.5px solid var(--coral);border-bottom:1.5px solid var(--coral)}
.wb-table tr.us .wb-opt{color:var(--coral)}
.wb-table tr.us .wb-mark.on{background:var(--coral);border-color:var(--coral)}
.wb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.wb-fill{transform:none;transition:none}}
/* TAILLE DU CADRE : height:500px et aspect-ratio:0.8/1 ci-dessus fixent la
taille exacte (500px de haut, 500×0.8 = 400px de large). Change ces deux
valeurs pour agrandir/réduire le cadre. La colonne de grille (560px, dans
index.html) n'a plus besoin de correspondre exactement — justify-self:end
absorbe l'écart en collant le cadre à droite quoi qu'il arrive. */
/* ============================================================
À qui s'adresse bhoa — bandeau terre cuite, cartes évidées
============================================================ */
/* Seule exception à la hauteur d'écran (voir #what .wf-section) : ce bandeau
garde sa hauteur naturelle, plus compacte. margin-top pose un vrai espace
crème avant lui — sans ça, la terre cuite démarrait dès la fin du comité,
juste au-dessus. */
#what .who-band{position:relative;z-index:1;min-height:0;display:block;margin-top:88px}
.who-band::before{content:'';position:absolute;inset:0 calc(50% - 50vw);background:#944646;z-index:-1}
.who-eyebrow{font:400 16px/1 'Bebas Neue','Inter',sans-serif;letter-spacing:.1em;color:rgba(255,255,255,.72);margin-bottom:18px}
.who-title{font:700 var(--h2)/1.15 'Source Serif 4',serif;color:#fff;letter-spacing:-.01em;margin:0 0 40px}
/* Cartes presque transparentes, cerclées d'un filet blanc fin (plus de
tracé animé : juste ce filet statique, plus fin qu'avant — 0.5px). */
.who-card{background:rgba(255,255,255,.06);border:0.5px solid rgba(255,255,255,.45);border-radius:14px;padding:24px 26px 28px;box-sizing:border-box}
.who-num{font:400 38px/1 'Bebas Neue','Inter',sans-serif;letter-spacing:.02em;color:#fff;margin-bottom:12px}
.who-h{font:700 21px/1.25 'Source Serif 4',serif;color:#fff;margin-bottom:10px}
.who-p{font:400 15px/1.6 'Source Serif 4',serif;color:rgba(255,255,255,.85)}
/* ============================================================
Notre offre : la démo à gauche, le contenu de l'offre à droite
============================================================ */
/* --- La grille --- */
.of-grid {
align-items: center; /* 'center' permet de centrer verticalement la vidéo et le texte. Si tu préfères aligner par le haut, utilise 'start' */
}
/* --- La vidéo --- */
.of-video {
position: relative;
background: #944646;
border: 0;
border-radius: 0;
width: 100%;
margin-top: 40px;
}
#offre-video {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
position: relative;
}
#offre-video iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
/* --- Le texte --- */
.of-text {
position: relative;
padding-left: 0;
}
.of-h {
font: 700 var(--h2)/1.15 'Source Serif 4', serif;
color: var(--ink);
margin: 0 0 20px;
letter-spacing: -.01em;
}
.of-p {
font: 400 19px/1.55 'Source Serif 4', serif;
color: var(--ink);
margin: 0 0 28px;
}
/* ============================================================
Communauté : texte à gauche, visuel à droite
============================================================ */
.cm-grid{align-items:stretch}
/* position:relative + l'image en absolute:inset:0, plutôt que height:100% sur
l'image : .cm-visual n'a qu'un min-height (pas de height ferme), un
pourcentage de hauteur ne s'y résout pas de façon fiable — l'image gardait
son ratio naturel au lieu de remplir le cadre. */
.cm-visual{position:relative;background:#944646;min-height:510px;overflow:hidden}
.cm-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cm-h{font:700 var(--h2)/1.15 'Source Serif 4',serif;color:var(--ink);margin:0 0 26px;letter-spacing:-.01em}
/* Les deux paragraphes d'introduction se lisent d'une traite : ils sont collés
l'un à l'autre, et seul le dernier ouvre l'espace avant l'accordéon. */
.cm-p{font:400 19px/1.5 'Source Serif 4',serif;color:var(--ink);margin:0 0 4px}
/* LARGEUR DES QUESTIONS (Matchmaking intelligent, Échanges entre pairs, …) :
.cm-acc n'a aujourd'hui aucune largeur propre, il remplit donc toute la
colonne texte (.cm-text). Pour qu'il ne prenne plus toute la largeur,
ajoute un max-width ici, ex. max-width:420px (les questions ne s'étirent
alors plus jusqu'au bord de la colonne, même si celle-ci s'agrandit). */
.cm-acc{margin-top:20px;max-width:400px}
/* Le cadre fin terre cuite ceinture le seul intitulé : la réponse se lit
dessous, hors du cadre, comme sur la maquette. Le +/− suit l'ouverture. */
.cm-item{margin-bottom:5px}
.cm-item[open]{margin-bottom:24px}
.cm-item > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border:1.5px solid #944646;font:400 17px/1.3 'Source Serif 4',serif;color:#944646;transition:background-color .25s ease}
.cm-item > summary:hover{background:rgba(148,70,70,.06)}
.cm-item > summary::-webkit-details-marker{display:none}
.cm-item > summary::after{content:'+';font:400 22px/1 'Source Serif 4',serif;color:#944646;flex:none}
.cm-item[open] > summary::after{content:'–'}
.cm-a{padding:14px 2px 0;font:400 19px/1.5 'Source Serif 4',serif;color:var(--ink)}
/* ============================================================
Notre plateforme : accordéon de features à gauche, capture produit
inclinée à droite. L'ouverture d'un item change le panneau actif du
mockup (voir initPlatformFeatures dans script.js).
============================================================ */
@keyframes fw-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.of-acc{margin-top:8px}
.fw-cta{display:inline-block;margin-top:44px;font:600 17px/1 'Source Serif 4',serif;color:var(--ink);border:2px solid var(--ink);padding:15px 24px;cursor:pointer;transition:background-color .25s ease,color .25s ease}
.fw-cta:hover{background:var(--ink);color:#fbf7f3}
/* Variante pleine, bordeaux — même bouton que .fw-cta, coloré comme who-band
juste au-dessus, pour un CTA qui ressort davantage sur fond crème. */
.fw-cta-red{background:#fbf7f3;border-color:#000000;color:#000000}
.fw-cta-red:hover{background:#000000;border-color:#000000;color:#fbf7f3}
/* --- La fenêtre produit --- */
.fw-stage{min-width:0;perspective:1700px}
.fw-win{
/* Toutes les cotes internes de la maquette sont en px fixes (typo à 7,5px) :
depuis que la page est en pleine largeur, elles paraissaient minuscules dans
un cadre plus grand. `zoom` agrandit la maquette d'un bloc — mise en page
comprise — donc elle remplit toujours exactement sa colonne. */
zoom:1.15;
background:#EFECE7;border-radius:11px;overflow:hidden;
font-family:'Inter',sans-serif;color:var(--ink);
transform:rotateY(-15deg) rotateZ(2deg);
box-shadow:-26px 38px 78px rgba(43,39,36,.20);
transition:transform .8s cubic-bezier(.32,.72,0,1);
}
.fw-stage:hover .fw-win{transform:rotateY(-9deg) rotateZ(1deg)}
/* Barre de fenêtre façon système d'exploitation, au-dessus du header applicatif :
rend la capture plus lisible comme « une vraie fenêtre d'ordinateur ». */
.fw-osbar{display:flex;align-items:center;gap:5px;padding:7px 10px;background:#eae6e1;border-bottom:1px solid rgba(43,39,36,.06)}
.fw-dot{width:8px;height:8px;border-radius:50%;flex:none}
.fw-os-search{flex:1;max-width:200px;margin:0 auto;padding:3px 10px;border-radius:6px;background:rgba(43,39,36,.07);color:#9a8f85;font:400 7px 'Inter',sans-serif;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Le contenu de la fenêtre est peint sur un dégradé crème, comme dans l'appli. */
.fw-hdr{display:flex;align-items:center;gap:9px;padding:7px 12px;background:linear-gradient(180deg,#FCFAF7,#F8F4EF)}
.fw-brand{display:flex;align-items:center;gap:4px;font:700 12px 'Source Serif 4',serif}
.fw-brand img{width:11px;height:11px;object-fit:contain}
.fw-back,.fw-pill{font:500 7.5px 'Inter',sans-serif;color:#5a4f48;white-space:nowrap}
.fw-pill{padding:3px 7px;border-radius:100px}
.fw-pill.on{background:#FBE2E3;color:#D6414B;font-weight:600}
.fw-hdr-right{margin-left:auto;display:flex;align-items:center;gap:7px}
.fw-date{font:400 7px 'Inter',sans-serif;color:#9a8f85}
.fw-date b{font-weight:600;color:#5a4f48}
.fw-ico{position:relative;display:block}
.fw-ico svg{width:11px;height:11px;display:block}
.fw-bell b{position:absolute;top:-2px;right:-2px;width:6px;height:6px;border-radius:50%;background:#E8545B;color:#fff;font:700 4px/6px 'Inter',sans-serif;text-align:center}
.fw-av{width:16px;height:16px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font:700 7px 'Inter',sans-serif}
.fw-av.me{background:#FBE2E3;color:#D6414B}
.fw-av.big{width:34px;height:34px;font-size:14px;border:2px solid #fff;box-shadow:0 0 0 1px var(--border)}
.fw-cols{display:flex;background:linear-gradient(160deg,#FCFAF7,#F6EFE9)}
/* --- Colonne des conversations --- */
.fw-side{width:150px;flex:none;display:flex;flex-direction:column;gap:3px;padding:8px 8px 12px;border-right:1px solid rgba(43,39,36,.05)}
.fw-new{background:#E8545B;color:#fff;font:600 7.5px 'Inter',sans-serif;padding:6px 8px;border-radius:5px;text-align:center}
.fw-newdir{font:400 6.5px 'Inter',sans-serif;color:#9a8f85;text-align:center;padding:2px 0 6px}
.fw-slab{font:700 5.5px 'Inter',sans-serif;letter-spacing:.1em;color:#b3a79f;padding:6px 4px 2px}
.fw-item,.fw-dir{font:400 7px/1.2 'Inter',sans-serif;color:#5a4f48;padding:4px 5px;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fw-item.on{background:#FBE2E3;color:#D6414B;font-weight:500}
.fw-item.sub{padding-left:16px}
.fw-dir{display:flex;align-items:center;gap:4px;color:#5a4f48}
.fw-dir svg{width:8px;height:8px;flex:none}
.fw-dir b{margin-left:auto;font:400 6px 'Inter',sans-serif;color:#b3a79f}
/* --- Zone de conversation --- */
.fw-main{flex:1;min-width:0;display:flex;flex-direction:column;padding:12px 14px 10px}
.fw-body{display:none;flex:1;min-height:196px}
.fw-body.active{display:block;animation:fw-in .5s ease both}
.fw-ask{display:flex;align-items:flex-start;gap:6px;justify-content:flex-end;margin-bottom:12px}
.fw-bubble{background:#fff;border:1px solid rgba(43,39,36,.07);border-radius:7px;padding:7px 9px;font:400 7.5px/1.5 'Inter',sans-serif;max-width:82%}
.fw-msg{display:flex;align-items:flex-start;gap:6px;margin-bottom:10px}
.fw-who-line{display:flex;align-items:center;gap:4px;margin-bottom:4px}
.fw-who-line b{font:700 7.5px 'Inter',sans-serif;color:#E8545B}
.fw-who-line b.blue{color:#4A90D9}
.fw-who-line i{font:400 6.5px 'Inter',sans-serif;font-style:normal;color:#b3a79f}
.fw-msg p{margin:0 0 6px;font:400 7.5px/1.55 'Inter',sans-serif;color:#3f3733}
.fw-typing{display:flex;gap:2px;align-items:center}
.fw-typing i{width:3px;height:3px;border-radius:50%;background:#4A90D9;animation:fw-blink 1.2s ease-in-out infinite}
.fw-typing i:nth-child(2){animation-delay:.2s}
.fw-typing i:nth-child(3){animation-delay:.4s}
@keyframes fw-blink{0%,100%{opacity:.25}50%{opacity:1}}
/* --- Veille : les alertes du comité --- */
.fw-alert{background:#fff;border:1px solid rgba(43,39,36,.07);border-left:2.5px solid #E8545B;border-radius:5px;padding:8px 10px;margin-bottom:8px}
.fw-alert.muted{border-left-color:#E8954A;opacity:.75}
.fw-alert-top{display:flex;align-items:center;gap:4px;margin-bottom:6px}
.fw-tag{font:800 5.5px 'Inter',sans-serif;letter-spacing:.06em;color:#C8404E;background:#FEE9EA;padding:2px 5px;border-radius:100px}
.fw-tag.on{color:#fff;background:#E8545B}
.fw-alert-num{margin-left:auto;text-align:right}
.fw-alert-num i{display:block;font:700 5px 'Inter',sans-serif;letter-spacing:.08em;font-style:normal;color:#9a8f85}
.fw-alert-num b{font:700 11px 'Source Serif 4',serif;color:#E8545B}
.fw-who{display:flex;align-items:center;gap:4px;font:500 7px 'Inter',sans-serif;color:#5a4f48;margin-bottom:5px}
.fw-who .fw-av{width:12px;height:12px;font-size:6px}
.fw-who i{font-style:normal;color:#b3a79f}
.fw-alert-h{font:700 9px/1.35 'Source Serif 4',serif;color:var(--ink);margin-bottom:4px}
.fw-alert-p{font:400 7px/1.5 'Inter',sans-serif;color:#5a4f48}
/* --- Suivi : le point hebdomadaire --- */
.fw-meet{background:#fff;border:1px solid rgba(43,39,36,.07);border-radius:5px;padding:16px 12px;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.fw-meet-lab{font:400 6.5px 'Inter',sans-serif;color:#9a8f85}
.fw-meet-h{font:700 9px 'Inter',sans-serif;color:var(--ink)}
.fw-meet-row{display:flex;align-items:center;gap:4px;margin-top:2px}
.fw-st{width:11px;height:11px;border-radius:50%;border:1.2px solid #fff}
.fw-st + .fw-st{margin-left:-6px}
.fw-meet-row i{font:400 6px 'Inter',sans-serif;font-style:normal;color:#9a8f85;margin-left:4px}
.fw-join{background:#E8545B;color:#fff;font:600 7px 'Inter',sans-serif;padding:5px 12px;border-radius:100px;margin-top:4px}
/* --- Champ de saisie --- */
.fw-comp{margin-top:auto;background:#fff;border:1px solid rgba(43,39,36,.07);border-radius:8px;padding:9px 10px 7px}
.fw-comp-box{font:400 7.5px 'Inter',sans-serif;color:#b3a79f;margin-bottom:9px}
.fw-comp-foot{display:flex;align-items:center;gap:8px;font:400 6.5px 'Inter',sans-serif;color:#9a8f85}
.fw-comp-foot i{font-style:italic;color:#b3a79f}
.fw-send{margin-left:auto;width:13px;height:13px;border-radius:50%;background:#E8545B}
/* ============================================================
Les 4 étapes : volet terre cuite à gauche, accordéon à droite
============================================================ */
/* Le volet coloré sort de la largeur de .wf-page pour toucher le bord gauche
de la fenêtre ; la grille, elle, reste dans la page. */
.ha-band{position:relative;z-index:1}
.ha-band::before{content:'';position:absolute;inset:0 calc(50% - 50vw);background:#fbf7f3;z-index:-1}
/* « Demander une démo » : même grammaire que « Découvrir » — cadre carré, fond
transparent, rempli en blanc au survol (on est sur le volet terre cuite). */
.ha-cta{background:transparent;border:2px solid #fff;color:#fff;transition:background-color .25s ease,color .25s ease}
.ha-cta:hover{background:#fff;color:#2B2724}
.ha-aside{position:relative}
.ha-aside::before{content:'';position:absolute;top:0;bottom:0;right:100%;width:50vw;background:#944646}
/* Les étapes ne sont plus des cartes blanches : un simple filet les sépare. */
.ha-card + .ha-card::after{content:'';position:absolute;left:0;top:6px;bottom:6px;width:1px;background:rgba(43,39,36,.45);pointer-events:none}
/* L'icône d'étape n'a plus lieu d'être : le chiffre porte seul le repère. */
.ha-col > div:nth-child(2){display:none}
.ha-collapsed{align-self:center;writing-mode:vertical-rl;font:700 24px/1 'Source Serif 4',serif;color:var(--ink);white-space:nowrap;transition:font-size .28s cubic-bezier(.25,1,.5,1)}
/* Survol d'une étape repliée : son titre vertical grossit, sans rien déplier —
le dépliage, lui, est au clic. La rotation est posée en style en ligne par le
script, on ne touche donc qu'à la taille du texte. */
.ha-card:hover .ha-collapsed{font-size:29px}
@media (prefers-reduced-motion:reduce){.ha-collapsed{transition:none}}
/* Pastilles de progression : l'étape en cours est un cercle évidé. */
.ha-dots{display:flex;justify-content:center;gap:14px;padding:26px 0 0}
.ha-dots span{width:11px;height:11px;border-radius:50%;background:#944646;border:1.5px solid #944646;box-sizing:border-box;cursor:pointer;transition:background-color .3s ease}
.ha-dots span[data-on="1"]{background:transparent}
/* Flèches précédent/suivant : masquées par défaut (desktop garde le clic sur
carte + les pastilles), visibles seulement en mobile (voir le @media plus
bas), où les 4 étapes passent en carrousel une-carte-à-la-fois. */
.ha-mobile-nav{display:none;align-items:center;justify-content:center;gap:20px;padding:26px 0 0}
.ha-mobile-nav .ha-dots{padding:0}
.ha-arrow{
display:flex;align-items:center;justify-content:center;
width:36px;height:36px;flex:none;border-radius:50%;
border:1.5px solid #944646;background:transparent;color:#944646;cursor:pointer;
transition:background-color .2s ease,color .2s ease;
}
.ha-arrow:hover{background:#944646;color:#fff}
/* ============================================================
Cadre animé corail autour des 3 cartes cofondateurs
(même tracé 12h → 6h que les 4 étapes, mais 1s plus lent)
============================================================ */
.team-frame{position:relative}
.team-frame::before{
content:'';position:absolute;inset:0;border-radius:0;padding:2px;z-index:2;pointer-events:none;
background:conic-gradient(from 0deg, #E8545B 0 var(--sa), transparent var(--sa) calc(360deg - var(--sa)), #E8545B calc(360deg - var(--sa)) 360deg);
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
opacity:0;transition:opacity .3s ease;
}
.team-frame.drawn::before{opacity:1;animation:step-frame-draw 2s cubic-bezier(.4,0,.2,1) forwards}
@supports not (background:conic-gradient(from 0deg, red 0 10deg, red 10deg 20deg)){
.team-frame.drawn::before{background:#E8545B}
}
/* ============================================================
Cadre animé corail autour de la carte d'Europe
(même tracé 12h → 6h que les cartes cofondateurs)
============================================================ */
/* Deux brins symétriques tracés en SVG (et non en conic-gradient comme les
autres cadres) : le trait est ici bien plus long, et le rendu au trait
dashoffset reste net sur toute la longueur. La géométrie du tracé est
recalculée en JS, cf. initEuFrame(). */
.eu-frame{position:relative}
.eu-frame-svg{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
/* Statique : plus de tracé animé à l'entrée dans l'écran. Le JS (initEuFrame)
pose toujours un stroke-dashoffset initial égal à la longueur du trait
(invisible) en style inline — le !important ici l'annule d'emblée, le
cadre est donc visible en entier dès le premier rendu, sans transition. */
.eu-frame-svg path{
fill:none;stroke:#E8545B;stroke-width:1.5;stroke-linecap:round;
stroke-dashoffset:0 !important;
}
/* ============================================================
Features — bordure conic animée
============================================================ */
@property --bl-feat-angle{syntax:'';inherits:false;initial-value:0deg}
.bl-feat-card{position:relative;min-width:0;background:#fff;border-radius:0;padding:24px;display:flex;flex-direction:column;gap:20px;z-index:0;transition:transform .3s ease;border:1px solid var(--border)}
.bl-feat-card::before{content:'';position:absolute;inset:-2px;border-radius:0;padding:2px;background:conic-gradient(from var(--bl-feat-angle),transparent 0deg,transparent 300deg,#E8545B 355deg,#E8545B 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .2s ease;pointer-events:none;z-index:-1}
.bl-feat-card:hover{transform:translateY(-3px)}
.bl-feat-card:hover::before{animation:bl-feat-spin 2.2s linear 1 forwards,bl-feat-fade 2.2s ease-in 1 forwards}
@keyframes bl-feat-spin{from{--bl-feat-angle:0deg}to{--bl-feat-angle:360deg}}
@keyframes bl-feat-fade{0%{opacity:1}85%{opacity:1}100%{opacity:0}}
@supports not (background:conic-gradient(from var(--bl-feat-angle),red,red)){
.bl-feat-card:hover::before{opacity:1;background:linear-gradient(#E8545B,#E8545B)}
}
/* ============================================================
Comment ça marche — accordéon horizontal + diagrammes SVG
============================================================ */
.ha-card{scroll-margin-top:16px}
/* Texte écrit au moment T : les caractères sont déjà en place (taille finale
réservée), on ne fait que les révéler — aucun reflow pendant la frappe.
Partagé par la citation du comité et les phrases de l'équipe. */
/* `pre-wrap` : préserve l'espace en attente de frappe sans l'empêcher de servir
de point de retour à la ligne. */
.cf-ch{opacity:0;white-space:pre-wrap}
.cf-ch.on{opacity:1}
.cf-ch.tip{position:relative}
.cf-ch.tip::after{
content:'';position:absolute;right:-.06em;top:.1em;bottom:.06em;width:1.5px;
background:var(--cf-color,var(--coral));animation:cf-caret .7s steps(1) infinite;
}
@keyframes cf-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
/* Réserve la hauteur de la phrase d'équipe : la carte ne se redimensionne pas
pendant que le texte s'écrit. */
.type-line{min-height:1.55em}
/* Icônes des valeurs : le tracé se dessine, puis l'icône respire une fois. */
.val-icon{opacity:0;transform:scale(.86);transform-origin:center}
.val-icon.on{animation:vi-pop .5s cubic-bezier(.34,1.4,.64,1) var(--vi-delay,0ms) both}
.val-icon path,.val-icon rect,.val-icon circle,
.val-icon line,.val-icon polyline,.val-icon polygon{
stroke-dasharray:100;stroke-dashoffset:100;
}
.val-icon.on path,.val-icon.on rect,.val-icon.on circle,
.val-icon.on line,.val-icon.on polyline,.val-icon.on polygon{
animation:vi-draw .85s cubic-bezier(.35,.85,.4,1) var(--vi-stroke-delay,0ms) forwards;
}
@keyframes vi-pop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
@keyframes vi-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){
.cf-ch{opacity:1}
.cf-ch.tip::after{display:none}
.val-icon{opacity:1;transform:none}
.val-icon path,.val-icon rect,.val-icon circle,
.val-icon line,.val-icon polyline,.val-icon polygon{stroke-dasharray:none;stroke-dashoffset:0}
}
/* ============================================================
FAQ — un seul gabarit pour les trois FAQ du site (produit, prix, communauté)
Le bloc (titre + questions) est centré sur la page — pas collé au gutter
comme les titres des autres sections — mais son texte reste aligné à
gauche en interne, comme partout ailleurs. width:100% est nécessaire en
plus de max-width : dans l'onglet Quoi, ce bloc est un enfant flex d'une
colonne (#what .wf-section) — sans largeur explicite, des margin:auto sur
un enfant flex désactivent l'étirement et le réduisent à son contenu
(shrink-to-fit) au lieu de le porter à 900px. */
.faq-wrap{width:100%;max-width:900px;margin:0 auto;box-sizing:border-box}
.bl-faq details{border-top:1px solid var(--border);padding:0}
.bl-faq details:last-of-type{border-bottom:1px solid var(--border)}
.bl-faq summary{list-style:none;padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;font:400 17px 'Inter',sans-serif;color:var(--ink);transition:color .15s}
.bl-faq summary::-webkit-details-marker{display:none}
.bl-faq summary::after{content:"+";width:28px;height:28px;border-radius:50%;border:1px solid #d4c9bc;background:transparent;color:var(--ink2);display:flex;align-items:center;justify-content:center;font:400 18px 'Inter',sans-serif;flex-shrink:0;transition:all .15s}
.bl-faq details[open] summary{color:var(--coral);font-weight:600}
.bl-faq details[open] summary::after{content:"−";background:var(--coral);color:#fff;border-color:var(--coral)}
.bl-faq summary:hover{color:var(--coral)}
.bl-faq .bl-a{padding:0 0 24px;font:400 15px/1.6 'Inter',sans-serif;color:var(--ink2);max-width:640px}
/* ============================================================
Offre — carte prix + FAQ resserrée
============================================================ */
/* Interlignes resserrés : la carte doit tenir dans l'écran épinglé, à côté de la démo. */
@property --beam{syntax:'';inherits:false;initial-value:0deg}
#offre .pc-card{background:#fff;border:1px solid var(--border);border-radius:0;padding:26px 30px 26px;width:340px;box-sizing:border-box;display:flex;flex-direction:column;box-shadow:0 8px 28px rgba(0,0,0,.04);position:relative}
#offre .pc-feat{display:flex;align-items:center;gap:12px;font:400 15px 'Inter',sans-serif;color:var(--ink);padding:6px 0}
#offre .pc-btn{margin-top:auto;padding:14px;border-radius:0;background:var(--ink);color:#fff;font:600 15px 'Inter',sans-serif;text-align:center;cursor:pointer;border:none}
#offre .pl-icon{color:var(--coral);flex-shrink:0}
#offre .pc-card::after{content:"";position:absolute;inset:0;border-radius:0;padding:2px;background:conic-gradient(from var(--beam,0deg),transparent 0 6%,#E8545B 10%,#ffb3b7 13%,transparent 17% 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;pointer-events:none}
#offre .pc-card:hover::after{animation:beam 2.4s linear 1}
@keyframes beam{0%{--beam:0deg;opacity:1}90%{opacity:1}100%{--beam:360deg;opacity:0}}
#offre .pc-lotus{transition:transform .9s cubic-bezier(.22,.61,.36,1)}
#offre .pc-card:hover .pc-lotus{transform:rotate(-8deg) translateY(-3px) scale(1.05)}
/* ============================================================
Contact — champs de formulaire
============================================================ */
.fl-line{border:none;border-bottom:1px solid #d8cec1;background:transparent;padding:14px 0;font:400 19px 'Inter',sans-serif;color:var(--ink);outline:none;width:100%;box-sizing:border-box;transition:border-color .2s}
.fl-line::placeholder{color:#b3a89a}
.fl-line:focus{border-color:var(--coral)}
.fl-lbl{font:600 12px 'Inter',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#9a8f85}
.fl-reason{font:400 19px 'Inter',sans-serif;color:#9a8f85;cursor:pointer;padding:10px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.fl-reason:hover{color:var(--ink2)}
.fl-reason.on{color:var(--coral);border-bottom-color:var(--coral);font-weight:600}
/* Bouton d'envoi : même grammaire que les CTA « Découvrir »/« Rejoindre » — cadre carré, fond transparent, plein seulement au survol. */
.fl-submit{padding:16px 34px;border-radius:0;background:transparent;border:2px solid var(--ink);color:var(--ink);font:600 17px/1 'Source Serif 4',serif;cursor:pointer;transition:background-color .25s ease,color .25s ease}
.fl-submit:hover{background:var(--ink);color:#fff}
.fl-submit:disabled{opacity:.6;cursor:default}
.fl-error{font:500 14px/1.4 'Inter',sans-serif;color:var(--coral);margin-top:18px}
/* ============================================================
Why — carte d'Europe animée
============================================================ */
.euc{fill:none;stroke:currentColor;stroke-width:.9;stroke-linejoin:round}
/* ============================================================
Mots corail : apparition calme (fondu net, léger relevé) puis
reflet très discret qui traverse une seule fois les lettres.
============================================================ */
.pop-word{
display:inline-block;position:relative;
opacity:0;transform:translateY(.14em);filter:blur(7px);
will-change:opacity,transform,filter;
}
.pop-word.on{
/* Le reflet est peint sur les glyphes uniquement (background-clip:text).
text-fill-color laisse `color` intact : le soulignement reste corail. */
background-image:linear-gradient(100deg,#E8545B 44%,#F6A18F 50%,#E8545B 56%);
/* La position reste dans 0%–100% : hors de cette plage, le dégradé (320% de
large) se décale au-delà du texte et laisse des lettres sans peinture. */
background-size:320% 100%;background-repeat:no-repeat;background-position:100% 0;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
animation:word-emerge 1.05s cubic-bezier(.22,.61,.36,1) forwards,
word-sheen 2.4s cubic-bezier(.45,0,.25,1) .75s forwards;
}
@keyframes word-emerge{
0%{opacity:0;transform:translateY(.14em);filter:blur(7px)}
100%{opacity:1;transform:none;filter:blur(0)}
}
@keyframes word-sheen{
0%{background-position:100% 0}
100%{background-position:0% 0}
}
/* Variante « écriture » (le mot du hero) : même main que les citations du
comité (Caveat italique). Trois temps enchaînés — le mot se trace de gauche
à droite, le soulignement se tire dans le même sens, puis le reflet passe.
Débords négatifs : ni les jambages ni le trait ne doivent être rognés. */
.pop-word.write{
font:italic 700 1.16em/1 'Caveat',cursive;
opacity:1;transform:none;filter:none;
padding:0 .06em;margin:0 -.02em;
}
/* Le masque est porté par un span interne, jamais par le mot lui-même : un
`clip-path` fait rapporter une intersection nulle à IntersectionObserver, et
le déclencheur d'apparition ne partirait jamais.
Le débord droit est large (-.45em) : en italique, la boucle du « l » déborde
nettement de sa chasse et se ferait couper par un masque serré. */
/* Padding compensé par une marge négative : la boîte s'élargit sans déplacer le
texte autour. Indispensable pour le reflet — `background-clip:text` ne peint
que dans la boîte, et l'encre qui en déborde resterait invisible. */
.pop-word.write .ww{
display:inline-block;
padding:0 .32em 0 .08em;margin:0 -.32em 0 -.08em;
clip-path:inset(-.14em 101% -.3em -.06em);
}
.pop-word.write.on{background-image:none;-webkit-text-fill-color:currentColor;animation:none}
.pop-word.write.on .ww{
background-image:linear-gradient(100deg,#E8545B 44%,#F6A18F 50%,#E8545B 56%);
background-size:320% 100%;background-repeat:no-repeat;background-position:100% 0;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
animation:word-write 1.05s cubic-bezier(.55,.06,.3,1) forwards,
word-sheen 2.2s cubic-bezier(.45,0,.25,1) 1.65s forwards;
}
@keyframes word-write{
0%{clip-path:inset(-.14em 101% -.3em -.06em)}
100%{clip-path:inset(-.14em -.45em -.3em -.1em)}
}
/* Le trait est un élément à part (et non `text-decoration`) : c'est le seul
moyen de le tracer APRÈS le mot, et dans le même sens. */
.pop-word.write::after{
content:'';position:absolute;left:.04em;right:-.1em;bottom:-.02em;height:.055em;
background:currentColor;border-radius:0;pointer-events:none;
transform:scaleX(0);transform-origin:left center;
}
.pop-word.write.on::after{animation:word-underline .5s cubic-bezier(.22,.61,.36,1) 1.05s forwards}
@keyframes word-underline{to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){
.pop-word.write .ww{clip-path:none}
.pop-word.write::after{transform:scaleX(1)}
}
/* L'effet est décoratif : sans animation, le mot est simplement présent. */
@media (prefers-reduced-motion: reduce){
.pop-word{opacity:1;transform:none;filter:none}
.pop-word.on{animation:none;background-image:none;-webkit-text-fill-color:currentColor}
}
/* Repli si background-clip:text n'est pas supporté : simple apparition. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
.pop-word.on{background-image:none;-webkit-text-fill-color:currentColor;
animation:word-emerge 1.05s cubic-bezier(.22,.61,.36,1) forwards}
}
/* Carte Europe : les liaisons se dévoilent depuis Bruxelles */
.eu-reveal-c{r:330}
.eu-map.eu-draw .eu-reveal-c{animation:eu-reveal 5s linear both}
@keyframes eu-reveal{from{r:0}to{r:330}}
@media (prefers-reduced-motion: reduce){
.eu-map.eu-draw .eu-reveal-c{animation:none}
}
/* Animations en boucle mises en pause hors écran (voir initAnimPause).
Sans ça, les 25 tracés SVG de la page Why repeignent en continu, même
quand la carte n'est pas visible. */
.anim-paused,.anim-paused *{animation-play-state:paused !important}
/* Le trajet doit être un multiple exact du motif (4 + 8 = 12) : sinon le
bouclage décale les pointillés et se voit comme un à-coup. 156 = 12 x 13. */
@keyframes eu-flow{to{stroke-dashoffset:-156}}
@keyframes eu-pulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.35);opacity:1}}
/* Le halo naît et meurt transparent : en repartant de .55 il réapparaissait
d'un coup à chaque cycle. */
@keyframes eu-halo{0%{transform:scale(.6);opacity:0}18%{opacity:.55}100%{transform:scale(2.2);opacity:0}}
.eu-line{fill:none;stroke:currentColor;stroke-width:1.3;stroke-dasharray:4 8;animation:eu-flow 25s linear infinite}
.eu-city{fill:currentColor}
.eu-hub{fill:currentColor;transform-box:fill-box;transform-origin:center;animation:eu-pulse 3s ease-in-out infinite}
.eu-halo{fill:currentColor;transform-box:fill-box;transform-origin:center;animation:eu-halo 3s ease-out infinite}
.eu-lbl{font-family:'Inter',sans-serif;font-weight:600;font-size:9px;fill:currentColor;paint-order:stroke;stroke:#fbf7f3;stroke-width:2.4px;stroke-linejoin:round}
.eu-lbl-hub{font-family:'Inter',sans-serif;font-weight:700;font-size:11px;fill:var(--coral);paint-order:stroke;stroke:#fbf7f3;stroke-width:2.6px;stroke-linejoin:round}
/* ============================================================
Responsive — le prototype est fixe 1280px, on l'adapte
============================================================ */
/* Les deux mesures se règlent ici une seule fois : titres et marges latérales
suivent d'eux-mêmes dans toutes les sections. */
@media (max-width:1080px){
:root{--gutter:40px}
.wf-section{padding:56px var(--gutter)}
}
@media (max-width:820px){
:root{--h2:26px;--gutter:20px}
/* Le comité : rangée unique de 6 cadres trop étroite sur mobile (chaque
cadre devient une lamelle) — grille 3 colonnes / 2 rangées, cadres
carrés (aspect-ratio, plus de hauteur qui grandit à la sélection). La
rangée de noms sous les cadres, pensée pour un alignement 1 rangée x 6,
ne correspond plus à une grille 2 rangées : le nom du membre choisi
reste visible dans la fiche (.bd-vname) juste en dessous. */
.bd-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:0}
.bd-frame{height:auto;aspect-ratio:1/1}
.bd-frame.on{height:auto}
.bd-mono{font-size:40px}
.bd-names{display:none}
.bd-bios{padding:28px var(--gutter) 16px}
.bd-bio{gap:16px}
.bd-text{padding-left:20px}
.bd-text p{font-size:16px}
/* ---- En-tête : les onglets desktop disparaissent, le hamburger prend
le relais (voir .hdr-burger/.hdr-mobile-menu, et initMobileMenu() dans
script.js). Le bouton "Nous contacter" était pensé pour une barre large :
trop de padding/police une fois coincé à côté du hamburger sur un petit
écran, d'où sa propre réduction ici. ---- */
.wf-dock.hdr{grid-template-columns:auto 1fr;gap:8px;padding:0 12px;position:relative}
.hdr .hdr-tabs{display:none}
/* Le sélecteur de langue reste accessible sur mobile (il était masqué avant
le passage au déclencheur compact) : juste resserré pour tenir à côté du
CTA et du hamburger. */
.lang-cur{padding:7px 6px;gap:5px;font-size:12px}
.lang-cur .lang-caret{display:none}
.lang-menu{min-width:170px}
/* La rangée de droite gagne un élément de plus qu'avant : l'écart hérité de
l'attribut style= inline serait de trop, le hamburger déborderait. */
.hdr .hdr-contact{gap:8px !important}
.hdr .hdr-name{font-size:17px}
.hdr .hdr-logo{width:40px;height:40px}
.hdr .hdr-cta{padding:8px 14px;font-size:12px}
.hdr-burger{display:flex}
.hdr-mobile-menu{display:flex}
.wf-section{padding:40px var(--gutter)}
/* ---- Hero : plein écran comme sur desktop, juste un padding latéral
réduit et un titre plus petit pour tenir sur un écran étroit. ---- */
.hero-full{padding:8px 20px 28px;gap:14px}
.hero-title{font-size:30px !important}
.hero-down{width:36px;height:36px}
/* stack all two/three column grids */
.grid-stack{grid-template-columns:1fr !important;gap:24px !important}
/* Équipe (tm-grid) : exception à la règle ci-dessus — 2 colonnes plutôt
qu'empilées en 1, pour rester à 2 lignes (3 photos : 2 + 1) plutôt que 3
lignes. Le podium (colonne du milieu remontée, voir styles.css plus haut)
n'a plus de sens dans une grille 2 colonnes : neutralisé ici. */
.tm-grid.grid-stack{grid-template-columns:1fr 1fr !important;gap:24px !important}
.tm-col:nth-child(2){transform:none}
.tm-col:nth-child(2) .tm-photo{transform:none}
.tm-top,.tm-photo,.tm-quote{width:100% !important}
/* ---- Les 4 étapes : carrousel une-carte-à-la-fois plutôt que la piste
accordéon qui glisse à l'horizontale (illisible en aussi peu de place).
setActive() (script.js) continue de piloter l'affichage ; ici on force
seulement la carte inactive à disparaître et l'active à prendre toute la
largeur, au lieu des flex:1/flex:5 pensés pour le survol desktop. ---- */
.ha-grid{gap:0 !important}
.ha-aside{padding:36px var(--gutter) !important}
.ha-panel{padding:24px var(--gutter) 20px !important}
.ha-stage{max-width:100% !important;overflow:hidden !important;height:auto !important;min-height:420px}
.ha-card{
box-sizing:border-box;flex:none !important;width:100% !important;
padding:8px 4px !important;display:none !important;
}
.ha-card[data-active="1"]{display:flex !important}
.ha-card .ha-collapsed{display:none !important}
.ha-card .ha-expanded{width:100% !important;opacity:1 !important;transform:none !important}
.ha-mobile-nav{display:flex}
/* Why : la carte d'Europe passe au-dessus du texte et devient fluide */
/* `align-items:center` est posé en style en ligne : empilés, la carte et le
bloc « Notre mission » se réduisaient à leur contenu et se recentraient,
décalant le titre par rapport aux autres sections. */
.why-hero-grid{flex-direction:column;align-items:stretch !important}
.why-map{width:100% !important;min-height:300px}
/* Le padding latéral (96px/100px) est posé en style en ligne pour aligner
le texte desktop sur la colonne image : sur mobile, il ne laissait quasi
plus de largeur au texte. On le ramène au même padding que les autres
sections. */
.why-story-section{padding:40px var(--gutter) !important}
.why-story{grid-template-columns:1fr !important}
.why-story-visual{width:100% !important;justify-self:stretch !important;aspect-ratio:4/3 !important;height:auto !important}
/* Valeurs : 2 colonnes puis séparateurs verticaux retirés */
.values-grid{grid-template-columns:1fr 1fr !important}
.values-grid .val-cell{border-left:none !important;padding:0 !important}
.values-grid > div{padding:0 !important}
/* Communauté / Plateforme : colonnes image forcées inline reprennent le
plein-largeur une fois empilées (elles avaient une largeur fixe/étroite
pour la mise en page 2 colonnes du bureau). */
.cm-grid,.why-story,.of-grid{grid-template-columns:1fr !important}
.cm-visual,.why-story-visual{width:100% !important}
/* Duel Maud ⇄ Gaspard : les deux colonnes s'empilent, le « vs » entre elles. */
.dl-sec{padding:48px var(--gutter)}
.dl-grid{grid-template-columns:1fr;gap:18px}
.dl-vs{justify-self:center}
.dl-ask{flex-direction:column;gap:8px}
.dl-ask-q{font-size:18px}
.dl-pos{font-size:20px}
/* Pourquoi bhoa : la barre passe sous son libellé,
le pourcentage reste à droite ; le tableau tient dans l'écran sans défiler. */
.wb-sec{padding:48px var(--gutter) 32px}
.wb-sec.wb-last{padding-bottom:72px}
.wb-bar{grid-template-columns:1fr 56px;gap:10px 16px}
.wb-bar .wb-track{grid-column:1 / -1;grid-row:2}
.wb-pct{grid-row:1;grid-column:2;font-size:28px}
.wb-table{min-width:0}
.wb-table th,.wb-table td{padding:14px 4px}
/* En-têtes à la verticale, lus de bas en haut comme le nom des fiches du
comité : les colonnes de cases tombent à une trentaine de pixels et
laissent la place aux descriptions, qui s'empilaient sinon mot à mot. */
.wb-table thead th{padding:0 2px 12px;vertical-align:bottom}
.wb-col{display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg);
white-space:nowrap;text-align:left;font-size:10px;letter-spacing:.04em}
.wb-table tbody th{width:auto}
.wb-table td{width:30px;padding:14px 2px}
.wb-opt{font-size:16px}
.wb-opt-p{font-size:12.5px}
/* Cas d'usage (bulles qui défilent) : sur desktop, .mq-card{width:max-
content} + .mq-q{white-space:nowrap} laissent chaque bulle s'élargir
jusqu'à tenir sa question sur une ligne — confortable là où il y a de la
place. Sur un écran étroit, ce même choix forçait le texte à déborder
de la bulle (et donc à empiéter sur celle d'à côté, dans la piste ou la
rangée suivante) : on repasse ici sur une largeur fixe et un retour à la
ligne normal, comme n'importe quel texte. */
.mq-card{width:240px;padding:10px 16px}
.mq-q{font-size:12px;white-space:normal}
/* Contact : champs empilés */
.form-row{flex-direction:column;gap:28px !important}
/* ---- Pied de page : la ligne unique (logo + copyright + liens + réseaux)
n'a pas la place de tenir sur un écran étroit — empilée et centrée,
padding réduit d'autant. ---- */
.ft-row{flex-direction:column;align-items:center;text-align:center;gap:18px;padding:40px 24px}
.ft-links{margin:0;flex-wrap:wrap;justify-content:center;gap:16px 24px}
}
@media (max-width:560px){
:root{--h2:24px;--gutter:16px}
.wf-section{padding:32px var(--gutter)}
.hero-title{font-size:26px !important}
.mq-card{width:220px;padding:10px 14px}
}
@media (prefers-reduced-motion:reduce){
.mq-track-l,.mq-track-r,.eu-line,.eu-hub,.eu-halo,.hero-down{
animation:none !important
}
html{scroll-behavior:auto}
}
/* ============================================================
Confirmation d'envoi — modale
Tout ce qui se dessine repose sur le même principe :
pathLength=100 normalise la longueur des tracés, l'animation
ramène simplement stroke-dashoffset de 100 à 0.
============================================================ */
@keyframes cm-draw{ to{ stroke-dashoffset:0 } }
@keyframes cm-fade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes cm-rise{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
.cm-overlay{
position:fixed; inset:0; z-index:120;
display:flex; align-items:center; justify-content:center;
background:rgba(43,39,36,.28);
opacity:0; pointer-events:none;
transition:opacity .32s ease;
}
.cm-overlay.on{ opacity:1; pointer-events:auto }
.cm-card{
position:relative; box-sizing:border-box;
width:300px; height:300px; padding:38px 30px;
background:#fff; border-radius:0;
box-shadow:0 24px 60px rgba(43,39,36,.2);
text-align:center;
display:flex; flex-direction:column; align-items:center; justify-content:center;
transform:scale(.85); opacity:0;
transition:transform .5s cubic-bezier(.2,.9,.3,1), opacity .5s ease;
}
.cm-overlay.on .cm-card{ transform:scale(1); opacity:1 }
/* Cadre corail : 4 brins partis de 3h et 9h, qui se rejoignent à 12h et 6h. */
.cm-frame{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible }
.cm-frame path{
fill:none; stroke:#E8545B; stroke-width:2;
stroke-dasharray:100; stroke-dashoffset:100;
}
.cm-overlay.on .cm-frame path{
animation:cm-draw 1s cubic-bezier(.65,0,.35,1) .15s forwards;
}
.cm-mark{ width:100px; height:100px; margin-bottom:14px; flex:none }
.cm-mark .cm-circle{ fill:none; stroke:#E8545B; stroke-width:2; opacity:0 }
.cm-overlay.on .cm-mark .cm-circle{ animation:cm-fade .4s ease .5s forwards }
.cm-mark .cm-check{
fill:none; stroke:#E8545B; stroke-width:3.6;
stroke-linecap:round; stroke-linejoin:round;
stroke-dasharray:100; stroke-dashoffset:100;
}
/* Le check part une fois le cadre bouclé. */
.cm-overlay.on .cm-mark .cm-check{ animation:cm-draw .7s cubic-bezier(.65,0,.35,1) .9s forwards }
.cm-title{
font:700 24px/1.2 'Source Serif 4',serif; color:#2B2724;
margin-bottom:10px; opacity:0;
}
.cm-sub{
font:400 14px/1.5 'Inter',sans-serif; color:#5a4f48;
margin-bottom:18px; opacity:0;
}
.cm-overlay.on .cm-title{ animation:cm-rise .5s ease 1.15s forwards }
.cm-overlay.on .cm-sub{ animation:cm-rise .5s ease 1.3s forwards }
/* Bouton « Fermer » : barre au survol, cadre au clic. */
.cm-close{
position:relative; align-self:center;
background:none; border:0; cursor:pointer;
padding:8px 18px;
font:600 14px 'Inter',sans-serif; color:#E8545B;
opacity:0;
}
.cm-overlay.on .cm-close{ animation:cm-fade .5s ease 1.45s forwards }
.cm-close .cm-bar{
position:absolute; left:18px; right:18px; bottom:4px; height:1.5px;
background:#E8545B; opacity:0; transition:opacity .22s ease;
}
.cm-close:hover .cm-bar,
.cm-close:focus-visible .cm-bar{ opacity:1 }
.cm-close-frame{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none }
.cm-close-frame path{
fill:none; stroke:#E8545B; stroke-width:1.5;
stroke-dasharray:100; stroke-dashoffset:100;
}
.cm-close.closing .cm-close-frame path{
animation:cm-draw .55s cubic-bezier(.65,0,.35,1) forwards;
}
.cm-close.closing .cm-bar{ opacity:0 }
@media (prefers-reduced-motion:reduce){
.cm-card{ transition:none; transform:none }
.cm-frame path,.cm-mark .cm-check,.cm-close-frame path{ stroke-dashoffset:0 }
.cm-mark .cm-circle,.cm-title,.cm-sub,.cm-close{ opacity:1 }
.cm-overlay.on .cm-frame path,.cm-overlay.on .cm-mark .cm-check,
.cm-overlay.on .cm-mark .cm-circle,.cm-overlay.on .cm-title,
.cm-overlay.on .cm-sub,.cm-overlay.on .cm-close,
.cm-close.closing .cm-close-frame path{ animation:none }
}
/* ============================================================
Les 4 étapes — mini-captures produit
Même grammaire que la fenêtre de « Trois manières d'être à vos côtés »
(.fw-win) : barre navigateur, en-tête applicatif, contenu crème.
Les angles restent droits pour rester au contact du cadre corail animé
(.step-frame::before), qui reste le marqueur de l'étape active.
============================================================ */
.sw-frame{background:transparent}
.sw-win{background:#EFECE7;overflow:hidden;font-family:'Inter',sans-serif;color:var(--ink)}
.sw-hdr{display:flex;align-items:center;gap:8px;padding:8px 12px;background:linear-gradient(180deg,#FCFAF7,#F8F4EF)}
.sw-brand{display:flex;align-items:center;gap:4px;font:700 12px 'Source Serif 4',serif}
.sw-brand img{width:12px;height:12px;object-fit:contain}
.sw-pill{font:500 8px 'Inter',sans-serif;color:#5a4f48;padding:3px 8px;border-radius:100px;white-space:nowrap}
.sw-pill.on{background:#FBE2E3;color:#D6414B;font-weight:600}
.sw-step{margin-left:auto;font:600 8px 'Inter',sans-serif;letter-spacing:.12em;color:#b3a79f}
.sw-body{display:flex;gap:12px;padding:14px;height:196px;box-sizing:border-box;overflow:hidden;background:linear-gradient(160deg,#FCFAF7,#F6EFE9)}
.sw-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.sw-lab{font:700 6.5px 'Inter',sans-serif;letter-spacing:.12em;color:#b3a79f}
/* --- 01 : prise de rendez-vous --- */
.sw-cal{width:132px;flex:none;background:#fff;border:1px solid #EBE2D6;padding:10px;display:flex;flex-direction:column;gap:8px;box-sizing:border-box}
.sw-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.sw-cal-grid span{height:11px;border-radius:2px;background:#F1EAE2}
.sw-cal-grid span.dim{background:#F7F3EE}
.sw-cal-grid span.on{background:#E8545B}
.sw-slot{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #EBE2D6;padding:7px 9px;font:600 9px 'Inter',sans-serif}
.sw-slot i{font:400 7.5px 'Inter',sans-serif;font-style:normal;color:#9a8f85}
.sw-slot.on{border-color:#E8545B;background:#FDF3F3;color:#D6414B}
.sw-go{margin-top:auto;align-self:flex-start;background:#E8545B;color:#fff;font:600 8.5px 'Inter',sans-serif;padding:7px 12px}
/* --- 02 : sources connectées --- */
.sw-row{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #EBE2D6;padding:7px 9px}
.sw-ic{width:16px;height:16px;flex:none;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff;font:700 8px 'Inter',sans-serif}
.sw-row b{font:600 8.5px 'Inter',sans-serif;white-space:nowrap}
.sw-track{flex:1;height:4px;border-radius:2px;background:#F1EAE2;overflow:hidden;min-width:24px}
.sw-track i{display:block;height:100%;background:#E8545B}
.sw-row em{font:600 7.5px 'Inter',sans-serif;font-style:normal;color:#E8954A;white-space:nowrap}
.sw-row em.ok{color:#3DAA72}
.sw-side{width:118px;flex:none;background:#fff;border:1px solid #EBE2D6;padding:10px;display:flex;flex-direction:column;gap:5px;box-sizing:border-box}
.sw-big{font:700 26px/1 'Source Serif 4',serif;color:var(--ink)}
.sw-small{font:400 7.5px 'Inter',sans-serif;color:#9a8f85}
.sw-note{margin-top:auto;font:600 7.5px 'Inter',sans-serif;color:#D6414B;background:#FBE2E3;padding:5px 7px;text-align:center}
/* --- 03 : composition du comité --- */
.sw-team{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sw-mb{position:relative;background:#fff;border:1px solid #EBE2D6;padding:7px;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.sw-mb i{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font:700 9px 'Inter',sans-serif;font-style:normal;margin-bottom:2px}
.sw-mb b{font:600 8.5px 'Inter',sans-serif}
.sw-mb em{font:400 7px 'Inter',sans-serif;font-style:normal;color:#9a8f85}
.sw-mb.on{border-color:#E8545B;background:#FDF3F3}
.sw-mb.on::after{content:'✓';position:absolute;top:5px;right:6px;font:700 8px 'Inter',sans-serif;color:#E8545B}
.sw-sol{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.sw-sol i{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#FBE2E3;color:#D6414B;font:700 13px 'Source Serif 4',serif;font-style:normal}
.sw-sol b{font:700 10px 'Source Serif 4',serif;margin-top:3px}
.sw-sol em{font:400 7px 'Inter',sans-serif;font-style:normal;color:#9a8f85}
/* --- 04 : recommandations --- */
.sw-reco{background:#fff;border:1px solid #EBE2D6;padding:6px 9px;display:flex;flex-direction:column;gap:2px}
.sw-rtop{display:flex;align-items:center;gap:6px}
.sw-tag{align-self:flex-start;font:800 6.5px 'Inter',sans-serif;letter-spacing:.08em;padding:2px 5px;border-radius:3px}
.sw-tag.new{background:#FBE2E3;color:#D6414B}
.sw-tag.opp{background:#E4F3EA;color:#2E8C5C}
.sw-tag.warn{background:#FBEEDF;color:#C9782B}
.sw-reco b{font:600 8.5px/1.3 'Inter',sans-serif}
.sw-reco em{font:400 7px 'Inter',sans-serif;font-style:normal;color:#9a8f85}
.sw-comp{margin-top:auto;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #EBE2D6;padding:6px 9px;font:400 8px 'Inter',sans-serif;color:#b3a79f}
.sw-send{width:14px;height:14px;flex:none;margin-left:auto;border-radius:50%;background:#E8545B}
@media (max-width:820px){
.sw-side,.sw-cal{display:none}
}
/* ============================================================
« Pourquoi bhoa ? » — les trois angles morts du dirigeant
============================================================ */
.wy-strip {
padding: 76px var(--gutter) 84px;
background: var(--paper); /* On conserve ton fond clair */
display: flex;
flex-direction: column;
}
/* On aligne le titre sur la typographie majestueuse de .who-title */
.wy-h {
font: 700 var(--h2)/1.15 'Source Serif 4', serif;
color: var(--ink);
letter-spacing: -.01em;
margin: 0 0 40px;
max-width: 1100px;
}
.wy-h span {
display: block;
}
/* Trois angles morts, sans cartes : trois colonnes éditoriales séparées par
un filet fin, comme dans un article. La voix du dirigeant passe devant (la
citation remonte par `order`), et le constat vient en conclusion, calé en
bas de colonne pour s'aligner d'une colonne à l'autre. Le balisage, lui,
n'a pas bougé : seul l'ordre d'affichage change. */
.wy-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: stretch;
border-top: 1px solid var(--border-strong);
}
.wy-card {
display: flex;
flex-direction: column;
padding: 30px 34px 6px;
border-left: 1px solid var(--border);
}
.wy-card:first-child { border-left: 0; padding-left: 0; }
.wy-card:last-child { padding-right: 0; }
.wy-num {
order: 0;
margin-bottom: 18px;
font: 400 46px/1 'Bebas Neue', 'Inter', sans-serif;
letter-spacing: .02em;
color: var(--coral);
}
.wy-q {
order: 1;
margin: 0 0 26px;
font: 400 21px/1.5 'Source Serif 4', serif;
color: var(--ink);
}
.wy-t {
order: 2;
margin-top: auto;
font: 700 19px/1.35 'Source Serif 4', serif;
color: var(--ink);
}
/* Un court trait corail introduit le constat. */
.wy-t::before {
content: '';
display: block;
width: 28px;
height: 2px;
margin-bottom: 14px;
background: var(--coral);
}
/* Vrai bouton d'action inversé par rapport à .who-cta (fond plein sombre vu que le fond de la section est clair) */
.wy-cta {
display: inline-block;
margin-top: 40px;
background: transparent; /* Fond transparent */
border: 2px solid var(--ink); /* Bord sombre */
color: var(--ink); /* Texte sombre pour être lisible */
font: 600 17px/1 'Source Serif 4', serif;
padding: 16px 30px;
text-decoration: none;
white-space: nowrap;
transition: background-color .25s ease, color .25s ease;
align-self: flex-start;
}
/* L'effet s'inverse au survol : le bouton se remplit */
.wy-cta:hover {
background: var(--ink);
color: #fff;
}
@media (max-width: 820px) {
.wy-strip {
padding: 56px var(--gutter) 60px;
}
.wy-grid { grid-template-columns: 1fr; border-top: 0; }
.wy-card, .wy-card:first-child {
padding: 24px 0 10px;
border-left: 0;
border-top: 1px solid var(--border-strong);
}
.wy-q { font-size: 19px; margin-bottom: 20px; }
}
/* ---- Pages légales (mentions, confidentialité, CGU, cookies) ----
Pages autonomes, hors du système d'onglets : pas de i18n, français
uniquement (voir CLAUDE.md). Réutilisent le footer du site tel quel. */
.legal-page{max-width:none;margin:0;background:var(--paper)}
.legal-top{padding:28px var(--gutter)}
.legal-back{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 'Inter',sans-serif;color:var(--ink2)}
.legal-back:hover{color:var(--coral)}
.legal-main{max-width:760px;margin:0 auto;padding:24px var(--gutter) 96px;color:var(--ink)}
.legal-main h1{font:700 40px/1.15 'Source Serif 4',serif;margin:0 0 12px;color:var(--ink)}
.legal-updated{font:400 14px/1.4 'Inter',sans-serif;color:var(--ink2);margin:0 0 48px}
.legal-main h2{font:700 22px/1.3 'Source Serif 4',serif;margin:44px 0 14px;color:var(--ink)}
.legal-main p{font:400 16px/1.7 'Inter',sans-serif;margin:0 0 16px;color:var(--ink)}
.legal-main ul{margin:0 0 16px;padding-left:22px}
.legal-main li{font:400 16px/1.7 'Inter',sans-serif;margin-bottom:8px;color:var(--ink)}
.legal-main a{text-decoration:underline}
.legal-fill{background:#fce8d8;border-radius:4px;padding:1px 6px;color:var(--ink)}
@media (max-width:820px){
.legal-top{padding:20px var(--gutter)}
.legal-main{padding:16px var(--gutter) 72px}
.legal-main h1{font-size:30px}
}