/* SECTIONS — un bloc par section, dans l'ordre exact de la page.
   Chaque bloc porte ses propres media queries, juste en dessous de ce qu'elles modifient.
   Les briques réutilisables sont dans components.css, le mouvement dans motion.css. */

/* ══ FONDS PHOTO ══
   Une photo posée très en retrait derrière une section : elle donne de la
   matière là où le fond était nu, sans rien disputer au texte. Trois réglages
   la tiennent à sa place : une opacité de 7 %, une désaturation qui l'empêche
   de tirer la page hors de sa palette, et un masque qui la fait disparaître
   avant d'atteindre les bords. Le contenu passe au-dessus par z-index.
   Ajouter ou retirer un fond ne demande qu'une balise <picture> dans la
   section concernée. */
/* Le flou est ce qui fait la différence entre une matière et un filigrane :
   sans lui, on reconnaît le sujet — un visage apparaissait derrière un titre —
   et la photo se met à disputer la lecture. Dissoute, il n'en reste que des
   variations de lumière.
   Pas d'agrandissement pour masquer le bord adouci par le flou : une image
   absolue mise à l'échelle dépasse de son conteneur, et comme deux de ces
   sections portent un bloc collant, on ne peut pas les rogner — un ancêtre en
   overflow: hidden désactive position: sticky. C'est le masque qui s'en charge,
   en éteignant l'image bien avant les bords. */
.sec-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	opacity: .085; filter: grayscale(.85) contrast(.88) blur(9px);
	pointer-events: none; z-index: 0;
	-webkit-mask-image: radial-gradient(92% 72% at 70% 34%, #000 0%, rgba(0,0,0,.42) 48%, transparent 78%);
	mask-image: radial-gradient(92% 72% at 70% 34%, #000 0%, rgba(0,0,0,.42) 48%, transparent 78%); }
section > .wrap { position: relative; z-index: 1; }

/* ══ HERO ══ */
.hero { padding-top: clamp(6.5rem, 12vh, 9rem); padding-bottom: clamp(2.5rem, 4.5vw, 4rem); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
	background-image: linear-gradient(rgba(31,61,48,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(31,61,48,.05) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(86% 66% at 80% 4%, #000, transparent 70%);
	mask-image: radial-gradient(86% 66% at 80% 4%, #000, transparent 70%); }
.hero-grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: clamp(2.5rem, 4.5vw, 4.5rem); align-items: center; }
.hero h1 { margin-bottom: 21px; }
.hero .t-lead { max-width: 31rem; }
.hero-cta { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-tel { font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em; display: inline-flex; align-items: center; gap: 9px; padding: 14px 4px; }
.hero-tel svg { width: 17px; height: 17px; color: var(--lime-deep); }
.hero-tel { transition: color .2s var(--soft-e), transform .1s var(--out); }
.hero-tel:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .hero-tel:hover { color: var(--lime-deep); } }
.hero-note { margin-top: 18px; display: flex; align-items: center; gap: 9px; font-size: .89rem; color: var(--muted-2); }
.hero-note .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); position: relative; flex: none; }
.hero-note .dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--lime); animation: halo 2.8s var(--out) infinite; }

.proof { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; flex-wrap: wrap; }
.stack { display: flex; }
.stack span { width: 41px; height: 41px; border-radius: 50%; background: var(--card); border: 1px solid var(--line);
	margin-left: -11px; display: grid; place-items: center; padding: 7px; overflow: hidden; box-shadow: var(--sh-1);
	transition: transform .3s var(--out); }
.stack span:first-child { margin-left: 0; }
/* width/height sont posés dans le HTML pour réserver la place : ils arrivent
   ici comme des dimensions imposées, et max-height ne parvient pas à les
   plafonner dans une grille. Sans ce rappel, le logo est rendu hors du cercle. */
.stack span img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.stack .n { background: var(--forest); border-color: var(--forest); color: #fff; font-size: .78rem; font-weight: 700; padding: 0; }
@media (hover: hover) and (pointer: fine) { .stack:hover span { transform: translateY(-3px); } }
.stars { display: flex; gap: 2px; }
.stars svg { width: 17px; height: 17px; color: var(--amber); }
.seeall { font-size: .88rem; font-weight: 600; color: var(--muted); text-decoration: underline;
	text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--line-2);
	transition: color .2s var(--soft-e), text-decoration-color .2s var(--soft-e); }
.seeall:active { transform: scale(.97); transition-duration: .1s; }
@media (hover: hover) and (pointer: fine) {
	.seeall:hover { color: var(--ink); text-decoration-color: var(--lime-deep); }
}

.shot { position: relative; }
.shot::before { content: ""; position: absolute; inset: 0; transform: translate(16px,16px);
	background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-xl); }
.shot-frame { position: relative; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line);
	box-shadow: var(--sh-4); aspect-ratio: 4/4.15; }
.shot-frame img { width: 100%; height: 100%; object-fit: cover; }

/* La signature du site : quatre visages, dès le premier écran */
.crew { position: absolute; z-index: 3; left: -26px; bottom: 24px; right: 14px;
	background: rgba(252,253,250,.96);
	border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-3);
	padding: 14px 17px; display: flex; align-items: center; gap: 13px; }
.crew .faces { display: flex; flex: none; }
.crew .faces img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; margin-left: -10px; }
.crew .faces img:first-child { margin-left: 0; }
.crew .tx { font-size: .83rem; line-height: 1.4; color: var(--muted); text-wrap: balance; }
.crew .tx b { display: block; color: var(--ink); font-weight: 700; font-size: .89rem; }
/* Le bandeau mène à la section équipe. La flèche est là pour que ça se voie :
   une carte cliquable sans signe de sortie ne se distingue pas d'un décor.
   Le survol joue sur transform, que l'apparition n'utilise pas (elle passe par
   translate), donc les deux se composent au lieu de s'écraser. */
.crew { color: inherit; text-decoration: none;
	transition: transform .24s var(--out), box-shadow .24s var(--soft-e), border-color .2s var(--soft-e); }
.crew .go { width: 16px; height: 16px; flex: none; margin-left: auto; color: var(--lime-deep);
	transition: transform .24s var(--out); }
.crew:active { transform: scale(.985); transition-duration: .1s; }
@media (hover: hover) and (pointer: fine) {
	.crew:hover { transform: translateY(-2px); box-shadow: var(--sh-4); border-color: var(--line-2); }
	.crew:hover .go { transform: translateX(3px); }
}
.chip-a { position: absolute; z-index: 3; top: 22px; left: -18px; background: rgba(252,253,250,.96);
	border: 1px solid var(--line);
	border-radius: var(--r); box-shadow: var(--sh-3); padding: 10px 15px;
	display: flex; align-items: center; gap: 8px; font-size: .81rem; font-weight: 600; animation: bob 7s var(--soft-e) 1.5s infinite; }
.chip-a svg { width: 15px; height: 15px; color: var(--lime-deep); }
@media (max-width: 860px) {
	.hero-grid { grid-template-columns: 1fr; }
	/* Une seule colonne : le texte se centre. Les pastilles et les étoiles
	   restent sur une ligne, « Voir les avis » passe dessous ; le téléphone
	   suit le bouton de près au lieu de flotter à 12 px plus 14 px de
	   rembourrage ; la mention se centre ligne par ligne, son point posé dans
	   la première : en bloc flexible, elle prenait toute la largeur dès qu'elle
	   passait sur deux lignes, et restait calée à gauche. */
	.hero-left { text-align: center; }
	.proof { justify-content: center; row-gap: 12px; margin-bottom: 24px; }
	.proof .seeall { flex-basis: 100%; }
	.hero .t-lead { margin-inline: auto; text-wrap: balance; }
	.hero-cta { justify-content: center; row-gap: 0; margin-top: 26px; }
	.hero-note { display: block; margin-top: 10px; text-wrap: balance; }
	.hero-note .dot { display: inline-block; vertical-align: middle; margin: -2px 9px 0 0; }
	.shot { max-width: 25rem; margin-inline: auto; width: 100%; }
	.crew { right: 12px; left: -12px; }
}
@media (max-width: 560px) {
	.chip-a { left: -8px; }
	/* La carte équipe débordait du cadre et mangeait un tiers de la photo :
	   elle rentre dans les arrondis et rend 20 px au texte. */
	.crew { left: 10px; right: 10px; bottom: 14px; padding: 12px 14px; gap: 11px; }
	.crew .faces img { width: 34px; height: 34px; }
}

/* ══ BANDE DE PREUVE ══ */
.band { border-block: 1px solid var(--line); }
/* Quatre colonnes égales séparées par les filets : chaque chiffre se centre
   dans la sienne, leurs axes sont régulièrement espacés et l'ensemble tombe
   au milieu de la page. En flex réparti, les blocs de largeurs différentes
   décalaient le tout de 25 px vers la droite. */
.band .wrap { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; justify-items: center; gap: 20px; padding-block: 24px; }
.fig { display: flex; align-items: baseline; gap: 9px; }
.fig .v { font-size: 1.48rem; font-weight: 700; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.fig .v em { font-style: normal; color: var(--lime-deep); }
.fig .k { font-size: .91rem; color: var(--muted); }
.band .sep { width: 1px; height: 20px; background: var(--line); flex: none; }
/* Quatre blocs répartis librement ne tombent jamais en face les uns des autres :
   les libellés se replient sur deux lignes, chaque colonne démarre à un endroit
   différent et la bande paraît bâclée. Deux colonnes fixes règlent l'alignement.
   Sous 430 px le libellé passe sous le nombre : à deux colonnes de 150 px,
   « bulletins par mois » n'a plus la place de tenir à côté de « +800 ». */
@media (max-width: 860px) {
	/* align-items: center vient de la règle de base : dans une grille il
	   recentre chaque bloc dans sa rangée, et deux libellés de hauteurs
	   différentes ne démarrent plus au même endroit. */
	.band .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; align-items: start; }
	.band .sep { display: none; }
	/* Comme le hero au-dessus : chaque chiffre se centre dans sa colonne, et
	   les deux colonnes étant égales, leurs axes tombent de part et d'autre du
	   milieu de la page, à égale distance. */
	.band .wrap { justify-items: center; text-align: center; }
	.fig { justify-content: center; }
}
@media (max-width: 430px) {
	.fig { display: block; }
	.fig .k { display: block; margin-top: 2px; }
}

/* Le fondu des bords est peint par deux dégradés, pas par un masque :
   un masque posé sur un enfant qui bouge oblige à le re-tramer à chaque
   image, deux dégradés fixes ne coûtent rien. */
.rail { position: relative; padding-block: clamp(30px, 3.6vw, 42px); overflow: hidden; }
.rail::before, .rail::after { content: ""; position: absolute; top: 0; bottom: 0; width: 9%;
	z-index: 2; pointer-events: none; }
.rail::before { left: 0;  background: linear-gradient(90deg, var(--bg) 12%, transparent); }
.rail::after  { right: 0; background: linear-gradient(270deg, var(--bg) 12%, transparent); }

/* ══ LE CONSTAT — une scène, pas un tableau de bord ══ */
.constat-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2.5rem, 5.5vw, 5rem); align-items: center; }
.tale p { font-size: clamp(1.02rem, 1.35vw, 1.13rem); line-height: 1.72; color: var(--muted); max-width: 34rem; }
.tale p + p { margin-top: 16px; }
.tale p strong { color: var(--ink); font-weight: 600; }
.tale .dates { display: inline-block; font-variant-numeric: tabular-nums; color: var(--lime-deep); font-weight: 700; }
.beats { margin-top: clamp(2rem, 4vw, 2.75rem); border-top: 1px solid var(--line); }
.beat { display: grid; grid-template-columns: 6rem 1fr; gap: 20px; align-items: baseline;
	padding: 17px 0; border-bottom: 1px solid var(--line); }
.beat .v { font-size: 1.22rem; font-weight: 700; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.beat .v em { font-style: normal; font-size: .74rem; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: var(--lime-deep); display: block; margin-top: 3px; }
.beat p { font-size: .95rem; line-height: 1.6; color: var(--muted); padding-right: 6px; }
.constat-media { position: relative; }
.constat-media .fr { border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line);
	box-shadow: var(--sh-3); aspect-ratio: 4/4.5; }
.constat-media .fr img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

@media (max-width: 1060px) {
	.constat-grid { grid-template-columns: 1fr; gap: 2.5rem; }
	.constat-media { max-width: 27rem; }
}

/* ══ CE QUE VOUS NE FEREZ PLUS ══ */
/* Les deux colonnes se terminent ensemble. Avec align-items: start, celle de
   droite s'arrêtait où son contenu s'arrêtait, soit 23 px plus haut à 1340 px
   et 42 px à 1024 : l'écart se voyait d'autant plus qu'un intitulé de gauche
   passait sur deux lignes. Elles s'étirent maintenant toutes les deux, et
   l'encart de droite descend se poser sur le bord bas. */
.swap { display: grid; grid-template-columns: 1.32fr .68fr; gap: clamp(1rem,1.8vw,1.5rem);
	align-items: stretch; margin-top: clamp(2.5rem,5vw,3.5rem); }
.swap-col { display: flex; flex-direction: column;
	border-radius: var(--r-lg); padding: clamp(1.5rem,2.6vw,1.9rem) clamp(1.6rem,2.8vw,2rem) clamp(1.6rem,2.8vw,2rem); }
.swap-col.gone { background: var(--soft); border: 1px solid var(--line); }
.swap-col.keep { background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--sh-2); }
/* Le compte de tâches qui figurait à droite de l'intitulé a été retiré :
   l'intitulé est seul, la mise en ligne flexible n'a plus d'objet. */
.swap-col h3 { font-size: .77rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
	color: var(--muted-2); padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.swap-col.keep h3 { color: var(--lime-deep); border-bottom-color: var(--lime); }

.swap ul { list-style: none; margin-top: 4px; }
/* Une grille, pas des colonnes CSS. Avec « columns », le navigateur coupe la
   liste là où les deux moitiés s'équilibrent en hauteur : dès qu'un intitulé
   passe sur deux lignes, le point de coupe se déplace et les bas de colonnes
   ne tombent plus en face. Avec une grille, les éléments se rangent par rangées
   et chaque rangée prend la hauteur du plus haut des deux : l'alignement tient,
   quel que soit l'intitulé qui s'allonge. La lecture devient de gauche à droite
   plutôt que colonne par colonne, ce qui suit l'ordre du balisage. */
.swap .gone ul { display: grid; grid-template-columns: 1fr 1fr;
	column-gap: clamp(1.5rem,3vw,2.75rem); align-items: start; }
/* Les deux colonnes partagent exactement le même rythme : seule la couleur distingue */
/* text-wrap: pretty demande au navigateur d'éviter qu'un dernier mot reste
   seul sur sa ligne. C'est un filet de sécurité pour les intitulés à venir ;
   celui qui posait problème est tenu, lui, par une espace insécable dans le
   texte, qui garde « avant l'échéance » d'un seul tenant. */
.swap li { padding: 9px 0; font-size: .95rem; line-height: 1.45; text-wrap: pretty;
	display: flex; gap: 11px; align-items: flex-start; }
.swap .gone li { color: var(--muted); }
.swap .keep li { color: var(--ink); }
.swap li .m { flex: none; width: 17px; height: 17px; border-radius: 5px; display: grid; place-items: center; margin-top: 2px; }
.gone li .m { background: var(--card); border: 1px solid var(--line-2); color: var(--muted); }
.keep li .m { background: var(--lime); color: var(--forest); }
.swap li .m svg { width: 10px; height: 10px; }

/* margin-top: auto plutôt qu'une marge fixe : l'encart descend se poser
   sur le bord bas de la colonne, qui s'étire désormais à la hauteur de sa
   voisine. Il garde au minimum sa respiration grâce au padding du bloc. */
.keep-note { margin-top: auto; padding: 18px 20px; background: var(--soft); border-radius: var(--r-sm);
	font-size: .93rem; line-height: 1.55; color: var(--muted); }
.keep-note b { display: block; color: var(--ink); margin-bottom: 4px; }
/* Le chapô tient sur deux lignes très inégales : on les rééquilibre. */
#swap .head .t-lead { text-wrap: balance; }

@media (max-width: 860px) {
	.swap { grid-template-columns: 1fr; }
	.swap .gone ul { grid-template-columns: 1fr; }
}

/* ══ MÉTHODE — trois fiches épinglées, reliées d'un trait tracé à la main ══ */
.pins { position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
	gap: clamp(2rem, 4.5vw, 3.75rem); margin-top: clamp(3.25rem, 6vw, 5rem);
	padding-bottom: 2rem; align-items: start; }
.pin { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
	padding: 30px 28px 32px; box-shadow: var(--sh-2); z-index: 2;
	transition: transform .26s var(--out), box-shadow .26s var(--soft-e); }
.pin:nth-child(1) { transform: rotate(-2.4deg) translateY(0); }
.pin:nth-child(4) { transform: rotate(1.7deg) translateY(30px); }
.pin:nth-child(5) { transform: rotate(-.7deg) translateY(9px); }
@media (hover: hover) and (pointer: fine) {
	.pin:hover { box-shadow: var(--sh-3); }
	.pin:nth-child(1):hover { transform: rotate(-2.4deg) translateY(-7px); }
	.pin:nth-child(4):hover { transform: rotate(1.7deg) translateY(23px); }
	.pin:nth-child(5):hover { transform: rotate(-.7deg) translateY(2px); }
}
.pin .no { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
	border-radius: 9px; background: var(--soft); color: var(--forest); font-size: .82rem; font-weight: 700;
	font-variant-numeric: tabular-nums; transition: background-color .35s var(--soft-e); }
.pin.in .no, .pin.done .no { background: var(--lime); }
.pin h3 { margin-top: 17px; font-size: 1.16rem; }
.pin p { margin-top: 10px; font-size: .96rem; line-height: 1.6; color: var(--muted); }
/* Les fiches se posent comme des post-it, avec un léger décalage entre elles :
   chacune tombe d'un peu plus haut, un peu plus penchée, et retrouve son
   inclinaison. L'entrée passe par translate, scale et rotate, qui se composent
   avec l'inclinaison posée en transform : rien ne saute à la fin. */
.pin[data-rv] { --fy: -22px; --fs: 1.05; --fr: -4deg; --dur: .6s; }
.pin:nth-child(4) { --d: 120ms; --fr: 4deg; }
.pin:nth-child(5) { --d: 240ms; }

/* Le lien entre deux fiches : un trait discontinu, comme une annotation.
   La grille du dessin était étirée en largeur et pas en hauteur, par un
   preserveAspectRatio="none" sur une boîte deux fois moins large que haute.
   D'où des pointes de flèche écrasées de travers et des tirets inégaux, plus
   serrés dans la courbe que sur la partie plate. Le dessin se met à l'échelle
   uniformément maintenant : la boîte tient son rapport par aspect-ratio, et
   le viewBox a le même.
   Le trait garde son épaisseur et ses tirets en pixels d'écran quelle que
   soit l'échelle, grâce à non-scaling-stroke : à 1,4 unité il tombait sous le
   pixel et s'affichait de façon inégale.
   La pointe est tracée au trait plutôt que remplie, pour avoir exactement le
   poids de la ligne qu'elle termine. */
/* La largeur reprend celle de l'écart de la grille, moins une marge : le lien
   tient alors dans l'espace entre deux fiches au lieu de passer derrière
   elles, et il suivra l'écart si celui-ci change un jour. La pointe mesurait
   72 px de large pour un espace de 50 : elle finissait sous la carte. */
.tie { --w: calc(clamp(2rem, 4.5vw, 3.75rem) - 13px);
	position: absolute; z-index: 1; pointer-events: none;
	width: var(--w); aspect-ratio: 100 / 56; margin-left: calc(var(--w) / -2); }
.tie svg { width: 100%; height: 100%; overflow: visible; display: block; }
.tie .ln, .tie .hd { fill: none; stroke: var(--lime-deep); vector-effect: non-scaling-stroke;
	stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tie .ln { stroke-dasharray: 4 5; opacity: .55;
	clip-path: inset(0 100% 0 0); transition: clip-path 1.05s var(--out) .3s; }
.tie.in .ln { clip-path: inset(0 0 0 0); }
.tie .hd { opacity: 0; transition: opacity .35s var(--soft-e) 1.15s; }
.tie.in .hd { opacity: .65; }
.tie:nth-child(2) .ln { transition: clip-path .6s var(--out) .3s; }
.tie:nth-child(2) .hd { transition-delay: .85s; }
.tie:nth-child(3) .ln { transition: clip-path .6s var(--out) .42s; }
.tie:nth-child(3) .hd { transition-delay: .97s; }
@media (max-width: 1060px) {
	.pins { grid-template-columns: 1fr; gap: 16px; }
	/* Empilées, les fiches entrent chacune à son tour d'écran : pas de retard. */
	.pin, .pin:nth-child(1), .pin:nth-child(4), .pin:nth-child(5) { transform: none; --d: 0ms; }
	.tie { display: none; }
}

/* ══ ÉQUIPE ══ */
.team { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: clamp(2.5rem,5vw,3.5rem); }
.who { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--card);
	box-shadow: var(--sh-2);
	transition: transform .26s var(--out), box-shadow .26s var(--soft-e), border-color .2s var(--soft-e); }
.who .pic { aspect-ratio: 1/1.04; overflow: hidden; background: var(--soft); }
/* Le zoom de la photo est une action secondaire : il suit la levée de la
   carte au lieu de l'accompagner. C'est le seul mouvement de survol qui
   dépasse 300 ms, et c'est voulu. */
.who .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--out); }
.who .nm { padding: 18px 19px 22px; }
.who h3 { font-size: 1.1rem; }
.who .rl { display: block; margin-top: 5px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lime-deep); }
.who p { margin-top: 11px; font-size: .87rem; line-height: 1.55; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
	.who:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--line-2); }
	.who:hover .pic img { transform: scale(1.035); }
}

@media (max-width: 1060px) { .team { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px)  { .team { grid-template-columns: 1fr; } }

/* ══ BANDE PHOTO PLEINE LARGEUR ══ */
.strip-photo { position: relative; height: clamp(19rem, 34vw, 27rem); overflow: hidden; background: var(--forest); }
.strip-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 76% 26%; filter: saturate(.82) contrast(.95); }
.strip-photo::after { content: ""; position: absolute; inset: 0;
	background: linear-gradient(96deg, rgba(20,44,34,.96) 0%, rgba(20,44,34,.92) 34%, rgba(20,44,34,.74) 62%, rgba(20,44,34,.5) 100%); }
.strip-photo .say { position: absolute; inset: 0; display: flex; align-items: center; z-index: 2; }
.strip-photo .say .wrap { width: 100%; }
.strip-photo .say .wrap { position: relative; }
.strip-photo .glyph { position: absolute; left: var(--gutter); top: -.9rem; z-index: 0; pointer-events: none;
	width: clamp(4.5rem, 8vw, 7rem); height: auto; color: rgba(255,255,255,.09); }
/* 54rem : la largeur qui pose la citation sur trois lignes du bureau jusqu à
   1140 px. En dessous, le conteneur la borne de toute façon. */
.strip-photo q { position: relative; z-index: 1; display: block; quotes: none; max-width: 54rem; color: #fff;
	font-weight: 600; font-size: clamp(1.28rem, 2.3vw, 1.85rem); line-height: 1.32; letter-spacing: -.02em; }
.strip-photo .attrib { position: relative; z-index: 1; margin-top: 18px; display: flex; align-items: center; gap: 11px; }
.strip-photo .attrib img { height: 28px; max-width: 84px; width: auto; object-fit: contain; background: #fff; border-radius: 6px; padding: 4px 6px; flex: none; }
.strip-photo .attrib span { font-size: .88rem; font-weight: 600; color: var(--on-dark-2); }

/* ══ COMPARATIF ══ */
.cmp { margin-top: clamp(2.25rem,4.5vw,3.25rem); }
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 20px; }
.cmp-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1.08fr; min-width: 880px; align-items: stretch; }
/* Une ligne n'est pas une boîte : en display:contents, ses quatre cellules
   restent des éléments de la grille et la mise en page ne bouge pas. On gagne
   seulement de quoi désigner la ligne entière, pour l'éclairer au survol et
   pour masquer une colonne par son nom plutôt que par sa position. */
.cmp-row { display: contents; }
.cmp-row > * { padding: 18px 20px; display: flex; align-items: flex-start; gap: 10px;
	transition: background-color .16s var(--soft-e); }

/* En-têtes : une icône, un intitulé.
   Les deux colonnes comparées étaient écrites en gris clair, la nôtre en
   blanc sur vert : l'écart de lisibilité portait l'argument à la place du
   contenu, et rendait le tableau pénible à lire. Les trois colonnes ont
   maintenant le même contraste. Ce qui les distingue, ce sont les pastilles
   et la carte, pas l'effort qu'il faut pour les déchiffrer. */
.cmp-h { font-size: .74rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
	color: var(--forest); padding-bottom: 15px; align-items: center; gap: 9px; }
.cmp-h .hi { width: 26px; height: 26px; border-radius: 7px; background: var(--soft-2); color: var(--lime-deep);
	display: grid; place-items: center; flex: none; }
.cmp-h .hi svg { width: 14px; height: 14px; }
.cmp-h .hi.mark { background: none; width: 24px; height: 24px; }
.cmp-h .hi.mark img { width: 100%; height: 100%; object-fit: contain; }

/* Intitulés de ligne : icône discrète alignée sur le texte */
.cmp-k { font-size: .9rem; font-weight: 600; border-top: 1px solid var(--line); line-height: 1.4; }
.cmp-k .ki { width: 17px; height: 17px; color: var(--muted-2); flex: none; margin-top: 2px; }
.cmp-k .ki svg { width: 100%; height: 100%; }
.cmp-v { font-size: .9rem; color: var(--ink); border-top: 1px solid var(--line); line-height: 1.45; }

/* La colonne mise en avant : carte claire, sans effet de masse */
.cmp-row > .us { background: var(--card); border-inline: 1px solid var(--line); color: var(--ink); font-weight: 600; position: relative; }
.cmp-row > .cmp-h.us { background: var(--forest); color: #fff; border-color: var(--forest);
	border-radius: var(--r) var(--r) 0 0; padding-top: 17px; padding-bottom: 16px; }
.cmp-row > .cmp-h.us .hi { background: rgba(255,255,255,.12); color: var(--lime); }
.cmp-row > .cmp-h.us .hi.mark { background: none; }
.cmp-row > .us.last { border-radius: 0 0 var(--r) var(--r); border-bottom: 1px solid var(--line); padding-bottom: 22px; }
.cmp-shadow { position: absolute; inset: 0; box-shadow: var(--sh-2); border-radius: var(--r); pointer-events: none; z-index: -1; }

/* Suivre une ligne sur quatre colonnes, à la souris, sans repère : c'est là
   que la lecture décrochait. La ligne entière s'éclaire au survol. La teinte
   est posée en rgba, donc elle fonctionne aussi bien sur le fond de section
   que sur la carte blanche, qui reste plus claire que le reste. */
@media (hover: hover) and (pointer: fine) {
	.cmp-row:not([data-tete]):hover > * { background-color: rgba(134,170,14,.14); }
	.cmp-row:not([data-tete]):hover > .us { background-color: rgba(134,170,14,.07); }
}

/* Trois états lisibles d'un coup d'œil : non couvert · partiel · assuré.
   « Non couvert » était un gris très clair sur fond vert pâle, autant dire
   rien, alors que c'est l'information la plus utile de la ligne. Les trois
   états se distinguent maintenant par la forme et par la teinte, jamais par
   la teinte seule : une croix reste une croix pour qui ne voit pas le rouge. */
.mk { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 4px; flex: none; margin-top: 2px; }
.mk svg { width: 10px; height: 10px; }
.mk-no { background: #f3e2d6; color: #a0540c; }
.mk-mid { background: var(--soft-2); color: var(--muted); }
.mk-ok { background: var(--lime); color: var(--forest); }
.cmp-legend { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 10px; font-size: .8rem; color: var(--muted); }
.cmp-legend > span { display: inline-flex; align-items: center; gap: 8px; }

/* Sélecteur de colonne — visible sous 768 px uniquement.
   Le tableau à trois concurrents ne tient pas sur un téléphone, et personne
   ne fait défiler un tableau latéralement. On n'en montre que deux colonnes :
   celle qu'on choisit, et Alpes Ressources, qui ne quitte jamais l'écran.
   Sans JavaScript, « En interne » reste affiché : rien n'est perdu. */
.cmp-pick { display: none; }

@media (max-width: 944px) {
	.cmp-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px;
		background: var(--soft-2); border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 18px; }
	.cmp-pick button { min-height: 44px; font: inherit; font-size: .86rem; font-weight: 600; line-height: 1.2;
		color: var(--muted); background: none; border: 1px solid transparent; border-radius: 7px;
		padding: 0 10px; cursor: pointer;
		transition: background-color .2s var(--soft-e), color .2s var(--soft-e), border-color .2s var(--soft-e); }
	.cmp-pick button[aria-pressed="true"] { background: var(--card); color: var(--ink);
		border-color: var(--line); box-shadow: var(--sh-1); }
	.cmp-pick button:active { scale: .97; transition-duration: .1s; }
	@media (hover: hover) and (pointer: fine) {
		.cmp-pick button:not([aria-pressed="true"]):hover { color: var(--ink); background: rgba(255,255,255,.5); }
	}

	.cmp-scroll { overflow-x: visible; margin-inline: 0; padding: 0 0 20px; }
	.cmp-grid { grid-template-columns: minmax(0,.92fr) minmax(0,1fr) minmax(0,1.06fr); min-width: 0; }
	.cmp-row > * { padding: 14px 12px; gap: 8px; }
	.cmp-row > .cmp-h.us { padding-top: 14px; padding-bottom: 13px; }
	.cmp-row > .us.last { padding-bottom: 18px; }
	.cmp-h { font-size: .68rem; letter-spacing: .07em; gap: 7px; }
	.cmp-h .hi { width: 22px; height: 22px; border-radius: 6px; }
	.cmp-h .hi svg { width: 12px; height: 12px; }
	.cmp-k, .cmp-v { font-size: .84rem; }
	/* Filet pour un mot qui ne tiendrait vraiment pas dans sa cellule.
	   Il était accompagné de hyphens: auto, qui a été retiré : la césure
	   automatique ne se contente pas de sauver les mots trop longs, elle
	   coupe aussi ceux qui tiennent, pour mieux remplir les lignes. Sur
	   huit lignes de tableau cela donnait « conventionn-elle », « ja-mais »,
	   « per-sonnes ». Sans elle, plus aucun mot n'est coupé, de 944 px
	   jusqu'à 320 px, et le tableau est même plus court. */
	.cmp-row > * { overflow-wrap: break-word; }

	/* Le troisième bandeau est masqué par défaut ; le bouton bascule l'un ou
	   l'autre. Les colonnes se désignent par leur nom : l'ancienne écriture
	   en :nth-child(4n+3) obligeait à recompter les cellules pour comprendre
	   de laquelle on parlait. */
	.cmp-row > [data-c="cabinet"] { display: none; }
	.cmp[data-col="cabinet"] .cmp-row > [data-c="cabinet"] { display: flex; }
	.cmp[data-col="cabinet"] .cmp-row > [data-c="interne"] { display: none; }
}
@media (max-width: 560px) {
	.cmp-grid { grid-template-columns: minmax(0,.9fr) minmax(0,.96fr) minmax(0,1.14fr); }
	.cmp-row > * { padding: 12px 8px; gap: 6px; }
	.cmp-k .ki { display: none; }
	.cmp-k, .cmp-v { font-size: .78rem; line-height: 1.4; }
	.cmp-pick button { font-size: .82rem; }
	/* L'icône passe au-dessus de l'intitulé : « Alpes Ressources » retrouve
	   toute la largeur de la colonne et se coupe sur l'espace, pas en plein mot. */
	.cmp-h { font-size: .63rem; flex-direction: column; align-items: flex-start; gap: 6px;
		letter-spacing: .05em; hyphens: none; }
}

/* ══ BANDEAU TARIFICATION ══ */
.quote-band { margin-top: clamp(2rem,4vw,3rem); position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--forest);
	color: var(--on-dark); padding: clamp(2rem,4vw,3rem) clamp(1.75rem,3.5vw,3rem); }
.quote-band .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	object-position: 62% 40%; opacity: .14; pointer-events: none; }
.quote-band::after { content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(92deg, rgba(31,61,48,.72) 0%, rgba(31,61,48,.4) 55%, rgba(31,61,48,.62) 100%); }
.qb-in { position: relative; z-index: 1; display: grid; grid-template-columns: .92fr 1.08fr;
	gap: clamp(1.75rem,3.5vw,3.25rem); align-items: center; }
.qb-in h2 { color: #fff; font-size: clamp(1.45rem,2.5vw,2rem); letter-spacing: -.02em; line-height: 1.16; }
.qb-in > div > p { color: var(--on-dark-2); font-size: .97rem; line-height: 1.6; margin-top: 12px; max-width: 34ch; }
.qb-in .btn { margin-top: 22px; }
.qb-crit { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2vw,1.75rem); }
.qb-crit .c { border-top: 1px solid rgba(233,237,228,.24); padding-top: 16px; }
.qb-crit .n { font-size: .74rem; font-weight: 700; color: var(--lime); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.qb-crit h3 { color: #fff; font-size: 1rem; margin-top: 9px; }
.qb-crit p { color: var(--on-dark-2); font-size: .88rem; line-height: 1.5; margin-top: 6px; }
@media (max-width: 1060px) { .qb-in { grid-template-columns: 1fr; gap: 1.75rem; } }
@media (max-width: 860px) {
	.qb-crit { grid-template-columns: 1fr; gap: 0; }
	.qb-crit .c { padding-block: 14px; }
}

/* ══ PRESTATIONS ══ */
.svc + .svc { margin-top: clamp(2.75rem,5vw,4rem); }
/* Les surtitres « 01 — Paie » et « 02 — Ressources humaines » ont été
   retirés : la règle qui les habillait et la marge qui les séparait du
   titre partent avec eux, sinon le titre garde un blanc au-dessus de lui. */
.svc-h { max-width: 42rem; margin-bottom: 22px; }
.svc-h p { margin-top: 10px; }
.bento { display: grid; gap: 14px; grid-auto-rows: minmax(150px,auto); }
.b-paie { grid-template-columns: 1.2fr 1fr; }
.b-rh { grid-template-columns: repeat(3,1fr); }
.tile { position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--card);
	border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--sh-2);
	transition: border-color .2s var(--soft-e), transform .26s var(--out), box-shadow .26s var(--soft-e); }
.tile .ic { width: 42px; height: 42px; border-radius: 11px; background: var(--soft); color: var(--forest);
	display: grid; place-items: center; flex: none; transition: background-color .2s var(--soft-e); }
.tile .ic svg { width: 21px; height: 21px; }
.tile .bd { margin-top: 16px; }
.tile h4 { font-size: 1.04rem; }
.tile p { margin-top: 8px; font-size: .9rem; line-height: 1.55; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
	.tile:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--sh-3); }
	.tile:hover .ic { background: var(--lime); }
}
.tile-big { grid-row: span 2; }
/* Six tuiles sur trois colonnes : si la grande n'occupe qu'une rangée, il en
   reste une seule sur la dernière et la grille se termine sur un trou. En lui
   donnant deux rangées, le compte tombe juste — deux rangées de deux à droite
   de la grande, puis une rangée pleine — et la tuile qui porte la photo gagne
   la place qu'elle mérite. */
.b-rh .tile-big { grid-row: span 2; grid-column: span 2; }
.tile-big .bd { margin-top: auto; padding-top: 26px; }
.tile-dark { background: var(--forest); border-color: var(--forest); box-shadow: var(--sh-3); }
.tile-dark .cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .16;
	transition: transform .5s var(--out), opacity .3s var(--soft-e); }
.tile-dark .ic, .tile-dark .bd { position: relative; z-index: 1; }
.tile-dark .ic { background: rgba(255,255,255,.1); color: var(--lime); }
.tile-dark h4 { color: #fff; font-size: clamp(1.24rem,2vw,1.62rem); letter-spacing: -.02em; }
.tile-dark p { color: var(--on-dark-2); font-size: .96rem; }
.tile-dark .tag { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: .8rem; font-weight: 600; color: var(--lime); }
.tile-dark .tag svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) {
	.tile-dark:hover { box-shadow: var(--sh-4); }
	.tile-dark:hover .cover { transform: scale(1.05); opacity: .22; }
	.tile-dark:hover .ic { background: var(--lime); color: var(--forest); }
}
@media (max-width: 860px) {
	.b-paie, .b-rh { grid-template-columns: 1fr; grid-auto-rows: auto; }
	.tile-big { grid-row: auto; grid-column: auto; min-height: 190px; }
	/* .b-rh .tile-big l'emportait en spécificité et gardait son span 2 :
	   la grille inventait une deuxième colonne et les tuiles se chevauchaient. */
	.b-rh .tile-big { grid-row: auto; grid-column: auto; }
}

/* ══ TÉMOIGNAGES — trois colonnes en défilement continu ══ */
.stream { position: relative; margin-top: clamp(2.5rem,5vw,3.5rem); height: clamp(36rem, 64vw, 50rem); overflow: hidden;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 9%, #000 26%, #000 74%, rgba(0,0,0,.35) 91%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 9%, #000 26%, #000 74%, rgba(0,0,0,.35) 91%, transparent 100%); }
.lane { position: relative; overflow: hidden; }
/* Le repli « mouvement réduit » du flux est dans motion.css. */
@media (max-width: 1060px) { .stream { grid-template-columns: repeat(2,1fr); height: 38rem; } }
@media (max-width: 860px) {
	/* Une seule voie, une seule rangée : les trois colonnes empilées se
	   coupaient en plein milieu d'un témoignage. main.js verse les cartes
	   des deux autres voies dans celle-ci ; sans JavaScript, elle en garde
	   cinq, ce qui suffit. */
	.stream { grid-template-columns: 1fr; grid-template-rows: 1fr; height: 28rem; }
	.lane + .lane { display: none; }
}

/* ══ REPRISE ══ */
.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2.5rem,5vw,4.5rem); align-items: start; }
.split-media { position: sticky; top: 110px; }
.split-media .fr { border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh-2); aspect-ratio: 5/5.1; }
.split-media .fr img { width: 100%; height: 100%; object-fit: cover; }
.flow { margin-top: 26px; border-left: 1px solid var(--line); }
.flow-i { position: relative; padding: 0 0 26px 30px; }
.flow-i:last-child { padding-bottom: 0; }
.flow-i::before { content: ""; position: absolute; inset: 6px auto auto -4.5px; width: 8px; height: 8px; border-radius: 50%;
	background: var(--soft); border: 2px solid var(--line-2);
	transition: background-color .4s var(--soft-e), border-color .4s var(--soft-e), scale .4s var(--out); }
.flow-i.in::before { background: var(--lime); border-color: var(--lime); scale: 1.2; }
.flow-i .k { font-size: .71rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted-2); }
.flow-i h3 { margin-top: 6px; font-size: 1.04rem; }
.flow-i p { margin-top: 7px; font-size: .93rem; line-height: 1.6; color: var(--muted); }
@media (max-width: 1060px) {
	.split { grid-template-columns: 1fr; }
	/* La photo est à gauche du texte sur grand écran, donc écrite avant lui.
	   Sur une colonne elle passait devant le titre : seule section du site à
	   s'ouvrir sur une image, un écran entier avant de savoir ce qu'on lit.
	   Elle repasse derrière, comme la photo de la section 01. */
	.split-media { position: static; max-width: 30rem; order: 2; }
}

/* ══ QUESTIONS ══ */
.qa { display: grid; grid-template-columns: 23rem 1fr; gap: clamp(2.5rem,5vw,4.5rem); align-items: start; }
.qa-aside { position: sticky; top: 110px; }
.qa-list { border-top: 1px solid var(--line); }
@media (max-width: 1060px) {
	.qa { grid-template-columns: 1fr; gap: 2rem; }
	.qa-aside { position: static; }
}
/* Le pliage lui-même (details / summary / .ans) est dans components.css. */

/* ══ CONTACT ══ */
.reach { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem,3vw,2.6rem); align-items: stretch; }
/* Les trois cartes se répartissent sur la hauteur de la carte géographique,
   pour que les deux colonnes se terminent au même niveau. */
.rcards { display: flex; flex-direction: column; gap: 11px; justify-content: space-between; }
.rcard { display: flex; align-items: center; gap: 15px; background: var(--card); border: 1px solid var(--line);
	border-radius: var(--r); padding: 17px 20px; box-shadow: var(--sh-2);
	transition: border-color .2s var(--soft-e), transform .26s var(--out), box-shadow .26s var(--soft-e); }
.rcard:active { transform: scale(.99); transition-duration: .1s; }
.rcard .ic { width: 44px; height: 44px; border-radius: 11px; background: var(--soft); color: var(--forest);
	display: grid; place-items: center; flex: none; transition: background-color .2s var(--soft-e); }
.rcard .ic svg { width: 21px; height: 21px; }
.rcard .k { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted-2); }
.rcard .v { display: block; font-size: 1.01rem; font-weight: 600; margin-top: 2px; }
@media (hover: hover) and (pointer: fine) {
	.rcard:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--sh-2); }
	.rcard:hover .ic { background: var(--lime); }
}
.map { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); min-height: 320px; background: var(--soft-2); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.3); }
@media (max-width: 860px) {
	.reach { grid-template-columns: 1fr; }
	/* Sur une colonne, les coordonnées passent devant : c'est ce que le
	   visiteur vient chercher, la carte ne fait que confirmer. */
	.map { order: 2; min-height: 0; height: 280px; }
}

/* ══ PAGE ANNEXE — MENTIONS LÉGALES ══
   La seule autre page du site. Elle reprend l'en-tête, le pied de page et
   l'échelle typographique ; il ne lui manquait qu'un bloc de texte lisible. */
.legal { max-width: 46rem; margin-top: clamp(1.5rem,3vw,2rem); }
.legal p + p { margin-top: 18px; }
.legal-a { color: var(--lime-deep); font-weight: 600; text-decoration: underline;
	text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--line-2);
	transition: text-decoration-color .2s var(--soft-e); }
.legal-a:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
	.legal-a:hover { text-decoration-color: var(--lime-deep); }
}