(grande hauteur de ligne) déborde déjà
d'environ 52px sous le wordmark compact → gap visuel wordmark→tagline ≈ 60px,
égal au gap tagline→bouton (.hero-cta margin-top). */
margin-top:8px;
font-family:var(--serif-title);font-style:italic;font-weight:400;
font-size:clamp(18px, 1.8vw, 24px);
color:var(--cream-dim);
letter-spacing:.01em;
text-align:center;
opacity:0;
animation:tagIn 1.8s cubic-bezier(.2,.8,.2,1) 5.2s forwards;
z-index:2;
}
@keyframes tagIn{
from{opacity:0;transform:translateY(14px);filter:blur(6px)}
to{opacity:1;transform:translateY(0);filter:blur(0)}
}
.scroll-hint{
position:absolute;bottom:40px;left:50%;
transform:translateX(-50%);
font-family:var(--sans);
font-size:10px;letter-spacing:.3em;text-transform:uppercase;
color:var(--cream-dim);
display:flex;flex-direction:column;align-items:center;gap:14px;
opacity:0;animation:fade 1.4s 7.6s forwards;
z-index:3;
}
.scroll-hint::after{
content:"";width:1px;height:48px;
background:rgba(246,241,234,.25);
animation:scrollLine 2.2s ease-in-out infinite;
transform-origin:top;
}
@keyframes scrollLine{
0%,100%{transform:scaleY(0);transform-origin:top}
50%{transform:scaleY(1)}
}
@keyframes fade{from{opacity:0}to{opacity:1}}
/* ===== Intro content ===== */
.page-inner{
max-width:1100px;
margin:0 auto;
width:100%;
}
/* ===== Page navigation (dots à droite) ===== */
.page-nav{
position:fixed;
right:22px;top:50%;
transform:translateY(-50%);
/* gap 2px : les boutons font 24px de haut (pas de 26px = ancien 8px + 18px
de gap) → même rythme visuel qu'avant. */
display:flex;flex-direction:column;align-items:center;gap:2px;
z-index:20;
/* Fine boîte verticale : verre discret (voile quasi invisible + filet +
flou). Le ton s'ADAPTE au fond réellement derrière (classe .on-light
posée par app.js, synchronisée par frame comme la couleur du menu) :
crème sur sections sombres, encre sur sections claires — jamais de
grosse gélule grise sur le crème. */
padding:8px 3px;
border-radius:999px;
background:rgba(246,241,234,.06);
border:1px solid rgba(246,241,234,.14);
-webkit-backdrop-filter:blur(7px);
backdrop-filter:blur(7px);
transition:background-color .25s, border-color .25s;
opacity:0;
/* Quasi immédiat, même pendant la grande intro (demande d'Allan) : les
dots sont un repère de navigation, pas un élément de mise en scène. */
animation:fade .8s .3s forwards;
/* Invisibles ⇒ non cliquables : .ready est posée par app.js au moment où
le fondu démarre (les dots deviennent cliquables dès qu'ils apparaissent,
jamais avant). */
pointer-events:none;
}
.page-nav.ready{pointer-events:auto}
/* Pages full-page SANS intro (body[data-no-reveal], ex. formations) : le
chrome apparaît tout de suite, il n'y a pas de reveal à attendre. */
body[data-no-reveal] .site-menu{animation-delay:.15s;animation-duration:.5s}
body[data-no-reveal] .page-nav{animation-delay:.25s;animation-duration:.5s}
/* Sur section claire : voile et filet passent côté encre, très légers. */
.page-nav.on-light{
background:rgba(24,53,66,.05);
border-color:rgba(24,53,66,.16);
}
/* Bouton = boîte de layout FIXE 24×24 (aussi zone de clic confortable).
Le rond visible est peint par ::after et grandit via son inset → la taille
de la pilule ne bouge plus d'un pixel quand le dot actif change. */
.page-nav button{
width:24px;height:24px;
border:none;cursor:pointer;
background:none;
padding:0;
position:relative;
}
.page-nav button::after{
content:"";position:absolute;
inset:8px; /* rond de 8px dans la boîte de 24px */
border-radius:50%;
background:rgba(140,140,140,.4);
transition:inset .4s cubic-bezier(.2,.8,.2,1), background .4s;
}
/* Survol souris uniquement : sur tactile, :hover « colle » après un tap et
laisserait une étiquette fantôme sur le dot initialement touché. */
@media (hover: hover){
.page-nav button:hover::after{background:rgba(180,180,180,.7)}
}
/* Dot actif : agrandi via l'inset du ::after (11px), layout inchangé. */
.page-nav button.active::after{
background:var(--gold);
inset:6.5px;
}
/* Infobulle : nom de la section au survol, pastille encre lisible sur
fond clair comme sombre. */
.page-nav button::before{
content:attr(data-label);
position:absolute;
/* +8px seulement : le bord du rond visible est déjà 8px À L'INTÉRIEUR de la
boîte du bouton → distance visuelle dot→infobulle inchangée (16px). */
right:calc(100% + 8px);
top:50%;
transform:translateY(-50%) translateX(8px);
white-space:nowrap;
font-family:var(--sans);
font-size:10px;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--cream);
background:rgba(14,34,48,.9);
border:1px solid rgba(201,168,106,.3);
border-radius:999px;
padding:7px 14px;
opacity:0;
pointer-events:none;
transition:opacity .3s, transform .3s cubic-bezier(.2,.8,.2,1);
}
.page-nav button:focus-visible::before,
.page-nav button.touch-active::before{
opacity:1;
transform:translateY(-50%) translateX(0);
}
@media (hover: hover){
.page-nav button:hover::before{opacity:1;transform:translateY(-50%) translateX(0)}
}
/* Scrub tactile (mobile) : le dot sous le doigt s'allume et montre son nom.
Fond seul (pas de changement de taille) → aucun décalage pendant le glissement. */
.page-nav button.touch-active::after{background:var(--gold)}
/* ===== Bannière cookies : SUPPRIMÉE (13/08/2026, route « exemption CNIL »,
cf. index.php / matomo.js — Matomo anonyme sans consentement). ===== */
/* ===== Replay (caché par défaut, visible sur première page) ===== */
.replay{
position:fixed;bottom:36px;right:36px;
background:transparent;border:1px solid rgba(246,241,234,.25);
color:var(--cream-dim);
font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
padding:12px 18px;border-radius:50px;
cursor:pointer;
display:inline-flex;align-items:center;gap:10px;
opacity:0;animation:fade 1.2s 8.2s forwards;
transition:all .35s, opacity .4s;
z-index:21;
}
.replay:hover{
border-color:var(--cream);color:var(--cream);
background:rgba(246,241,234,.05);
}
.replay svg{width:11px;height:11px}
.replay.hidden{opacity:0;pointer-events:none;animation:none}
/* ===== Lien d'évitement =====
Hors écran tant qu'il n'a pas le focus, il descend dans la page dès qu'on
tabule depuis la barre d'adresse. z-index 70 : au-dessus du menu (30/42) ET
du voile de transition (60), sinon il serait invisible au moment précis où
quelqu'un arrive sur la page. Registre visuel du site (or poli, capitales
espacées) mais SANS le reflet balayé des boutons : il ne s'affiche qu'une
fraction de seconde, une animation n'y serait que du bruit. */
.skip-link{
position:fixed;
top:0;left:50%;
z-index:70;
transform:translate(-50%,-120%);
padding:12px 22px;
border-radius:0 0 12px 12px;
background:var(--gold-grad);
color:var(--ink);
font-family:var(--sans);
font-size:11px;
letter-spacing:.18em;
text-transform:uppercase;
text-decoration:none;
box-shadow:var(--gold-sheen), 0 10px 28px -10px rgba(0,0,0,.5);
transition:transform .22s cubic-bezier(.2,.8,.2,1);
}
.skip-link:focus-visible{transform:translate(-50%,0)}
/* La cible ne porte tabindex="-1" que pour recevoir le focus au clic sur le
lien : pas d'anneau à cet instant (le geste est délibéré), l'élément suivant
reprend l'indicateur normal. */
#contenu:focus{outline:none}
/* ===== Menu de navigation =====
Barre fixe au-dessus de tout (z>canvas). La couleur du texte s'adapte à
la section affichée via la classe .on-light (posée par setActivePage).
Le logo n'apparaît que hors du hero (le wordmark géant y est déjà).
Apparition en fondu après le reveal initial, comme les dots. */
.site-menu{
position:fixed;
top:0;left:0;right:0;
z-index:30;
display:flex;
align-items:center;
justify-content:space-between;
padding:16px clamp(24px, 3vw, 44px) 0;
pointer-events:none;
color:var(--cream);
transition:color .25s; /* rapide : la couleur suit le fond au moment du glissement, sans traîner en gris */
opacity:0;
/* Apparaît PENDANT la formation du logo, assez tôt (3,2 s — avancé à la
demande d'Allan, anciennement 4,2 s). */
animation:fade 1s 3.2s forwards;
}
.site-menu.on-light{color:var(--ink)}
/* Scrim de tête (pages animées) : le menu flotte sans barre, mais un titre ou
du texte de section peut monter dans sa zone. Un dégradé « couleur de la
section → transparent » le back discrètement — invisible sur le fond nu
(même couleur), visible seulement là où du contenu passe dessous, sans
réintroduire de barre pleine. Le ton suit .on-light comme la couleur du
texte. z-index:-1 : derrière les liens du menu, mais au-dessus du canvas
(le menu est un contexte d'empilement isolé). Exclut .site-menu--page (qui
a son propre scrim au scroll). Absent sur le hero (wordmark immaculé). */
.site-menu:not(.site-menu--page)::before{
content:"";
position:absolute;
inset:0 0 auto 0;
/* RESSERRÉ sur la bande du menu (cf. MENU_BAND app.js) : opaque sur la
rangée des boutons (0→62px) puis court fondu (62→96px). Pas de grande
nappe qui délaverait un titre simplement PROCHE du menu. */
height:96px;
z-index:-1;
pointer-events:none;
background:linear-gradient(to bottom, rgba(24,53,66,1) 0%, rgba(24,53,66,1) 64%, rgba(24,53,66,0) 100%);
/* Masqué par défaut : n'apparaît (en fondu) que quand app.js pose
.needs-scrim, c.-à-d. quand du contenu entre dans la bande du menu. */
opacity:0;
transition:opacity .3s ease, background .35s ease;
}
.site-menu.needs-scrim:not(.site-menu--page)::before{opacity:1}
.site-menu.on-light:not(.site-menu--page)::before{
background:linear-gradient(to bottom, rgba(246,241,234,1) 0%, rgba(246,241,234,1) 64%, rgba(246,241,234,0) 100%);
}
/* Hero : aucun scrim (wordmark immaculé). content:none retire le pseudo-
élément net, sans transition ; body[data-home] force la priorité sur la
règle de base (spécificité supérieure). */
body[data-home] .site-menu.on-hero::before{content:none}
/* Overlay mobile ouvert : la barre passe AU-DESSUS de l'overlay (z-index
des enfants local au contexte d'empilement de .site-menu) et repasse en
crème quelle que soit la section derrière. */
.site-menu.menu-open{z-index:42;color:var(--cream)}
/* Les enfants ne redeviennent cliquables qu'une fois le menu visible
(classe .ready posée par JS) : pas de liens invisibles cliquables. */
.site-menu.ready .menu-brand,
.site-menu.ready .menu-list,
.site-menu.ready .menu-burger{pointer-events:auto}
.menu-brand{
/* Le VRAI logo (même fichier que le wordmark du hero), peint en
currentColor via un masque : il suit la couleur adaptative du menu
frame par frame, exactement comme le texte qu'il remplace. Le texte
« Syneloria » reste dans le HTML (accessibilité, SEO, copie) mais
n'est plus peint (font-size:0 — surtout PAS color:transparent, qui
rendrait currentColor, donc le fond masqué, transparent aussi). */
display:inline-block;
width:125px; /* ratio du SVG : 573×69 ≈ 8,3:1 → 125×15 */
height:15px;
font-size:0;
/* color explicite : sans elle, le bleu UA par défaut des gagnerait
sur l'héritage → logo bleu (currentColor en dépend). */
color:inherit;
background-color:currentColor;
-webkit-mask:url('Images/logo-syneloria.svg') no-repeat left center / contain;
mask:url('Images/logo-syneloria.svg') no-repeat left center / contain;
text-decoration:none;
transition:opacity .5s;
}
/* Sur le hero, le wordmark en particules tient lieu de logo */
.site-menu.on-hero .menu-brand{opacity:0;pointer-events:none !important}
.menu-list{
list-style:none;
display:flex;
align-items:center;
gap:clamp(18px, 2vw, 30px);
}
.menu-link{
font-family:var(--sans);
font-size:11px;
letter-spacing:.18em;
text-transform:uppercase;
text-decoration:none;
color:currentColor;
opacity:.72;
background:none;border:none;cursor:pointer;
padding:6px 0;
display:inline-flex;align-items:center;gap:7px;
/* PAS de transition sur color : le lien hérite déjà la couleur animée du
header (.site-menu transitionne color) ; une transition enfant qui course
celle du parent finit parfois FIGÉE sur une valeur intermédiaire (gris)
quand .on-light bascule plusieurs fois pendant un morph (bug Chrome). */
transition:opacity .3s;
}
.menu-link:hover,
.menu-item:focus-within .menu-trigger{opacity:1;color:var(--gold)}
/* Filet fin qui se déploie sous le lien survolé (hors pastille Contact).
currentColor SANS transition de couleur (cf. piège Chrome ci-dessus) :
seul le transform est animé, la couleur suit celle du lien telle quelle. */
.menu-list .menu-link:not(.menu-link--cta){position:relative}
.menu-list .menu-link:not(.menu-link--cta)::after{
content:"";
position:absolute;left:0;right:0;bottom:0;height:1px;
background:currentColor;opacity:.55;
transform:scaleX(0);transform-origin:left center;
transition:transform .35s ease;
}
/* Déclencheurs de sous-menu : le filet reste déployé tant que le panneau est
ouvert (survol de l'item entier ou focus), comme la rotation du chevron. */
.menu-list .menu-link:not(.menu-link--cta):hover::after,
.menu-list:not(:focus-within) .menu-item:hover .menu-trigger::after,
.menu-list .menu-item:focus-within .menu-trigger::after,
.menu-list .menu-link.is-current:not(.menu-link--cta)::after{transform:scaleX(1)}
/* Contact : pastille dorée pleine pour le faire ressortir. Le texte reste
encre foncée quelle que soit la section (ne suit pas currentColor). */
.menu-link--cta{
opacity:1;
color:var(--ink-2);
background:var(--gold-grad);
border-radius:999px;
padding:9px 22px;
box-shadow:var(--gold-sheen);
transition:background .35s, box-shadow .35s, transform .35s cubic-bezier(.2,.8,.2,1);
}
.menu-link--cta.is-current{
box-shadow:0 0 0 1px rgba(24,53,66,.35) inset, var(--gold-sheen);
}
.menu-link--cta:hover{
opacity:1;
color:var(--ink-2);
background:var(--gold-grad-hover);
box-shadow:0 12px 26px -12px rgba(201,168,106,.6), var(--gold-sheen);
transform:translateY(-1px);
}
.menu-trigger svg{width:9px;height:9px;flex:0 0 auto;transition:transform .3s}
/* Survol : ouvre le chevron SEULEMENT si aucun déclencheur n'est en focus
(sinon un clic sur l'un + survol de l'autre = deux ouverts, cf. .menu-sub). */
.menu-list:not(:focus-within) .menu-item:hover .menu-trigger svg,
.menu-item:focus-within .menu-trigger svg{transform:rotate(180deg)}
/* Panneau déroulant (crème, lisible sur sections claires ET sombres).
Le padding-top fait pont entre le déclencheur et le panneau pour que le
hover ne se coupe pas en traversant l'interstice. */
.menu-item{position:relative}
.menu-sub{
position:absolute;
top:100%;left:50%;
transform:translateX(-50%);
padding-top:16px;
opacity:0;visibility:hidden;
transition:opacity .35s, visibility .35s;
}
/* Ouverture au SURVOL uniquement si rien n'est en focus dans le menu ; sinon
(un déclencheur cliqué → focus) seul le sous-menu focalisé reste ouvert, et
survoler l'autre déclencheur ne l'ouvre PAS → jamais deux ouverts. */
.menu-list:not(:focus-within) .menu-item:hover .menu-sub,
.menu-item:focus-within .menu-sub{opacity:1;visibility:visible}
.menu-sub-inner{
min-width:240px;
background:var(--cream);
border:1px solid rgba(24,53,66,.08);
border-radius:14px;
padding:10px;
box-shadow:0 26px 60px -22px rgba(14,34,48,.4);
display:flex;flex-direction:column;
}
.menu-sub-inner a{
display:flex;
align-items:center;
gap:12px;
font-family:var(--serif);
font-style:normal;
font-size:15.5px;
color:var(--ink);
text-decoration:none;
padding:10px 16px;
border-radius:9px;
white-space:nowrap;
transition:background .3s;
}
.menu-sub-inner a:hover{background:rgba(201,168,106,.16)}
.menu-sub-inner a.is-current{background:rgba(201,168,106,.16)}
/* Icône Lucide dorée devant chaque entrée de sous-menu (boîte fixe → les
libellés restent alignés quelle que soit la largeur du glyphe). */
.menu-ico{
width:19px;height:19px;
flex:0 0 auto;
color:currentColor;
opacity:.85;
transition:opacity .3s;
}
.menu-sub-inner a:hover .menu-ico{opacity:1}
/* Burger (mobile) : deux barres → croix */
.menu-burger{
display:none;
background:none;border:none;cursor:pointer;
width:40px;height:34px;
position:relative;
color:currentColor;
z-index:41;
}
.menu-burger span{
position:absolute;left:8px;right:8px;height:1.5px;
background:currentColor;
transition:transform .4s cubic-bezier(.2,.8,.2,1), top .4s cubic-bezier(.2,.8,.2,1);
}
.menu-burger span:nth-child(1){top:13px}
.menu-burger span:nth-child(2){top:21px}
.menu-burger.open{color:var(--cream)}
.menu-burger.open span:nth-child(1){top:17px;transform:rotate(45deg)}
.menu-burger.open span:nth-child(2){top:17px;transform:rotate(-45deg)}
/* Overlay plein écran (mobile) */
.menu-overlay{
position:fixed;inset:0;
z-index:40;
background:
radial-gradient(ellipse at 50% 18%, rgba(201,168,106,.09) 0%, transparent 55%),
var(--ink-2);
display:flex;
/* safe center : centré si le menu tient, aligné en HAUT s'il déborde —
sinon align-items:center rogne le haut (« Accueil » collé/inatteignable
au-dessus du bord, padding avalé) sur les écrans bas. */
align-items:safe center;
justify-content:center;
overflow-y:auto;
opacity:0;visibility:hidden;
/* visibility en 0s RETARDÉE de la durée du fondu : à la fermeture elle bascule
à la toute fin (le fondu reste visible), à l'ouverture elle bascule
IMMÉDIATEMENT — c'est ce dernier point qui compte, sinon les liens de
l'overlay ne sont pas encore focalisables à l'instant où le JS veut y
poser le focus, et le piège de focus s'ouvre sur du vide (mesuré). */
transition:opacity .45s, visibility 0s .45s;
}
.menu-overlay.open{opacity:1;visibility:visible;transition:opacity .45s, visibility 0s}
.menu-overlay nav{
display:flex;flex-direction:column;
align-items:center;
/* gap:0 → tout l'espacement est porté par les paddings/margins des rangées,
sinon il s'additionne au gap et le rythme devient impossible à raisonner. */
gap:0;
/* Padding vertical symétrique (le nav est centré : haut == bas). 60 px suffit
à dégager le burger en haut, et à laisser le bouton Contact au-dessus de la
barre .page-nav des pages à sections. */
padding:60px 24px;
text-align:center;
}
.menu-overlay a{
font-family:var(--serif);
font-style:italic;
font-size:23px;
color:var(--cream);
text-decoration:none;
padding:9px 12px;
transition:color .3s;
}
.menu-overlay a:hover{color:var(--gold)}
.menu-overlay a.is-current{position:relative}
.menu-overlay a.is-current::before{
content:"";
position:absolute;left:0;top:50%;transform:translateY(-50%);
width:3px;height:3px;border-radius:50%;
background:var(--gold);
}
.menu-overlay .menu-group{
margin-top:26px;
margin-bottom:10px;
font-family:var(--sans);
font-size:10px;
letter-spacing:.26em;
text-transform:uppercase;
color:var(--gold);
}
/* Sous-entrées : SANS icône sur mobile. Chaque rangée étant centrée
individuellement, une icône en tête se retrouve à un x différent selon la
longueur du libellé (jusqu'à 82 px d'écart mesurés) — l'œil cherche une
colonne qui n'existe pas. On garde donc le seul axe central, et la
hiérarchie passe par le romain + la taille + la couleur.
Les icônes restent servies au dropdown desktop (même source PHP). */
.menu-overlay a.sub{
display:inline-flex;
align-items:center;
justify-content:center;
font-style:normal;
font-size:16.5px;
color:var(--cream-dim);
padding:7px 12px;
}
.menu-overlay a.sub .menu-ico{display:none}
/* Retour au niveau principal (Blog) après une sous-liste : sans ça, 2 px
séparent « Simulateur d'aides » de « Blog » et Blog/Contact semblent
appartenir au groupe « Outils ». */
.menu-overlay a.sub + a:not(.sub){margin-top:26px}
/* Contact : même bouton doré que sur la barre desktop, pour redonner au menu
un point d'arrivée. */
.menu-overlay a.cta{
margin-top:16px;
font-family:var(--sans);
font-style:normal;
font-size:12px;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--ink-2);
background:var(--gold-grad);
border-radius:999px;
padding:13px 30px;
box-shadow:var(--gold-sheen);
transition:background .35s, box-shadow .35s;
}
.menu-overlay a.cta:hover{
color:var(--ink-2);
background:var(--gold-grad-hover);
box-shadow:0 12px 26px -12px rgba(201,168,106,.6), var(--gold-sheen);
}
@media (max-width:1139px){
.menu-list{display:none}
.menu-burger{display:block}
.site-menu{padding-top:10px}
/* Menu réduit au seul burger : le logo de gauche et le dégradé de tête
(needs-scrim, pleine largeur sous la rangée des boutons) n'ont plus
d'objet — il n'y a plus de rangée de boutons à protéger. */
.menu-brand{display:none}
.site-menu:not(.site-menu--page)::before{content:none}
}
@media (min-width:1140px){
.menu-overlay{display:none}
}
@media (max-width:700px){
.tagline{margin-top:32px;font-size:15px;padding:0 12px}
.scroll-hint{bottom:24px}
.replay{bottom:20px;right:20px;padding:10px 14px;font-size:9px}
/* Hero « Syneloria » plus imposant sur mobile (plancher relevé, échelle vw
dédiée — le desktop garde --title-display inchangé). */
.page--dark .particle-title{font-size:clamp(72px, 21vw, 96px)}
/* Tailles de titres : plus de surcharge mobile — l'échelle --title-* est
responsive (un seul clamp mobile→desktop). On ne garde ici que les
marges spécifiques au mobile. */
.page--light{padding:60px 24px}
.page--light .particle-title{margin-bottom:40px}
.page--statement{padding:60px 24px}
/* Titres à longues lignes : taille bornée par la largeur d'écran (sinon
ils débordent). La densité accrue suffit à les rendre lisibles. */
.page--statement .particle-title{margin-bottom:36px}
/* gap 0 : boutons de 24px → pas de 24px (ancien rythme mobile ≈ 22px) */
.page-nav{right:18px;gap:0}
.hero-cta{margin-top:36px;padding:13px 26px;font-size:10px}
/* Services : cartes plus étroites, bandeau image réduit */
.service-card{flex:0 0 300px;border-radius:16px}
.service-media{height:96px}
.service-card-inner{padding:18px 20px 18px}
.service-card-title{font-size:21px;margin-bottom:12px}
.service-card-body{font-size:13px;margin-bottom:18px}
/* Carte étroite (300px − 40 de padding = 260 utiles) : on resserre encore
la chasse pour garder les quatre libellés sur une ligne chacun. */
.service-card-links{gap:10px}
.service-card-links .service-card-link{letter-spacing:.04em}
.card-num{font-size:26px;top:12px;right:16px}
/* Engagements : rangée scrollable horizontale — on redonne un cadre
aux cartes, indispensable pour lire le geste de balayage. */
.page--edge{padding:48px 0;gap:28px}
.edge-grid{
display:flex;
overflow-x:auto;
scroll-snap-type:x mandatory;
scroll-padding-left:24px;
-webkit-overflow-scrolling:touch;
gap:16px;
/* flex-shrink:0 : même protection que services/équipe — la colonne flex
de la section ne doit pas écraser la rangée sur écran bas (texte coupé) ;
à pleine hauteur la section devient défilable. */
flex-shrink:0;
padding:8px 24px 14px;
}
.edge-card{
flex:0 0 262px;
scroll-snap-align:start;
background:linear-gradient(165deg, rgba(246,241,234,.05), rgba(246,241,234,.015));
border:1px solid rgba(246,241,234,.12);
border-radius:16px;
padding:22px 20px 20px;
}
.edge-card:hover{border-color:rgba(201,168,106,.4)}
.edge-card p{font-size:13px}
/* À propos : colonnes empilées ; texte d'abord, carrousel doré compact ensuite */
.about-cols{grid-template-columns:1fr;gap:22px}
.about-media{order:2}
.about-media .media{min-height:190px}
.about-lead{font-size:16px}
.about-more{margin-top:14px;font-size:14px}
.about-slide{padding:22px 22px}
.about-slide-num{font-size:26px;margin-bottom:10px}
.about-slide h3{font-size:21px;margin-bottom:8px}
.about-slide p{font-size:14px}
.about-dots{left:22px;bottom:20px}
/* Constat : manifeste compact */
.manifesto-lead{font-size:16px}
.manifesto-rule{margin:22px auto}
.manifesto-note{font-size:14px}
/* Financements : colonnes empilées, plus compact, image masquée.
margin-bottom 34px (au lieu de 18) : le titre 3 lignes touchait
presque le paragraphe (relevé par Allan sur iPhone). */
.page--funding{padding:56px 24px}
.page--light.page--funding .particle-title{margin-bottom:34px}
.split-cols{grid-template-columns:1fr;gap:18px;max-width:760px}
.split-text{gap:12px}
.split-lead{font-size:14px}
.split-text .callout{padding:13px 16px;font-size:13px}
/* Références */
.page--trust{padding:56px 20px}
.page--trust .particle-title{margin:0 0 10px}
.trust-lead{margin-bottom:30px}
.trust-quote{font-size:15px;padding:30px 24px 26px;margin-top:6px}
/* Guillemets inline : ils suivent la police (em), aucune surcharge nécessaire. */
.trust-quote cite{font-size:9.5px;margin-top:14px}
.trust-marquee{margin-top:32px}
.trust-track{gap:34px;padding-left:34px;animation-duration:34s}
.trust-logo{gap:9px}
.trust-logo-mark{width:32px;height:32px;font-size:12px}
.trust-logo-name{font-size:10px}
.trust-logo-sector{font-size:12px}
/* min-width:0 : .trust-stats est un ITEM de la colonne flex .page--trust →
sans ça il refuse de rétrécir sous sa largeur min-content et déborde du
couloir de la pilule. flex-wrap : si ça ne tient pas, la 3ᵉ stat passe
dessous (filets latéraux retirés, sans sens une fois replié). */
.trust-stats{margin-top:26px;min-width:0;flex-wrap:wrap;row-gap:12px}
.trust-stat{padding:2px 18px;border-left:none}
.trust-stat b{font-size:20px}
.trust-stat span{font-size:8px;letter-spacing:.16em}
/* Équipe : rangée scrollable horizontale — cartes recadrées pour le swipe */
.page--team{padding:48px 0;gap:24px}
.page--team .particle-title{margin-bottom:18px}
.team-lead{font-size:14px}
.team-grid{
display:flex;
overflow-x:auto;
scroll-snap-type:x mandatory;
scroll-padding-left:24px;
-webkit-overflow-scrolling:touch;
gap:16px;
/* flex-shrink:0 : la colonne flex de la section ne doit pas comprimer la
rangée sur écran bas (cartes écrasées → texte coupé). À pleine hauteur,
la section devient défilable (safe center). Padding bas élargi : la
rangée overflow-x:auto rogne sinon l'ombre portée des cartes. */
flex-shrink:0;
/* 46px : l'ombre des cartes s'étend 42px sous elles (18px offset + 44px
blur − 20px spread) — mesuré, sinon elle est rognée de quelques px. */
padding:16px 24px 46px;
}
.team-card{
flex:0 0 250px;
scroll-snap-align:start;
border-radius:16px;
}
.team-portrait{height:130px}
.team-body{padding:18px 18px 18px}
.team-card h3{font-size:20px}
.team-body > p:last-child{font-size:13.5px}
.team-note{font-size:13px}
/* CTA finale */
.page--cta{padding:48px 20px 28px}
.cta-text{font-size:14px;margin-bottom:32px}
/* Respiration accrue avant la bande sombre du pied de page */
.cta-body{padding-bottom:34px}
.site-foot{margin:0 -20px -28px;padding:30px 20px 28px}
.foot-cols{flex-direction:column;align-items:center;text-align:center;gap:24px}
.foot-col--brand{max-width:none}
.foot-brand{font-size:20px}
.foot-label{margin-bottom:10px}
.foot-fineprint{margin-top:24px;font-size:9px;letter-spacing:.08em}
}
/* Écrans peu hauts (laptops 768-840px) : resserre les pages denses */
@media (min-width:701px) and (max-height:840px){
.page--edge{gap:26px}
.edge-card{padding:20px 22px 18px}
.edge-card p{font-size:13px}
.edge-card h3{font-size:17px;margin-bottom:6px}
.page--team{gap:22px}
.page--team .particle-title{margin-bottom:16px}
.team-portrait{height:clamp(130px, 15vh, 160px)}
.team-body{padding:18px 22px 20px}
.team-body > p:last-child{font-size:14px}
.trust-quote{font-size:clamp(16px, 1.6vw, 20px)}
.trust-marquee{margin-top:34px}
.trust-stats{margin-top:30px}
/* À propos : lead et piliers resserrés */
.about-lead{font-size:17px}
.about-more{margin-top:16px;font-size:14px}
.about-media .media{min-height:260px}
/* Services : bandeau image et corps réduits */
.page--services{gap:28px;padding:48px 0}
.service-media{height:clamp(84px, 11vh, 120px)}
.service-card-inner{padding:20px 24px 20px}
.service-card-title{font-size:22px;margin-bottom:12px}
.service-card-body{font-size:13.5px;margin-bottom:18px}
/* Financements : resserrement vertical */
.split-text{gap:24px}
/* Formats (formations, section sur-mesure) : titre + copie + 4 cartes +
note doivent tenir sans scroll interne sur les laptops peu hauts
(mesuré : 768px de contenu pour 720px de viewport sans ces règles).
Scopé au data-slug pour ne pas toucher le rythme des autres sections.
⚠️ Spécificité : ce bloc est AVANT les règles de base (.sec
.particle-title ligne ~2046, .fmt-* ligne ~2130) — à spécificité égale
elles gagneraient (piège documenté §README). D'où le préfixe
[data-slug="sur-mesure"] sur CHAQUE règle. */
.sec[data-slug="sur-mesure"] .particle-title{margin-bottom:28px}
[data-slug="sur-mesure"] .sec-copy{font-size:15px}
[data-slug="sur-mesure"] .duo-note{margin-top:16px}
/* Conférences, section sujets (copie + duo de stats + copie) : mesurée à
747px de contenu pour 720px de viewport sans ces règles. Mêmes
précautions de spécificité que ci-dessus. */
.sec[data-slug="sujets"] .particle-title{margin-bottom:28px}
[data-slug="sujets"] .sec-copy{font-size:15px}
[data-slug="sujets"] .stat-duo{margin-top:18px}
[data-slug="sujets"] .stat-duo-src{margin-top:8px}
[data-slug="sujets"] .sec-copy--after{margin-top:18px}
/* Automatisations, section métiers (copie + onglets métiers + outil
gratuit + bouton) : resserrage pour tenir dans 100vh sur laptops peu
hauts. Mêmes précautions de spécificité que ci-dessus. */
.sec[data-slug="metiers"] .particle-title{margin-bottom:28px}
[data-slug="metiers"] .sec-copy{font-size:15px}
.sec[data-slug="metiers"] .job-tabs-nav{margin-top:16px}
.sec[data-slug="metiers"] .job-panels{margin-top:14px}
.sec[data-slug="metiers"] .gain-list.job-ex,
.sec[data-slug="metiers"] .job-msg{padding:2px 22px}
.sec[data-slug="metiers"] .gain-list.job-ex li{padding:8px 0 8px 22px;font-size:14px;line-height:1.45}
.sec[data-slug="metiers"] .gain-list.job-ex li::before{top:calc(8px + .55em)}
.sec[data-slug="metiers"] .job-msg{padding:18px 22px}
[data-slug="metiers"] .sec-copy--after{margin-top:16px}
[data-slug="metiers"] .fmt-cta{margin-top:14px}
[data-slug="sur-mesure"] .fmt-grid{margin-top:22px}
[data-slug="sur-mesure"] .fmt-card{padding:18px 18px 16px}
[data-slug="sur-mesure"] .fmt-days{margin-bottom:8px}
[data-slug="sur-mesure"] .fmt-days b{font-size:30px}
[data-slug="sur-mesure"] .fmt-card h3{font-size:16.5px;margin-bottom:6px}
[data-slug="sur-mesure"] .fmt-desc{font-size:13px}
}
/* Grands écrans : les 4 cartes services tiennent en entier → grille fixe,
plus de défilement latéral inutile. En dessous de 1440px on garde la
rangée scrollable (sinon les cartes deviennent trop étroites et la plus
longue déborderait en hauteur). */
@media (min-width:1440px){
.services-cards{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:24px;
max-width:1480px;
margin:0 auto;
padding:14px 24px 24px;
overflow:visible;
scroll-snap-type:none;
}
.service-card{flex:none}
}
/* Écrans peu hauts + menu desktop : PLANCHER DE DÉGAGEMENT des sections
denses. Quand leur contenu déborde, safe center les ancre en haut et le
titre venait REPOSER dans la bande du menu (76px) → scrim affiché dès
l'arrivée, sans scroll (remonté par Allan). Avec un padding-top de 96px
(fin de fondu du scrim), le premier texte démarre sous la zone du menu :
le scrim ne s'affiche plus qu'en cas de vrai scroll interne. Scopé aux
largeurs à menu desktop (≥1140px — en dessous, burger seul : ni scrim,
ni collision) et au seuil « écrans bas » déjà en usage (≤840px).
⚠️ Ce bloc doit rester APRÈS les resserrages « écrans peu hauts »
ci-dessus : .page--services{padding:48px 0} y écraserait sinon le
plancher (même spécificité, l'ordre tranche). */
@media (min-width:1140px) and (max-height:840px){
.page--services, .page--edge, .page--trust,
.page--team, .page--funding, .page--cta{padding-top:96px}
}
@media (prefers-reduced-motion: reduce){
*{animation-duration:.01s !important;animation-delay:0s !important}
.pages{transition:none}
/* Carrousel figé : on affiche les 4 volets empilés en liste dans la carte. */
.about-media .media{min-height:0;height:auto}
.about-cycle{position:static;display:flex;flex-direction:column;gap:22px;padding:clamp(30px,3vw,44px)}
.about-slide{position:static;opacity:1;padding:0;transform:none;animation:none}
.about-slide-num{margin-bottom:6px}
.about-dots{display:none}
}
/* ===========================================================================
COMPOSANTS DES PAGES FULL-PAGE GÉNÉRIQUES (formations…) — sections .sec
réutilisant .page--statement (sombre) et .page--light (clair).
=========================================================================== */
/* Titre : marge normalisée sous le titre pour ces sections de contenu */
.sec .particle-title{margin-bottom:38px}
.sec[data-slug="faq"] .particle-title{margin-bottom:calc(.62em + 15px)}
/* Copie de lecture : hérite la couleur de sa section (crème sur sombre,
encre sur clair), centrée comme le manifeste de l'accueil. */
.sec-copy{
max-width:760px;
margin:0 auto;
font-family:var(--serif);
font-size:clamp(16px, 1.4vw, 19px);
line-height:1.65;
text-align:center;
opacity:.92;
}
.sec-copy p{margin-bottom:.95em}
.sec-copy p:last-child{margin-bottom:0}
.sec-copy em{font-style:normal;color:var(--gold)}
.sec-copy strong{font-weight:500}
.sec-cta{margin-top:36px;text-align:center}
/* Statistique sourcée (section niveaux) : bloc compact — le chiffre-clé doré
en grand porte l'info, légende courte à côté, source discrète en dessous.
Traitement horizontal (au lieu d'un paragraphe centré qui s'étalait sur
3-4 lignes). Emplacement volontairement isolé pour une édition facile
(cf. commentaire dans formations.php). */
.stat-line{
display:flex;
align-items:center;
justify-content:center;
gap:20px;
max-width:560px;
margin:22px auto 0;
}
.stat-fig{
flex:none;
font-family:var(--serif);
font-weight:500;
font-size:clamp(42px, 4.6vw, 58px);
line-height:.95;
letter-spacing:-.01em;
color:var(--gold);
}
.stat-cap{
max-width:300px;
font-family:var(--serif);
font-size:clamp(14px, 1.15vw, 16px);
line-height:1.4;
text-align:left;
color:var(--ink-dim);
}
.stat-src{
display:block;
margin-top:5px;
font-family:var(--sans);
font-size:11px;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--ink-dim);
opacity:.65;
}
a.stat-src{
width:fit-content;
text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:3px;
transition:opacity .3s;
}
a.stat-src:hover, a.stat-src:focus-visible{opacity:1}
/* Sur section sombre, la légende s'éclaircit (héritée pour d'éventuels
réemplois hors niveaux ; le chiffre reste doré). */
.page--statement .stat-cap,
.page--statement .stat-src{color:var(--cream-dim)}
/* Duo de cartes (Formations / Ateliers) — réutilise le style .edge-card */
.duo-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:20px;
max-width:880px;
margin:36px auto 0;
}
.duo-note{
max-width:720px;
margin:24px auto 0;
font-family:var(--serif);
font-style:italic;
font-size:14.5px;
line-height:1.6;
text-align:center;
color:var(--cream-dim);
}
/* Formats de formation (section sur-mesure, formations) : 4 cartes-durées —
le programme est toujours sur mesure, seule la durée s'ajuste. La carte
3 jours (format de référence) porte un liseré doré plus marqué + pastille
posée sur son bord haut. Les ATELIERS ont été retirés de cette section
(déplacés à terme vers Accompagnement IA, cf. README). */
.fmt-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:16px;
max-width:1060px;
margin:32px auto 0;
/* .page-inner est un flex column : sans min-width:0, l'enfant serait étiré
à son max-content au lieu de rester dans le viewport (même piège que
.duo-grid). */
min-width:0;
max-width:min(1060px, 100%);
}
.fmt-card{
position:relative;
display:flex;
flex-direction:column;
padding:22px 20px 20px;
border-radius:18px;
border:1px solid rgba(246,241,234,.09);
background:linear-gradient(158deg, rgba(246,241,234,.055) 0%, rgba(246,241,234,.012) 62%);
box-shadow:inset 0 1px 0 rgba(246,241,234,.05);
text-align:left;
transition:transform .5s cubic-bezier(.2,.8,.2,1), border-color .5s, background .5s, box-shadow .5s;
}
.fmt-card:hover{
transform:translateY(-5px);
border-color:rgba(201,168,106,.5);
background:linear-gradient(158deg, rgba(201,168,106,.10) 0%, rgba(246,241,234,.02) 62%);
box-shadow:0 28px 56px -30px rgba(0,0,0,.6);
}
.fmt-days{
display:flex;
align-items:baseline;
gap:7px;
margin-bottom:10px;
}
.fmt-days b{
font-family:var(--serif);
font-weight:500;
font-size:34px;
line-height:1;
color:var(--gold);
}
.fmt-days span{
font-family:var(--sans);
font-size:11px;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--cream-dim);
}
.fmt-card h3{
font-family:var(--serif);
font-style:italic;
font-weight:500;
font-size:17.5px;
color:var(--cream);
margin-bottom:8px;
}
.fmt-desc{
font-family:var(--serif);
font-size:13.5px;
line-height:1.5;
color:var(--cream-dim);
margin:0;
}
.fmt-card--ref{
border-color:rgba(201,168,106,.45);
background:linear-gradient(158deg, rgba(201,168,106,.10) 0%, rgba(246,241,234,.02) 62%);
}
.fmt-ref{
position:absolute;
top:-9px;
left:50%;
transform:translateX(-50%);
margin:0;
padding:3px 10px;
border-radius:999px;
border:1px solid rgba(201,168,106,.5);
background:var(--ink);
font-family:var(--sans);
font-size:9.5px;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--gold);
white-space:nowrap;
}
/* CTA vers l'accompagnement IA (sous la note « autres prestations ») :
marge resserrée par rapport au .sec-cta standard (36px) pour que la
section reste dans 100vh. */
.fmt-cta{margin-top:20px}
/* Gains par métier (section acquis, formations) : 4 mini-scénarios par
fonction en 2×2 — remplace l'ancienne liste de capacités génériques
(recalée par Allan). Icône dorée NUE (pas de disque cerclé : « fait
bouton », cf. cartes financements). Cartes à la ligne, jamais de
défilement latéral. */
.job-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:14px;
margin:30px auto 0;
min-width:0;
max-width:min(880px, 100%);
}
.job-card{
display:flex;
align-items:flex-start;
gap:14px;
text-align:left;
padding:18px 20px;
border-radius:16px;
border:1px solid rgba(246,241,234,.09);
background:linear-gradient(158deg, rgba(246,241,234,.055) 0%, rgba(246,241,234,.012) 62%);
box-shadow:inset 0 1px 0 rgba(246,241,234,.05);
}
.job-ico{
flex:none;
margin-top:2px;
color:var(--gold);
}
.job-ico svg{width:20px;height:20px}
.job-card h3{
font-family:var(--serif);
font-style:italic;
font-weight:500;
font-size:16.5px;
color:var(--cream);
margin-bottom:5px;
}
.job-card p{
font-family:var(--serif);
font-size:13.5px;
line-height:1.5;
color:var(--cream-dim);
margin:0;
}
/* Duo de statistiques sourcées (conférences, section sujets) : deux blocs
côte à côte, chaque POURCENTAGE AU-DESSUS de sa phrase et le tout centré
(demande d'Allan — la version chiffre-à-gauche déséquilibrait), source
commune centrée dessous (le composant .stat-line vient de formations). */
.stat-duo{
display:flex;
justify-content:center;
align-items:flex-start;
gap:clamp(28px, 4vw, 64px);
margin:26px auto 0;
}
.stat-duo .stat-line{
margin:0;
flex-direction:column;
align-items:center;
gap:6px;
max-width:280px;
}
.stat-duo .stat-cap{text-align:center}
/* Conférences (références) : la colonne centrale « Tous publics » était
comprimée par ses voisines aux longues légendes (mesuré : 238px contre
~440) et son intitulé cassait sur deux lignes — on lui garantit de quoi
tenir sur une ligne, les voisines cèdent un peu de largeur. */
[data-slug="references"] .trust-stat:nth-child(2){min-width:300px}
/* Sélecteur de métier (automatisations) : PASTILLES au-dessus d'une carte
(radios masquées + :checked, aucun JS — CSP, même esprit que
details/popover). Le métier choisi s'affiche dans la carte ; « Vigneron »
par défaut. La pastille « Autre métier » (bord pointillé) ouvre un renvoi
vers le Détecteur d'automatisations. NB : version « onglets soudés au
cadre » testée puis abandonnée (retour d'Allan). */
.job-tabs{position:relative;width:100%}
.job-tabs > input{
position:absolute;
width:1px;height:1px;
opacity:0;
pointer-events:none;
}
.job-tabs-nav{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px;
margin:24px auto 0;
}
.job-tabs-nav label{
padding:8px 18px;
border-radius:999px;
cursor:pointer;
font-family:var(--sans);
font-size:11px;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--cream-dim);
border:1px solid rgba(246,241,234,.18);
transition:color .4s, border-color .4s, background .4s;
}
.job-tabs-nav label.job-tab-other{border-style:dashed}
.job-tabs-nav label:hover{border-color:rgba(201,168,106,.5);color:var(--cream)}
#jt-vigneron:checked ~ .job-tabs-nav label[for="jt-vigneron"],
#jt-fleuriste:checked ~ .job-tabs-nav label[for="jt-fleuriste"],
#jt-sante:checked ~ .job-tabs-nav label[for="jt-sante"],
#jt-traiteur:checked ~ .job-tabs-nav label[for="jt-traiteur"],
#jt-autre:checked ~ .job-tabs-nav label[for="jt-autre"]{
color:var(--gold);
border-color:rgba(201,168,106,.65);
border-style:solid;
background:rgba(201,168,106,.1);
}
#jt-vigneron:focus-visible ~ .job-tabs-nav label[for="jt-vigneron"],
#jt-fleuriste:focus-visible ~ .job-tabs-nav label[for="jt-fleuriste"],
#jt-sante:focus-visible ~ .job-tabs-nav label[for="jt-sante"],
#jt-traiteur:focus-visible ~ .job-tabs-nav label[for="jt-traiteur"],
#jt-autre:focus-visible ~ .job-tabs-nav label[for="jt-autre"]{
outline:2px solid var(--gold);
outline-offset:2px;
}
/* Carte des exemples (liste) ET carte du renvoi « Autre métier » (message) :
même cadre. Les 5 panneaux sont EMPILÉS dans la même cellule de grille
(grid-area:1/1) et masqués par visibility, jamais par display:none. Deux
raisons : la hauteur du bloc vaut d'office celle du panneau le plus haut,
donc aucun sursaut au changement de pastille SANS min-height magique à
réajuster à chaque retouche de texte (l'ancien 198px n'aurait pas tenu les
exemples longs) ; et visibility sort bien les panneaux cachés de l'arbre
d'accessibilité et du Ctrl+F, ce que opacity seule ne ferait pas. */
.job-panels{
display:grid;
margin:18px auto 0;
max-width:764px;
}
.gain-list.job-ex,
.job-msg{
grid-area:1/1;
margin:0;
max-width:none;
visibility:hidden;
opacity:0;
transform:translateY(5px);
transition:opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
padding:6px 26px;
border-radius:18px;
border:1px solid rgba(246,241,234,.10);
background:linear-gradient(158deg, rgba(246,241,234,.05) 0%, rgba(246,241,234,.012) 62%);
box-shadow:inset 0 1px 0 rgba(246,241,234,.05);
}
.gain-list.job-ex li{
display:block;
position:relative;
padding:11px 0 11px 22px;
font-size:14.5px;
line-height:1.5;
color:var(--cream-dim);
text-align:left;
}
.gain-list.job-ex li strong{
color:var(--cream);
font-weight:500;
}
.gain-list.job-ex li::before{
content:"";
position:absolute;
left:2px;
top:calc(11px + .58em);
width:5px;
height:5px;
border-radius:50%;
background:var(--gold);
}
/* Ligne « Et d'autres encore… » : note discrète, sans puce, mais AVEC le même
filet de séparation que les exemples (demande d'Allan, 26/08/2026) — elle
ferme la liste au lieu de flotter dessous. Pas d'opacity de groupe ici : elle
éteindrait aussi le lien doré vers le Détecteur qu'elle porte. La discrétion
passe donc par la couleur seule. */
.gain-list.job-ex li.job-etc{
color:rgba(246,241,234,.42);
font-style:italic;
}
.gain-list.job-ex li.job-etc::before{background:transparent}
/* Panneau « Autre métier » : message centré + bouton Détecteur. */
.job-msg{
padding:24px 30px;
text-align:center;
}
.job-msg p{
max-width:460px;
margin:0 auto 20px;
font-family:var(--serif);
font-size:15px;
line-height:1.55;
color:var(--cream-dim);
}
/* Fondu croisé au changement de pastille (zéro JS, CSP) : seul le panneau élu
redevient visible, le cadre ne bouge pas d'un pixel puisque la grille garde
la hauteur du plus haut. */
#jt-vigneron:checked ~ .job-panels .job-ex--vigneron,
#jt-fleuriste:checked ~ .job-panels .job-ex--fleuriste,
#jt-sante:checked ~ .job-panels .job-ex--sante,
#jt-traiteur:checked ~ .job-panels .job-ex--traiteur,
#jt-autre:checked ~ .job-panels .job-ex--autre{
visibility:visible;
opacity:1;
transform:none;
transition:opacity .45s ease, transform .45s ease, visibility 0s;
}
.job-ex--autre{display:grid;place-items:center}
/* Variante 1 colonne de la topic-list (items longs dans une carte étroite). */
.topic-list.topic-list--1col{grid-template-columns:1fr;gap:9px}
/* Méthode (automatisations) : 3 étapes ORDONNÉES en cartes claires — ici les
numéros ont un sens (chaque étape conditionne la suivante), contrairement
aux cartes financements où ils avaient été retirés (ordre inexistant). */
.steps-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:16px;
margin:32px auto 0;
min-width:0;
max-width:min(960px, 100%);
}
/* Variante 4 étapes (Sites web) : les 4 étapes ORDONNÉES sur une seule rangée
(séquence 1→2→3→4 qui se lit d'un trait), pas un 3+1 orphelin. Rangée courte
→ la section se centre symétriquement dans son 100vh comme les autres (un
2×2 la rendait trop haute et heurtait le plancher de garde sous le menu).
Responsive : 2×2 en tablette (≤1023px), 1 colonne en mobile (media ≤700px). */
.steps-grid--quad{grid-template-columns:repeat(4, 1fr); max-width:min(1040px, 100%)}
.step-card{
text-align:left;
padding:22px 22px 20px;
border-radius:18px;
background:rgba(255,255,255,.72);
border:1px solid rgba(24,53,66,.07);
box-shadow:0 18px 44px -18px rgba(24,53,66,.12);
}
.step-num{
display:block;
font-family:var(--serif);
font-weight:500;
font-size:30px;
line-height:1;
color:var(--gold);
margin-bottom:10px;
}
.step-card h3{
font-family:var(--serif);
font-style:italic;
font-weight:500;
font-size:17.5px;
color:var(--ink);
margin-bottom:8px;
}
.step-card p{
font-family:var(--serif);
font-size:13.5px;
line-height:1.55;
color:var(--ink);
opacity:.78;
margin:0;
}
/* Tonalité sombre de la carte numérotée — même patron que .pledge-grid--dark
(le modificateur est porté par la GRILLE, les enfants suivent). Employée par
la section « portes » d'accompagnement-ia, la seule tonalité où l'or du
chiffre est lisible : 4,9:1 sur cette carte contre 1,97:1 sur la carte crème
(mesuré ; c'est le point 28 de l'audit du 20/08/2026). */
.steps-grid--dark .step-card{
background:linear-gradient(158deg, rgba(246,241,234,.055) 0%, rgba(246,241,234,.012) 62%);
border-color:rgba(246,241,234,.09);
box-shadow:inset 0 1px 0 rgba(246,241,234,.05);
}
.steps-grid--dark .step-card h3{color:var(--cream)}
.steps-grid--dark .step-card p{color:var(--cream-dim);opacity:1}
.story{
list-style:none;
position:relative;
z-index:1;
width:100%;
max-width:820px;
margin:26px auto 0;
padding-left:26px;
text-align:left;
}
.story::before{
content:"";
position:absolute;
left:4px;top:14px;bottom:14px;
width:1px;
background:linear-gradient(180deg, transparent, rgba(201,168,106,.5) 10%, rgba(201,168,106,.5) 90%, transparent);
}
.story li{
position:relative;
display:grid;
grid-template-columns:124px 1fr;
gap:0 24px;
align-items:baseline;
padding:12px 0;
}
.story li::before{
content:"";
position:absolute;
left:-26px;top:20px;
width:9px;height:9px;
border-radius:50%;
border:1px solid var(--gold);
background:var(--ink);
}
.story b{
font-family:var(--serif);
font-style:italic;
font-weight:500;
font-size:16.5px;
line-height:1.5;
color:var(--gold);
white-space:nowrap;
}
.story p{
font-family:var(--serif);
font-size:14.5px;
line-height:1.6;
color:var(--cream-dim);
margin:0;
}
.stat-duo-src{
margin:10px auto 0;
font-family:var(--sans);
font-size:11px;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--ink-dim);
opacity:.65;
text-align:center;
transition:opacity .3s;
}
.stat-duo-src a{
color:inherit;
text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:3px;
}
.stat-duo-src:has(a:hover),
.stat-duo-src:has(a:focus-visible){opacity:1}
/* Liste de sujets sensibles (conférences, carte claire) : puces-points
dorées discrètes, deux colonnes. */
.topic-list{
list-style:none;
display:grid;
grid-template-columns:1fr 1fr;
gap:8px 18px;
margin:2px 0 0;
padding:0;
text-align:left;
}
.topic-list li{
position:relative;
padding-left:15px;
font-family:var(--serif);
font-size:14px;
line-height:1.45;
color:var(--ink);
opacity:.82;
}
.topic-list li::before{
content:"";
position:absolute;
left:0;
top:.5em;
width:5px;
height:5px;
border-radius:50%;
background:var(--gold);
}
/* Photos de conférence (conférences, section références) : deux clichés
côte à côte, hauteur commune, coins arrondis du langage du site. */
.conf-photos{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:16px;
margin:28px auto 0;
min-width:0;
max-width:min(880px, 100%);
}
.conf-photos img{
width:100%;
height:clamp(170px, 24vh, 250px);
object-fit:cover;
border-radius:18px;
border:1px solid rgba(246,241,234,.12);
display:block;
}
/* Cartes d'avis clients (sections claires) */
.avis-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:20px;
max-width:1100px;
margin:0 auto;
}
.avis-card{
/* Colonne flex : la citation absorbe la hauteur libre → cite + bouton
TOUJOURS ancrés en bas de la carte, quelle que soit la longueur du texte. */
display:flex;
flex-direction:column;
background:rgba(255,255,255,.72);
border:1px solid rgba(24,53,66,.07);
border-radius:20px;
padding:26px 28px 22px;
box-shadow:0 18px 44px -18px rgba(24,53,66,.14);
text-align:left;
/* Même survol que les autres cartes claires (services, équipe) : légère
levée + liseré doré — langage unifié des cartes du site. */
transition:transform .45s cubic-bezier(.2,.8,.2,1), border-color .45s, box-shadow .45s;
}
.avis-card:hover{
transform:translateY(-5px);
border-color:rgba(201,168,106,.4);
box-shadow:0 26px 54px -22px rgba(24,53,66,.2);
}
/* En-tête de carte : étoiles puis signature (nom · provenance) À LA SUITE —
les détails entreprise/secteur vivent dans le popup. */
.avis-head{
display:flex;
align-items:baseline;
gap:14px;
margin-bottom:12px;
}
.avis-stars{color:var(--gold);letter-spacing:.16em;font-size:13px;flex:0 0 auto}
.avis-quote{
/* flex:1 : absorbe la hauteur libre pour pousser le bouton en bas */
flex:1 1 auto;
margin-bottom:16px;
font-family:var(--serif);
font-style:italic;
font-size:15.5px;
line-height:1.6;
color:var(--ink);
opacity:.9;
}
.avis-cite{
display:block;
min-height:30px;
font-family:var(--sans);
font-style:normal;
font-size:10px;
letter-spacing:.12em;
line-height:1.5;
text-transform:uppercase;
color:var(--gold);
}
/* « G » Google en guise de provenance de l'avis (remplace le texte) */
.avis-src{display:inline-block;vertical-align:-2px}
.avis-src svg{display:block;width:12px;height:12px}
/* Bouton d'ouverture du popup : ancré en bas (margin-top:auto), CENTRÉ,
œil Lucide en tête. Le « tion » final (.avis-more-tail) est masqué
sous 1024px → « presta » plutôt qu'un libellé sur 2 lignes. */
.avis-more{
display:flex;
justify-content:center;
align-items:center;
gap:8px;
margin-top:auto;
border:none;
border-top:1px solid rgba(24,53,66,.08);
padding:12px 0 0;
background:none;
cursor:pointer;
text-align:center;
font-family:var(--sans);
font-size:10.5px;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--ink-dim);
transition:color .25s;
}
.avis-more svg{width:15px;height:15px;flex:0 0 auto;color:var(--gold)}
.avis-more:hover{color:var(--gold)}
/* Popup natif (attribut popover, ouvert par popovertarget — zéro JS, CSP-safe).
Carte crème centrée en top layer, voile encre flouté, entrée en fondu+levée
(@starting-style) et sortie animée (display/overlay allow-discrete). */
.avis-pop{
/* Centrage EXPLICITE : le reset global (margin:0) écrase le margin:auto du
style UA des popovers — sans ces lignes le popup colle en haut à gauche. */
position:fixed;
inset:0;
margin:auto;
height:fit-content;
width:min(480px, calc(100vw - 48px));
padding:30px 34px 28px;
border:1px solid rgba(201,168,106,.5);
border-radius:20px;
background:linear-gradient(165deg, #fdfbf7 0%, var(--cream) 100%);
box-shadow:0 40px 90px -30px rgba(14,34,48,.55);
color:var(--ink);
opacity:0;
transform:translateY(16px) scale(.97);
transition:opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1),
overlay .35s allow-discrete, display .35s allow-discrete;
}
.avis-pop:popover-open{opacity:1;transform:none}
@starting-style{
.avis-pop:popover-open{opacity:0;transform:translateY(16px) scale(.97)}
}
.avis-pop::backdrop{
background:rgba(14,34,48,.45);
-webkit-backdrop-filter:blur(6px);
backdrop-filter:blur(6px);
opacity:0;
transition:opacity .35s ease, overlay .35s allow-discrete, display .35s allow-discrete;
}
.avis-pop:popover-open::backdrop{opacity:1}
@starting-style{
.avis-pop:popover-open::backdrop{opacity:0}
}
.avis-pop-kicker,
.step-card .step-kicker{
font-family:var(--sans);
font-size:10px;
letter-spacing:.3em;
text-transform:uppercase;
color:var(--gold);
margin-bottom:10px;
}
.step-card .step-kicker{color:#8d6a30; opacity:1}
.avis-pop-cite{
font-family:var(--serif);
font-style:italic;
font-weight:500;
font-size:17px;
color:var(--ink);
margin-bottom:12px;
}
.avis-pop-text{
font-family:var(--serif);
font-size:15px;
line-height:1.65;
color:var(--ink);
opacity:.85;
}
/* Croix de fermeture : le « + » tourné en × (même langage que la FAQ) */
.avis-pop-close{
position:absolute;
top:14px;right:14px;
width:28px;height:28px;
border-radius:50%;
border:1px solid rgba(201,168,106,.45);
background-color:rgba(201,168,106,.1);
background-image:
linear-gradient(currentColor, currentColor),
linear-gradient(currentColor, currentColor);
background-size:10px 1px, 1px 10px;
background-position:center;
background-repeat:no-repeat;
cursor:pointer;
color:var(--gold);
transform:rotate(45deg);
transition:background-color .3s, border-color .3s;
}
.avis-pop-close:hover{background-color:rgba(201,168,106,.22);border-color:rgba(201,168,106,.7)}
/* FAQ (sections sombres) — accordéon natif EXCLUSIF () :
ouvrir une réponse referme les autres → une seule ouverte à la fois, donc
jamais de débordement derrière le titre. Zéro JS (CSP-safe). Même surface
que .pledge-panel : une boîte, des rangées séparées par un filet. */
.faq{
/* width:100% : .page-inner (align-items:center) ne l'étire pas — sans ça le
bloc se dimensionne sur son contenu et CHANGE de largeur à l'ouverture
d'une réponse plus large que les questions. */
width:100%;
max-width:720px;
margin:0 auto;
text-align:left;
border-radius:20px;
overflow:hidden;
background:linear-gradient(158deg, rgba(246,241,234,.055) 0%, rgba(246,241,234,.012) 62%);
border:1px solid rgba(246,241,234,.09);
box-shadow:inset 0 1px 0 rgba(246,241,234,.05);
}
.faq details{position:relative;transition:background .4s}
.faq details + details{border-top:1px solid rgba(246,241,234,.10)}
.faq details[open]{background:rgba(201,168,106,.07)}
.faq details::before{
content:"";
position:absolute;
left:0;top:0;bottom:0;
width:2px;
background:var(--gold);
transform:scaleY(0);
transform-origin:50% 0;
transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.faq details[open]::before{transform:scaleY(1)}
.faq summary{
cursor:pointer;
list-style:none;
display:flex;
justify-content:space-between;
align-items:center;
gap:18px;
padding:18px 24px;
font-family:var(--serif);
font-size:clamp(15px, 1.25vw, 17.5px);
color:var(--cream);
transition:color .25s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold)}
.faq details[open] summary{color:var(--gold)}
/* Marqueur + → × : pastille discrète qui s'allume à l'ouverture. C'est un vrai
contrôle (le clic bascule la réponse) → l'affordance ronde est ici légitime.
Les deux barres sont DESSINÉES, pas un glyphe : centrées par construction à
n'importe quel angle de rotation (cf. README). */
.faq summary::after{
content:"";
flex:0 0 auto;
width:26px;height:26px;
border-radius:50%;
border:1px solid rgba(201,168,106,.4);
background-image:
linear-gradient(currentColor, currentColor),
linear-gradient(currentColor, currentColor);
background-size:9px 1px, 1px 9px;
background-position:center;
background-repeat:no-repeat;
color:var(--gold);
transition:transform .35s cubic-bezier(.2,.8,.2,1), background-color .35s, border-color .35s;
}
.faq details[open] summary::after{
transform:rotate(135deg);
background-color:rgba(201,168,106,.16);
border-color:rgba(201,168,106,.65);
}
.faq .faq-a{
padding:0 24px 20px;
font-family:var(--serif);
font-size:15px;
line-height:1.65;
color:var(--cream-dim);
}
/* Animation d'ouverture/fermeture : la hauteur du contenu du est
interpolée nativement (::details-content + interpolate-size) — dépliage
fluide dans les deux sens, la réponse arrive en fondu+levée. Navigateurs
plus anciens : bascule instantanée (dégradation propre), zéro JS. */
html{interpolate-size:allow-keywords}
.faq details::details-content{
display:block;
height:0;
overflow:clip;
transition:height .45s cubic-bezier(.2,.8,.2,1), content-visibility .45s allow-discrete;
}
.faq details[open]::details-content{height:auto}
.faq .faq-a{opacity:0;transform:translateY(-6px);transition:opacity .25s ease, transform .25s ease}
.faq details[open] .faq-a{
opacity:1;
transform:none;
transition:opacity .4s ease .12s, transform .4s cubic-bezier(.2,.8,.2,1) .12s;
}
/* Variante CLAIRE de la FAQ (sections crème — conférences, automatisations…).
Exactement la surface de .pledge-panel : voile blanc sur le crème, liseré
encre très discret, ombre portée basse. L'or vif (#C9A86A) manque de
contraste sur le crème → on prend l'or profond du dégradé --gold-text
(#b58f52) pour le texte et le marqueur, l'or vif restant aux fonds. */
.faq--light{
background:rgba(255,255,255,.72);
border-color:rgba(24,53,66,.07);
box-shadow:0 18px 44px -18px rgba(24,53,66,.12);
}
.faq--light details + details{border-top-color:rgba(24,53,66,.08)}
.faq--light details[open]{background:rgba(201,168,106,.10)}
.faq--light summary{color:var(--ink)}
.faq--light summary:hover,
.faq--light details[open] summary{color:#b58f52}
.faq--light summary::after{
border-color:rgba(181,143,82,.45);
color:#b58f52;
}
.faq--light details[open] summary::after{
background-color:rgba(201,168,106,.18);
border-color:rgba(181,143,82,.7);
}
.faq--light .faq-a{color:var(--ink-dim)}
@media (max-width:700px){
.faq summary{padding:15px 18px;gap:12px}
.faq summary::after{width:24px;height:24px}
.faq .faq-a{padding:0 18px 17px}
}
.credo{
width:100%;
max-width:780px;
margin:0 auto;
text-align:center;
}
.credo article + article{
position:relative;
margin-top:36px;
padding-top:36px;
}
.credo article + article::before{
content:"";
position:absolute;
top:0;left:50%;
transform:translateX(-50%);
width:190px;height:1px;
background:linear-gradient(90deg, transparent, rgba(201,168,106,.55), transparent);
}
.credo-lead{
font-family:var(--serif);
font-style:italic;
font-weight:500;
font-size:clamp(19px, 1.7vw, 23px);
line-height:1.38;
color:var(--ink);
margin:0 0 12px;
}
.credo-note{
font-family:var(--serif);
font-size:15.5px;
line-height:1.65;
color:var(--ink);
opacity:.75;
margin:0;
}
.credo em{font-style:normal;color:var(--gold)}
.pledge-grid{
list-style:none;
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:18px;
width:100%;
max-width:1040px;
margin:0 auto;
padding:0;
text-align:left;
}
.pledge-grid li{
display:flex;
flex-direction:column;
padding:24px 24px 22px;
border-radius:18px;
background:rgba(255,255,255,.72);
border:1px solid rgba(24,53,66,.07);
box-shadow:0 18px 44px -18px rgba(24,53,66,.12);
}
.pledge-ico{
display:flex;
align-items:center;
justify-content:center;
width:40px;height:40px;
margin-bottom:16px;
border-radius:50%;
border:1px solid rgba(201,168,106,.45);
background:rgba(201,168,106,.10);
color:var(--gold);
}
.pledge-ico svg{width:19px;height:19px}
.pledge-grid strong{
display:block;
font-family:var(--serif);
font-style:italic;
font-weight:500;
font-size:17px;
line-height:1.35;
color:var(--ink);
margin-bottom:7px;
}
.pledge-grid p{
margin:auto 0 0;
font-family:var(--serif);
font-size:14px;
line-height:1.55;
color:var(--ink);
opacity:.76;
}
@media (min-width:701px) and (max-width:1099px){
.pledge-grid{grid-template-columns:repeat(2, 1fr);max-width:700px}
}
.pledge-grid--dark li{
background:linear-gradient(158deg, rgba(246,241,234,.055) 0%, rgba(246,241,234,.012) 62%);
border-color:rgba(246,241,234,.09);
box-shadow:inset 0 1px 0 rgba(246,241,234,.05);
}
.pledge-grid--dark strong{color:var(--cream)}
.pledge-grid--dark p{color:var(--cream-dim);opacity:1}
.pledge-panel{
list-style:none;
width:100%;
margin:0;
padding:0;
border-radius:20px;
overflow:hidden;
background:rgba(255,255,255,.72);
border:1px solid rgba(24,53,66,.07);
box-shadow:0 18px 44px -18px rgba(24,53,66,.12);
}
.pledge-panel li{
position:relative;
display:grid;
grid-template-columns:auto 1fr;
gap:4px 16px;
align-items:start;
padding:20px 24px;
}
.pledge-panel li + li{border-top:1px solid rgba(24,53,66,.08)}
.pledge-panel .pledge-ico{
grid-row:span 2;
width:36px;height:36px;
margin:2px 0 0;
}
.pledge-panel .pledge-ico svg{width:18px;height:18px}
.pledge-panel strong{
display:block;
font-family:var(--serif);
font-style:italic;
font-weight:500;
font-size:17px;
line-height:1.35;
color:var(--ink);
margin:0;
}
.pledge-panel p{
grid-column:2;
margin:0;
font-family:var(--serif);
font-size:14.5px;
line-height:1.58;
color:var(--ink);
opacity:.76;
}
.pledge-panel--dark{
background:linear-gradient(158deg, rgba(246,241,234,.055) 0%, rgba(246,241,234,.012) 62%);
border-color:rgba(246,241,234,.09);
box-shadow:inset 0 1px 0 rgba(246,241,234,.05);
}
.pledge-panel--dark li + li{border-top-color:rgba(246,241,234,.10)}
.pledge-panel--dark strong{color:var(--cream)}
.pledge-panel--dark p{color:var(--cream-dim);opacity:1}
/* Échelle de niveaux (section claire) : trois jalons reliés par un trait doré,
pastilles de plus en plus « remplies » pour figurer la progression. */
.level-scale{
position:relative;
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:12px;
max-width:760px;
margin:34px auto;
}
.level-scale::before{
content:"";
position:absolute;
top:8px;left:16.66%;right:16.66%;
height:1px;
background:linear-gradient(90deg, rgba(201,168,106,.25), var(--gold));
}
.level-step{position:relative;text-align:center;font-family:var(--serif)}
.level-dot{
position:relative;z-index:1;
display:block;
width:17px;height:17px;
margin:0 auto 12px;
border-radius:50%;
border:1px solid var(--gold);
background:var(--cream);
box-shadow:inset 0 0 0 3px var(--cream);
}
.level-dot--mid{background:rgba(201,168,106,.45)}
.level-dot--full{background:var(--gold)}
.level-step b{
display:block;
font-style:italic;
font-weight:500;
font-size:16.5px;
color:var(--ink);
}
.level-sub{
display:block;
margin-top:4px;
font-family:var(--sans);
font-size:10.5px;
letter-spacing:.06em;
color:var(--ink-dim);
}
/* Variante claire du duo de cartes (sections crème) */
.duo-grid--light .edge-card{
border-color:rgba(24,53,66,.10);
background:rgba(255,255,255,.55);
box-shadow:none;
text-align:left;
}
.duo-grid--light .edge-card:hover{
border-color:rgba(201,168,106,.5);
background:rgba(255,255,255,.8);
box-shadow:0 18px 40px -22px rgba(24,53,66,.2);
}
.duo-grid--light .edge-card h3{color:var(--ink)}
.duo-grid--light .edge-card p{color:var(--ink);opacity:.78}
.duo-note em{font-style:normal;color:var(--gold)}
.duo-note--light{color:var(--ink-dim)}
/* Listes pièges / réflexes (esprit critique, dans les cartes claires) */
.crit-list{
list-style:none;
display:flex;
flex-direction:column;
gap:10px;
font-family:var(--serif);
font-size:14.5px;
line-height:1.5;
color:var(--ink);
}
.crit-list li{
display:grid;
grid-template-columns:auto 1fr;
gap:10px;
align-items:baseline;
opacity:.85;
}
.crit-list li::before{
content:"×";
font-family:var(--sans);
font-size:13px;
color:rgba(24,53,66,.45);
}
.crit-list--ok li::before{content:"✓";color:var(--gold)}
/* Liste d'acquis (section sombre) : liste éditoriale — une ligne par acquis,
icône Lucide dorée propre à chaque geste, fines lignes de séparation.
Remplace les pilules-tags (refusées : trop « boutons », trop chargées).
Aucune translation ni fond au survol — seule l'icône s'avive (discret,
même patron que la pastille dorée des .pledge-*). */
.gain-list{
list-style:none;
max-width:620px;
margin:26px auto 0;
text-align:left;
}
.gain-list li{
display:flex;
align-items:center;
gap:16px;
padding:11px 4px;
font-family:var(--serif);
font-size:15.5px;
color:var(--cream);
}
.gain-list li + li{border-top:1px solid rgba(246,241,234,.08)}
.gain-ico{
display:flex;
align-items:center;
justify-content:center;
width:32px;height:32px;
flex:0 0 auto;
border-radius:50%;
border:1px solid rgba(201,168,106,.45);
background:rgba(201,168,106,.10);
color:var(--gold);
}
.gain-ico svg{width:16px;height:16px}
/* gain-list sur section CLAIRE : le composant est nativement pensé pour les
sections sombres (texte crème). Sur crème il faut l'encre pour le texte, un
filet encre discret, et l'or recalé (#8d6a30 ≈ 4,7:1, même valeur que le blog
et le pied clair) — sinon texte invisible (crème sur crème). */
.page--light .gain-list li{color:var(--ink)}
.page--light .gain-list li + li{border-top-color:rgba(24,53,66,.10)}
.page--light .gain-ico{color:#8d6a30;border-color:rgba(141,106,48,.45);background:rgba(201,168,106,.10)}
.sec-copy--after{margin-top:30px;max-width:640px}
/* Avis : sous 1024px, rangée DÉFILANTE avec snap (3 colonnes trop étroites,
3 cartes empilées ne tiennent pas dans 100vh) — même patron que duo-grid. */
@media (max-width:1023px){
.avis-grid{
display:flex;
overflow-x:auto;
scroll-snap-type:x mandatory;
gap:14px;
}
.avis-card{flex:0 0 290px;scroll-snap-align:start;padding:22px 22px 18px}
.avis-more-tail{display:none} /* « …presta » sur cartes étroites */
.avis-more{font-size:10px;letter-spacing:.12em} /* tient sur une ligne à 290px */
/* Formats : 4 colonnes trop étroites sous 1024 px → passage en 2×2
(demande d'Allan : les cartes vont À LA LIGNE, pas de défilement
latéral). La pastille « Format de référence » déborde de 9px du bord
haut de sa carte : le gap de 14px suffit, et sans conteneur défilant
rien ne la coupe. */
.fmt-grid{
grid-template-columns:repeat(2, 1fr);
gap:14px;
margin-top:22px;
}
.fmt-card{padding:20px 18px 18px}
/* Étapes Sites web : 4 colonnes deviennent étroites sous 1024px → 2×2
(même logique que les formats ci-dessus). En mobile ≤700px, la règle
.steps-grid → 1 colonne prend le relais (plus bas dans la feuille). */
.steps-grid--quad{grid-template-columns:repeat(2, 1fr); max-width:min(680px, 100%)}
}
@media (max-width:700px){
.sec .particle-title{margin-bottom:26px}
.sec-copy{font-size:15px}
/* Échelle compacte : pastille à gauche, textes à droite (3 rangées basses
au lieu de 3 jalons empilés — la section doit tenir dans 100vh). */
.level-scale{grid-template-columns:1fr;gap:12px;margin:22px auto;max-width:300px}
.level-scale::before{display:none}
.level-step{
display:grid;
grid-template-columns:auto 1fr;
column-gap:12px;
align-items:center;
text-align:left;
}
.level-dot{grid-row:1 / span 2;margin:0}
.level-step b{font-size:15px}
.level-sub{margin-top:1px}
/* Duo de cartes : rangée DÉFILANTE avec snap (même patron que edge-grid
sur l'accueil) — deux cartes empilées ne tiennent pas dans l'écran. */
.duo-grid{
display:flex;
overflow-x:auto;
scroll-snap-type:x mandatory;
gap:12px;
margin-top:22px;
}
/* text-align:left : les cartes du duo SOMBRE (Formations/Ateliers)
héritaient le centrage de la section — illisible sur les textes longs
(carte Formations à ~14 lignes) et incohérent avec le duo CLAIR déjà
aligné à gauche (.duo-grid--light .edge-card). On aligne tout à gauche
comme lui, titre compris. */
.duo-grid .edge-card{flex:0 0 250px;scroll-snap-align:start;padding:20px 20px 18px;text-align:left}
/* Formats : une carte par ligne (demande d'Allan — pas de défilement
latéral). La section défile verticalement en interne si besoin, comme
les autres sections denses. */
.fmt-grid{grid-template-columns:1fr;gap:12px}
.fmt-card{padding:18px 18px 16px}
/* Gains par métier : une carte par ligne, comme les formats. */
.job-grid{grid-template-columns:1fr;gap:12px;margin-top:22px}
.job-card{padding:16px 16px}
/* Conférences : le duo de stats s'empile, les photos aussi (paysage trop
étroites côte à côte sur 375px), sujets sensibles sur une colonne. */
.stat-duo{flex-direction:column;align-items:center;gap:16px;margin-top:20px}
.conf-photos{grid-template-columns:1fr;gap:12px;margin-top:22px}
.conf-photos img{height:150px}
.topic-list{grid-template-columns:1fr;gap:7px}
/* Automatisations : étapes sur une colonne, pastilles de métier resserrées. */
.steps-grid{grid-template-columns:1fr;gap:12px;margin-top:22px}
.step-card{padding:18px 18px 16px}
.credo article + article{margin-top:26px;padding-top:26px}
.credo article + article::before{width:150px}
.credo-lead{font-size:17px;margin-bottom:9px}
.credo-note{font-size:14px}
.pledge-panel li{padding:13px 16px;gap:2px 12px}
.pledge-panel .pledge-ico{width:30px;height:30px;margin-top:1px}
.pledge-panel .pledge-ico svg{width:15px;height:15px}
.pledge-panel strong{font-size:14.5px}
.pledge-panel p{font-size:13px;line-height:1.5}
.pledge-grid{grid-template-columns:1fr;gap:8px}
.pledge-grid li{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;
align-items:start;padding:16px 18px}
.pledge-ico{width:32px;height:32px;margin-bottom:0;grid-row:span 2}
.pledge-ico svg{width:16px;height:16px}
.pledge-grid strong{font-size:15.5px;margin-bottom:0}
.pledge-grid p{grid-column:2;margin:0;font-size:13.5px}
.story{margin-top:20px;padding-left:22px}
.story li{grid-template-columns:1fr;gap:3px;padding:10px 0}
.story li::before{left:-22px;top:16px}
.story b{font-size:15px}
.story p{font-size:13.5px}
/* Pastilles métiers : plus compactes, elles s'enroulent naturellement. */
.job-tabs-nav{gap:8px;margin-top:20px}
.job-tabs-nav label{padding:7px 13px;font-size:10px}
.gain-list.job-ex, .job-msg{padding:6px 18px}
.gain-list.job-ex li{font-size:13.5px;line-height:1.45;padding:9px 0 9px 20px}
.gain-list.job-ex li::before{top:calc(9px + .55em)}
.job-msg{padding:22px 20px}
.job-msg p{font-size:14px}
.duo-note{font-size:13px;margin-top:18px}
.gain-list{margin-top:20px}
.gain-list li{font-size:13.5px;padding:9px 2px;gap:12px}
.gain-ico{width:28px;height:28px}
.gain-ico svg{width:15px;height:15px}
.sec-copy--after{margin-top:22px}
}
/* ===========================================================================
PAGES INTÉRIEURES (contact, mentions légales…) — coquille classique
scrollable, sans canvas ni navigation par sections. Même langage visuel :
encre profonde, or, serifs.
=========================================================================== */
.page-shell{
min-height:100vh;
display:flex;
flex-direction:column;
background:
radial-gradient(120% 55% at 50% 0%, rgba(201,168,106,.07) 0%, transparent 60%),
var(--ink);
/* Les canvas des titres en particules (plite) débordent volontairement de
leur encre (marge de vol du vent) : on les clippe au bord de l'écran au
lieu de créer un défilement horizontal sur mobile. */
overflow-x:clip;
/* ⚠️ Contexte d'empilement OBLIGATOIRE pour le champ de poussière ambiant
(app.js en mode page, canvas `.plite-bg` en z-index:-1). Sans lui, un enfant
en z-index négatif est peint AVANT le fond du body — or le fond (encre
ci-dessus, ou crème sur .page-shell--light) est OPAQUE et le recouvrait
entièrement (bug vécu : « je ne vois aucune particule »). L'isolation fait
du body un contexte d'empilement → l'ordre devient fond → poussière →
contenu. N'affecte pas les z-index INTERNES (menu, voile, feuilles des
outils), tous enfants du body : leur ordre relatif est conservé. */
isolation:isolate;
}
/* Menu sur page intérieure : visible immédiatement (pas de fondu retardé),
cliquable sans JS. SANS fond — même transparence que le menu des pages
animées (demande d'Allan : un seul et même menu partout). */
.site-menu--page{
animation:none;
opacity:1;
pointer-events:auto;
padding-bottom:14px;
transition:background .3s ease, -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease;
}
/* Scrim au scroll : dès que la page défile (contenu qui passe SOUS le menu
transparent), un voile encre flouté réapparaît pour garder le menu lisible
et éviter la superposition. Classe posée par transitions.js. Universel
(pas de scroll-timeline), et n'utilise pas `animation` → aucun conflit avec
html.pt-internal .site-menu{animation:none}. */
.site-menu--page.is-scrolled{
background:rgba(24,53,66,.82);
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
border-bottom:1px solid rgba(246,241,234,.07);
}
.site-menu--page .menu-burger{pointer-events:auto}
.shell-main{
flex:1;
width:100%;
max-width:1100px;
margin:0 auto;
padding:150px 24px 96px;
}
.shell-kicker{
font-family:var(--sans);
font-size:10px;
letter-spacing:.3em;
text-transform:uppercase;
color:var(--gold);
margin-bottom:18px;
}
/* Titres des pages défilantes (contact, 404) : la typo commune vient de
.particle-title (les deux classes sont toujours posées ensemble dans le
HTML) ; seuls la taille et l'espacement diffèrent. */
.shell-title{
font-size:clamp(40px, 6vw, 68px);
margin-bottom:22px;
}
.shell-lead{
max-width:640px;
font-family:var(--serif);
font-size:clamp(16px, 1.4vw, 19px);
line-height:1.62;
color:var(--cream-dim);
}
/* Titres en particules des pages intérieures : UN canvas plein écran,
peint par app.js (mode page) avec l'offset de scroll — les envolées du vent
ne sont clippées qu'aux bords de l'écran.
ABSOLU (pas fixe), re-calé chaque frame en translateY(scrollY) par le JS :
le canvas appartient au contenu défilant, donc le REBOND élastique du Mac
le translate comme le texte (un canvas fixe restait collé à la fenêtre
pendant le rebond — Chrome n'expose ce dépassement à aucune API JS). Comme
le dessin compense avec la MÊME valeur que la translation, les deux
s'annulent : les titres suivent exactement le contenu, rebond compris. */
.plite-canvas{position:absolute;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:5}
/* Canvas du champ de poussière ambiant (app.js, mode page) : z-index NÉGATIF →
la poussière passe DERRIÈRE le texte de lecture (le canvas des titres, lui,
reste à z-index:5, devant). Sa visibilité dépend du contexte d'empilement
posé sur `.page-shell` (isolation:isolate) — voir le commentaire là-bas. */
.plite-bg{position:absolute;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:-1}
/* .particle-title impose text-align:center ; sur les pages intérieures le
titre garde l'alignement de sa composition (gauche sur contact, centré
sur la page d'erreur via son wrapper). */
.page-shell .particle-title{
text-align:inherit;
}
.shell-hero{margin-bottom:56px}
.shell-hero--center{
text-align:center;
margin:10vh auto 0;
max-width:640px;
}
.shell-hero--center .shell-lead{margin:0 auto}
.shell-actions{margin-top:36px}
/* ----- Contact : formulaire + coordonnées ----- */
.contact-cols{
display:grid;
grid-template-columns:1.25fr .75fr;
gap:clamp(32px, 4vw, 64px);
align-items:start;
}
.contact-form{
background:linear-gradient(158deg, rgba(246,241,234,.055) 0%, rgba(246,241,234,.012) 62%);
border:1px solid rgba(246,241,234,.1);
border-radius:20px;
padding:clamp(24px, 3vw, 38px);
}
.form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
}
.form-field{margin-bottom:18px}
.form-field label{
display:block;
font-family:var(--sans);
font-size:10px;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--cream-dim);
margin-bottom:8px;
}
.form-field label b{color:var(--gold);font-weight:400} /* astérisque requise */
.form-field input,
.form-field select,
.form-field textarea{
width:100%;
font-family:var(--sans);
font-size:14px;
color:var(--cream);
background:rgba(255,255,255,.05);
border:1px solid rgba(246,241,234,.16);
border-radius:12px;
padding:13px 16px;
outline:none;
transition:border-color .25s, background .25s;
}
.form-field select{
appearance:none;
-webkit-appearance:none;
/* Chevron dessiné en data-URI (CSP img-src data: autorisé) */
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23F6F1EA' stroke-opacity='.55' fill='none' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 16px center;
background-size:10px 6px;
}
.form-field select option{background:var(--ink-2);color:var(--cream)}
.form-field textarea{min-height:150px;resize:vertical}
.form-field input::placeholder,
.form-field textarea::placeholder{color:rgba(246,241,234,.35)}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
border-color:rgba(201,168,106,.6);
background:rgba(255,255,255,.07);
}
/* Honeypot : hors écran (pas display:none, que certains bots détectent) */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* Messages (erreurs regroupées / succès) au-dessus du bouton */
.form-alert{
border:1px solid rgba(201,168,106,.45);
background:rgba(201,168,106,.1);
border-radius:12px;
padding:14px 18px;
margin-bottom:18px;
font-family:var(--serif);
font-size:14.5px;
line-height:1.55;
color:var(--cream);
}
.form-alert ul{margin:0;padding-left:18px}
.form-alert li + li{margin-top:4px}
.form-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.form-actions .btn-gold{border:1px solid rgba(160,120,60,.55);cursor:pointer}
/* Note d'information CNIL sous le bouton : finalité des données + lien vers
la politique de confidentialité. flex:1 : occupe le reste de la rangée et
passe à la ligne proprement quand la place manque. */
.form-note{
flex:1 1 220px;
font-family:var(--sans);
font-size:11px;
letter-spacing:.04em;
color:var(--cream-dim);
}
.form-note a{
color:var(--gold);
text-decoration:underline;
text-underline-offset:2px;
}
/* Reprise du contexte d'un outil (contact-prefill.js) : posée AU-DESSUS du
champ message, donc hors de la rangée .form-actions — elle ne doit pas
hériter du flex:1 ci-dessus, ni se coller au textarea. */
.form-note--prefill{
flex:none;
line-height:1.5;
margin-bottom:8px;
padding-left:10px;
border-left:2px solid var(--gold);
}
/* Coordonnées directes (aside) */
.contact-aside{padding-top:6px}
/* Spécificité ≥ .contact-aside p (sinon la règle générique gagnerait le
font-size et rendrait ces intitulés en 15.5px serif). */
.contact-aside .aside-label{
font-family:var(--sans);
font-size:10px;
letter-spacing:.26em;
text-transform:uppercase;
color:var(--gold);
opacity:1;
margin:0 0 14px;
}
.contact-aside .aside-label:not(:first-child){margin-top:36px}
.contact-aside p{
font-family:var(--serif);
font-size:15.5px;
line-height:1.6;
color:var(--cream);
opacity:.88;
}
.contact-aside p + p{margin-top:6px}
.contact-aside a{color:inherit;text-decoration:none;transition:color .25s}
.contact-aside a:hover{color:var(--gold)}
.aside-perks{list-style:none;margin:0;padding:0}
.aside-perks li{
display:flex;
align-items:center;
gap:10px;
font-family:var(--sans);
font-size:11px;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--cream-dim);
}
.aside-perks li + li{margin-top:10px}
.aside-perks li::before{
content:"";
width:4px;height:4px;border-radius:50%;
background:var(--gold);
flex:0 0 auto;
}
/* Pied de page autonome (partial des pages intérieures) : pas de marges
négatives (elles compensaient le padding de la section CTA de l'accueil). */
.site-foot--page{margin:0;padding:38px 24px 34px}
@media (max-width:900px){
.contact-cols{grid-template-columns:1fr}
.contact-aside{order:2}
}
@media (max-width:700px){
.shell-main{padding:120px 20px 72px}
.shell-hero{margin-bottom:40px}
.form-row{grid-template-columns:1fr}
.site-foot--page{padding:30px 20px 28px}
}
/* ===========================================================================
BLOG — index (blog.php) et gabarit d'article (article.php).
Pages défilantes CLAIRES (.page-shell--light) — premières du genre : le
body passe crème (app.js en mode page choisit seul des particules encre via la
luminance du body), le menu porte .on-light dès le PHP (menu.php,
$menuLight), html et le voile de transition restent ENCRE (règle d'or des
bascules de document), et le pied de page garde sa bande nuit — écho de
l'alternance clair/foncé du site.
Cartes VERTICALES à image de couverture (SVG décoratifs de charte dans
Images/Blog/, remplaçables par de vraies photos via le champ `image` de
partials/articles.php). Une carte = UN lien entier vers /blog-.
=========================================================================== */
.page-shell--light{
background:
radial-gradient(120% 55% at 50% 0%, rgba(201,168,106,.10) 0%, transparent 60%),
var(--cream);
}
/* Menu au scroll sur page claire : le voile encre des pages sombres rendrait
le texte (encre via .on-light) illisible → scrim crème flouté. */
.site-menu--page.on-light.is-scrolled{
background:rgba(246,241,234,.86);
border-bottom:1px solid rgba(24,53,66,.08);
}
/* Petites capitales dorées sur crème : l'or de charte tombe à 2,8:1 → même
remède MESURÉ que le pied clair de formations (#8d6a30 ≈ 4,7:1). */
.page-shell--light .shell-kicker{color:#8d6a30}
.page-shell--light .shell-lead{color:rgba(24,53,66,.72)}
/* Chapeau de l'index : accroche sur TOUTE la largeur (demande d'Allan —
le shell-lead générique est plafonné à 640px). */
.blog-hero .shell-lead{max-width:none}
/* Étiquettes de catégories : pastilles de tri sous l'accroche — même langage
que les pastilles métier d'automatisations, en registre clair. L'active
est pleine ; « Tous » sans filtre. */
.blog-cats{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:26px;
}
.blog-cats a{
padding:8px 18px;
border-radius:999px;
font-family:var(--sans);
font-size:11px;
letter-spacing:.1em;
text-transform:uppercase;
text-decoration:none;
color:rgba(24,53,66,.62);
border:1px solid rgba(24,53,66,.18);
transition:color .4s, border-color .4s, background .4s;
}
.blog-cats a:hover{border-color:rgba(201,168,106,.6);color:var(--ink)}
.blog-cats a.on{
color:#8d6a30;
border-color:rgba(201,168,106,.65);
background:rgba(201,168,106,.12);
}
/* ===== Échange de la grille sans rechargement (blog-filtre.js) =====
Les cartes en place s'effacent d'un souffle, les nouvelles remontent à leur
place l'une après l'autre. Registre volontairement DISCRET, calé sur
jobPanelIn (0,45 s, ~5 px) : on souligne le changement, on ne le met pas en
scène. L'ancienne grille reste dans le flux pendant la requête (seulement
rendue transparente) → aucun effondrement de hauteur, donc aucun saut.
⚠️ Durée de sortie à garder synchrone avec SORTIE_MS dans blog-filtre.js. */
.blog-grid--sortie,
.blog-vide--sortie{
opacity:0;
transform:translateY(4px);
transition:opacity .17s ease, transform .17s ease;
}
.blog-grid--entree .blog-card,
.blog-vide--entree{
animation:blogCardIn .42s cubic-bezier(.2,.8,.2,1) both;
}
/* Décalage en cascade, une carte après l'autre (40 ms) — plafonné à la page
pleine (BLOG_PAR_PAGE = 9) : la dernière démarre à 320 ms, l'ensemble est
posé avant 0,75 s. */
.blog-grid--entree .blog-card:nth-child(2){animation-delay:.04s}
.blog-grid--entree .blog-card:nth-child(3){animation-delay:.08s}
.blog-grid--entree .blog-card:nth-child(4){animation-delay:.12s}
.blog-grid--entree .blog-card:nth-child(5){animation-delay:.16s}
.blog-grid--entree .blog-card:nth-child(6){animation-delay:.20s}
.blog-grid--entree .blog-card:nth-child(7){animation-delay:.24s}
.blog-grid--entree .blog-card:nth-child(8){animation-delay:.28s}
.blog-grid--entree .blog-card:nth-child(n+9){animation-delay:.32s}
@keyframes blogCardIn{
from{opacity:0;transform:translateY(6px)}
to{opacity:1;transform:none}
}
/* Mouvement réduit : l'échange reste instantané et net (blog-filtre.js coupe
aussi son délai de sortie en lisant la même préférence). */
@media (prefers-reduced-motion: reduce){
.blog-grid--sortie,
.blog-vide--sortie{transition:none;opacity:1;transform:none}
.blog-grid--entree .blog-card,
.blog-vide--entree{animation:none}
}
/* Catégorie vide + pagination */
.blog-vide{
font-family:var(--serif);
font-size:16px;
color:rgba(24,53,66,.6);
padding:36px 0;
}
.blog-pagination{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:baseline;
gap:18px;
margin-top:40px;
}
.blog-pagination a{
font-family:var(--sans);
font-size:11px;
letter-spacing:.18em;
text-transform:uppercase;
text-decoration:none;
color:#8d6a30;
}
.blog-page-prec::before{content:"← ";}
.blog-page-suiv::after{content:" →";}
.blog-page-suiv{text-align:right}
.blog-page-etat{
font-family:var(--sans);
font-size:11px;
letter-spacing:.14em;
text-transform:uppercase;
color:rgba(24,53,66,.5);
}
/* ----- Index : cartes verticales, couverture 16/9 en tête (flush), corps
dessous. La carte est un : levée + liseré doré au survol et léger zoom
de la couverture (l'affordance est voulue — c'est un lien). ----- */
.blog-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:22px;
}
.blog-card{
display:flex;
flex-direction:column;
border-radius:20px;
overflow:hidden; /* couverture flush + zoom clippé */
background:rgba(255,255,255,.72);
border:1px solid rgba(24,53,66,.07);
box-shadow:0 18px 44px -18px rgba(24,53,66,.14);
text-decoration:none;
transition:transform .45s cubic-bezier(.2,.8,.2,1), border-color .45s, box-shadow .45s;
}
.blog-card:hover{
transform:translateY(-6px);
border-color:rgba(201,168,106,.45);
box-shadow:0 26px 54px -20px rgba(24,53,66,.22);
}
.blog-cover{
display:block;
aspect-ratio:16 / 9;
overflow:hidden;
border-bottom:1px solid rgba(24,53,66,.06);
flex:0 0 auto;
}
.blog-cover img{
display:block;
width:100%;
height:100%;
object-fit:cover;
transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.blog-card:hover .blog-cover img{transform:scale(1.04)}
.blog-card-inner{
display:flex;
flex-direction:column;
flex:1;
padding:22px 26px;
}
.blog-meta{
display:flex;
flex-wrap:wrap;
align-items:baseline;
gap:6px 10px;
font-family:var(--sans);
font-size:10px;
letter-spacing:.22em;
text-transform:uppercase;
color:rgba(24,53,66,.6);
margin-bottom:14px;
}
.blog-cat{color:#8d6a30}
.blog-card .blog-meta{gap:4px 14px}
.blog-card .blog-meta time{margin-left:auto}
.blog-card h2{
font-family:var(--serif);
font-style:italic;
font-weight:500;
font-size:20px;
line-height:1.3;
color:var(--ink);
margin-bottom:10px;
transition:color .4s;
}
.blog-card:hover h2{color:#8d6a30}
.blog-excerpt{
font-family:var(--serif);
font-size:14.5px;
line-height:1.6;
color:rgba(24,53,66,.72);
margin-bottom:20px;
flex:1; /* le « Lire l'article » reste ancré en bas de la carte */
}
/* « Lire l'article » : même langage que les liens de cartes services
(flèche qui glisse + filet qui se déploie), déclenché par le survol de
TOUTE la carte puisqu'elle est le lien. */
.blog-read{
position:relative;
display:inline-flex;
align-items:center;
gap:10px;
align-self:flex-start;
font-family:var(--sans);
font-size:11px;
letter-spacing:.24em;
text-transform:uppercase;
color:#8d6a30;
}
.blog-read::after{content:"→";font-size:14px;transition:transform .3s ease}
.blog-card:hover .blog-read::after{transform:translateX(4px)}
.blog-read::before{
content:"";
position:absolute;left:0;right:24px;bottom:-4px;height:1px;
background:currentColor;opacity:.5;
transform:scaleX(0);transform-origin:left center;
transition:transform .35s ease;
}
.blog-card:hover .blog-read::before{transform:scaleX(1)}
/* Contrôle d'intégrité des articles (développement uniquement) */
.blog-erreurs{
margin:0 0 24px;
padding:12px 16px;
border:1px solid rgba(160,60,60,.45);
border-radius:10px;
font-family:var(--sans);
font-size:12px;
line-height:1.5;
color:#8a3232;
}
/* ----- Article : colonne de lecture centrée (760px) ----- */
.art-wrap,
.art-more,
.art-cta{max-width:760px;margin-left:auto;margin-right:auto}
/* Chapeau CENTRÉ : app.js centre les lignes d'un titre multiligne
(échantillonnage textAlign:center) — une composition à gauche mélangerait
ligne 1 à gauche et ligne 2 centrée. Tout le chapeau suit. */
.art-hero{margin-bottom:40px;text-align:center}
.art-hero .blog-meta{margin-bottom:18px;justify-content:center}
.art-title{font-size:clamp(32px, 4.4vw, 52px);line-height:1.16}
.art-lead{max-width:600px;margin:0 auto}
/* Couverture de l'article : la même image que la carte, en grand */
.art-cover{
margin:0 0 40px;
border-radius:20px;
overflow:hidden;
border:1px solid rgba(24,53,66,.08);
box-shadow:0 24px 60px -30px rgba(24,53,66,.3);
}
.art-cover img{display:block;width:100%;height:auto}
.art-body{
font-family:var(--serif);
font-size:clamp(16px, 1.35vw, 18.5px);
line-height:1.7;
color:rgba(24,53,66,.88);
}
.art-body p{margin-bottom:1.05em}
.art-body > :last-child{margin-bottom:0}
.art-body h2{
font-family:var(--serif);
font-style:italic;
font-weight:500;
font-size:clamp(21px, 1.9vw, 25px);
line-height:1.3;
color:var(--ink);
margin:1.7em 0 .65em;
}
.art-body > h2:first-child{margin-top:0}
.art-body ul{list-style:none;margin:0 0 1.05em;padding:0}
/* ⚠️ SURTOUT PAS display:grid ni display:flex ici — la leçon a coûté deux
fois dans ce projet (les encarts .avis de la console, puis cette liste).
En grille, CHAQUE nœud enfant devient un item : sur
`Titre : la suite de la phrase `, la va
dans la colonne de texte, et LE TEXTE QUI SUIT tombe dans la cellule libre
d'après — celle de 10 px réservée à la puce. Vu en production sur « Les
autres tribunes de la série » : un mot par ligne sur douze lignes.
`li > * {grid-column:2}` ne suffisait pas : un nœud de TEXTE n'est pas un
élément, aucun sélecteur CSS ne l'atteint.
La puce est donc posée en ABSOLU et le texte réserve sa place par un
padding : le contenu du redevient un flux inline normal, où texte et
éléments se mélangent librement, quel que soit le Markdown écrit dans la
console. Retrait inchangé au pixel près : 10 px de colonne + 12 px d'écart
= 22 px de padding. */
.art-body ul li{
position:relative;
padding:5px 0 5px 22px;
}
.art-body ul li::before{
content:"";
position:absolute;
left:0;
top:calc(5px + .62em); /* le padding du haut + l'ancien décalage de puce */
width:5px;height:5px;border-radius:50%;
background:var(--gold);
}
/* Vocabulaire Markdown étendu (Parsedown) : listes numérotées, intertitres
de 3ᵉ rang, code, filet, images posées dans le corps. */
.art-body ol{margin:0 0 1.05em;padding-left:1.4em}
.art-body ol li{padding:5px 0}
.art-body ol li::marker{color:var(--gold);font-weight:500}
.art-body h3{
font-family:var(--serif);
font-style:italic;
font-weight:500;
font-size:clamp(18px, 1.6vw, 21px);
line-height:1.3;
color:var(--ink);
margin:1.5em 0 .55em;
}
.art-body hr{
border:none;
width:56px;
height:1px;
background:rgba(201,168,106,.6);
margin:2em auto;
}
.art-body code{
font:.82em/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
background:rgba(24,53,66,.07);
padding:1px 6px;
border-radius:5px;
}
.art-body pre{
margin:0 0 1.05em;
padding:14px 18px;
border-radius:12px;
background:rgba(24,53,66,.07);
overflow-x:auto;
}
.art-body pre code{background:none;padding:0}
.art-body img{
display:block;
max-width:100%;
height:auto;
border-radius:16px;
margin:1.4em auto;
border:1px solid rgba(24,53,66,.08);
}
.art-body blockquote{
margin:1.4em 0;
padding:4px 0 4px 24px;
border-left:2px solid var(--gold);
font-style:italic;
color:rgba(24,53,66,.66);
}
/* La couleur vient de la règle dorée plus bas ; ici, la seule graisse. */
.art-body strong, .art-body em{font-weight:500}
.art-body a{
color:#8d6a30;
text-decoration:none;
border-bottom:1px solid rgba(141,106,48,.4);
transition:border-color .3s;
}
.art-body a:hover{border-bottom-color:#8d6a30}
/* ----- Appareil de bas d'article : sources, lectures complémentaires -------
Écrit en Markdown derrière une ligne `::: sources` (blog_md_vers_html).
Demande d'Allan : DISCRET — petit, grisé, italique. Il doit se lire comme
une note de bas de page, pas comme une section de l'article : d'où le filet
de séparation, la taille réduite et la couleur qui recule. Tout ce qui vit
dedans (titres, puces, liens) rentre dans le rang, sinon un `## Sources`
reviendrait en gros italique de 25 px et la discrétion serait perdue. */
.art-sources{
margin-top:2.6em;
padding-top:1.5em;
border-top:1px solid rgba(24,53,66,.14);
font-size:.8em;
font-style:italic;
line-height:1.65;
color:rgba(24,53,66,.5);
}
.art-sources > :first-child{margin-top:0}
.art-sources > :last-child{margin-bottom:0}
.art-body .art-sources h2,
.art-body .art-sources h3{
font-size:1.08em;
font-weight:500;
font-style:italic;
color:rgba(24,53,66,.62);
margin:1.5em 0 .5em;
}
.art-body .art-sources p{margin-bottom:.7em}
.art-body .art-sources ul{margin-bottom:.7em}
.art-body .art-sources li{padding:2px 0 2px 22px}
/* Puce ramenée au gris du bloc : l'or du corps d'article y crierait. */
.art-body .art-sources li::before{
background:rgba(24,53,66,.3);
width:4px;height:4px;
top:calc(2px + .62em);
}
/* Liens : lisibles et cliquables, mais dans la même retenue que le reste —
ils ne reprennent leur or qu'au survol. */
.art-body .art-sources a{
color:inherit;
border-bottom-color:rgba(24,53,66,.25);
overflow-wrap:anywhere; /* les URL nues ne doivent pas déborder */
}
.art-body .art-sources a:hover{color:#8d6a30;border-bottom-color:#8d6a30}
/* Dans le corps, la mise en valeur est DORÉE (dégradé détouré sur le texte).
Dans les sources, ce serait un cri au milieu d'un bloc qu'on veut discret :
les deux balises y reviennent à l'encre du bloc. Et l'italique dans un bloc
déjà italique se compose en romain, comme le veut la règle typographique —
ce qui sert aux titres de revues. */
.art-body .art-sources em,
.art-body .art-sources strong{
background:none;
-webkit-background-clip:border-box;
background-clip:border-box;
color:inherit;
-webkit-text-fill-color:currentColor;
}
.art-body .art-sources em{font-style:normal}
.art-body .art-sources strong{font-weight:600}
/* Signature du rédacteur (gérée en console) : photo + « Par Nom », rattachée
à la FIN DU TEXTE et alignée à droite. Volontairement minuscule — c'est une
mention, pas un encadré d'auteur : elle ne doit rien peser face au corps. */
.art-sign{
display:flex;
align-items:center;
justify-content:flex-end;
gap:12px;
margin-top:34px;
font-family:var(--sans);
font-size:11px;
letter-spacing:.18em;
text-transform:uppercase;
color:rgba(24,53,66,.55);
}
.art-sign-photo{
flex:none;
width:40px;
height:40px;
border-radius:50%;
object-fit:cover;
border:1px solid rgba(24,53,66,.1);
}
.art-sign-nom{color:var(--ink);font-weight:500}
button.art-sign-nom{
font:inherit;
letter-spacing:inherit;
text-transform:inherit;
background:none;
border:0;
border-bottom:1px solid rgba(201,168,106,.6);
padding:0 0 1px;
cursor:pointer;
transition:color .3s, border-color .3s;
}
button.art-sign-nom:hover,
button.art-sign-nom:focus-visible{color:#b58f52;border-color:#b58f52}
.bio-pop{text-align:center}
.bio-pop-photo{
display:block;
width:84px;height:84px;
margin:0 auto 18px;
border-radius:50%;
object-fit:cover;
border:1px solid rgba(201,168,106,.45);
}
.bio-pop .avis-pop-text{text-align:left}
/* Pied d'article : retour à l'index */
.art-foot{
margin-top:52px;
padding-top:26px;
border-top:1px solid rgba(24,53,66,.12);
}
.art-back{
display:inline-flex;
align-items:center;
gap:10px;
font-family:var(--sans);
font-size:11px;
letter-spacing:.24em;
text-transform:uppercase;
color:#8d6a30;
text-decoration:none;
}
.art-back::before{content:"←";font-size:14px;transition:transform .3s ease}
.art-back:hover::before{transform:translateX(-4px)}
/* Retour en TÊTE d'article : aligné à gauche au-dessus du chapeau centré. */
/* Fil d'Ariane en tête de PAGE (hors colonne de lecture, désormais enfant
direct de .shell-main) : barre de contexte pleine largeur alignée à gauche,
détachée du chapeau par un filet. Sa pleine largeur + ce filet la
distinguent nettement de la ligne méta (catégorie · date · lecture) restée
centrée dans le chapeau — fin de l'effet « deux lignes qui se ressemblent ».
Le maillon courant (titre) s'ellipse s'il est trop long. */
.art-breadcrumb{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px 10px;
margin:0 0 44px;
padding-bottom:20px;
border-bottom:1px solid rgba(24,53,66,.1);
font-family:var(--sans);
font-size:10px;
letter-spacing:.22em;
text-transform:uppercase;
color:rgba(24,53,66,.5);
}
.art-breadcrumb a{color:#8d6a30;text-decoration:none;transition:opacity .3s}
.art-breadcrumb a:hover{opacity:.6}
.art-breadcrumb-sep{color:rgba(24,53,66,.3)}
.art-breadcrumb-cur{
max-width:min(60ch, 100%);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:rgba(24,53,66,.45);
}
/* « À lire ensuite » : cartes réduites (pas d'extrait), 2 colonnes */
.art-more{margin-top:64px}
.art-more-label{
font-family:var(--sans);
font-size:10px;
letter-spacing:.3em;
text-transform:uppercase;
color:#8d6a30;
margin-bottom:18px;
}
.blog-grid--suite{grid-template-columns:1fr 1fr}
.blog-card--mini .blog-card-inner{padding:18px 22px}
.blog-card--mini h2{font-size:17.5px;margin-bottom:14px;flex:1}
/* Invitation finale : cartouche ambré (langage du callout financements) */
.art-cta{
margin-top:64px;
padding:34px 36px;
border-radius:20px;
border:1px solid rgba(201,168,106,.36);
background:linear-gradient(158deg, rgba(201,168,106,.12), rgba(201,168,106,.03));
text-align:center;
}
.art-cta p{
max-width:560px;
margin:0 auto 24px;
font-family:var(--serif);
font-size:16.5px;
line-height:1.6;
color:var(--ink);
}
@media (max-width:1000px){
.blog-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
.blog-grid,
.blog-grid--suite{grid-template-columns:1fr}
.blog-card-inner{padding:20px 22px}
.art-cover{margin-bottom:32px}
.art-foot{margin-top:44px}
.art-sign{margin-top:30px}
.art-more,
.art-cta{margin-top:48px}
.art-cta{padding:28px 24px}
}
/* ===========================================================================
COULOIR DE LA PILULE DES DOTS (accueil animé uniquement, html.full-page).
La pilule est fixed à droite (~54px de couloir + respiration). Dès que la
marge libre du contenu centré devient plus étroite (< ~1280px), on réserve
son couloir : le contenu STATIQUE est excentré vers la gauche — la pilule
ne recouvre jamais rien. Les rangées défilantes (cartes, marquee) passent
dessous sans rien cacher définitivement : on ne les excentre pas, sauf
leurs variantes grille (edge/team) qui sont statiques.
Placé en FIN de feuille : gagne la cascade sur les overrides responsive.
=========================================================================== */
@media (max-width:1279px){
/* Sections dont le padding latéral porte le contenu (24px + 64px de couloir) */
html.full-page .page--light,
html.full-page .page--statement,
html.full-page .page--trust{padding-right:88px}
/* Wrappers centrés des sections à rangées pleine largeur */
html.full-page .services-header,
html.full-page .edge-head,
html.full-page .team-head{padding-right:88px}
/* Grilles statiques desktop (1160/1148px de large → sous la pilule sinon) */
html.full-page .edge-grid,
html.full-page .team-grid{padding-right:88px}
/* Pied de page de la section CTA : la bande reste pleine largeur,
son contenu réserve le couloir */
html.full-page .site-foot .foot-inner{padding-right:64px}
}
@media (max-width:700px){
/* Pilule plus fine et plus proche du bord (right:18px) → couloir 54px */
html.full-page .page--light,
html.full-page .page--statement{padding-right:78px}
html.full-page .page--trust{padding-right:74px}
html.full-page .services-header,
html.full-page .edge-head,
html.full-page .team-head{padding-right:78px}
/* En mobile, edge-grid et team-grid redeviennent des rangées DÉFILANTES :
on restaure leur padding de rangée (pas d'excentrage). */
html.full-page .edge-grid{padding-right:24px}
html.full-page .team-grid{padding-right:24px}
html.full-page .site-foot .foot-inner{padding-right:54px}
}
/* ===========================================================================
TRANSITIONS ENTRE PAGES — voile d'encre piloté (transitions.js).
Chaque page charge sous un voile encre+or (même recette que les fonds du
site — jamais de noir nu) ; transitions.js le lève (html.pt-ready) quand la
page a réellement peint (load + polices + 2 rAF), et le repose
(html.pt-leaving) avant de naviguer. z-index 26 : au-dessus du contenu et
des dots (20/21), SOUS le menu (30) — le menu reste visible en permanence.
Sans JS :
est
interpolée nativement (::details-content + interpolate-size) — dépliage
fluide dans les deux sens, la réponse arrive en fondu+levée. Navigateurs
plus anciens : bascule instantanée (dégradation propre), zéro JS. */
html{interpolate-size:allow-keywords}
.faq details::details-content{
display:block;
height:0;
overflow:clip;
transition:height .45s cubic-bezier(.2,.8,.2,1), content-visibility .45s allow-discrete;
}
.faq details[open]::details-content{height:auto}
.faq .faq-a{opacity:0;transform:translateY(-6px);transition:opacity .25s ease, transform .25s ease}
.faq details[open] .faq-a{
opacity:1;
transform:none;
transition:opacity .4s ease .12s, transform .4s cubic-bezier(.2,.8,.2,1) .12s;
}
/* Variante CLAIRE de la FAQ (sections crème — conférences, automatisations…).
Exactement la surface de .pledge-panel : voile blanc sur le crème, liseré
encre très discret, ombre portée basse. L'or vif (#C9A86A) manque de
contraste sur le crème → on prend l'or profond du dégradé --gold-text
(#b58f52) pour le texte et le marqueur, l'or vif restant aux fonds. */
.faq--light{
background:rgba(255,255,255,.72);
border-color:rgba(24,53,66,.07);
box-shadow:0 18px 44px -18px rgba(24,53,66,.12);
}
.faq--light details + details{border-top-color:rgba(24,53,66,.08)}
.faq--light details[open]{background:rgba(201,168,106,.10)}
.faq--light summary{color:var(--ink)}
.faq--light summary:hover,
.faq--light details[open] summary{color:#b58f52}
.faq--light summary::after{
border-color:rgba(181,143,82,.45);
color:#b58f52;
}
.faq--light details[open] summary::after{
background-color:rgba(201,168,106,.18);
border-color:rgba(181,143,82,.7);
}
.faq--light .faq-a{color:var(--ink-dim)}
@media (max-width:700px){
.faq summary{padding:15px 18px;gap:12px}
.faq summary::after{width:24px;height:24px}
.faq .faq-a{padding:0 18px 17px}
}
.credo{
width:100%;
max-width:780px;
margin:0 auto;
text-align:center;
}
.credo article + article{
position:relative;
margin-top:36px;
padding-top:36px;
}
.credo article + article::before{
content:"";
position:absolute;
top:0;left:50%;
transform:translateX(-50%);
width:190px;height:1px;
background:linear-gradient(90deg, transparent, rgba(201,168,106,.55), transparent);
}
.credo-lead{
font-family:var(--serif);
font-style:italic;
font-weight:500;
font-size:clamp(19px, 1.7vw, 23px);
line-height:1.38;
color:var(--ink);
margin:0 0 12px;
}
.credo-note{
font-family:var(--serif);
font-size:15.5px;
line-height:1.65;
color:var(--ink);
opacity:.75;
margin:0;
}
.credo em{font-style:normal;color:var(--gold)}
.pledge-grid{
list-style:none;
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:18px;
width:100%;
max-width:1040px;
margin:0 auto;
padding:0;
text-align:left;
}
.pledge-grid li{
display:flex;
flex-direction:column;
padding:24px 24px 22px;
border-radius:18px;
background:rgba(255,255,255,.72);
border:1px solid rgba(24,53,66,.07);
box-shadow:0 18px 44px -18px rgba(24,53,66,.12);
}
.pledge-ico{
display:flex;
align-items:center;
justify-content:center;
width:40px;height:40px;
margin-bottom:16px;
border-radius:50%;
border:1px solid rgba(201,168,106,.45);
background:rgba(201,168,106,.10);
color:var(--gold);
}
.pledge-ico svg{width:19px;height:19px}
.pledge-grid strong{
display:block;
font-family:var(--serif);
font-style:italic;
font-weight:500;
font-size:17px;
line-height:1.35;
color:var(--ink);
margin-bottom:7px;
}
.pledge-grid p{
margin:auto 0 0;
font-family:var(--serif);
font-size:14px;
line-height:1.55;
color:var(--ink);
opacity:.76;
}
@media (min-width:701px) and (max-width:1099px){
.pledge-grid{grid-template-columns:repeat(2, 1fr);max-width:700px}
}
.pledge-grid--dark li{
background:linear-gradient(158deg, rgba(246,241,234,.055) 0%, rgba(246,241,234,.012) 62%);
border-color:rgba(246,241,234,.09);
box-shadow:inset 0 1px 0 rgba(246,241,234,.05);
}
.pledge-grid--dark strong{color:var(--cream)}
.pledge-grid--dark p{color:var(--cream-dim);opacity:1}
.pledge-panel{
list-style:none;
width:100%;
margin:0;
padding:0;
border-radius:20px;
overflow:hidden;
background:rgba(255,255,255,.72);
border:1px solid rgba(24,53,66,.07);
box-shadow:0 18px 44px -18px rgba(24,53,66,.12);
}
.pledge-panel li{
position:relative;
display:grid;
grid-template-columns:auto 1fr;
gap:4px 16px;
align-items:start;
padding:20px 24px;
}
.pledge-panel li + li{border-top:1px solid rgba(24,53,66,.08)}
.pledge-panel .pledge-ico{
grid-row:span 2;
width:36px;height:36px;
margin:2px 0 0;
}
.pledge-panel .pledge-ico svg{width:18px;height:18px}
.pledge-panel strong{
display:block;
font-family:var(--serif);
font-style:italic;
font-weight:500;
font-size:17px;
line-height:1.35;
color:var(--ink);
margin:0;
}
.pledge-panel p{
grid-column:2;
margin:0;
font-family:var(--serif);
font-size:14.5px;
line-height:1.58;
color:var(--ink);
opacity:.76;
}
.pledge-panel--dark{
background:linear-gradient(158deg, rgba(246,241,234,.055) 0%, rgba(246,241,234,.012) 62%);
border-color:rgba(246,241,234,.09);
box-shadow:inset 0 1px 0 rgba(246,241,234,.05);
}
.pledge-panel--dark li + li{border-top-color:rgba(246,241,234,.10)}
.pledge-panel--dark strong{color:var(--cream)}
.pledge-panel--dark p{color:var(--cream-dim);opacity:1}
/* Échelle de niveaux (section claire) : trois jalons reliés par un trait doré,
pastilles de plus en plus « remplies » pour figurer la progression. */
.level-scale{
position:relative;
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:12px;
max-width:760px;
margin:34px auto;
}
.level-scale::before{
content:"";
position:absolute;
top:8px;left:16.66%;right:16.66%;
height:1px;
background:linear-gradient(90deg, rgba(201,168,106,.25), var(--gold));
}
.level-step{position:relative;text-align:center;font-family:var(--serif)}
.level-dot{
position:relative;z-index:1;
display:block;
width:17px;height:17px;
margin:0 auto 12px;
border-radius:50%;
border:1px solid var(--gold);
background:var(--cream);
box-shadow:inset 0 0 0 3px var(--cream);
}
.level-dot--mid{background:rgba(201,168,106,.45)}
.level-dot--full{background:var(--gold)}
.level-step b{
display:block;
font-style:italic;
font-weight:500;
font-size:16.5px;
color:var(--ink);
}
.level-sub{
display:block;
margin-top:4px;
font-family:var(--sans);
font-size:10.5px;
letter-spacing:.06em;
color:var(--ink-dim);
}
/* Variante claire du duo de cartes (sections crème) */
.duo-grid--light .edge-card{
border-color:rgba(24,53,66,.10);
background:rgba(255,255,255,.55);
box-shadow:none;
text-align:left;
}
.duo-grid--light .edge-card:hover{
border-color:rgba(201,168,106,.5);
background:rgba(255,255,255,.8);
box-shadow:0 18px 40px -22px rgba(24,53,66,.2);
}
.duo-grid--light .edge-card h3{color:var(--ink)}
.duo-grid--light .edge-card p{color:var(--ink);opacity:.78}
.duo-note em{font-style:normal;color:var(--gold)}
.duo-note--light{color:var(--ink-dim)}
/* Listes pièges / réflexes (esprit critique, dans les cartes claires) */
.crit-list{
list-style:none;
display:flex;
flex-direction:column;
gap:10px;
font-family:var(--serif);
font-size:14.5px;
line-height:1.5;
color:var(--ink);
}
.crit-list li{
display:grid;
grid-template-columns:auto 1fr;
gap:10px;
align-items:baseline;
opacity:.85;
}
.crit-list li::before{
content:"×";
font-family:var(--sans);
font-size:13px;
color:rgba(24,53,66,.45);
}
.crit-list--ok li::before{content:"✓";color:var(--gold)}
/* Liste d'acquis (section sombre) : liste éditoriale — une ligne par acquis,
icône Lucide dorée propre à chaque geste, fines lignes de séparation.
Remplace les pilules-tags (refusées : trop « boutons », trop chargées).
Aucune translation ni fond au survol — seule l'icône s'avive (discret,
même patron que la pastille dorée des .pledge-*). */
.gain-list{
list-style:none;
max-width:620px;
margin:26px auto 0;
text-align:left;
}
.gain-list li{
display:flex;
align-items:center;
gap:16px;
padding:11px 4px;
font-family:var(--serif);
font-size:15.5px;
color:var(--cream);
}
.gain-list li + li{border-top:1px solid rgba(246,241,234,.08)}
.gain-ico{
display:flex;
align-items:center;
justify-content:center;
width:32px;height:32px;
flex:0 0 auto;
border-radius:50%;
border:1px solid rgba(201,168,106,.45);
background:rgba(201,168,106,.10);
color:var(--gold);
}
.gain-ico svg{width:16px;height:16px}
/* gain-list sur section CLAIRE : le composant est nativement pensé pour les
sections sombres (texte crème). Sur crème il faut l'encre pour le texte, un
filet encre discret, et l'or recalé (#8d6a30 ≈ 4,7:1, même valeur que le blog
et le pied clair) — sinon texte invisible (crème sur crème). */
.page--light .gain-list li{color:var(--ink)}
.page--light .gain-list li + li{border-top-color:rgba(24,53,66,.10)}
.page--light .gain-ico{color:#8d6a30;border-color:rgba(141,106,48,.45);background:rgba(201,168,106,.10)}
.sec-copy--after{margin-top:30px;max-width:640px}
/* Avis : sous 1024px, rangée DÉFILANTE avec snap (3 colonnes trop étroites,
3 cartes empilées ne tiennent pas dans 100vh) — même patron que duo-grid. */
@media (max-width:1023px){
.avis-grid{
display:flex;
overflow-x:auto;
scroll-snap-type:x mandatory;
gap:14px;
}
.avis-card{flex:0 0 290px;scroll-snap-align:start;padding:22px 22px 18px}
.avis-more-tail{display:none} /* « …presta » sur cartes étroites */
.avis-more{font-size:10px;letter-spacing:.12em} /* tient sur une ligne à 290px */
/* Formats : 4 colonnes trop étroites sous 1024 px → passage en 2×2
(demande d'Allan : les cartes vont À LA LIGNE, pas de défilement
latéral). La pastille « Format de référence » déborde de 9px du bord
haut de sa carte : le gap de 14px suffit, et sans conteneur défilant
rien ne la coupe. */
.fmt-grid{
grid-template-columns:repeat(2, 1fr);
gap:14px;
margin-top:22px;
}
.fmt-card{padding:20px 18px 18px}
/* Étapes Sites web : 4 colonnes deviennent étroites sous 1024px → 2×2
(même logique que les formats ci-dessus). En mobile ≤700px, la règle
.steps-grid → 1 colonne prend le relais (plus bas dans la feuille). */
.steps-grid--quad{grid-template-columns:repeat(2, 1fr); max-width:min(680px, 100%)}
}
@media (max-width:700px){
.sec .particle-title{margin-bottom:26px}
.sec-copy{font-size:15px}
/* Échelle compacte : pastille à gauche, textes à droite (3 rangées basses
au lieu de 3 jalons empilés — la section doit tenir dans 100vh). */
.level-scale{grid-template-columns:1fr;gap:12px;margin:22px auto;max-width:300px}
.level-scale::before{display:none}
.level-step{
display:grid;
grid-template-columns:auto 1fr;
column-gap:12px;
align-items:center;
text-align:left;
}
.level-dot{grid-row:1 / span 2;margin:0}
.level-step b{font-size:15px}
.level-sub{margin-top:1px}
/* Duo de cartes : rangée DÉFILANTE avec snap (même patron que edge-grid
sur l'accueil) — deux cartes empilées ne tiennent pas dans l'écran. */
.duo-grid{
display:flex;
overflow-x:auto;
scroll-snap-type:x mandatory;
gap:12px;
margin-top:22px;
}
/* text-align:left : les cartes du duo SOMBRE (Formations/Ateliers)
héritaient le centrage de la section — illisible sur les textes longs
(carte Formations à ~14 lignes) et incohérent avec le duo CLAIR déjà
aligné à gauche (.duo-grid--light .edge-card). On aligne tout à gauche
comme lui, titre compris. */
.duo-grid .edge-card{flex:0 0 250px;scroll-snap-align:start;padding:20px 20px 18px;text-align:left}
/* Formats : une carte par ligne (demande d'Allan — pas de défilement
latéral). La section défile verticalement en interne si besoin, comme
les autres sections denses. */
.fmt-grid{grid-template-columns:1fr;gap:12px}
.fmt-card{padding:18px 18px 16px}
/* Gains par métier : une carte par ligne, comme les formats. */
.job-grid{grid-template-columns:1fr;gap:12px;margin-top:22px}
.job-card{padding:16px 16px}
/* Conférences : le duo de stats s'empile, les photos aussi (paysage trop
étroites côte à côte sur 375px), sujets sensibles sur une colonne. */
.stat-duo{flex-direction:column;align-items:center;gap:16px;margin-top:20px}
.conf-photos{grid-template-columns:1fr;gap:12px;margin-top:22px}
.conf-photos img{height:150px}
.topic-list{grid-template-columns:1fr;gap:7px}
/* Automatisations : étapes sur une colonne, pastilles de métier resserrées. */
.steps-grid{grid-template-columns:1fr;gap:12px;margin-top:22px}
.step-card{padding:18px 18px 16px}
.credo article + article{margin-top:26px;padding-top:26px}
.credo article + article::before{width:150px}
.credo-lead{font-size:17px;margin-bottom:9px}
.credo-note{font-size:14px}
.pledge-panel li{padding:13px 16px;gap:2px 12px}
.pledge-panel .pledge-ico{width:30px;height:30px;margin-top:1px}
.pledge-panel .pledge-ico svg{width:15px;height:15px}
.pledge-panel strong{font-size:14.5px}
.pledge-panel p{font-size:13px;line-height:1.5}
.pledge-grid{grid-template-columns:1fr;gap:8px}
.pledge-grid li{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;
align-items:start;padding:16px 18px}
.pledge-ico{width:32px;height:32px;margin-bottom:0;grid-row:span 2}
.pledge-ico svg{width:16px;height:16px}
.pledge-grid strong{font-size:15.5px;margin-bottom:0}
.pledge-grid p{grid-column:2;margin:0;font-size:13.5px}
.story{margin-top:20px;padding-left:22px}
.story li{grid-template-columns:1fr;gap:3px;padding:10px 0}
.story li::before{left:-22px;top:16px}
.story b{font-size:15px}
.story p{font-size:13.5px}
/* Pastilles métiers : plus compactes, elles s'enroulent naturellement. */
.job-tabs-nav{gap:8px;margin-top:20px}
.job-tabs-nav label{padding:7px 13px;font-size:10px}
.gain-list.job-ex, .job-msg{padding:6px 18px}
.gain-list.job-ex li{font-size:13.5px;line-height:1.45;padding:9px 0 9px 20px}
.gain-list.job-ex li::before{top:calc(9px + .55em)}
.job-msg{padding:22px 20px}
.job-msg p{font-size:14px}
.duo-note{font-size:13px;margin-top:18px}
.gain-list{margin-top:20px}
.gain-list li{font-size:13.5px;padding:9px 2px;gap:12px}
.gain-ico{width:28px;height:28px}
.gain-ico svg{width:15px;height:15px}
.sec-copy--after{margin-top:22px}
}
/* ===========================================================================
PAGES INTÉRIEURES (contact, mentions légales…) — coquille classique
scrollable, sans canvas ni navigation par sections. Même langage visuel :
encre profonde, or, serifs.
=========================================================================== */
.page-shell{
min-height:100vh;
display:flex;
flex-direction:column;
background:
radial-gradient(120% 55% at 50% 0%, rgba(201,168,106,.07) 0%, transparent 60%),
var(--ink);
/* Les canvas des titres en particules (plite) débordent volontairement de
leur encre (marge de vol du vent) : on les clippe au bord de l'écran au
lieu de créer un défilement horizontal sur mobile. */
overflow-x:clip;
/* ⚠️ Contexte d'empilement OBLIGATOIRE pour le champ de poussière ambiant
(app.js en mode page, canvas `.plite-bg` en z-index:-1). Sans lui, un enfant
en z-index négatif est peint AVANT le fond du body — or le fond (encre
ci-dessus, ou crème sur .page-shell--light) est OPAQUE et le recouvrait
entièrement (bug vécu : « je ne vois aucune particule »). L'isolation fait
du body un contexte d'empilement → l'ordre devient fond → poussière →
contenu. N'affecte pas les z-index INTERNES (menu, voile, feuilles des
outils), tous enfants du body : leur ordre relatif est conservé. */
isolation:isolate;
}
/* Menu sur page intérieure : visible immédiatement (pas de fondu retardé),
cliquable sans JS. SANS fond — même transparence que le menu des pages
animées (demande d'Allan : un seul et même menu partout). */
.site-menu--page{
animation:none;
opacity:1;
pointer-events:auto;
padding-bottom:14px;
transition:background .3s ease, -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease;
}
/* Scrim au scroll : dès que la page défile (contenu qui passe SOUS le menu
transparent), un voile encre flouté réapparaît pour garder le menu lisible
et éviter la superposition. Classe posée par transitions.js. Universel
(pas de scroll-timeline), et n'utilise pas `animation` → aucun conflit avec
html.pt-internal .site-menu{animation:none}. */
.site-menu--page.is-scrolled{
background:rgba(24,53,66,.82);
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
border-bottom:1px solid rgba(246,241,234,.07);
}
.site-menu--page .menu-burger{pointer-events:auto}
.shell-main{
flex:1;
width:100%;
max-width:1100px;
margin:0 auto;
padding:150px 24px 96px;
}
.shell-kicker{
font-family:var(--sans);
font-size:10px;
letter-spacing:.3em;
text-transform:uppercase;
color:var(--gold);
margin-bottom:18px;
}
/* Titres des pages défilantes (contact, 404) : la typo commune vient de
.particle-title (les deux classes sont toujours posées ensemble dans le
HTML) ; seuls la taille et l'espacement diffèrent. */
.shell-title{
font-size:clamp(40px, 6vw, 68px);
margin-bottom:22px;
}
.shell-lead{
max-width:640px;
font-family:var(--serif);
font-size:clamp(16px, 1.4vw, 19px);
line-height:1.62;
color:var(--cream-dim);
}
/* Titres en particules des pages intérieures : UN canvas plein écran,
peint par app.js (mode page) avec l'offset de scroll — les envolées du vent
ne sont clippées qu'aux bords de l'écran.
ABSOLU (pas fixe), re-calé chaque frame en translateY(scrollY) par le JS :
le canvas appartient au contenu défilant, donc le REBOND élastique du Mac
le translate comme le texte (un canvas fixe restait collé à la fenêtre
pendant le rebond — Chrome n'expose ce dépassement à aucune API JS). Comme
le dessin compense avec la MÊME valeur que la translation, les deux
s'annulent : les titres suivent exactement le contenu, rebond compris. */
.plite-canvas{position:absolute;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:5}
/* Canvas du champ de poussière ambiant (app.js, mode page) : z-index NÉGATIF →
la poussière passe DERRIÈRE le texte de lecture (le canvas des titres, lui,
reste à z-index:5, devant). Sa visibilité dépend du contexte d'empilement
posé sur `.page-shell` (isolation:isolate) — voir le commentaire là-bas. */
.plite-bg{position:absolute;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:-1}
/* .particle-title impose text-align:center ; sur les pages intérieures le
titre garde l'alignement de sa composition (gauche sur contact, centré
sur la page d'erreur via son wrapper). */
.page-shell .particle-title{
text-align:inherit;
}
.shell-hero{margin-bottom:56px}
.shell-hero--center{
text-align:center;
margin:10vh auto 0;
max-width:640px;
}
.shell-hero--center .shell-lead{margin:0 auto}
.shell-actions{margin-top:36px}
/* ----- Contact : formulaire + coordonnées ----- */
.contact-cols{
display:grid;
grid-template-columns:1.25fr .75fr;
gap:clamp(32px, 4vw, 64px);
align-items:start;
}
.contact-form{
background:linear-gradient(158deg, rgba(246,241,234,.055) 0%, rgba(246,241,234,.012) 62%);
border:1px solid rgba(246,241,234,.1);
border-radius:20px;
padding:clamp(24px, 3vw, 38px);
}
.form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
}
.form-field{margin-bottom:18px}
.form-field label{
display:block;
font-family:var(--sans);
font-size:10px;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--cream-dim);
margin-bottom:8px;
}
.form-field label b{color:var(--gold);font-weight:400} /* astérisque requise */
.form-field input,
.form-field select,
.form-field textarea{
width:100%;
font-family:var(--sans);
font-size:14px;
color:var(--cream);
background:rgba(255,255,255,.05);
border:1px solid rgba(246,241,234,.16);
border-radius:12px;
padding:13px 16px;
outline:none;
transition:border-color .25s, background .25s;
}
.form-field select{
appearance:none;
-webkit-appearance:none;
/* Chevron dessiné en data-URI (CSP img-src data: autorisé) */
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23F6F1EA' stroke-opacity='.55' fill='none' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 16px center;
background-size:10px 6px;
}
.form-field select option{background:var(--ink-2);color:var(--cream)}
.form-field textarea{min-height:150px;resize:vertical}
.form-field input::placeholder,
.form-field textarea::placeholder{color:rgba(246,241,234,.35)}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
border-color:rgba(201,168,106,.6);
background:rgba(255,255,255,.07);
}
/* Honeypot : hors écran (pas display:none, que certains bots détectent) */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* Messages (erreurs regroupées / succès) au-dessus du bouton */
.form-alert{
border:1px solid rgba(201,168,106,.45);
background:rgba(201,168,106,.1);
border-radius:12px;
padding:14px 18px;
margin-bottom:18px;
font-family:var(--serif);
font-size:14.5px;
line-height:1.55;
color:var(--cream);
}
.form-alert ul{margin:0;padding-left:18px}
.form-alert li + li{margin-top:4px}
.form-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.form-actions .btn-gold{border:1px solid rgba(160,120,60,.55);cursor:pointer}
/* Note d'information CNIL sous le bouton : finalité des données + lien vers
la politique de confidentialité. flex:1 : occupe le reste de la rangée et
passe à la ligne proprement quand la place manque. */
.form-note{
flex:1 1 220px;
font-family:var(--sans);
font-size:11px;
letter-spacing:.04em;
color:var(--cream-dim);
}
.form-note a{
color:var(--gold);
text-decoration:underline;
text-underline-offset:2px;
}
/* Reprise du contexte d'un outil (contact-prefill.js) : posée AU-DESSUS du
champ message, donc hors de la rangée .form-actions — elle ne doit pas
hériter du flex:1 ci-dessus, ni se coller au textarea. */
.form-note--prefill{
flex:none;
line-height:1.5;
margin-bottom:8px;
padding-left:10px;
border-left:2px solid var(--gold);
}
/* Coordonnées directes (aside) */
.contact-aside{padding-top:6px}
/* Spécificité ≥ .contact-aside p (sinon la règle générique gagnerait le
font-size et rendrait ces intitulés en 15.5px serif). */
.contact-aside .aside-label{
font-family:var(--sans);
font-size:10px;
letter-spacing:.26em;
text-transform:uppercase;
color:var(--gold);
opacity:1;
margin:0 0 14px;
}
.contact-aside .aside-label:not(:first-child){margin-top:36px}
.contact-aside p{
font-family:var(--serif);
font-size:15.5px;
line-height:1.6;
color:var(--cream);
opacity:.88;
}
.contact-aside p + p{margin-top:6px}
.contact-aside a{color:inherit;text-decoration:none;transition:color .25s}
.contact-aside a:hover{color:var(--gold)}
.aside-perks{list-style:none;margin:0;padding:0}
.aside-perks li{
display:flex;
align-items:center;
gap:10px;
font-family:var(--sans);
font-size:11px;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--cream-dim);
}
.aside-perks li + li{margin-top:10px}
.aside-perks li::before{
content:"";
width:4px;height:4px;border-radius:50%;
background:var(--gold);
flex:0 0 auto;
}
/* Pied de page autonome (partial des pages intérieures) : pas de marges
négatives (elles compensaient le padding de la section CTA de l'accueil). */
.site-foot--page{margin:0;padding:38px 24px 34px}
@media (max-width:900px){
.contact-cols{grid-template-columns:1fr}
.contact-aside{order:2}
}
@media (max-width:700px){
.shell-main{padding:120px 20px 72px}
.shell-hero{margin-bottom:40px}
.form-row{grid-template-columns:1fr}
.site-foot--page{padding:30px 20px 28px}
}
/* ===========================================================================
BLOG — index (blog.php) et gabarit d'article (article.php).
Pages défilantes CLAIRES (.page-shell--light) — premières du genre : le
body passe crème (app.js en mode page choisit seul des particules encre via la
luminance du body), le menu porte .on-light dès le PHP (menu.php,
$menuLight), html et le voile de transition restent ENCRE (règle d'or des
bascules de document), et le pied de page garde sa bande nuit — écho de
l'alternance clair/foncé du site.
Cartes VERTICALES à image de couverture (SVG décoratifs de charte dans
Images/Blog/, remplaçables par de vraies photos via le champ `image` de
partials/articles.php). Une carte = UN lien entier vers /blog-.
=========================================================================== */
.page-shell--light{
background:
radial-gradient(120% 55% at 50% 0%, rgba(201,168,106,.10) 0%, transparent 60%),
var(--cream);
}
/* Menu au scroll sur page claire : le voile encre des pages sombres rendrait
le texte (encre via .on-light) illisible → scrim crème flouté. */
.site-menu--page.on-light.is-scrolled{
background:rgba(246,241,234,.86);
border-bottom:1px solid rgba(24,53,66,.08);
}
/* Petites capitales dorées sur crème : l'or de charte tombe à 2,8:1 → même
remède MESURÉ que le pied clair de formations (#8d6a30 ≈ 4,7:1). */
.page-shell--light .shell-kicker{color:#8d6a30}
.page-shell--light .shell-lead{color:rgba(24,53,66,.72)}
/* Chapeau de l'index : accroche sur TOUTE la largeur (demande d'Allan —
le shell-lead générique est plafonné à 640px). */
.blog-hero .shell-lead{max-width:none}
/* Étiquettes de catégories : pastilles de tri sous l'accroche — même langage
que les pastilles métier d'automatisations, en registre clair. L'active
est pleine ; « Tous » sans filtre. */
.blog-cats{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:26px;
}
.blog-cats a{
padding:8px 18px;
border-radius:999px;
font-family:var(--sans);
font-size:11px;
letter-spacing:.1em;
text-transform:uppercase;
text-decoration:none;
color:rgba(24,53,66,.62);
border:1px solid rgba(24,53,66,.18);
transition:color .4s, border-color .4s, background .4s;
}
.blog-cats a:hover{border-color:rgba(201,168,106,.6);color:var(--ink)}
.blog-cats a.on{
color:#8d6a30;
border-color:rgba(201,168,106,.65);
background:rgba(201,168,106,.12);
}
/* ===== Échange de la grille sans rechargement (blog-filtre.js) =====
Les cartes en place s'effacent d'un souffle, les nouvelles remontent à leur
place l'une après l'autre. Registre volontairement DISCRET, calé sur
jobPanelIn (0,45 s, ~5 px) : on souligne le changement, on ne le met pas en
scène. L'ancienne grille reste dans le flux pendant la requête (seulement
rendue transparente) → aucun effondrement de hauteur, donc aucun saut.
⚠️ Durée de sortie à garder synchrone avec SORTIE_MS dans blog-filtre.js. */
.blog-grid--sortie,
.blog-vide--sortie{
opacity:0;
transform:translateY(4px);
transition:opacity .17s ease, transform .17s ease;
}
.blog-grid--entree .blog-card,
.blog-vide--entree{
animation:blogCardIn .42s cubic-bezier(.2,.8,.2,1) both;
}
/* Décalage en cascade, une carte après l'autre (40 ms) — plafonné à la page
pleine (BLOG_PAR_PAGE = 9) : la dernière démarre à 320 ms, l'ensemble est
posé avant 0,75 s. */
.blog-grid--entree .blog-card:nth-child(2){animation-delay:.04s}
.blog-grid--entree .blog-card:nth-child(3){animation-delay:.08s}
.blog-grid--entree .blog-card:nth-child(4){animation-delay:.12s}
.blog-grid--entree .blog-card:nth-child(5){animation-delay:.16s}
.blog-grid--entree .blog-card:nth-child(6){animation-delay:.20s}
.blog-grid--entree .blog-card:nth-child(7){animation-delay:.24s}
.blog-grid--entree .blog-card:nth-child(8){animation-delay:.28s}
.blog-grid--entree .blog-card:nth-child(n+9){animation-delay:.32s}
@keyframes blogCardIn{
from{opacity:0;transform:translateY(6px)}
to{opacity:1;transform:none}
}
/* Mouvement réduit : l'échange reste instantané et net (blog-filtre.js coupe
aussi son délai de sortie en lisant la même préférence). */
@media (prefers-reduced-motion: reduce){
.blog-grid--sortie,
.blog-vide--sortie{transition:none;opacity:1;transform:none}
.blog-grid--entree .blog-card,
.blog-vide--entree{animation:none}
}
/* Catégorie vide + pagination */
.blog-vide{
font-family:var(--serif);
font-size:16px;
color:rgba(24,53,66,.6);
padding:36px 0;
}
.blog-pagination{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:baseline;
gap:18px;
margin-top:40px;
}
.blog-pagination a{
font-family:var(--sans);
font-size:11px;
letter-spacing:.18em;
text-transform:uppercase;
text-decoration:none;
color:#8d6a30;
}
.blog-page-prec::before{content:"← ";}
.blog-page-suiv::after{content:" →";}
.blog-page-suiv{text-align:right}
.blog-page-etat{
font-family:var(--sans);
font-size:11px;
letter-spacing:.14em;
text-transform:uppercase;
color:rgba(24,53,66,.5);
}
/* ----- Index : cartes verticales, couverture 16/9 en tête (flush), corps
dessous. La carte est un : levée + liseré doré au survol et léger zoom
de la couverture (l'affordance est voulue — c'est un lien). ----- */
.blog-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:22px;
}
.blog-card{
display:flex;
flex-direction:column;
border-radius:20px;
overflow:hidden; /* couverture flush + zoom clippé */
background:rgba(255,255,255,.72);
border:1px solid rgba(24,53,66,.07);
box-shadow:0 18px 44px -18px rgba(24,53,66,.14);
text-decoration:none;
transition:transform .45s cubic-bezier(.2,.8,.2,1), border-color .45s, box-shadow .45s;
}
.blog-card:hover{
transform:translateY(-6px);
border-color:rgba(201,168,106,.45);
box-shadow:0 26px 54px -20px rgba(24,53,66,.22);
}
.blog-cover{
display:block;
aspect-ratio:16 / 9;
overflow:hidden;
border-bottom:1px solid rgba(24,53,66,.06);
flex:0 0 auto;
}
.blog-cover img{
display:block;
width:100%;
height:100%;
object-fit:cover;
transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.blog-card:hover .blog-cover img{transform:scale(1.04)}
.blog-card-inner{
display:flex;
flex-direction:column;
flex:1;
padding:22px 26px;
}
.blog-meta{
display:flex;
flex-wrap:wrap;
align-items:baseline;
gap:6px 10px;
font-family:var(--sans);
font-size:10px;
letter-spacing:.22em;
text-transform:uppercase;
color:rgba(24,53,66,.6);
margin-bottom:14px;
}
.blog-cat{color:#8d6a30}
.blog-card .blog-meta{gap:4px 14px}
.blog-card .blog-meta time{margin-left:auto}
.blog-card h2{
font-family:var(--serif);
font-style:italic;
font-weight:500;
font-size:20px;
line-height:1.3;
color:var(--ink);
margin-bottom:10px;
transition:color .4s;
}
.blog-card:hover h2{color:#8d6a30}
.blog-excerpt{
font-family:var(--serif);
font-size:14.5px;
line-height:1.6;
color:rgba(24,53,66,.72);
margin-bottom:20px;
flex:1; /* le « Lire l'article » reste ancré en bas de la carte */
}
/* « Lire l'article » : même langage que les liens de cartes services
(flèche qui glisse + filet qui se déploie), déclenché par le survol de
TOUTE la carte puisqu'elle est le lien. */
.blog-read{
position:relative;
display:inline-flex;
align-items:center;
gap:10px;
align-self:flex-start;
font-family:var(--sans);
font-size:11px;
letter-spacing:.24em;
text-transform:uppercase;
color:#8d6a30;
}
.blog-read::after{content:"→";font-size:14px;transition:transform .3s ease}
.blog-card:hover .blog-read::after{transform:translateX(4px)}
.blog-read::before{
content:"";
position:absolute;left:0;right:24px;bottom:-4px;height:1px;
background:currentColor;opacity:.5;
transform:scaleX(0);transform-origin:left center;
transition:transform .35s ease;
}
.blog-card:hover .blog-read::before{transform:scaleX(1)}
/* Contrôle d'intégrité des articles (développement uniquement) */
.blog-erreurs{
margin:0 0 24px;
padding:12px 16px;
border:1px solid rgba(160,60,60,.45);
border-radius:10px;
font-family:var(--sans);
font-size:12px;
line-height:1.5;
color:#8a3232;
}
/* ----- Article : colonne de lecture centrée (760px) ----- */
.art-wrap,
.art-more,
.art-cta{max-width:760px;margin-left:auto;margin-right:auto}
/* Chapeau CENTRÉ : app.js centre les lignes d'un titre multiligne
(échantillonnage textAlign:center) — une composition à gauche mélangerait
ligne 1 à gauche et ligne 2 centrée. Tout le chapeau suit. */
.art-hero{margin-bottom:40px;text-align:center}
.art-hero .blog-meta{margin-bottom:18px;justify-content:center}
.art-title{font-size:clamp(32px, 4.4vw, 52px);line-height:1.16}
.art-lead{max-width:600px;margin:0 auto}
/* Couverture de l'article : la même image que la carte, en grand */
.art-cover{
margin:0 0 40px;
border-radius:20px;
overflow:hidden;
border:1px solid rgba(24,53,66,.08);
box-shadow:0 24px 60px -30px rgba(24,53,66,.3);
}
.art-cover img{display:block;width:100%;height:auto}
.art-body{
font-family:var(--serif);
font-size:clamp(16px, 1.35vw, 18.5px);
line-height:1.7;
color:rgba(24,53,66,.88);
}
.art-body p{margin-bottom:1.05em}
.art-body > :last-child{margin-bottom:0}
.art-body h2{
font-family:var(--serif);
font-style:italic;
font-weight:500;
font-size:clamp(21px, 1.9vw, 25px);
line-height:1.3;
color:var(--ink);
margin:1.7em 0 .65em;
}
.art-body > h2:first-child{margin-top:0}
.art-body ul{list-style:none;margin:0 0 1.05em;padding:0}
/* ⚠️ SURTOUT PAS display:grid ni display:flex ici — la leçon a coûté deux
fois dans ce projet (les encarts .avis de la console, puis cette liste).
En grille, CHAQUE nœud enfant devient un item : sur
`Titre : la suite de la phrase `, la va
dans la colonne de texte, et LE TEXTE QUI SUIT tombe dans la cellule libre
d'après — celle de 10 px réservée à la puce. Vu en production sur « Les
autres tribunes de la série » : un mot par ligne sur douze lignes.
`li > * {grid-column:2}` ne suffisait pas : un nœud de TEXTE n'est pas un
élément, aucun sélecteur CSS ne l'atteint.
La puce est donc posée en ABSOLU et le texte réserve sa place par un
padding : le contenu du redevient un flux inline normal, où texte et
éléments se mélangent librement, quel que soit le Markdown écrit dans la
console. Retrait inchangé au pixel près : 10 px de colonne + 12 px d'écart
= 22 px de padding. */
.art-body ul li{
position:relative;
padding:5px 0 5px 22px;
}
.art-body ul li::before{
content:"";
position:absolute;
left:0;
top:calc(5px + .62em); /* le padding du haut + l'ancien décalage de puce */
width:5px;height:5px;border-radius:50%;
background:var(--gold);
}
/* Vocabulaire Markdown étendu (Parsedown) : listes numérotées, intertitres
de 3ᵉ rang, code, filet, images posées dans le corps. */
.art-body ol{margin:0 0 1.05em;padding-left:1.4em}
.art-body ol li{padding:5px 0}
.art-body ol li::marker{color:var(--gold);font-weight:500}
.art-body h3{
font-family:var(--serif);
font-style:italic;
font-weight:500;
font-size:clamp(18px, 1.6vw, 21px);
line-height:1.3;
color:var(--ink);
margin:1.5em 0 .55em;
}
.art-body hr{
border:none;
width:56px;
height:1px;
background:rgba(201,168,106,.6);
margin:2em auto;
}
.art-body code{
font:.82em/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
background:rgba(24,53,66,.07);
padding:1px 6px;
border-radius:5px;
}
.art-body pre{
margin:0 0 1.05em;
padding:14px 18px;
border-radius:12px;
background:rgba(24,53,66,.07);
overflow-x:auto;
}
.art-body pre code{background:none;padding:0}
.art-body img{
display:block;
max-width:100%;
height:auto;
border-radius:16px;
margin:1.4em auto;
border:1px solid rgba(24,53,66,.08);
}
.art-body blockquote{
margin:1.4em 0;
padding:4px 0 4px 24px;
border-left:2px solid var(--gold);
font-style:italic;
color:rgba(24,53,66,.66);
}
/* La couleur vient de la règle dorée plus bas ; ici, la seule graisse. */
.art-body strong, .art-body em{font-weight:500}
.art-body a{
color:#8d6a30;
text-decoration:none;
border-bottom:1px solid rgba(141,106,48,.4);
transition:border-color .3s;
}
.art-body a:hover{border-bottom-color:#8d6a30}
/* ----- Appareil de bas d'article : sources, lectures complémentaires -------
Écrit en Markdown derrière une ligne `::: sources` (blog_md_vers_html).
Demande d'Allan : DISCRET — petit, grisé, italique. Il doit se lire comme
une note de bas de page, pas comme une section de l'article : d'où le filet
de séparation, la taille réduite et la couleur qui recule. Tout ce qui vit
dedans (titres, puces, liens) rentre dans le rang, sinon un `## Sources`
reviendrait en gros italique de 25 px et la discrétion serait perdue. */
.art-sources{
margin-top:2.6em;
padding-top:1.5em;
border-top:1px solid rgba(24,53,66,.14);
font-size:.8em;
font-style:italic;
line-height:1.65;
color:rgba(24,53,66,.5);
}
.art-sources > :first-child{margin-top:0}
.art-sources > :last-child{margin-bottom:0}
.art-body .art-sources h2,
.art-body .art-sources h3{
font-size:1.08em;
font-weight:500;
font-style:italic;
color:rgba(24,53,66,.62);
margin:1.5em 0 .5em;
}
.art-body .art-sources p{margin-bottom:.7em}
.art-body .art-sources ul{margin-bottom:.7em}
.art-body .art-sources li{padding:2px 0 2px 22px}
/* Puce ramenée au gris du bloc : l'or du corps d'article y crierait. */
.art-body .art-sources li::before{
background:rgba(24,53,66,.3);
width:4px;height:4px;
top:calc(2px + .62em);
}
/* Liens : lisibles et cliquables, mais dans la même retenue que le reste —
ils ne reprennent leur or qu'au survol. */
.art-body .art-sources a{
color:inherit;
border-bottom-color:rgba(24,53,66,.25);
overflow-wrap:anywhere; /* les URL nues ne doivent pas déborder */
}
.art-body .art-sources a:hover{color:#8d6a30;border-bottom-color:#8d6a30}
/* Dans le corps, la mise en valeur est DORÉE (dégradé détouré sur le texte).
Dans les sources, ce serait un cri au milieu d'un bloc qu'on veut discret :
les deux balises y reviennent à l'encre du bloc. Et l'italique dans un bloc
déjà italique se compose en romain, comme le veut la règle typographique —
ce qui sert aux titres de revues. */
.art-body .art-sources em,
.art-body .art-sources strong{
background:none;
-webkit-background-clip:border-box;
background-clip:border-box;
color:inherit;
-webkit-text-fill-color:currentColor;
}
.art-body .art-sources em{font-style:normal}
.art-body .art-sources strong{font-weight:600}
/* Signature du rédacteur (gérée en console) : photo + « Par Nom », rattachée
à la FIN DU TEXTE et alignée à droite. Volontairement minuscule — c'est une
mention, pas un encadré d'auteur : elle ne doit rien peser face au corps. */
.art-sign{
display:flex;
align-items:center;
justify-content:flex-end;
gap:12px;
margin-top:34px;
font-family:var(--sans);
font-size:11px;
letter-spacing:.18em;
text-transform:uppercase;
color:rgba(24,53,66,.55);
}
.art-sign-photo{
flex:none;
width:40px;
height:40px;
border-radius:50%;
object-fit:cover;
border:1px solid rgba(24,53,66,.1);
}
.art-sign-nom{color:var(--ink);font-weight:500}
button.art-sign-nom{
font:inherit;
letter-spacing:inherit;
text-transform:inherit;
background:none;
border:0;
border-bottom:1px solid rgba(201,168,106,.6);
padding:0 0 1px;
cursor:pointer;
transition:color .3s, border-color .3s;
}
button.art-sign-nom:hover,
button.art-sign-nom:focus-visible{color:#b58f52;border-color:#b58f52}
.bio-pop{text-align:center}
.bio-pop-photo{
display:block;
width:84px;height:84px;
margin:0 auto 18px;
border-radius:50%;
object-fit:cover;
border:1px solid rgba(201,168,106,.45);
}
.bio-pop .avis-pop-text{text-align:left}
/* Pied d'article : retour à l'index */
.art-foot{
margin-top:52px;
padding-top:26px;
border-top:1px solid rgba(24,53,66,.12);
}
.art-back{
display:inline-flex;
align-items:center;
gap:10px;
font-family:var(--sans);
font-size:11px;
letter-spacing:.24em;
text-transform:uppercase;
color:#8d6a30;
text-decoration:none;
}
.art-back::before{content:"←";font-size:14px;transition:transform .3s ease}
.art-back:hover::before{transform:translateX(-4px)}
/* Retour en TÊTE d'article : aligné à gauche au-dessus du chapeau centré. */
/* Fil d'Ariane en tête de PAGE (hors colonne de lecture, désormais enfant
direct de .shell-main) : barre de contexte pleine largeur alignée à gauche,
détachée du chapeau par un filet. Sa pleine largeur + ce filet la
distinguent nettement de la ligne méta (catégorie · date · lecture) restée
centrée dans le chapeau — fin de l'effet « deux lignes qui se ressemblent ».
Le maillon courant (titre) s'ellipse s'il est trop long. */
.art-breadcrumb{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px 10px;
margin:0 0 44px;
padding-bottom:20px;
border-bottom:1px solid rgba(24,53,66,.1);
font-family:var(--sans);
font-size:10px;
letter-spacing:.22em;
text-transform:uppercase;
color:rgba(24,53,66,.5);
}
.art-breadcrumb a{color:#8d6a30;text-decoration:none;transition:opacity .3s}
.art-breadcrumb a:hover{opacity:.6}
.art-breadcrumb-sep{color:rgba(24,53,66,.3)}
.art-breadcrumb-cur{
max-width:min(60ch, 100%);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:rgba(24,53,66,.45);
}
/* « À lire ensuite » : cartes réduites (pas d'extrait), 2 colonnes */
.art-more{margin-top:64px}
.art-more-label{
font-family:var(--sans);
font-size:10px;
letter-spacing:.3em;
text-transform:uppercase;
color:#8d6a30;
margin-bottom:18px;
}
.blog-grid--suite{grid-template-columns:1fr 1fr}
.blog-card--mini .blog-card-inner{padding:18px 22px}
.blog-card--mini h2{font-size:17.5px;margin-bottom:14px;flex:1}
/* Invitation finale : cartouche ambré (langage du callout financements) */
.art-cta{
margin-top:64px;
padding:34px 36px;
border-radius:20px;
border:1px solid rgba(201,168,106,.36);
background:linear-gradient(158deg, rgba(201,168,106,.12), rgba(201,168,106,.03));
text-align:center;
}
.art-cta p{
max-width:560px;
margin:0 auto 24px;
font-family:var(--serif);
font-size:16.5px;
line-height:1.6;
color:var(--ink);
}
@media (max-width:1000px){
.blog-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
.blog-grid,
.blog-grid--suite{grid-template-columns:1fr}
.blog-card-inner{padding:20px 22px}
.art-cover{margin-bottom:32px}
.art-foot{margin-top:44px}
.art-sign{margin-top:30px}
.art-more,
.art-cta{margin-top:48px}
.art-cta{padding:28px 24px}
}
/* ===========================================================================
COULOIR DE LA PILULE DES DOTS (accueil animé uniquement, html.full-page).
La pilule est fixed à droite (~54px de couloir + respiration). Dès que la
marge libre du contenu centré devient plus étroite (< ~1280px), on réserve
son couloir : le contenu STATIQUE est excentré vers la gauche — la pilule
ne recouvre jamais rien. Les rangées défilantes (cartes, marquee) passent
dessous sans rien cacher définitivement : on ne les excentre pas, sauf
leurs variantes grille (edge/team) qui sont statiques.
Placé en FIN de feuille : gagne la cascade sur les overrides responsive.
=========================================================================== */
@media (max-width:1279px){
/* Sections dont le padding latéral porte le contenu (24px + 64px de couloir) */
html.full-page .page--light,
html.full-page .page--statement,
html.full-page .page--trust{padding-right:88px}
/* Wrappers centrés des sections à rangées pleine largeur */
html.full-page .services-header,
html.full-page .edge-head,
html.full-page .team-head{padding-right:88px}
/* Grilles statiques desktop (1160/1148px de large → sous la pilule sinon) */
html.full-page .edge-grid,
html.full-page .team-grid{padding-right:88px}
/* Pied de page de la section CTA : la bande reste pleine largeur,
son contenu réserve le couloir */
html.full-page .site-foot .foot-inner{padding-right:64px}
}
@media (max-width:700px){
/* Pilule plus fine et plus proche du bord (right:18px) → couloir 54px */
html.full-page .page--light,
html.full-page .page--statement{padding-right:78px}
html.full-page .page--trust{padding-right:74px}
html.full-page .services-header,
html.full-page .edge-head,
html.full-page .team-head{padding-right:78px}
/* En mobile, edge-grid et team-grid redeviennent des rangées DÉFILANTES :
on restaure leur padding de rangée (pas d'excentrage). */
html.full-page .edge-grid{padding-right:24px}
html.full-page .team-grid{padding-right:24px}
html.full-page .site-foot .foot-inner{padding-right:54px}
}
/* ===========================================================================
TRANSITIONS ENTRE PAGES — voile d'encre piloté (transitions.js).
Chaque page charge sous un voile encre+or (même recette que les fonds du
site — jamais de noir nu) ; transitions.js le lève (html.pt-ready) quand la
page a réellement peint (load + polices + 2 rAF), et le repose
(html.pt-leaving) avant de naviguer. z-index 26 : au-dessus du contenu et
des dots (20/21), SOUS le menu (30) — le menu reste visible en permanence.
Sans JS :