/*
Theme Name: NUMERIKME
Theme URI: https://numerikme.fr
Author: NUMERIKME
Author URI: https://numerikme.fr
Description: Thème bloc sur mesure de NUMERIKME. Tout le contenu est composé de blocs natifs, modifiables depuis l'éditeur.
Version: 1.0.31
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: numerikme
Tags: block-theme, full-site-editing, business
*/

/* Polices hébergées localement (Inter, Caveat — licence SIL Open Font License) */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/polices/caveat-latin-ext-WnznHAc5bAfYB2QRah7pcpNvOx-pjSx6eIupYT5Kmgq3s84t.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/polices/caveat-latin-WnznHAc5bAfYB2QRah7pcpNvOx-pjSx6eIWpYT5Kmgq3sw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/polices/inter-latin-ext-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/polices/inter-latin-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/polices/inter-latin-ext-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/polices/inter-latin-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/polices/inter-latin-ext-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/polices/inter-latin-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/polices/inter-latin-ext-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/polices/inter-latin-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/polices/inter-latin-ext-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/polices/inter-latin-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* NUMERIKME — v2 : mise en page agence, couleurs NUMERIKME */
:root {
  --nuit: #1C0A1F;
  --aubergine: #280F2B;
  --aubergine-3: #36173B;
  --trait-sombre: rgba(255,255,255,.12);
  --jaune: #F0F02D;
  --lilas: #BA86D5;
  --blanc: #FFFFFF;
  --clair: #F4F3F5;
  --gris: #6E6371;
  --gris-sombre: rgba(255,255,255,.62);
  --trait: rgba(40,15,43,.12);
  --r: 16px;
  --r-petit: 12px;
  --pilule: 999px;
  --largeur: 1240px;
  --police: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --graisse-affiche: 800;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--police);
  font-size: 16px; line-height: 1.55;
  color: var(--aubergine); background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
h1, h2, h3 { font-weight: 500; line-height: 1.05; letter-spacing: -0.035em; hyphens: none; text-wrap: balance; }

.enveloppe { width: min(var(--largeur), 100% - 40px); margin-inline: auto; }
.sombre { background: var(--nuit); color: var(--blanc); }

/* ---------- Petits éléments ---------- */
/* Étiquettes de section : une annotation manuscrite dans la marge, avec sa petite flèche
   dessinée à la main — le contraire d'une pilule d'interface. */
.pastille, .etiquette {
  display: inline-flex; align-items: flex-start; gap: .3em;
  width: fit-content; justify-self: start; align-self: start;
  font-family: "Caveat", "Segoe Print", cursive; font-size: 1.55rem; font-weight: 600; line-height: 1;
  letter-spacing: 0; color: var(--aubergine);
  rotate: -3deg; transform-origin: left center;
}
.pastille::after, .etiquette::after {
  content: ""; flex: none; width: 1.1em; height: .85em; margin-top: .45em;
  background: currentColor; opacity: .85;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4c9 1 19 5 26 17'/%3E%3Cpath d='M22 19l7 3 1-8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4c9 1 19 5 26 17'/%3E%3Cpath d='M22 19l7 3 1-8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sombre .pastille, .sombre .etiquette, .contact__carte .etiquette { color: var(--jaune); }

.bouton > .wp-block-button__link {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .78em 1.35em; border-radius: var(--pilule);
  background: var(--jaune); color: var(--nuit);
  font: inherit; font-weight: 600; font-size: .95rem; text-decoration: none;
  border: 1px solid var(--jaune); cursor: pointer;
  transition: transform .2s, background .2s, color .2s;
}
.bouton > .wp-block-button__link::after { content: "↗"; font-weight: 500; }
.bouton > .wp-block-button__link:hover { transform: translateY(-2px); }
.bouton--sombre > .wp-block-button__link { background: var(--aubergine); color: var(--blanc); border-color: var(--aubergine); }
.bouton--contour > .wp-block-button__link { background: transparent; color: var(--blanc); border-color: rgba(255,255,255,.3); }
.bouton--contour > .wp-block-button__link:hover { border-color: var(--jaune); color: var(--jaune); }
.bouton--petit > .wp-block-button__link { padding: .55em 1.05em; font-size: .85rem; }
.lien a { font-weight: 600; font-size: .9rem; text-decoration: none; display: inline-flex; gap: .4em; }
.lien a::after { content: "↗"; }
.lien a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- En-tête ---------- */
.entete { background: var(--nuit); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--trait-sombre); }
.entete__barre { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding-block: 14px; }
.entete__logo img { height: 34px; width: auto; }
.entete__nav { display: flex; gap: 6px; background: rgba(255,255,255,.06); border: 1px solid var(--trait-sombre); border-radius: var(--pilule); padding: 5px; }
.entete__nav a { color: rgba(255,255,255,.78); text-decoration: none; font-size: .9rem; font-weight: 500; padding: .45em 1.1em; border-radius: var(--pilule); }
.entete__nav a:hover { color: var(--blanc); }
.entete__nav a[aria-current="page"] { background: var(--blanc); color: var(--nuit); }
.entete__actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
.entete__menu { display: none; background: none; border: 1px solid var(--trait-sombre); color: var(--blanc); border-radius: var(--pilule); padding: .5em 1.1em; font: inherit; font-size: .9rem; }

/* ---------- Héros d'accueil ---------- */
.heros { padding: 88px 0 0; text-align: center; position: relative; overflow: hidden; }
.heros::before { content: ""; position: absolute; left: 50%; top: -260px; width: 900px; height: 600px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(186,134,213,.28), transparent); pointer-events: none; }
.heros__titre { position: relative; margin-top: 26px; font-size: clamp(2.8rem, 6.6vw, 5.6rem); max-width: 13ch; margin-inline: auto; }
.heros__titre em { color: var(--jaune); }
.heros__texte { position: relative; max-width: 600px; margin: 22px auto 0; color: var(--gris-sombre); font-size: 1.08rem; }
.heros__actions { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 32px; }

.collage { position: relative; z-index: 0; margin-top: 72px; display: grid; grid-template-columns: 1.05fr .85fr 1.25fr .85fr 1.05fr; gap: 14px; align-items: end; text-align: left; }
.collage::after { content: ""; position: absolute; left: -50vw; right: -50vw; bottom: 0; height: 90px; background: var(--blanc); z-index: -1; }
.collage > * { border-radius: var(--r); overflow: hidden; position: relative; }
.collage__photo img { width: 100%; height: 100%; object-fit: cover; }
.collage__a { height: 250px; }
.collage__b { height: 200px; background: var(--aubergine-3); padding: 20px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--trait-sombre); }
.collage__c { height: 300px; }
.collage__d { height: 220px; background: var(--lilas); color: var(--nuit); padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }
.collage__e { height: 260px; }
.collage__chiffre { font-size: 2.6rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.collage__legende { font-size: .85rem; line-height: 1.35; }
.collage__b .collage__legende { color: var(--gris-sombre); }
.wp-block-image.collage__photo figcaption { position: absolute; left: 14px; top: 14px; background: var(--jaune); color: var(--nuit); font-size: .8rem; font-weight: 600; padding: .2em .45em; border-radius: 3px; }
.collage__carte { position: absolute; left: 14px; right: 14px; bottom: 14px; background: var(--jaune); color: var(--nuit); border-radius: var(--r-petit); padding: 14px 16px; }
.collage__carte strong { display: block; font-size: 1.7rem; letter-spacing: -0.04em; line-height: 1; }
.collage__carte span { font-size: .8rem; }

/* ---------- Intro ---------- */
.intro { padding-block: 110px 120px; }
.intro__grille { display: grid; grid-template-columns: 1fr 2.6fr; gap: 40px; align-items: start; }
.intro__grille .etiquette { padding-top: .35em; }
.intro__texte { font-size: clamp(1.6rem, 2.7vw, 2.35rem); font-weight: 500; line-height: 1.22; letter-spacing: -0.025em; }
.intro__texte em { color: #B5ADB7; }
.intro__rangee { margin-top: 64px; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 14px; align-items: stretch; }
.intro__rangee figure { border-radius: var(--r); overflow: hidden; height: 250px; }
.intro__rangee img { width: 100%; height: 100%; object-fit: cover; }
.intro__carte { border-radius: var(--r); background: var(--clair); padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.intro__carte p { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }

/* ---------- Grand titre ---------- */
.affiche { padding-block: 20px 56px; text-align: center; overflow: hidden; }
.affiche__titre { font-size: clamp(3.6rem, 13.5vw, 12.5rem); font-weight: var(--graisse-affiche); text-transform: uppercase; letter-spacing: -0.06em; line-height: .86; }
.affiche__titre .ligne { display: flex; justify-content: center; align-items: center; gap: .06em; }
.affiche__vignette { display: inline-block; width: 1.5em; height: .72em; border-radius: .16em; overflow: hidden; position: relative; background: var(--aubergine); }
.affiche__vignette img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Vitrine des offres ---------- */
.vitrine { padding-bottom: 120px; }
.vitrine__liste { display: grid; gap: 48px; }
.projet__visuel { position: relative; border-radius: var(--r); overflow: hidden; height: clamp(320px, 44vw, 580px); background: var(--nuit); }
.projet__visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.projet:hover .projet__visuel img { transform: scale(1.03); }
.projet__rond { position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--nuit); display: grid; place-items: center; font-size: .85rem; font-weight: 600; text-decoration: none; backdrop-filter: blur(6px); opacity: 0; transform: scale(.8); transition: .3s; }
.projet:hover .projet__rond { opacity: 1; transform: scale(1); }
.projet__visuel--jaune { background: var(--jaune); display: grid; place-items: center; }
.projet__carre { width: 96px; height: 96px; background: var(--nuit); border-radius: 14px; display: grid; place-items: center; }
.projet__carre::after { content: ""; width: 26px; height: 26px; background: var(--blanc); border-radius: 5px; }
.projet__infos { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 18px; margin-top: 16px; }
.projet__titre { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; }
.projet__meta { color: var(--gris); font-size: .9rem; }
.projet__meta strong { color: var(--aubergine); font-weight: 600; margin-right: .6em; }
.vitrine__suite { text-align: center; margin-top: 56px; }

/* ---------- Bandeau défilant ---------- */
.defile { overflow: hidden; border-bottom: 1px solid var(--trait-sombre); padding-block: 22px; }
.defile__piste { display: flex; gap: 48px; width: max-content; animation: defile 38s linear infinite; }
.defile__piste li { display: inline-flex; align-items: center; gap: 48px; color: rgba(255,255,255,.55); font-weight: 500; white-space: nowrap; }
.defile__piste li::after { content: "✦"; color: var(--jaune); }
@keyframes defile { to { transform: translateX(-50%); } }

/* ---------- En-tête de section en deux parties ---------- */
.tete { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: end; }
.tete__titre { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.tete__droite { justify-self: end; max-width: 320px; display: grid; gap: 16px; justify-items: start; }
.tete__droite p { color: var(--gris); font-size: .95rem; }
.sombre .tete__droite p { color: var(--gris-sombre); }

/* ---------- Méthode (colonnes) ---------- */
.methode { padding-block: 100px 120px; }
.colonnes { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--trait-sombre); }
.colonnes--4 { grid-template-columns: repeat(4, 1fr); }
.colonne { position: relative; min-height: 300px; outline: none; }
.colonne + .colonne { border-left: 1px solid var(--trait-sombre); }
.colonne__carte {
  position: absolute; inset: 0; padding: 32px 28px 24px; border-radius: var(--r);
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  transition: transform .7s cubic-bezier(.16,1,.3,1), rotate 1.2s cubic-bezier(.16,1,.3,1), background-color .35s, color .35s, box-shadow .6s;
}
.colonne__num { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--trait-sombre); display: grid; place-items: center; color: var(--jaune); font-weight: 600; transition: background-color .35s, color .35s, border-color .35s; }
.colonne__titre { font-size: 1.7rem; margin-top: 22px; transition: translate .5s cubic-bezier(.16,1,.3,1); }
.colonne__texte { margin-top: 10px; color: var(--gris-sombre); font-size: .95rem; max-width: 280px; transition: color .35s; }
/* La carte blanche inclinée : sur la colonne survolée, sinon sur la colonne active */
.colonnes:not(:hover):not(:focus-within) .colonne--active .colonne__carte,
.colonne:hover .colonne__carte, .colonne:focus-visible .colonne__carte {
  z-index: 2; background: var(--blanc); color: var(--nuit);
  transform: translateY(-30px) rotate(-6deg) scale(.9);
  box-shadow: 0 40px 80px -24px rgba(0,0,0,.6);
}
.colonnes:not(:hover):not(:focus-within) .colonne--active .colonne__num,
.colonne:hover .colonne__num, .colonne:focus-visible .colonne__num { background: var(--jaune); color: var(--nuit); border-color: var(--jaune); }
.colonnes:not(:hover):not(:focus-within) .colonne--active .colonne__texte,
.colonne:hover .colonne__texte, .colonne:focus-visible .colonne__texte { color: var(--gris); }
.colonne:hover .colonne__titre { translate: 0 -4px; }

/* ---------- Chiffres ---------- */
.chiffres { padding-block: 120px 40px; overflow: hidden; }
.chiffres__grille { margin-top: 56px; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 14px; }
.chiffre { border-radius: var(--r); background: var(--clair); padding: 28px; min-height: 240px; display: flex; flex-direction: column; justify-content: space-between; }
.chiffre--jaune { background: var(--jaune); }
.chiffre__valeur { font-size: clamp(3.4rem, 6vw, 5rem); font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.chiffre__valeur sup { font-size: .32em; font-weight: 500; letter-spacing: 0; vertical-align: 1.9em; margin-left: .15em; }
.chiffre__texte { font-size: .95rem; max-width: 300px; }
.chiffre:not(.chiffre--jaune) .chiffre__texte { color: var(--gris); }

.etiquettes { position: relative; height: 230px; margin-top: 24px; }
.etiquettes::before { content: ""; position: absolute; left: -10%; right: -10%; top: 58%; height: 1px; background: var(--trait); }
.etiquettes p { position: absolute; padding: .7em 1.4em; border-radius: var(--pilule); font-weight: 600; font-size: .92rem; white-space: nowrap; box-shadow: 0 16px 30px -18px rgba(40,15,43,.5); }
.e1 { left: 2%;  top: 44%; background: var(--aubergine); color: var(--blanc); transform: rotate(-8deg); }
.e2 { left: 17%; top: 30%; background: var(--jaune); transform: rotate(10deg); }
.e3 { left: 33%; top: 55%; background: var(--lilas); transform: rotate(-4deg); }
.e4 { left: 45%; top: 12%; background: var(--jaune); transform: rotate(-12deg); }
.e5 { left: 63%; top: 46%; background: var(--aubergine); color: var(--jaune); transform: rotate(7deg); }
.e6 { left: 80%; top: 24%; background: var(--lilas); transform: rotate(-9deg); }

/* ---------- Parole du fondateur ---------- */
.parole { padding-block: 90px 130px; text-align: center; }
.parole__titre { font-size: clamp(2.2rem, 4.4vw, 3.6rem); max-width: 17ch; margin: 18px auto 0; }
.parole__chapo { color: var(--gris); max-width: 520px; margin: 18px auto 0; }
.parole__pile { position: relative; isolation: isolate; max-width: 620px; margin: 56px auto 0; }
.parole__pile::before, .parole__pile::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); z-index: -1; }
.parole__pile::before { background: var(--lilas); transform: rotate(-4deg); }
.parole__pile::after { background: var(--jaune); transform: rotate(3deg); }
.parole__carte { position: relative; text-align: left; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r); padding: 36px; box-shadow: 0 40px 80px -40px rgba(40,15,43,.35); }
.parole__guillemet { font-size: 4rem; line-height: .6; font-weight: var(--graisse-affiche); color: var(--aubergine); }
.parole__texte { margin-top: 18px; font-size: 1.12rem; font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; }
.parole__auteur { margin-top: 26px; display: flex; align-items: center; gap: 12px; font-size: .9rem; }
.parole__photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px var(--blanc), 0 0 0 4px var(--jaune); }
.parole__role { display: block; color: var(--gris); }
.parole .lien a { margin-top: 28px; }

/* ---------- Rubans ---------- */
.rubans { position: relative; height: 220px; overflow: hidden; background: var(--blanc); }
.ruban { position: absolute; left: -5%; right: -5%; top: 50%; padding-block: 18px; overflow: hidden; }
.ruban--jaune { background: var(--jaune); color: var(--nuit); transform: translateY(-50%) rotate(-4deg); z-index: 2; }
.ruban--sombre { background: var(--aubergine); color: var(--blanc); transform: translateY(-50%) rotate(3.5deg); }
.ruban__piste { display: flex; width: max-content; gap: 40px; animation: defile 30s linear infinite; }
.ruban--sombre .ruban__piste { animation-direction: reverse; }
.ruban__piste li { display: inline-flex; align-items: center; gap: 40px; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.03em; white-space: nowrap; text-decoration: none; color: inherit; }
.ruban__piste li::after { content: "✦"; font-size: .8em; }

/* ---------- Pied de page ---------- */
.pied { position: relative; overflow: hidden; padding-top: 88px; }
.pied__grille { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.pied__titre { font-size: clamp(1.8rem, 3vw, 2.5rem); max-width: 14ch; }
.pied__appel p { color: var(--gris-sombre); margin: 14px 0 24px; max-width: 360px; }
.pied__col-titre { font-weight: 600; margin-bottom: 14px; font-size: .95rem; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; color: var(--gris-sombre); font-size: .92rem; }
.pied a { text-decoration: none; }
.pied a:hover { color: var(--jaune); }
.pied__bas { margin-top: 72px; padding-block: 22px; border-top: 1px solid var(--trait-sombre); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--gris-sombre); font-size: .82rem; position: relative; z-index: 1; }
.pied__marque { font-size: clamp(4rem, 19vw, 18rem); font-weight: var(--graisse-affiche); letter-spacing: -0.07em; line-height: .78; text-align: center; color: rgba(186,134,213,.12); margin-top: 40px; user-select: none; white-space: nowrap; }

/* ================= Pages internes ================= */
.page-heros { padding: 96px 0 110px; text-align: center; position: relative; overflow: hidden; }
.page-heros::before { content: ""; position: absolute; left: 50%; top: -280px; width: 900px; height: 600px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(186,134,213,.26), transparent); pointer-events: none; }
.page-heros__titre { position: relative; margin-top: 24px; font-size: clamp(2.6rem, 6vw, 5rem); max-width: 15ch; margin-inline: auto; }
.page-heros__titre em { color: var(--jaune); }
.page-heros__texte { position: relative; max-width: 620px; margin: 22px auto 0; color: var(--gris-sombre); font-size: 1.08rem; }
.page-heros .heros__actions { margin-top: 30px; }

/* Services */
.services { padding-block: 110px 120px; }
.services__grille { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.service { border-radius: var(--r); background: var(--clair); padding: 28px; min-height: 330px; display: flex; flex-direction: column; gap: 14px; transition: transform .25s, box-shadow .25s; }
.service:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(40,15,43,.45); }
.service__icone { width: 48px; height: 48px; border-radius: 12px; background: var(--aubergine); display: grid; place-items: center; }
.service__icone::after { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--jaune); }
.service__probleme { margin-top: auto; color: var(--gris); font-size: .85rem; font-weight: 500; }
.service__titre { font-size: 1.6rem; }
.service__texte { color: var(--gris); font-size: .95rem; }
.service .lien a { margin-top: 6px; }
.service--phare { background: var(--jaune); }
.service--phare .service__probleme, .service--phare .service__texte { color: var(--aubergine); }
.service--sombre { background: var(--aubergine); color: var(--blanc); }
.service--sombre .service__icone { background: var(--jaune); }
.service--sombre .service__icone::after { background: var(--aubergine); }
.service--sombre .service__probleme, .service--sombre .service__texte { color: var(--gris-sombre); }

.bandeau { padding-block: 100px; }
.bandeau__carte { position: relative; border-radius: var(--r); overflow: hidden; min-height: 420px; display: grid; align-items: end; padding: 48px; color: var(--blanc); isolation: isolate; }
.bandeau__carte > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.bandeau__carte::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(28,10,31,.92), rgba(28,10,31,.35)); }
.bandeau__titre { font-size: clamp(2rem, 4vw, 3.3rem); max-width: 14ch; }
.bandeau__texte { margin: 16px 0 26px; max-width: 460px; color: rgba(255,255,255,.8); }

/* À propos */
.fondateur { padding-block: 40px 120px; }
.fondateur__grille { margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fondateur__carte { border-radius: var(--r); background: var(--aubergine); color: var(--blanc); padding: 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 380px; }
.fondateur__chiffre { font-size: clamp(4rem, 8vw, 6.5rem); font-weight: 600; letter-spacing: -0.05em; line-height: .9; color: var(--jaune); }
.fondateur__carte p { color: var(--gris-sombre); max-width: 380px; }
.fondateur__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fondateur__liste li { border: 1px solid var(--trait-sombre); border-radius: var(--pilule); padding: .4em .9em; font-size: .85rem; }
.fondateur__photo { border-radius: var(--r); overflow: hidden; min-height: 380px; }
.fondateur__photo img { width: 100%; height: 100%; object-fit: cover; }
.valeurs { padding-block: 100px 120px; }

/* Contact */
.contact { padding-block: 0 120px; background: var(--clair); }
.contact__grille { display: grid; grid-template-columns: 1fr 1.3fr; gap: 14px; position: relative; top: -60px; margin-bottom: -60px; }
.contact__carte { border-radius: var(--r); background: var(--aubergine); color: var(--blanc); padding: 36px; display: flex; flex-direction: column; gap: 16px; border: 1px solid var(--trait-sombre); align-items: flex-start; }
.contact__titre { font-size: clamp(1.9rem, 3vw, 2.5rem); }
.contact__texte { color: var(--gris-sombre); }
.contact__infos { list-style: none; margin: auto 0 0; padding: 22px 0 0; border-top: 1px solid var(--trait-sombre); display: grid; gap: 14px; font-size: .95rem; width: 100%; }
.contact__infos li strong { display: block; font-size: .78rem; color: var(--jaune); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.formulaire { border-radius: var(--r); background: var(--blanc); padding: 36px; display: grid; gap: 16px; box-shadow: 0 40px 80px -50px rgba(40,15,43,.4); }
.formulaire__titre { font-size: 1.8rem; margin-bottom: 4px; }
.formulaire__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.formulaire label { display: grid; gap: 7px; font-size: .85rem; font-weight: 600; }
.formulaire input, .formulaire select, .formulaire textarea { font: inherit; font-weight: 400; color: var(--aubergine); background: var(--clair); border: 1px solid transparent; border-radius: var(--r-petit); padding: .85em 1em; width: 100%; }
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { outline: none; border-color: var(--lilas); background: var(--blanc); box-shadow: 0 0 0 4px rgba(186,134,213,.22); }
.formulaire textarea { resize: vertical; min-height: 140px; }
.formulaire .bouton > .wp-block-button__link { justify-self: start; }

/* ---------- Adaptatif ---------- */
@media (max-width: 1000px) {
  .collage { grid-template-columns: repeat(6, 1fr); }
  .collage > * { grid-column: span 2; }
  .collage > .collage__d, .collage > .collage__e { grid-column: span 3; height: 200px; }
  .intro__grille, .tete { grid-template-columns: 1fr; }
  .tete__droite { justify-self: start; }
  .intro__rangee { grid-template-columns: 1fr 1fr; }
  .intro__rangee figure:first-child { grid-column: 1 / -1; }
  .colonnes { grid-template-columns: 1fr; }
  .colonne + .colonne { border-left: 0; border-top: 1px solid var(--trait-sombre); }
  .colonne { min-height: 260px; }
  .colonnes:not(:hover):not(:focus-within) .colonne--active .colonne__carte,
  .colonne:hover .colonne__carte, .colonne:focus-visible .colonne__carte { transform: rotate(-3deg) scale(.92); }
  .chiffres__grille { grid-template-columns: 1fr 1fr; }
  .chiffre--jaune { grid-column: 1 / -1; }
  .services__grille { grid-template-columns: 1fr 1fr; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
  .pied__appel { grid-column: 1 / -1; }
  .fondateur__grille, .contact__grille { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .entete__barre { grid-template-columns: 1fr auto; }
  .entete__nav { display: none; }
  .entete__actions .bouton > .wp-block-button__link { display: none; }
  .entete__menu { display: inline-block; }
  .entete.ouvert .entete__nav { display: flex; flex-direction: column; position: absolute; top: 100%; left: 12px; right: 12px; margin-top: 8px; background: var(--aubergine); border-radius: var(--r); padding: 10px; }
  .heros { padding-top: 64px; }
  .collage { margin-top: 52px; }
  .intro, .methode, .services, .valeurs { padding-block: 80px; }
  .intro__rangee { grid-template-columns: 1fr; }
  .intro__rangee figure { height: 220px; }
  .affiche__titre { font-size: 15vw; }
  .projet__infos { grid-template-columns: 1fr; gap: 4px; }
  .chiffres { padding-top: 80px; }
  .chiffres__grille { grid-template-columns: 1fr; }
  .etiquettes { height: 300px; }
  .e1 { left: 0; top: 70%; } .e2 { left: 34%; top: 50%; } .e3 { left: 4%; top: 30%; }
  .e4 { left: 42%; top: 8%; } .e5 { left: 44%; top: 78%; } .e6 { left: 6%; top: 4%; }
  .services__grille { grid-template-columns: 1fr; }
  .bandeau__carte { padding: 28px; min-height: 380px; }
  .formulaire__ligne { grid-template-columns: 1fr; }
  .formulaire, .contact__carte { padding: 26px; }
  .pied__grille { grid-template-columns: 1fr; }
  .ruban__piste li { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .defile__piste, .ruban__piste { animation: none; }
}

/* ================= Réseau de neurones du héros ================= */
.heros__reseau {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 46% 38% at 50% 36%, rgba(0,0,0,.28), #000 78%);
          mask-image: radial-gradient(ellipse 46% 38% at 50% 36%, rgba(0,0,0,.28), #000 78%);
}
.heros > .enveloppe, .page-heros > .enveloppe { position: relative; z-index: 1; }
.page-heros .heros__reseau { -webkit-mask-image: radial-gradient(ellipse 44% 44% at 50% 50%, rgba(0,0,0,.28), #000 80%); mask-image: radial-gradient(ellipse 44% 44% at 50% 50%, rgba(0,0,0,.28), #000 80%); }


/* ================= Animations au scroll =================
   Actives seulement si JS a posé .anim sur <html> (et pas de mouvement réduit).
   On utilise translate / scale / rotate indépendants pour ne jamais écraser
   les transform existants du design. */
.anim [data-rv] { opacity: 0; translate: 0 28px; transition: opacity .9s cubic-bezier(.2,.7,.2,1), translate .9s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.anim [data-rv].vu { opacity: 1; translate: 0 0; }

/* Lignes du grand titre : montée derrière un masque */
.anim [data-rv="ligne"] { translate: 0 45%; clip-path: inset(0 0 100% 0); transition: opacity .9s, translate 1s cubic-bezier(.2,.7,.2,1), clip-path 1s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.anim [data-rv="ligne"].vu { clip-path: inset(0 0 -10% 0); }
.anim .affiche__vignette { width: 0; transition: width 1.1s cubic-bezier(.2,.7,.2,1) .35s; }
.anim .vu .affiche__vignette { width: 1.5em; }

/* Visuels de la vitrine : rideau + léger dézoom */
.anim [data-rv="rideau"] { opacity: 1; translate: none; clip-path: inset(10% 5% 10% 5% round var(--r)); transition: clip-path 1.2s cubic-bezier(.2,.7,.2,1); }
.anim [data-rv="rideau"] img { scale: 1.14; transition: scale 1.6s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.anim [data-rv="rideau"].vu { clip-path: inset(0 0 0 0 round var(--r)); }
.anim [data-rv="rideau"].vu img { scale: 1; }

/* Carte inclinée : elle se penche en arrivant */
.anim .colonne--active:not(.vu) .colonne__carte { rotate: 6deg; }

/* Pastilles des domaines : elles tombent sur la ligne */
.anim .etiquettes p { opacity: 0; translate: 0 -70px; transition: opacity .6s, translate 1s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0s); }
.anim .etiquettes.vu span { opacity: 1; translate: 0 0; }

/* Pile de la citation : les cartes s'écartent */
.anim .parole__pile::before, .anim .parole__pile::after { transition: transform 1.1s cubic-bezier(.2,.7,.2,1) .2s; }
.anim .parole__pile:not(.vu)::before, .anim .parole__pile:not(.vu)::after { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .heros__reseau { display: none; }
}


/* ================= FAQ ================= */
.faq { padding-block: 40px 130px; }
.faq__grille { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: start; }
.faq__tete { position: sticky; top: 110px; display: grid; gap: 18px; justify-items: start; }
.faq__tete p { color: var(--gris); max-width: 340px; }
.faq__liste { border-top: 1px solid var(--trait); }
.faq__item { border-bottom: 1px solid var(--trait); }
.faq__item > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font-size: 1.2rem; font-weight: 500; letter-spacing: -0.02em; }
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary:hover { color: var(--gris); }
.faq__icone { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--clair); position: relative; transition: background-color .3s, rotate .4s cubic-bezier(.16,1,.3,1); }
.faq__icone::before, .faq__icone::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--aubergine); border-radius: 2px; }
.faq__icone::after { rotate: 90deg; transition: rotate .4s cubic-bezier(.16,1,.3,1); }
.faq__item[open] .faq__icone { background: var(--jaune); }
.faq__item[open] .faq__icone::after { rotate: 0deg; }
.faq__reponse { padding: 0 60px 26px 0; color: var(--gris); max-width: 640px; }
.faq__item[open] .faq__reponse { animation: faq-ouvre .5s cubic-bezier(.16,1,.3,1); }
@keyframes faq-ouvre { from { opacity: 0; translate: 0 -8px; } }
@media (max-width: 1000px) {
  .faq__grille { grid-template-columns: 1fr; gap: 36px; }
  .faq__tete { position: static; }
}
@media (max-width: 760px) {
  .faq__item > summary { font-size: 1.05rem; }
  .faq__reponse { padding-right: 0; }
}

/* ================= Pages de détail des services ================= */
.fil { position: relative; display: inline-flex; gap: 10px; font-size: .88rem; color: var(--gris-sombre); }
.fil a { color: var(--lilas); text-decoration: none; }
.fil a:hover { color: var(--jaune); }
.detail__visuel { margin-top: 64px; height: clamp(280px, 40vw, 520px); }
.chiffre__valeur--mot { font-size: clamp(2rem, 3.4vw, 3.1rem); }
.lies { padding-block: 40px 100px; }
.lies__grille { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lie { display: grid; gap: 8px; text-decoration: none; border-radius: var(--r); background: var(--clair); padding: 12px 12px 22px; transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s; }
.lie:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(40,15,43,.45); }
.lie img { width: 100%; height: 170px; object-fit: cover; border-radius: var(--r-petit); margin-bottom: 8px; }
.lie__nom { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; padding-inline: 8px; display: flex; justify-content: space-between; }
.lie__nom::after { content: "↗"; font-weight: 500; }
.lie__texte { color: var(--gris); font-size: .92rem; padding-inline: 8px; }
@media (max-width: 1000px) { .lies__grille { grid-template-columns: 1fr; } .chiffres__grille .chiffre--jaune { grid-column: auto; } }
.service__icone + .service__titre { margin-top: auto; }
.services__grille .service:not(:has(.service__probleme)) { min-height: 250px; }

/* ================= Survols (page À propos et composants partagés) ================= */
/* Le texte gris d'introduction « s'encre » au survol */
.intro__texte em { transition: color .7s cubic-bezier(.16,1,.3,1); }
.intro__texte:hover em { color: var(--aubergine); }

/* Carte « 10 ans » : un petit réseau de neurones qui s'allume sous la souris */
.fondateur__carte { position: relative; overflow: hidden; isolation: isolate; }
.fondateur__carte > .heros__reseau { -webkit-mask-image: none; mask-image: none; z-index: 0; opacity: .35; transition: opacity .6s; }
.fondateur__carte:hover > .heros__reseau { opacity: 1; }
.fondateur__carte > :not(canvas) { position: relative; z-index: 1; }
.fondateur__chiffre { transition: translate .6s cubic-bezier(.16,1,.3,1); }
.fondateur__carte:hover .fondateur__chiffre { translate: 0 -6px; }
.fondateur__liste li { transition: background-color .35s, color .35s, border-color .35s; }
.fondateur__carte:hover .fondateur__liste li { background: var(--jaune); color: var(--nuit); border-color: var(--jaune); }
.fondateur__carte:hover .fondateur__liste li:nth-child(2) { transition-delay: .07s; }
.fondateur__carte:hover .fondateur__liste li:nth-child(3) { transition-delay: .14s; }
.fondateur__carte:hover .fondateur__liste li:nth-child(4) { transition-delay: .21s; }

/* Photo de l'atelier : léger rapprochement et légende qui remonte */
.fondateur__photo { position: relative; }
.fondateur__photo img { transition: scale 1.2s cubic-bezier(.16,1,.3,1); }
.fondateur__photo:hover img { scale: 1.05; }
.fondateur__photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 28px 24px; color: var(--blanc); font-size: 1.35rem; font-weight: 500; letter-spacing: -0.02em; background: linear-gradient(transparent, rgba(28,10,31,.85)); opacity: 0; translate: 0 16px; transition: opacity .5s, translate .6s cubic-bezier(.16,1,.3,1); }
.fondateur__photo figcaption em { color: var(--jaune); }
.fondateur__photo:hover .fondateur__photo figcaption { opacity: 1; translate: 0 0; }
@media (hover: none) { .fondateur__photo figcaption { opacity: 1; translate: 0 0; } }

/* Grand titre : la vignette s'avance quand on la survole */
.affiche__vignette { transition: scale .6s cubic-bezier(.16,1,.3,1), rotate .6s cubic-bezier(.16,1,.3,1), width 1.1s cubic-bezier(.2,.7,.2,1) .35s; }
.affiche__vignette img { transition: scale 1s cubic-bezier(.16,1,.3,1); }
.affiche__titre:hover .affiche__vignette { scale: 1.08; rotate: -3deg; }
.affiche__titre:hover .affiche__vignette img { scale: 1.15; }
.anim .affiche__vignette { transition: width 1.1s cubic-bezier(.2,.7,.2,1) .35s, scale .6s cubic-bezier(.16,1,.3,1) 0s, rotate .6s cubic-bezier(.16,1,.3,1) 0s; }

/* ================= Pages légales ================= */
.page-heros--court { padding: 80px 0 90px; }
.legal { padding-block: 90px 120px; }
.legal__grille { display: grid; grid-template-columns: 260px 1fr; gap: 72px; align-items: start; }
.legal__sommaire { position: sticky; top: 100px; }
.legal__maj { font-size: .85rem; color: var(--gris); margin-bottom: 18px; }
.legal__sommaire ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--trait); counter-reset: sommaire; }
.legal__sommaire li { counter-increment: sommaire; }
.legal__sommaire a { display: flex; gap: 10px; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; font-size: .92rem; color: var(--gris); text-decoration: none; transition: color .2s, border-color .2s; }
.legal__sommaire a::before { content: counter(sommaire, decimal-leading-zero); font-variant-numeric: tabular-nums; color: #B5ADB7; }
.legal__sommaire a:hover, .legal__sommaire a.actif { color: var(--aubergine); border-left-color: var(--jaune); }
.legal__texte { max-width: 720px; }
.legal__texte h2 { font-size: 1.7rem; margin: 56px 0 16px; scroll-margin-top: 100px; }
.legal__texte h2:first-child { margin-top: 0; }
.legal__texte h3 { font-size: 1.1rem; font-weight: 600; margin: 24px 0 6px; letter-spacing: -0.015em; }
.legal__texte p, .legal__texte li { color: #4A3F4C; line-height: 1.7; }
.legal__texte p + p { margin-top: 12px; }
.legal__texte ul { padding-left: 1.2em; margin: 8px 0; display: grid; gap: 6px; }
.legal__texte a { color: var(--aubergine); text-decoration-color: var(--lilas); text-underline-offset: 3px; }
.legal__texte a:hover { text-decoration-color: var(--aubergine); }
.legal__fiche { display: grid; grid-template-columns: 170px 1fr; margin: 14px 0; border-top: 1px solid var(--trait); }
.legal__fiche dt, .legal__fiche dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--trait); }
.legal__fiche dt { font-weight: 600; font-size: .92rem; }
.legal__fiche dd { color: #4A3F4C; }
.legal__resume { list-style: none; padding: 24px 28px !important; background: var(--clair); border-radius: var(--r); }
.legal__resume li { padding-left: 1.6em; position: relative; }
.legal__resume li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; color: var(--aubergine); }
.legal__table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: .95rem; }
.legal__table th { text-align: left; font-weight: 600; padding: 10px 12px 10px 0; border-bottom: 2px solid var(--aubergine); }
.legal__table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--trait); color: #4A3F4C; vertical-align: top; }
.legal__note { font-size: .9rem; }
mark.a-completer { background: #FFF3A6; color: #6B4E00; padding: .1em .35em; border-radius: 4px; font-weight: 500; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.pied__bas a { color: inherit; }
.pied__bas a:hover { color: var(--jaune); }
.formulaire__mention { font-size: .82rem; color: var(--gris); }
.formulaire__mention a { color: var(--aubergine); }
@media (max-width: 1000px) {
  .legal__grille { grid-template-columns: 1fr; gap: 40px; }
  .legal__sommaire { position: static; }
}
@media (max-width: 760px) {
  .legal__fiche { grid-template-columns: 1fr; }
  .legal__fiche dt { padding-bottom: 0; border-bottom: 0; }
  .legal__fiche dd { padding-top: 4px; }
}

/* ================= Logo et monogramme ================= */
.entete__logo { display: inline-flex; }
.entete__logo img { height: 36px; width: auto; }
.pied__monogramme { width: 56px; height: auto; margin-bottom: 22px; }
.collage__monogramme { position: absolute; right: 18px; top: 18px; width: 30px; height: auto; opacity: .9; }
@media (max-width: 760px) {
  .entete__logo img { height: 34px; }
}

/* ================= Collage du héros : survols ================= */
@media (hover: hover) {
  .collage > * {
    transition: transform .7s cubic-bezier(.16,1,.3,1), box-shadow .7s cubic-bezier(.16,1,.3,1), filter .45s;
    transform-origin: 50% 100%;
  }
  .anim .collage > [data-rv] {
    transition: opacity .9s cubic-bezier(.2,.7,.2,1), translate .9s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.16,1,.3,1), box-shadow .7s cubic-bezier(.16,1,.3,1), filter .45s;
    transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s, 0s;
  }
  /* Seule la case survolée réagit : elle se soulève, s'incline et projette son ombre */
  .collage > :hover { z-index: 2; transform: translateY(-14px) rotate(-1.8deg); box-shadow: 0 34px 60px -22px rgba(0,0,0,.75); }
  .collage > :nth-child(even):hover { transform: translateY(-14px) rotate(1.8deg); }

  /* Photos : léger zoom, l'étiquette garde ses couleurs et se décale légèrement */
  .collage__photo img { transition: scale 1.1s cubic-bezier(.16,1,.3,1); }
  .collage__photo:hover img { scale: 1.09; }
  .wp-block-image.collage__photo figcaption { transition: background-color .35s, color .35s, translate .5s cubic-bezier(.16,1,.3,1); }
  .wp-block-image.collage__photo:hover figcaption { translate: 4px 4px; }
  .collage__carte { transition: translate .6s cubic-bezier(.16,1,.3,1); }
  .collage__photo:hover .collage__carte { translate: 0 -8px; }

  /* Cases chiffres : le chiffre grossit, le monogramme pivote */
  .collage__chiffre { display: inline-block; transform-origin: left bottom; transition: scale .6s cubic-bezier(.16,1,.3,1), color .35s; }
  .collage__b:hover .collage__chiffre { scale: 1.25; color: var(--jaune); }
  .collage__d:hover .collage__chiffre { scale: 1.12; }
  .collage__monogramme { transition: rotate .7s cubic-bezier(.16,1,.3,1), scale .7s cubic-bezier(.16,1,.3,1); }
  .collage__b:hover .collage__monogramme { rotate: -12deg; scale: 1.35; }
}
/* Le héros ne coupe plus que sur les côtés : l'ombre des cases survolées peut déborder sur la section suivante */
.heros { overflow: visible; overflow-x: clip; position: relative; z-index: 1; }

/* Grand titre plus long (ex. « Simple / par nature ») : un cran plus petit pour tenir en largeur */
.affiche__titre--long { font-size: clamp(3rem, 9.6vw, 9.2rem); }
@media (max-width: 760px) { .affiche__titre--long { font-size: 10.5vw; } }

/* ================= À propos : le récit « deux mondes » ================= */
.recit { padding-block: 20px 110px; }
.recit__duo { margin-top: 56px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.recit__monde { border-radius: var(--r); background: var(--clair); padding: 14px 14px 30px; display: grid; gap: 10px; transition: transform .7s cubic-bezier(.16,1,.3,1), box-shadow .7s cubic-bezier(.16,1,.3,1); }
.recit__monde > :not(.recit__photo) { margin-inline: 16px; }
.recit__monde .etiquette { margin-top: 14px; }
.recit__monde--passion { background: var(--lilas); }
.recit__photo { border-radius: var(--r-petit); overflow: hidden; height: 260px; }
.recit__photo img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.1s cubic-bezier(.16,1,.3,1); }
.recit__titre { font-size: clamp(1.9rem, 3vw, 2.5rem); }
.recit__texte { color: #4A3F4C; max-width: 460px; }
.recit__monde--passion .recit__texte { color: var(--aubergine); }
.recit__lien { position: relative; z-index: 2; width: 96px; height: 96px; margin-inline: -30px; border-radius: 50%; background: var(--aubergine); display: grid; place-items: center; box-shadow: 0 0 0 8px var(--blanc), 0 20px 40px -16px rgba(40,15,43,.6); transition: rotate .8s cubic-bezier(.16,1,.3,1), scale .8s cubic-bezier(.16,1,.3,1); }
.recit__lien img { width: 50px; height: auto; }
.recit__conclusion { margin: 72px auto 0; max-width: 900px; text-align: center; font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-weight: 500; line-height: 1.22; letter-spacing: -0.025em; }
.recit__conclusion em { color: #B5ADB7; transition: color .7s cubic-bezier(.16,1,.3,1); }
.recit__conclusion:hover em { color: var(--aubergine); }
.devise { margin-top: 56px; border-radius: var(--r); background: var(--aubergine); color: var(--blanc); text-align: center; padding: 64px 28px 56px; position: relative; overflow: hidden; }
.devise::before { content: ""; position: absolute; inset: auto -10% -60% -10%; height: 120%; background: radial-gradient(closest-side, rgba(186,134,213,.28), transparent); pointer-events: none; }
.devise > * { position: relative; }
.devise__intro { color: var(--gris-sombre); font-size: 1rem; }
.devise__texte { margin-top: 10px; font-size: clamp(2.6rem, 7vw, 6rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.devise__texte em { color: var(--jaune); }
.devise__signature { margin-top: 18px; font-family: "Caveat", cursive; font-weight: 600; font-size: 2rem; color: var(--lilas); rotate: -4deg; }
.devise__signature::before { content: "— "; }
@media (hover: hover) {
  .recit__monde:hover { transform: translateY(-10px); box-shadow: 0 34px 60px -30px rgba(40,15,43,.55); }
  .recit__monde:first-child:hover { transform: translateY(-10px) rotate(-1.2deg); }
  .recit__monde--passion:hover { transform: translateY(-10px) rotate(1.2deg); }
  .recit__monde:hover .recit__photo img { scale: 1.07; }
  .recit__duo:hover .recit__lien { rotate: 360deg; scale: 1.08; }
}
@media (max-width: 900px) {
  .recit__duo { grid-template-columns: 1fr; }
  .recit__lien { margin: -30px auto; }
  .recit__photo { height: 220px; }
}
.anim .recit__monde[data-rv] { transition: opacity .9s cubic-bezier(.2,.7,.2,1), translate .9s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.16,1,.3,1), box-shadow .7s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s; }
.anim .recit__lien[data-rv] { transition: opacity .9s cubic-bezier(.2,.7,.2,1), translate .9s cubic-bezier(.2,.7,.2,1), rotate .8s cubic-bezier(.16,1,.3,1), scale .8s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s; }

/* ================= Corrections responsive ================= */
/* Grand « NUMERIKME » du pied de page : taille calculée pour toujours tenir en entier (≈ 5,7 em de large) */
.pied__marque { font-size: min(16.5vw, 17rem); text-align: center; overflow: visible; }

/* Étapes sur 4 colonnes : 2 × 2 dès que la place manque, pour que les titres tiennent */
@media (max-width: 1180px) and (min-width: 1001px) {
  .colonnes--4 { grid-template-columns: 1fr 1fr; }
  .colonnes--4 .colonne:nth-child(3) { border-left: 0; }
  .colonnes--4 .colonne:nth-child(n+3) { border-top: 1px solid var(--trait-sombre); }
  .colonnes--4 .colonne { min-height: 260px; }
}

@media (max-width: 760px) {
  /* Rubans : moins inclinés, décalés l'un de l'autre, assez larges pour ne jamais montrer leurs bouts */
  .rubans { height: 190px; }
  .ruban { left: -20%; right: -20%; padding-block: 14px; }
  .ruban--sombre { top: 34%; transform: translateY(-50%) rotate(2.5deg); }
  .ruban--jaune { top: 66%; transform: translateY(-50%) rotate(-2.5deg); }
  .ruban__piste { gap: 28px; }
  .ruban__piste li { gap: 28px; font-size: 1.1rem; }

  /* Pastilles des domaines : un nuage rangé plutôt qu'une pile qui se chevauche */
  .etiquettes { height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 10px; padding: 28px 0 8px; }
  .etiquettes::before { top: 50%; }
  .etiquettes p { position: relative; left: auto !important; top: auto !important; font-size: .88rem; }

  /* Cartes chiffres et étapes : moins de vide */
  .chiffre { min-height: 0; gap: 28px; }
  .colonne { min-height: 210px; }
  .colonne__carte { gap: 16px; padding: 26px 24px 22px; }
}

/* Carte violette de la page Contact : même petit réseau de neurones que la carte « 10 ans » */
.contact__carte { position: relative; overflow: hidden; isolation: isolate; }
.contact__carte > .heros__reseau { -webkit-mask-image: none; mask-image: none; z-index: 0; opacity: .35; transition: opacity .6s; }
.contact__carte:hover > .heros__reseau { opacity: 1; }
.contact__carte > :not(canvas) { position: relative; z-index: 1; }
@media (max-width: 900px) {
  /* Le médaillon NK ne recouvre plus le texte des deux cartes */
  .recit__lien { width: 76px; height: 76px; margin: -20px auto; }
  .recit__lien img { width: 40px; }
  .recit__monde:first-child { padding-bottom: 50px; }
  .recit__monde--passion { padding-top: 40px; }
}
@media (max-width: 1000px) {
  .fondateur__photo { min-height: 0; height: 300px; }
}

/* ================= Ils nous font confiance ================= */
.confiance { padding-block: 20px 110px; }
.confiance__grille { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; perspective: 1000px; }
.client {
  --rx: 0deg; --ry: 0deg;
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  aspect-ratio: 4 / 3; padding: 22px; border-radius: var(--r);
  background: var(--aubergine); color: var(--blanc); text-decoration: none;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .5s cubic-bezier(.16,1,.3,1), background-color .45s, color .45s, box-shadow .6s cubic-bezier(.16,1,.3,1);
}
/* Reflet qui balaie la carte au survol */
.client::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); translate: -120% 0; transition: translate .9s cubic-bezier(.16,1,.3,1); }
.client__logo { flex: 1; display: grid; place-items: center; min-height: 0; }
.client__logo img { max-width: 72%; max-height: 120px; width: auto; height: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .85; transition: filter .45s, opacity .45s, scale .6s cubic-bezier(.16,1,.3,1); }
.client__pied { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 14px; border-top: 1px solid var(--trait-sombre); transition: border-color .45s; }
.client__nom { font-weight: 600; letter-spacing: -0.01em; }
.client__site { font-size: .85rem; color: var(--gris-sombre); transition: color .45s; white-space: nowrap; }
.client__site::after { content: " ↗"; }
@media (hover: hover) {
  .client:hover { box-shadow: 0 40px 70px -30px rgba(40,15,43,.6); }
  .client:hover::after { translate: 120% 0; }
  .client:hover .client__logo img { filter: none; opacity: 1; scale: 1.06; }
  .client:hover { background: var(--blanc); color: var(--aubergine); box-shadow: 0 40px 70px -30px rgba(40,15,43,.45), inset 0 0 0 1px var(--trait); }
  .client:hover .client__pied { border-color: var(--trait); }
  .client:hover .client__site { color: var(--gris); }
}
.anim .client[data-rv] { transition: opacity .9s cubic-bezier(.2,.7,.2,1), translate .9s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.16,1,.3,1), background-color .45s, color .45s, box-shadow .6s; transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s, 0s, 0s; }
@media (max-width: 900px) {
  .confiance__grille { grid-template-columns: 1fr; }
  .client { aspect-ratio: auto; min-height: 220px; }
}

/* ================= Vitrine : texte posé sur les grandes images ================= */
.vitrine--superpose .projet { position: relative; border-radius: var(--r); overflow: hidden; isolation: isolate; }
.vitrine--superpose .projet__visuel::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(28,10,31,0) 35%, rgba(28,10,31,.55) 62%, rgba(28,10,31,.92) 100%); transition: opacity .6s; }
.vitrine--superpose .projet__rond { display: none; }
.vitrine--superpose .projet__infos {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0;
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "titre lien" "meta lien";
  align-items: end; gap: 10px 32px; padding: clamp(24px, 4vw, 48px); color: var(--blanc);
}
.vitrine--superpose .projet__titre { grid-area: titre; font-size: clamp(2rem, 4.6vw, 4.2rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; transition: translate .7s cubic-bezier(.16,1,.3,1); }
.vitrine--superpose .projet__meta { grid-area: meta; color: rgba(255,255,255,.78); font-size: clamp(.95rem, 1.3vw, 1.1rem); max-width: 560px; display: flex; align-items: baseline; gap: 14px; transition: translate .7s cubic-bezier(.16,1,.3,1) .04s; }
.vitrine--superpose .projet__meta strong { color: var(--jaune); margin: 0; font-size: .85em; padding: .15em .55em; border: 1px solid rgba(240,240,45,.5); border-radius: var(--pilule); }
.vitrine--superpose .projet__infos .lien a { grid-area: lien; align-self: end; background: var(--jaune); color: var(--nuit); padding: .8em 1.35em; border-radius: var(--pilule); font-size: .95rem; transition: translate .5s cubic-bezier(.16,1,.3,1), background-color .3s; }
.vitrine--superpose .projet__infos .lien a:hover { text-decoration: none; background: var(--blanc); }
/* Grand numéro en filigrane, en haut à droite */
.vitrine--superpose .projet__visuel::before { content: attr(data-num); position: absolute; top: clamp(16px, 3vw, 32px); right: clamp(20px, 3.5vw, 44px); z-index: 2; font-size: clamp(3.5rem, 9vw, 8.5rem); font-weight: 800; letter-spacing: -0.06em; line-height: .8; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.55); pointer-events: none; transition: translate .8s cubic-bezier(.16,1,.3,1); }
@media (hover: hover) {
  .vitrine--superpose .projet:hover .projet__titre { translate: 0 -6px; }
  .vitrine--superpose .projet:hover .projet__meta { translate: 0 -6px; }
  .vitrine--superpose .projet:hover .projet__infos .lien a { translate: 0 -6px; }
  .vitrine--superpose .projet:hover .projet__visuel::before { translate: -8px 8px; }
}
@media (max-width: 760px) {
  .vitrine--superpose .projet__visuel { height: 460px; }
  /* Sur mobile le texte occupe la moitié de l'image : le voile commence plus haut et fonce davantage */
  .vitrine--superpose .projet__visuel::after { background: linear-gradient(180deg, rgba(28,10,31,.1) 0%, rgba(28,10,31,.55) 30%, rgba(28,10,31,.9) 55%, rgba(28,10,31,.96) 100%); }
  .vitrine--superpose .projet__titre, .vitrine--superpose .projet__meta { text-shadow: 0 1px 12px rgba(28,10,31,.6); }
  .vitrine--superpose .projet__infos { grid-template-columns: 1fr; grid-template-areas: "titre" "meta" "lien"; gap: 12px; }
  .vitrine--superpose .projet__meta { flex-direction: column; gap: 8px; }
  .vitrine--superpose .projet__infos .lien a { justify-self: start; }
}


/* Ils nous font confiance : cartes compactes pour que tous les logos tiennent sur une ligne */
.confiance__grille { grid-template-columns: repeat(6, 1fr); gap: 12px; }
.client { aspect-ratio: auto; min-height: 0; height: 230px; padding: 16px; gap: 12px; }
.client__logo img { max-width: 82%; max-height: 92px; }
.client__pied { flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 10px; }
.client__nom { font-size: .9rem; }
.client__site { font-size: .78rem; }
@media (max-width: 1100px) { .confiance__grille { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .confiance__grille { grid-template-columns: repeat(2, 1fr); } .client { height: 200px; } .client:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 420px) { .client__site { font-size: .72rem; white-space: normal; } }

/* ---------- Contact : le visage de celui qui répond ---------- */
/* Deux disques de papier décalés derrière la photo, comme la pile de la citation. */
.contact__moi { display: flex; align-items: center; gap: 26px; margin-bottom: 14px; }
.contact__photo { position: relative; isolation: isolate; flex: none; width: 112px; height: 112px; margin: 0; }
.contact__photo::before, .contact__photo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: -1; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.contact__photo::before { background: var(--lilas); transform: translate(-8px, 7px); }
.contact__photo::after { background: var(--jaune); transform: translate(8px, -6px); }
.contact__photo img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--aubergine); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.contact__carte:hover .contact__photo::before { transform: translate(-13px, 10px); }
.contact__carte:hover .contact__photo::after { transform: translate(12px, -10px); }
.contact__carte:hover .contact__photo img { transform: rotate(-4deg); }
.contact__signe { display: grid; gap: 2px; }
.contact__note { display: inline-flex; align-items: flex-end; gap: .3em; margin-bottom: 8px; font-family: "Caveat", "Segoe Print", cursive; font-size: 1.6rem; font-weight: 600; line-height: 1; color: var(--lilas); rotate: -3deg; transform-origin: left center; }
.contact__note::before {
  content: ""; flex: none; width: 1.1em; height: .85em; margin-bottom: .1em; background: currentColor; transform: scale(-1, -1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4c9 1 19 5 26 17'/%3E%3Cpath d='M22 19l7 3 1-8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4c9 1 19 5 26 17'/%3E%3Cpath d='M22 19l7 3 1-8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.contact__nom { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; }
.contact__role { font-size: .88rem; color: var(--gris-sombre); }
@media (max-width: 560px) {
  .contact__moi { gap: 20px; }
  .contact__photo { width: 88px; height: 88px; }
  .contact__note { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .contact__photo::before, .contact__photo::after, .contact__photo img { transition: none; }
}


/* ================= À propos — direction artistique : le carnet du photographe.
   Un seul langage visuel : papiers superposés (disques et cartes décalés lilas / jaune),
   tirages photo encadrés, annotations manuscrites, chapitres numérotés. */

.ap-doux { transition: transform .7s cubic-bezier(.16,1,.3,1), box-shadow .7s cubic-bezier(.16,1,.3,1); }

/* ---------- Marqueur de chapitre ---------- */
.ap-marque { display: flex; align-items: center; gap: 14px; margin-bottom: 36px; }
.ap-marque__num { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--aubergine); color: var(--jaune); font-size: .85rem; font-weight: 700; letter-spacing: .02em; }
.ap-marque__nom { font-family: "Caveat", "Segoe Print", cursive; font-size: 1.7rem; font-weight: 600; line-height: 1; rotate: -2deg; }
.ap-marque::after { content: ""; flex: 1; height: 1px; background: var(--trait); }
.ap-marque--clair .ap-marque__num { background: var(--jaune); color: var(--nuit); }
.ap-marque--clair .ap-marque__nom { color: var(--jaune); }
.ap-marque--clair::after { background: var(--trait-sombre); }

.ap-chapitre { padding-block: 110px; }
.ap-chapitre--papier { background: var(--clair); }
.recit.ap-chapitre { padding-top: 40px; }
.ap-titre { font-size: clamp(2rem, 3.8vw, 3.2rem); }
.ap-titre em { color: #B5ADB7; }
.ap-titre--centre { text-align: center; max-width: 22ch; margin-inline: auto; }

/* ---------- Portrait ---------- */
.ap-heros { position: relative; overflow: hidden; padding: 90px 0 120px; }
.ap-heros::before { content: ""; position: absolute; right: -10%; top: -20%; width: 800px; height: 700px; background: radial-gradient(closest-side, rgba(186,134,213,.24), transparent); pointer-events: none; }
.ap-heros > .enveloppe { position: relative; z-index: 1; }
.ap-heros__grille { display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: center; }
.ap-heros__texte { display: grid; gap: 24px; justify-items: start; }
.ap-heros__titre { font-size: clamp(2.5rem, 5.2vw, 4.6rem); }
.ap-heros__titre em { color: var(--jaune); }
.ap-heros__chapo { color: var(--gris-sombre); font-size: 1.1rem; max-width: 540px; }
.ap-faits { list-style: none; margin: 12px 0 0; padding: 26px 0 0; border-top: 1px solid var(--trait-sombre); display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; }
.ap-faits li { font-size: .9rem; color: var(--gris-sombre); line-height: 1.35; }
.ap-faits strong { display: block; margin-bottom: 6px; font-size: 2rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--blanc); }

.ap-portrait { position: relative; isolation: isolate; width: min(420px, 100%); aspect-ratio: 1; justify-self: center; }
.ap-portrait::before, .ap-portrait::after { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: -1; transition: transform .9s cubic-bezier(.16,1,.3,1); }
.ap-portrait::before { background: var(--lilas); transform: translate(-22px, 18px); }
.ap-portrait::after { background: var(--jaune); transform: translate(22px, -16px); }
.ap-portrait img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 6px solid var(--nuit); transition: transform .9s cubic-bezier(.16,1,.3,1); }
.ap-portrait:hover::before { transform: translate(-32px, 26px); }
.ap-portrait:hover::after { transform: translate(32px, -24px); }
.ap-portrait:hover img { transform: rotate(-3deg); }
.ap-portrait figcaption { position: absolute; left: 4%; top: calc(100% + 26px); width: max-content; display: flex; align-items: flex-start; gap: .3em; font-family: "Caveat", "Segoe Print", cursive; font-size: 1.7rem; font-weight: 600; line-height: 1; color: var(--lilas); rotate: -6deg; max-width: 9em; }
.ap-portrait figcaption::after {
  content: ""; flex: none; order: -1; width: 1.3em; height: 1em; margin-top: -.5em; background: currentColor; transform: scale(-1, -1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4c9 1 19 5 26 17'/%3E%3Cpath d='M22 19l7 3 1-8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4c9 1 19 5 26 17'/%3E%3Cpath d='M22 19l7 3 1-8'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- 01 · Origine : un tirage photo et une carte posés l'un sur l'autre ---------- */
.ap-origine { display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: center; }
.ap-origine__texte { display: grid; gap: 28px; }
.ap-origine__texte .intro__texte { font-size: clamp(1.25rem, 1.9vw, 1.6rem); }
.ap-origine__collage { position: relative; padding: 0 0 90px 40px; container-type: inline-size; }
.ap-cadre { background: var(--blanc); padding: 12px 12px 0; border-radius: 6px; box-shadow: 0 30px 60px -30px rgba(40,15,43,.45), 0 0 0 1px var(--trait); transition: transform .8s cubic-bezier(.16,1,.3,1); }
.ap-cadre img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.ap-cadre figcaption { font-family: "Caveat", "Segoe Print", cursive; font-size: 1.45rem; font-weight: 600; padding: 12px 6px 14px; color: var(--gris); text-align: right; }
.ap-cadre--incline { transform: rotate(2.5deg); }
.ap-dix { position: absolute; bottom: 0; width: 240px; left: -20px; background: var(--aubergine); color: var(--blanc); border-radius: var(--r); padding: 26px; transform: rotate(-3deg); box-shadow: 0 30px 60px -24px rgba(40,15,43,.6); transition: transform .8s cubic-bezier(.16,1,.3,1); }
.ap-dix__chiffre { display: block; font-size: 3.6rem; font-weight: 600; letter-spacing: -0.05em; line-height: .9; color: var(--jaune); }
.ap-dix p { margin-top: 12px; font-size: .92rem; color: var(--gris-sombre); }
.ap-origine__collage:hover .ap-cadre--incline { transform: rotate(0deg) translateY(-6px); }
.ap-origine__collage:hover .ap-dix { transform: rotate(-1deg) translate(-8px, 6px); }
/* La carte « ans » reste à gauche de la légende ; si le tirage est trop étroit, elle passe dessous. */
@container (max-width: 500px) {
  .ap-dix { position: relative; left: auto; bottom: auto; width: 88%; margin: 8px 0 -90px; transform: rotate(-1.5deg); }
}

/* ---------- 03 · Parcours : quatre fiches épinglées sur un fil ---------- */
.ap-parcours { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; }
.ap-parcours::before { content: ""; position: absolute; left: 4%; right: 4%; top: 30px; border-top: 2px dashed rgba(40,15,43,.25); }
.ap-etape { position: relative; background: var(--blanc); border-radius: var(--r); padding: 58px 24px 28px; box-shadow: 0 0 0 1px var(--trait), 0 24px 44px -30px rgba(40,15,43,.4); transition: transform .7s cubic-bezier(.16,1,.3,1), box-shadow .7s cubic-bezier(.16,1,.3,1); }
.ap-etape:nth-child(1) { transform: rotate(-1.5deg); }
.ap-etape:nth-child(2) { transform: rotate(1deg) translateY(14px); }
.ap-etape:nth-child(3) { transform: rotate(-.8deg); }
.ap-etape:nth-child(4) { transform: rotate(1.4deg) translateY(10px); }
.ap-etape:hover { transform: rotate(0) translateY(-8px); box-shadow: 0 0 0 1px var(--trait), 0 36px 60px -30px rgba(40,15,43,.55); }
.ap-etape__num { position: absolute; top: -12px; left: 24px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--aubergine); color: var(--jaune); font-weight: 700; box-shadow: 0 0 0 6px var(--clair); }
.ap-etape--lilas .ap-etape__num { background: var(--lilas); color: var(--aubergine); }
.ap-etape--jaune .ap-etape__num { background: var(--jaune); color: var(--aubergine); }
.ap-etape--jaune { background: var(--aubergine); color: var(--blanc); }
.ap-etape h3 { font-size: 1.3rem; letter-spacing: -0.02em; }
.ap-etape p { margin-top: 10px; font-size: .93rem; color: var(--gris); }
.ap-etape--jaune p { color: var(--gris-sombre); }

/* ---------- 05 · Concrètement ---------- */
.ap-concret { display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: start; }
.ap-services { list-style: none; margin: 36px 0 0; padding: 0; border-top: 1px solid var(--trait); }
.ap-services a { display: grid; grid-template-columns: 1fr auto 36px; align-items: center; gap: 20px; padding: 20px 4px; text-decoration: none; font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 500; letter-spacing: -0.03em; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.ap-services li { border-bottom: 1px solid var(--trait); }
.ap-services a em { font-size: .88rem; font-weight: 400; letter-spacing: 0; color: var(--gris); text-align: right; }
.ap-services a::after { content: "↗"; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 1rem; background: var(--clair); transition: background-color .4s, transform .5s cubic-bezier(.16,1,.3,1); }
.ap-services a:hover { transform: translateX(10px); }
.ap-services a:hover::after { background: var(--jaune); transform: rotate(45deg); }
.ap-zone { position: relative; border-radius: var(--r); padding: 34px; display: grid; gap: 16px; justify-items: start; transform: rotate(1.2deg); transition: transform .7s cubic-bezier(.16,1,.3,1); }
.ap-zone::before { content: ""; position: absolute; inset: 0; border-radius: var(--r); background: var(--jaune); z-index: -1; transform: rotate(-4deg); transition: transform .7s cubic-bezier(.16,1,.3,1); }
.ap-zone { isolation: isolate; }
.ap-zone::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); background: var(--lilas); z-index: -1; }
.ap-zone:hover { transform: rotate(0); }
.ap-zone:hover::before { transform: rotate(-6deg) translate(-4px, 4px); }
.ap-zone .etiquette { color: var(--aubergine); }
.ap-zone__titre { font-size: clamp(1.8rem, 2.8vw, 2.4rem); }
.ap-zone__titre em { display: block; color: #fff; }
.ap-zone p { color: var(--aubergine); }
.ap-zone__lieux { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-weight: 600; font-size: .95rem; }
.ap-zone__lieux li:not(:last-child)::after { content: "·"; margin-inline: .6em; opacity: .5; }

/* ---------- FAQ : le marqueur prend la place de l'étiquette ---------- */
.faq__tete .ap-marque { width: 100%; margin-bottom: 0; }

/* ---------- Signature finale ---------- */
.ap-fin { padding-block: 20px 130px; }
.ap-fin__carte { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r); background: var(--aubergine); color: var(--blanc); text-align: center; padding: 72px 28px 64px; display: grid; justify-items: center; }
.ap-fin__carte > .heros__reseau { -webkit-mask-image: none; mask-image: none; z-index: 0; opacity: .35; transition: opacity .6s; }
.ap-fin__carte:hover > .heros__reseau { opacity: 1; }
.ap-fin__carte > :not(canvas) { position: relative; z-index: 1; }
.ap-fin__photo { margin-bottom: 26px; }
.ap-fin__carte:hover .contact__photo::before { transform: translate(-13px, 10px); }
.ap-fin__carte:hover .contact__photo::after { transform: translate(12px, -10px); }
.ap-fin__carte:hover .contact__photo img { transform: rotate(-4deg); }
.ap-fin__texte { margin-top: 26px; max-width: 460px; color: var(--gris-sombre); }
.ap-fin__carte .bouton > .wp-block-button__link { margin-top: 26px; }

/* Les révélations au scroll ne doivent pas écraser les transitions de survol */
.anim .ap-etape[data-rv], .anim .ap-zone[data-rv] { transition: opacity .9s cubic-bezier(.2,.7,.2,1), translate .9s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.16,1,.3,1), box-shadow .7s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .ap-heros__grille, .ap-origine, .ap-concret { grid-template-columns: 1fr; gap: 56px; }
  .ap-portrait { width: min(340px, 80%); }
  .ap-origine__collage { max-width: 560px; }
  .ap-parcours { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .ap-parcours::before { display: none; }
}
@media (max-width: 600px) {
  .ap-chapitre { padding-block: 80px; }
  .ap-faits { grid-template-columns: 1fr; gap: 16px; }
  .ap-faits li { display: flex; align-items: baseline; gap: 12px; }
  .ap-faits strong { margin: 0; font-size: 1.6rem; min-width: 3.2em; }
  .ap-portrait { width: 62%; order: -1; }
  .ap-heros__grille { gap: 28px; }
  .ap-heros { padding-top: 56px; }
  .ap-portrait::before { transform: translate(-14px, 12px); }
  .ap-portrait::after { transform: translate(14px, -10px); }
  .ap-portrait figcaption { left: 50%; translate: -50% 0; top: calc(100% + 20px); font-size: 1.4rem; max-width: none; }
  .ap-portrait { margin-bottom: 84px; }
  .ap-origine__collage { padding: 0 0 90px; }
  .ap-parcours { grid-template-columns: 1fr; }
  .ap-parcours::before { display: block; left: 45px; right: auto; top: 20px; bottom: 20px; border-top: 0; border-left: 2px dashed rgba(40,15,43,.25); }
  .ap-etape:nth-child(n) { transform: none; }
  .ap-services a { grid-template-columns: 1fr 36px; }
  .ap-services a { row-gap: 4px; }
  .ap-services a em { grid-column: 1; grid-row: 2; text-align: left; }
  .ap-services a::after { grid-column: 2; grid-row: 1 / span 2; }
  .ap-zone { transform: none; padding: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .ap-portrait::before, .ap-portrait::after, .ap-portrait img, .ap-cadre, .ap-dix, .ap-etape, .ap-zone, .ap-zone::before { transition: none; }
}


/* ================= Services — même carnet que la page À propos =================
   Réutilise : marqueurs de chapitre (.ap-marque), tirages photo (.ap-cadre), fin signée (.ap-fin). */

/* ---------- Héros : trois tirages posés en éventail ---------- */
.sv-heros { position: relative; overflow: hidden; padding: 90px 0 130px; }
.sv-heros::before { content: ""; position: absolute; right: -10%; top: -20%; width: 800px; height: 700px; background: radial-gradient(closest-side, rgba(186,134,213,.24), transparent); pointer-events: none; }
.sv-heros > .enveloppe { position: relative; z-index: 1; }
.sv-heros__grille { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; }
.sv-heros__texte { display: grid; gap: 24px; justify-items: start; }
.sv-heros__titre { font-size: clamp(2.5rem, 5.2vw, 4.6rem); }
.sv-heros__titre em { color: var(--jaune); }
.sv-heros__chapo { color: var(--gris-sombre); font-size: 1.08rem; max-width: 560px; }

.sv-tirages { position: relative; height: 560px; }
.sv-tirage { position: absolute; width: 47%; }
.sv-tirage figcaption { font-size: 1.3rem; padding-block: 8px 10px; }
/* En zigzag, sans se recouvrir : chaque légende reste lisible */
.sv-tirage--1 { left: 0; top: 0; transform: rotate(-5deg); }
.sv-tirage--2 { right: 0; top: 130px; transform: rotate(4deg); }
.sv-tirage--3 { left: 4%; top: 300px; transform: rotate(-2deg); }
.sv-tirages:hover .sv-tirage--1 { transform: rotate(-7deg) translate(-8px, -6px); }
.sv-tirages:hover .sv-tirage--2 { transform: rotate(6deg) translate(8px, -6px); }
.sv-tirages:hover .sv-tirage--3 { transform: rotate(0deg) translateY(6px); }

/* ---------- 01 · Situations : le problème en grand, le service en annotation ---------- */
.sv-situation { display: grid; grid-template-columns: 1fr 1.35fr; gap: 64px; align-items: start; }
.sv-situation__tete { display: grid; gap: 20px; position: sticky; top: 110px; }
.sv-situation__texte { color: var(--gris); max-width: 380px; }
.sv-situations { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.sv-situations li { border-bottom: 1px solid var(--trait); }
.sv-situations a { display: grid; grid-template-columns: 1fr auto 40px; align-items: center; gap: 18px; padding: 22px 4px; text-decoration: none; font-size: clamp(1.25rem, 2vw, 1.65rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.2; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.sv-situations a em { font-family: "Caveat", "Segoe Print", cursive; font-size: 1.35rem; font-weight: 600; letter-spacing: 0; color: #9B6BB5; white-space: nowrap; rotate: -2deg; }
.sv-situations a::after { content: "↗"; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 1rem; background: var(--clair); transition: background-color .4s, transform .5s cubic-bezier(.16,1,.3,1); }
.sv-situations a:hover { transform: translateX(10px); }
.sv-situations a:hover::after { background: var(--jaune); transform: rotate(45deg); }

/* ---------- 02 · Fiches : un tirage et une fiche, en alternance ---------- */
.sv-fiches { display: grid; gap: 90px; }
.sv-fiche { display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: center; }
.sv-fiche--inverse .sv-fiche__photo { order: 2; }
.sv-fiche__photo { transform: rotate(-2deg); }
.sv-fiche--inverse .sv-fiche__photo { transform: rotate(2deg); }
.sv-fiche__photo img { aspect-ratio: 5 / 4; }
.sv-fiche:hover .sv-fiche__photo { transform: rotate(0) translateY(-6px); }
.sv-fiche__corps { display: grid; gap: 14px; justify-items: start; }
.sv-fiche__num { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--aubergine); color: var(--jaune); font-weight: 700; font-size: .9rem; margin-bottom: 6px; }
.sv-fiche:nth-child(3n+2) .sv-fiche__num { background: var(--lilas); color: var(--aubergine); }
.sv-fiche:nth-child(3n) .sv-fiche__num { background: var(--jaune); color: var(--aubergine); }
.sv-fiche__probleme { font-family: "Caveat", "Segoe Print", cursive; font-size: 1.6rem; font-weight: 600; line-height: 1.05; color: #9B6BB5; rotate: -2deg; transform-origin: left center; }
.sv-fiche__titre { font-size: clamp(1.9rem, 3.2vw, 2.7rem); }
.sv-fiche__texte { color: #4A3F4C; max-width: 480px; font-size: 1.05rem; }
.sv-fiche__points { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; gap: 8px; }
.sv-fiche__points li { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.sv-fiche__points li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--jaune) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23280F2B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E") center / 12px no-repeat; }

/* ---------- 03 · Un seul système : six disques en orbite autour du monogramme ---------- */
.sv-systeme { padding-block: 110px; }
.sv-systeme__grille { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.sv-systeme__texte { display: grid; gap: 18px; }
.sv-systeme__texte p { color: var(--gris-sombre); max-width: 460px; }
.sv-orbite { --rayon: 190px; margin: 0 auto; position: relative; width: calc(var(--rayon) * 2 + 130px); aspect-ratio: 1; }
.sv-orbite::before { content: ""; position: absolute; inset: 65px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.18); }
.sv-orbite > * { --a: 0deg; position: absolute; left: 50%; top: 50%; width: 118px; height: 118px; margin: -59px 0 0 -59px; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 8px; font-size: .8rem; font-weight: 600; line-height: 1.15; background: var(--aubergine-3); border: 1px solid var(--trait-sombre); transform: rotate(var(--a)) translate(var(--rayon)) rotate(calc(var(--a) * -1)); transition: background-color .4s, color .4s, transform .6s cubic-bezier(.16,1,.3,1); }
.sv-orbite > p:nth-child(2) { --a: -90deg; }
.sv-orbite > p:nth-child(3) { --a: -30deg; }
.sv-orbite > p:nth-child(4) { --a: 30deg; }
.sv-orbite > p:nth-child(5) { --a: 90deg; }
.sv-orbite > p:nth-child(6) { --a: 150deg; }
.sv-orbite > p:nth-child(7) { --a: 210deg; }
.sv-orbite > p:nth-child(odd) { background: var(--lilas); color: var(--aubergine); border-color: transparent; }
.sv-orbite > p:hover { background: var(--jaune); color: var(--nuit); transform: rotate(var(--a)) translate(var(--rayon)) rotate(calc(var(--a) * -1)) scale(1.08); }
.sv-orbite .sv-orbite__centre { width: 150px; height: 150px; margin: -75px 0 0 -75px; transform: none; background: var(--nuit); border: 0; box-shadow: 0 0 0 3px var(--jaune), 0 0 0 16px rgba(240,240,45,.1); }
.sv-orbite__centre img { width: 70px; height: auto; }
.sv-systeme:hover .sv-orbite::before { animation: sv-tourne 30s linear infinite; }
@keyframes sv-tourne { to { rotate: 360deg; } }

.sv-fin__titre { font-size: clamp(2rem, 4.6vw, 3.6rem); max-width: 16ch; }
.sv-fin__titre em { color: var(--jaune); }

/* Les révélations au scroll ne doivent pas écraser les transitions de survol */
.anim .sv-tirage[data-rv], .anim .sv-fiche__photo[data-rv] { transition: opacity .9s cubic-bezier(.2,.7,.2,1), translate .9s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0s), var(--d, 0s), 0s; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .sv-heros__grille, .sv-situation, .sv-systeme__grille { grid-template-columns: 1fr; gap: 56px; }
  .sv-situation__tete { position: static; }
  .sv-tirages { height: 520px; max-width: 560px; }
  .sv-fiche, .sv-fiche--inverse { grid-template-columns: 1fr; gap: 36px; }
  .sv-fiche--inverse .sv-fiche__photo { order: 0; }
  .sv-fiche__photo { max-width: 560px; }
}
@media (max-width: 600px) {
  .sv-heros { padding: 56px 0 90px; }
  /* Téléphone : les trois tirages côte à côte */
  .sv-tirages { height: auto; display: flex; gap: 8px; align-items: flex-start; }
  .sv-tirage { position: relative; width: 33.3%; padding: 6px 6px 0; left: auto; right: auto; top: auto; }
  .sv-tirage--2 { margin-top: 18px; }
  .sv-tirage figcaption { font-size: 1rem; line-height: 1; padding: 6px 2px 8px; text-align: center; }
  .sv-tirage figcaption { font-size: 1.1rem; }
  .sv-situations a { grid-template-columns: 1fr 36px; row-gap: 2px; }
  .sv-situations a em { grid-column: 1; grid-row: 2; }
  .sv-situations a::after { grid-column: 2; grid-row: 1 / span 2; width: 36px; height: 36px; }
  .sv-fiches { gap: 64px; }
  .sv-fiche__photo, .sv-fiche--inverse .sv-fiche__photo { transform: rotate(-1deg); }
  .sv-systeme { padding-block: 80px; }
  .sv-orbite { --rayon: 118px; width: 100%; max-width: 340px; }
  .sv-orbite::before { inset: 48px; }
  .sv-orbite > * { width: 86px; height: 86px; margin: -43px 0 0 -43px; font-size: .64rem; padding: 2px; letter-spacing: -0.01em; }
  .sv-orbite .sv-orbite__centre { width: 104px; height: 104px; margin: -52px 0 0 -52px; }
  .sv-orbite__centre img { width: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-systeme:hover .sv-orbite::before { animation: none; }
}

/* ================= Héros mobile : version condensée =================
   Une grande photo avec l'encart « 30 min », puis les deux chiffres côte à côte.
   Les deux autres photos sont masquées sur téléphone : leurs services sont présentés plus bas. */
@media (max-width: 760px) {
  .collage { grid-template-columns: 1fr 1fr; gap: 10px; }
  .collage > * { grid-column: auto; }
  .collage > .collage__a, .collage > .collage__e { display: none; }
  .collage > .collage__c { order: -1; grid-column: 1 / -1; height: 200px; }
  .collage > .collage__b, .collage > .collage__d { grid-column: auto; height: 118px; padding: 14px; }
  .collage__monogramme { width: 22px; right: 14px; top: 14px; }
  .collage__chiffre { font-size: 1.9rem; }
  .collage__legende { font-size: .78rem; }
  .collage__carte { left: auto; right: 12px; bottom: 12px; width: 58%; padding: 10px 12px; }
  .collage__carte strong { font-size: 1.4rem; }
  .collage__carte span { font-size: .72rem; line-height: 1.3; display: block; }
}


/* ================= Service SEO / GEO — le carnet, en mouvement =================
   Réutilise les chapitres (.ap-marque), la liste de liens (.sv-situations) et la fin signée (.ap-fin). */

/* ---------- Héros : une recherche qui se joue sous vos yeux ---------- */
.sg-heros { position: relative; overflow: hidden; padding: 80px 0 120px; }
.sg-heros::before { content: ""; position: absolute; right: -10%; top: -20%; width: 800px; height: 700px; background: radial-gradient(closest-side, rgba(186,134,213,.24), transparent); pointer-events: none; }
.sg-heros > .enveloppe { position: relative; z-index: 1; }
.sg-heros__grille { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.sg-heros__texte { display: grid; gap: 22px; justify-items: start; }
.sg-heros__titre { font-size: clamp(2.5rem, 5vw, 4.4rem); }
.sg-heros__titre em { color: var(--jaune); }
.sg-heros__chapo { color: var(--gris-sombre); font-size: 1.08rem; max-width: 520px; }
.sg-heros .heros__actions { margin-top: 6px; }

.sg-scene { --cycle: 11s; --pas: 74px; position: relative; height: 500px; }
.sg-moteur { position: relative; width: 86%; background: var(--blanc); color: var(--aubergine); border-radius: var(--r); padding: 18px; transform: rotate(-2deg); box-shadow: 0 40px 80px -40px rgba(0,0,0,.7); }
.sg-moteur__barre { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--pilule); background: var(--clair); }
.sg-moteur__barre::before { content: ""; flex: none; width: 15px; height: 15px; border-radius: 50%; border: 2.5px solid var(--gris); box-shadow: 6px 6px 0 -4.5px var(--gris); }
.sg-moteur__requete { font-size: .98rem; font-weight: 500; white-space: nowrap; overflow: hidden; }
.sg-moteur__requete::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -3px; background: var(--aubergine); animation: sg-curseur 1s steps(1) infinite; }
.sg-resultats { position: relative; height: calc(var(--pas) * 3); margin-top: 14px; }
.sg-resultat { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--pas) - 8px); padding: 10px 14px; border-radius: var(--r-petit); background: var(--clair); display: grid; align-content: center; gap: 3px; }
.sg-resultat__site { font-size: .72rem; color: var(--gris); }
.sg-resultat__titre { font-size: .95rem; font-weight: 600; color: #6A3A8C; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-resultat--vous { padding-right: 58px; }
.sg-ligne { height: 6px; width: 70%; border-radius: 3px; background: rgba(40,15,43,.1); }
/* État final (sans animation) : vous en premier */
.sg-resultat--vous { z-index: 2; background: var(--blanc); box-shadow: 0 0 0 2px var(--lilas), 0 14px 30px -18px rgba(40,15,43,.5); }
.sg-resultat--vous::after { content: "1er"; position: absolute; right: 12px; top: 50%; translate: 0 -50%; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 700; background: var(--jaune); color: var(--nuit); }
.sg-resultat--a { transform: translateY(var(--pas)); }
.sg-resultat--b { transform: translateY(calc(var(--pas) * 2)); }

.sg-ia { position: absolute; right: 0; bottom: 0; width: 70%; z-index: 3; background: var(--lilas); color: var(--aubergine); border-radius: var(--r); padding: 18px; display: grid; gap: 12px; transform: rotate(2.5deg); box-shadow: 0 40px 70px -36px rgba(0,0,0,.75); }
.sg-ia__question { justify-self: end; max-width: 85%; background: var(--aubergine); color: var(--blanc); font-size: .85rem; line-height: 1.35; padding: 9px 13px; border-radius: 14px 14px 4px 14px; }
.sg-ia__reponse { font-size: .9rem; line-height: 1.45; font-weight: 500; }
.sg-ia__source { justify-self: start; font-size: .75rem; font-weight: 600; padding: 4px 10px; border-radius: var(--pilule); background: rgba(255,255,255,.55); }
.sg-scene__note { position: absolute; right: -5%; top: 104px; width: 12%; min-width: 92px; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: .2em; font-family: "Caveat", "Segoe Print", cursive; font-size: 1.6rem; font-weight: 600; line-height: 1; color: var(--jaune); rotate: 4deg; z-index: 4; }
.sg-scene__note::after { content: ""; width: 1.2em; height: .9em; background: currentColor; transform: scale(-1, 1) rotate(-15deg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4c9 1 19 5 26 17'/%3E%3Cpath d='M22 19l7 3 1-8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4c9 1 19 5 26 17'/%3E%3Cpath d='M22 19l7 3 1-8'/%3E%3C/svg%3E") center / contain no-repeat; }

/* La boucle : la requête s'écrit, votre résultat remonte en tête, puis l'IA vous cite. */
@media (prefers-reduced-motion: no-preference) {
  .sg-moteur__requete { animation: sg-tape var(--cycle) infinite; }
  .sg-resultat--vous { animation: sg-vous var(--cycle) cubic-bezier(.65,0,.25,1) infinite; }
  .sg-resultat--vous::after { animation: sg-badge var(--cycle) infinite; }
  .sg-resultat--a { animation: sg-a var(--cycle) cubic-bezier(.65,0,.25,1) infinite; }
  .sg-resultat--b { animation: sg-b var(--cycle) cubic-bezier(.65,0,.25,1) infinite; }
  .sg-ia { animation: sg-ia var(--cycle) cubic-bezier(.16,1,.3,1) infinite; }
  .sg-ia__reponse { animation: sg-ecrit var(--cycle) infinite; }
  .sg-ia__source { animation: sg-source var(--cycle) cubic-bezier(.16,1,.3,1) infinite; }
  .sg-scene__note { animation: sg-note var(--cycle) infinite; }
  .sg-scene:not(.vu) *, .sg-scene:not(.vu) *::after { animation-play-state: paused; }
}
@keyframes sg-curseur { 50% { opacity: 0; } }
@keyframes sg-tape {
  0% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(24, end); }
  16%, 95% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 100% 0 0); }
}
@keyframes sg-vous {
  0%, 26% { transform: translateY(calc(var(--pas) * 2)); box-shadow: none; background: var(--clair); }
  38%, 95% { transform: translateY(0); box-shadow: 0 0 0 2px var(--lilas), 0 14px 30px -18px rgba(40,15,43,.5); background: var(--blanc); }
  100% { transform: translateY(calc(var(--pas) * 2)); }
}
@keyframes sg-a { 0%, 26% { transform: translateY(0); } 38%, 95% { transform: translateY(var(--pas)); } 100% { transform: translateY(0); } }
@keyframes sg-b { 0%, 26% { transform: translateY(var(--pas)); } 38%, 95% { transform: translateY(calc(var(--pas) * 2)); } 100% { transform: translateY(var(--pas)); } }
@keyframes sg-badge { 0%, 36% { scale: 0; } 42%, 95% { scale: 1; } 100% { scale: 0; } }
@keyframes sg-ia { 0%, 44% { opacity: 0; translate: 0 30px; } 52%, 95% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 0; } }
@keyframes sg-ecrit {
  0%, 52% { clip-path: inset(0 0 100% 0); animation-timing-function: steps(4, end); }
  70%, 95% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes sg-source { 0%, 72% { opacity: 0; scale: .6; } 78%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
@keyframes sg-note { 0%, 36% { opacity: 0; translate: 0 8px; } 42%, 95% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }

/* ---------- 01 · Trois portes d'entrée ---------- */
.sg-constat { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: end; }
.sg-constat__texte { color: var(--gris); font-size: 1.05rem; }
.sg-portes { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: porte; }
.sg-porte { position: relative; display: grid; gap: 12px; align-content: start; padding: 28px; border-radius: var(--r); background: var(--clair); transition: transform .6s cubic-bezier(.16,1,.3,1), box-shadow .6s cubic-bezier(.16,1,.3,1); }
.sg-porte:nth-child(1) { transform: rotate(-1deg); }
.sg-porte:nth-child(3) { transform: rotate(1deg); }
.sg-porte:hover { transform: rotate(0) translateY(-8px); box-shadow: 0 30px 50px -30px rgba(40,15,43,.5); }
.sg-porte--lilas { background: var(--lilas); }
.sg-porte--sombre { background: var(--aubergine); color: var(--blanc); }
.sg-porte__num { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--aubergine); color: var(--jaune); }
.sg-porte--sombre .sg-porte__num { background: var(--jaune); color: var(--nuit); }
.sg-porte__titre { font-size: 1.5rem; margin-top: 6px; }
.sg-porte__texte { color: #4A3F4C; }
.sg-porte--lilas .sg-porte__texte { color: var(--aubergine); }
.sg-porte--sombre .sg-porte__texte { color: var(--gris-sombre); }
.sg-porte--sombre strong { color: var(--jaune); }
.sg-porte strong { font-weight: 600; }
/* Flèche dessinée entre deux portes */
.sg-porte:not(:last-child)::after { content: ""; position: absolute; right: -24px; top: 38px; z-index: 2; width: 30px; height: 20px; background: var(--aubergine);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 20' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12c10-5 22-6 36-2'/%3E%3Cpath d='M32 4l7 6-8 5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 20' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12c10-5 22-6 36-2'/%3E%3Cpath d='M32 4l7 6-8 5'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- 02 · Six chantiers ---------- */
.sg-chantiers { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sg-chantier { position: relative; overflow: hidden; display: grid; gap: 10px; align-content: start; padding: 26px; border-radius: var(--r); background: var(--blanc); box-shadow: 0 0 0 1px var(--trait); transition: transform .6s cubic-bezier(.16,1,.3,1), box-shadow .6s cubic-bezier(.16,1,.3,1); }
.sg-chantier::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--aubergine); transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.sg-chantier--local::before { background: var(--lilas); }
.sg-chantier--geo::before { background: var(--jaune); }
.sg-chantier:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--trait), 0 30px 50px -30px rgba(40,15,43,.45); }
.sg-chantier:hover::before { transform: scaleX(1); }
.sg-chantier__tag { font-family: "Caveat", "Segoe Print", cursive; font-size: 1.45rem; font-weight: 600; line-height: 1; color: var(--aubergine); rotate: -3deg; transform-origin: left center; }
.sg-chantier--local .sg-chantier__tag { color: #9B6BB5; }
.sg-chantier--geo .sg-chantier__tag { color: #8A8A00; }
.sg-chantier__titre { font-size: 1.35rem; }
.sg-chantier p:last-child { color: var(--gris); font-size: .95rem; }

/* ---------- 03 · L'escalier qui monte ---------- */
.sg-methode { padding-block: 110px; }
.sg-escalier { position: relative; margin-top: 64px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: end; }
.sg-escalier::before { content: ""; position: absolute; left: 4%; right: 4%; top: -30px; bottom: 40px; pointer-events: none; z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none' fill='none' stroke='%23F0F02D' stroke-width='2' stroke-dasharray='6 7' stroke-linecap='round'%3E%3Cpath d='M2 98 C 120 96, 180 70, 240 50 S 340 8, 398 2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0); transition: clip-path 1.8s cubic-bezier(.65,0,.25,1) .3s; opacity: .7; }
.sg-escalier.vu::before, :root:not(.anim) .sg-escalier::before { clip-path: inset(0 0 0 0); }
.sg-marche { position: relative; z-index: 1; display: grid; gap: 10px; padding: 24px; border-radius: var(--r); background: var(--aubergine-3); border: 1px solid var(--trait-sombre); transition: transform .6s cubic-bezier(.16,1,.3,1), background-color .4s; }
.sg-marche:nth-child(2) { margin-bottom: 50px; }
.sg-marche:nth-child(3) { margin-bottom: 100px; }
.sg-marche:nth-child(4) { margin-bottom: 150px; }
.sg-marche:hover { transform: translateY(-8px); }
.sg-marche h3 { font-size: 1.45rem; }
.sg-marche p:last-child { color: var(--gris-sombre); font-size: .93rem; }
.sg-marche__num { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; font-size: .9rem; color: var(--jaune); border: 1px solid var(--trait-sombre); }
.sg-marche--haut { background: var(--jaune); color: var(--nuit); border-color: var(--jaune); }
.sg-marche--haut .sg-marche__num { color: var(--nuit); border-color: rgba(28,10,31,.25); }
.sg-marche--haut p:last-child { color: rgba(28,10,31,.75); }

/* ---------- 04 · Trois mots qui se remplissent ---------- */
.sg-mots { border-top: 1px solid var(--trait); }
.sg-mot { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; padding-block: 18px; border-bottom: 1px solid var(--trait); }
.sg-mot__grand { font-size: clamp(3.4rem, 9vw, 8rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--aubergine); transition: color 1s cubic-bezier(.16,1,.3,1) calc(var(--d, 0s) + .3s); }
.sg-mot:nth-child(3) .sg-mot__grand { -webkit-text-stroke-color: var(--lilas); }
/* Le mot apparaît d'abord en contour, puis se remplit (couleur pleine, pas de dégradé). */
.sg-mot.vu .sg-mot__grand, :root:not(.anim) .sg-mot__grand { color: var(--aubergine); }
.sg-mot.vu:nth-child(3) .sg-mot__grand, :root:not(.anim) .sg-mot:nth-child(3) .sg-mot__grand { color: var(--lilas); }
.sg-mot__texte { font-size: 1.15rem; color: var(--gris); max-width: 360px; }

/* ---------- 05 · Le lexique ---------- */
.sg-lexique { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sg-entree { display: grid; gap: 6px; align-content: start; padding: 26px; border-radius: var(--r); background: var(--blanc); box-shadow: 0 0 0 1px var(--trait); transition: transform .6s cubic-bezier(.16,1,.3,1), box-shadow .6s; }
.sg-entree:nth-child(odd) { transform: rotate(-.8deg); }
.sg-entree:nth-child(even) { transform: rotate(.8deg); }
.sg-entree:hover { transform: rotate(0) translateY(-6px); box-shadow: 0 0 0 1px var(--trait), 0 28px 50px -30px rgba(40,15,43,.45); }
.sg-entree__mot { font-size: 1.6rem; }
.sg-entree__genre { font-family: "Caveat", "Segoe Print", cursive; font-size: 1.35rem; font-weight: 600; color: #9B6BB5; line-height: 1.1; }
.sg-entree p:last-child { margin-top: 6px; color: #4A3F4C; font-size: .95rem; }
.sg-entree:first-child { grid-row: span 2; align-content: center; padding: 34px; background: var(--aubergine); color: var(--blanc); box-shadow: none; }
.sg-entree:first-child .sg-entree__mot { font-size: clamp(3rem, 6vw, 5rem); letter-spacing: -0.05em; }
.sg-entree:first-child .sg-entree__genre { color: var(--jaune); }
.sg-entree:first-child p:last-child { color: var(--gris-sombre); }

/* Les révélations au scroll ne doivent pas écraser les transitions de survol */
.anim .sg-porte[data-rv], .anim .sg-chantier[data-rv], .anim .sg-marche[data-rv], .anim .sg-entree[data-rv] { transition: opacity .9s cubic-bezier(.2,.7,.2,1), translate .9s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.16,1,.3,1), box-shadow .6s cubic-bezier(.16,1,.3,1), background-color .4s; transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s, 0s; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .sg-heros__grille, .sg-constat { grid-template-columns: 1fr; gap: 48px; }
  .sg-scene { max-width: 560px; }
  .sg-portes, .sg-chantiers, .sg-lexique { grid-template-columns: 1fr 1fr; }
  .sg-entree:first-child { grid-row: auto; grid-column: 1 / -1; }
  .sg-porte:not(:last-child)::after { display: none; }
  .sg-escalier { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .sg-marche:nth-child(n) { margin-bottom: 0; }
  .sg-escalier::before { display: none; }
}
@media (max-width: 600px) {
  .sg-heros { padding: 56px 0 90px; }
  .sg-scene { --pas: 64px; height: 450px; }
  .sg-ligne { display: none; }
  .sg-moteur { width: 94%; padding: 14px; }
  .sg-moteur__requete { font-size: .88rem; }
  .sg-resultat__titre { font-size: .85rem; }
  .sg-ia { width: 86%; padding: 14px; }
  .sg-ia__reponse { font-size: .84rem; }
  .sg-scene__note { font-size: 1.35rem; top: auto; bottom: -46px; right: auto; left: 4px; width: auto; flex-direction: row-reverse; align-items: center; }
  .sg-portes, .sg-chantiers, .sg-lexique, .sg-escalier { grid-template-columns: 1fr; }
  .sg-porte:nth-child(n), .sg-entree:nth-child(n) { transform: none; }
  .sg-mot { grid-template-columns: 1fr; gap: 6px; }
}


/* ================= Service Automatisations — le carnet, en mouvement =================
   Réutilise : chapitres (.ap-marque), fiches (.sg-chantier), mots qui se remplissent (.sg-mot),
   liste de liens (.sv-situations) et fin signée (.ap-fin). */

/* ---------- Héros : une demande qui se traite toute seule ---------- */
.au-heros { position: relative; overflow: hidden; padding: 80px 0 120px; }
.au-heros::before { content: ""; position: absolute; right: -10%; top: -20%; width: 800px; height: 700px; background: radial-gradient(closest-side, rgba(186,134,213,.24), transparent); pointer-events: none; }
.au-heros > .enveloppe { position: relative; z-index: 1; }
.au-heros__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.au-heros__texte { display: grid; gap: 22px; justify-items: start; }
.au-heros__titre { font-size: clamp(2.6rem, 5.4vw, 4.8rem); }
.au-heros__titre em { color: var(--jaune); }
.au-heros__chapo { color: var(--gris-sombre); font-size: 1.08rem; max-width: 520px; }
.au-heros .heros__actions { margin-top: 6px; }

.au-scene { --cycle: 9s; position: relative; padding-bottom: 54px; }
.au-flux { position: relative; display: grid; gap: 14px; }
/* Le fil qui relie les étapes, et le point qui le parcourt */
.au-flux::before { content: ""; position: absolute; left: 25px; top: 24px; bottom: 24px; border-left: 2px dashed rgba(255,255,255,.22); }
.au-flux::after { content: ""; position: absolute; left: 20px; top: 87%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--jaune); box-shadow: 0 0 0 6px rgba(240,240,45,.18); }
.au-etape { position: relative; z-index: 1; margin-left: 56px; padding: 14px 18px; border-radius: var(--r); background: var(--blanc); color: var(--aubergine); display: grid; grid-template-columns: 1fr auto; grid-template-areas: "titre heure" "detail heure"; column-gap: 14px; box-shadow: 0 24px 50px -30px rgba(0,0,0,.8); }
.au-etape:nth-child(odd) { rotate: -1deg; }
.au-etape:nth-child(even) { rotate: .8deg; margin-left: 70px; }
.au-etape--4 { background: var(--lilas); }
/* Case cochée, posée sur le fil */
.au-etape::before { content: ""; position: absolute; left: -45px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; border: 2px solid var(--jaune); background: var(--jaune) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23280F2B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.au-etape:nth-child(even)::before { left: -59px; }
.au-etape__heure { grid-area: heure; align-self: center; font-size: .78rem; font-weight: 700; color: var(--gris); }
.au-etape--4 .au-etape__heure { color: var(--aubergine); }
.au-etape__titre { grid-area: titre; font-weight: 600; font-size: 1rem; }
.au-etape__detail { grid-area: detail; font-size: .85rem; color: var(--gris); }
.au-etape--4 .au-etape__detail { color: rgba(40,15,43,.75); }
.au-scene__note { position: absolute; left: 0; bottom: 0; display: flex; align-items: center; gap: .35em; font-family: "Caveat", "Segoe Print", cursive; font-size: 1.6rem; font-weight: 600; line-height: 1; color: var(--jaune); rotate: -2deg; }
.au-scene__note::before { content: ""; flex: none; width: 1.3em; height: .8em; background: currentColor; transform: scale(-1, -1); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 20' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12c10-5 22-6 36-2'/%3E%3Cpath d='M32 4l7 6-8 5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 20' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12c10-5 22-6 36-2'/%3E%3Cpath d='M32 4l7 6-8 5'/%3E%3C/svg%3E") center / contain no-repeat; }

@media (prefers-reduced-motion: no-preference) {
  .au-etape--1 { animation: au-carte-1 var(--cycle) cubic-bezier(.16,1,.3,1) infinite; }
  .au-etape--1::before { animation: au-coche-1 var(--cycle) infinite; }
  .au-etape--2 { animation: au-carte-2 var(--cycle) cubic-bezier(.16,1,.3,1) infinite; }
  .au-etape--2::before { animation: au-coche-2 var(--cycle) infinite; }
  .au-etape--3 { animation: au-carte-3 var(--cycle) cubic-bezier(.16,1,.3,1) infinite; }
  .au-etape--3::before { animation: au-coche-3 var(--cycle) infinite; }
  .au-etape--4 { animation: au-carte-4 var(--cycle) cubic-bezier(.16,1,.3,1) infinite; }
  .au-etape--4::before { animation: au-coche-4 var(--cycle) infinite; }
  .au-flux::after { animation: au-point var(--cycle) cubic-bezier(.65,0,.25,1) infinite; }
  .au-scene__note { animation: au-note var(--cycle) infinite; }
  .au-scene:not(.vu) *, .au-scene:not(.vu) *::before, .au-scene:not(.vu) *::after { animation-play-state: paused; }
}
@keyframes au-carte-1 { 0%, 5% { opacity: .42; translate: 0 6px; } 8%, 94% { opacity: 1; translate: 0 0; } 100% { opacity: .42; translate: 0 6px; } }
@keyframes au-coche-1 { 0%, 7% { background-color: transparent; background-size: 0; border-color: rgba(255,255,255,.35); } 10%, 94% { background-color: var(--jaune); background-size: 14px; border-color: var(--jaune); } 100% { background-color: transparent; background-size: 0; border-color: rgba(255,255,255,.35); } }
@keyframes au-carte-2 { 0%, 23% { opacity: .42; translate: 0 6px; } 26%, 94% { opacity: 1; translate: 0 0; } 100% { opacity: .42; translate: 0 6px; } }
@keyframes au-coche-2 { 0%, 25% { background-color: transparent; background-size: 0; border-color: rgba(255,255,255,.35); } 28%, 94% { background-color: var(--jaune); background-size: 14px; border-color: var(--jaune); } 100% { background-color: transparent; background-size: 0; border-color: rgba(255,255,255,.35); } }
@keyframes au-carte-3 { 0%, 41% { opacity: .42; translate: 0 6px; } 44%, 94% { opacity: 1; translate: 0 0; } 100% { opacity: .42; translate: 0 6px; } }
@keyframes au-coche-3 { 0%, 43% { background-color: transparent; background-size: 0; border-color: rgba(255,255,255,.35); } 46%, 94% { background-color: var(--jaune); background-size: 14px; border-color: var(--jaune); } 100% { background-color: transparent; background-size: 0; border-color: rgba(255,255,255,.35); } }
@keyframes au-carte-4 { 0%, 59% { opacity: .42; translate: 0 6px; } 62%, 94% { opacity: 1; translate: 0 0; } 100% { opacity: .42; translate: 0 6px; } }
@keyframes au-coche-4 { 0%, 61% { background-color: transparent; background-size: 0; border-color: rgba(255,255,255,.35); } 64%, 94% { background-color: var(--jaune); background-size: 14px; border-color: var(--jaune); } 100% { background-color: transparent; background-size: 0; border-color: rgba(255,255,255,.35); } }
@keyframes au-point { 0% { top: 0%; opacity: 0; } 4% { opacity: 1; } 8% { top: 12%; } 26% { top: 37%; } 44% { top: 62%; } 62%, 92% { top: 87%; opacity: 1; } 100% { top: 87%; opacity: 0; } }
@keyframes au-note { 0%, 66% { opacity: 0; translate: 0 8px; } 72%, 94% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }

/* ---------- 01 · Une journée type, rayée tâche après tâche ---------- */
.au-constat { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.au-constat__texte { display: grid; gap: 22px; }
.au-constat__texte p { color: var(--gris); font-size: 1.05rem; max-width: 480px; }
.au-journee { background: var(--clair); border-radius: var(--r); padding: 30px 30px 18px; rotate: 1deg; }
.au-journee__titre { font-family: "Caveat", "Segoe Print", cursive; font-size: 1.6rem; font-weight: 600; line-height: 1; color: #9B6BB5; rotate: -2deg; margin-bottom: 12px; }
.au-taches { list-style: none; margin: 0; padding: 0; }
.au-taches li { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--trait); font-weight: 500; }
.au-taches li:last-child { border-bottom: 0; }
/* Le trait qui raye la tâche, puis l'annotation « automatisé » */
.au-taches li::after { content: ""; position: absolute; left: -4px; top: 50%; width: calc(100% - 118px); height: 2px; background: var(--lilas); transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.65,0,.25,1) calc(var(--d, 0s) + .5s); }
.au-taches li em { flex: none; font-family: "Caveat", "Segoe Print", cursive; font-size: 1.35rem; font-weight: 600; line-height: 1; color: var(--aubergine); background: var(--jaune); padding: 2px 8px 4px; border-radius: 4px; rotate: -4deg; opacity: 0; scale: .7; transition: opacity .4s calc(var(--d, 0s) + 1.1s), scale .5s cubic-bezier(.16,1,.3,1) calc(var(--d, 0s) + 1.1s); }
.au-taches li.vu::after, :root:not(.anim) .au-taches li::after { transform: scaleX(1); }
.au-taches li.vu em, :root:not(.anim) .au-taches li em { opacity: 1; scale: 1; }
.au-taches li.vu { color: var(--gris); }

/* ---------- 03 · La chaîne : le flux circule entre les maillons ---------- */
.au-methode { padding-block: 110px; }
.au-chaine { position: relative; margin-top: 64px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.au-chaine::before { content: ""; position: absolute; left: 0; right: 0; top: -28px; height: 2px; background: repeating-linear-gradient(90deg, var(--jaune) 0 10px, transparent 10px 20px); opacity: .6; }
.au-chaine::after { content: ""; position: absolute; left: 0; top: -33px; width: 12px; height: 12px; border-radius: 50%; background: var(--jaune); box-shadow: 0 0 0 6px rgba(240,240,45,.18); }
/* Chaque maillon a son repère sur le fil */
.au-maillon::before { content: ""; position: absolute; left: 32px; top: -33px; width: 12px; height: 12px; border-radius: 50%; background: var(--nuit); border: 2px solid var(--jaune); box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) {
  .au-chaine::before { animation: au-defile 1.2s linear infinite; }
  .au-chaine::after { animation: au-voyage 6s cubic-bezier(.65,0,.25,1) infinite; }
}
@keyframes au-voyage { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 88% { left: calc(100% - 12px); opacity: 1; } 100% { left: calc(100% - 12px); opacity: 0; } }
@keyframes au-defile { to { background-position: 20px 0; } }
.au-maillon { position: relative; display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: var(--r); background: var(--aubergine-3); border: 1px solid var(--trait-sombre); transition: transform .6s cubic-bezier(.16,1,.3,1); }
.au-maillon:hover { transform: translateY(-8px); }
.au-maillon h3 { font-size: 1.45rem; }
.au-maillon p:last-child { color: var(--gris-sombre); font-size: .93rem; }
.au-maillon__num { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .9rem; background: var(--nuit); color: var(--jaune); border: 2px solid var(--jaune); }
.au-maillon--fin { background: var(--jaune); color: var(--nuit); border-color: var(--jaune); }
.au-maillon--fin .au-maillon__num { background: var(--nuit); }
.au-maillon--fin p:last-child { color: rgba(28,10,31,.75); }

/* ---------- 04 · Exemples « quand… alors… » ---------- */
.au-exemples { margin-top: 48px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.au-exemple { display: grid; grid-template-columns: 1fr 34px 1.15fr; align-items: center; gap: 14px; padding: 20px 22px; border-radius: var(--r); background: var(--clair); transition: background-color .4s, transform .6s cubic-bezier(.16,1,.3,1); }
.au-exemple::before { content: ""; grid-column: 2; grid-row: 1; width: 34px; height: 18px; background: var(--aubergine); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 20' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12c10-5 22-6 36-2'/%3E%3Cpath d='M32 4l7 6-8 5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 20' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12c10-5 22-6 36-2'/%3E%3Cpath d='M32 4l7 6-8 5'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.au-exemple__quand { grid-column: 1; grid-row: 1; font-weight: 600; line-height: 1.3; }
.au-exemple__alors { grid-column: 3; grid-row: 1; color: #4A3F4C; font-size: .95rem; line-height: 1.4; }
.au-exemple:hover { background: var(--lilas); transform: translateY(-4px); }
.au-exemple:hover::before { transform: translateX(5px); }
.au-exemple:hover .au-exemple__alors { color: var(--aubergine); }

/* Les révélations au scroll ne doivent pas écraser les transitions de survol */
.anim .au-maillon[data-rv], .anim .au-exemple[data-rv] { transition: opacity .9s cubic-bezier(.2,.7,.2,1), translate .9s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.16,1,.3,1), background-color .4s; transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s; }
.anim .au-taches li[data-rv] { transition: opacity .9s cubic-bezier(.2,.7,.2,1), translate .9s cubic-bezier(.2,.7,.2,1), color .5s calc(var(--d, 0s) + .8s); transition-delay: var(--d, 0s), var(--d, 0s), calc(var(--d, 0s) + .8s); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .au-heros__grille, .au-constat { grid-template-columns: 1fr; gap: 48px; }
  .au-scene { max-width: 560px; }
  .au-chaine { grid-template-columns: 1fr 1fr; }
  .au-chaine::before, .au-chaine::after, .au-maillon::before { display: none; }
  .au-chaine { margin-top: 48px; }
  .au-exemples { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .au-heros { padding: 56px 0 90px; }
  .au-etape, .au-etape:nth-child(even) { margin-left: 46px; padding: 12px 14px; }
  .au-etape::before, .au-etape:nth-child(even)::before { left: -37px; width: 22px; height: 22px; margin-top: -11px; }
  .au-flux::before { left: 19px; }
  .au-flux::after { left: 14px; }
  .au-etape__titre { font-size: .92rem; }
  .au-scene__note { font-size: 1.3rem; }
  .au-journee { padding: 24px 20px 12px; rotate: 0deg; }
  .au-taches li { font-size: .92rem; }
  .au-taches li::after { width: calc(100% - 104px); }
  .au-taches li em { font-size: 1.15rem; }
  .au-chaine { grid-template-columns: 1fr; }
  .au-exemple { grid-template-columns: 1fr; gap: 6px; }
  .au-exemple::before { grid-row: 2; grid-column: 1; transform: rotate(90deg); width: 26px; height: 14px; }
  .au-exemple__quand { grid-row: 1; }
  .au-exemple__alors { grid-row: 3; grid-column: 1; }
}


/* ================= Service Agents IA — le carnet, en mouvement =================
   Réutilise : chapitres (.ap-marque), fiches (.sg-chantier), mots qui se remplissent (.sg-mot),
   liste de liens (.sv-situations) et fin signée (.ap-fin). */

/* ---------- Héros : une conversation du soir, puis la fiche qui vous attend ---------- */
.ai-heros { position: relative; overflow: hidden; padding: 80px 0 120px; }
.ai-heros::before { content: ""; position: absolute; right: -10%; top: -20%; width: 800px; height: 700px; background: radial-gradient(closest-side, rgba(186,134,213,.24), transparent); pointer-events: none; }
.ai-heros > .enveloppe { position: relative; z-index: 1; }
.ai-heros__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ai-heros__texte { display: grid; gap: 22px; justify-items: start; }
.ai-heros__titre { font-size: clamp(2.6rem, 5.2vw, 4.6rem); }
.ai-heros__titre em { color: var(--jaune); }
.ai-heros__chapo { color: var(--gris-sombre); font-size: 1.08rem; max-width: 500px; }
.ai-heros .heros__actions { margin-top: 6px; }

.ai-scene { --cycle: 12s; position: relative; padding: 0 0 96px; }
.ai-fenetre { position: relative; width: 88%; background: var(--blanc); color: var(--aubergine); border-radius: var(--r); overflow: hidden; transform: rotate(-1.5deg); box-shadow: 0 40px 80px -40px rgba(0,0,0,.75); }
.ai-fenetre__tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; background: var(--clair); border-bottom: 1px solid var(--trait); }
.ai-fenetre__nom { font-weight: 600; font-size: .92rem; display: flex; align-items: center; gap: 10px; }
.ai-fenetre__nom::before { content: ""; width: 28px; height: 28px; border-radius: 50%; background: var(--aubergine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F0F02D' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 5h10M3 8h7M3 11h5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ai-fenetre__statut { font-size: .75rem; color: var(--gris); white-space: nowrap; }
.ai-fil { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 18px; }
.ai-msg { max-width: 82%; padding: 10px 14px; font-size: .9rem; line-height: 1.4; }
.ai-msg--client { justify-self: end; background: var(--aubergine); color: var(--blanc); border-radius: 14px 14px 4px 14px; }
.ai-msg--agent { justify-self: start; background: var(--clair); border-radius: 14px 14px 14px 4px; }
.ai-msg--1 { grid-row: 1; }
.ai-msg--2, .ai-ecrit { grid-row: 2; grid-column: 1; }
.ai-msg--3 { grid-row: 3; }
/* Les trois points « en train d'écrire » */
.ai-ecrit { justify-self: start; align-self: start; display: flex; gap: 5px; padding: 13px 14px; border-radius: 14px 14px 14px 4px; background: var(--clair); opacity: 0; }
.ai-ecrit > div { width: 7px; height: 7px; border-radius: 50%; background: var(--gris); }
.ai-fiche { position: absolute; left: 3%; bottom: 0; width: 56%; z-index: 2; display: grid; gap: 4px; padding: 16px 18px 16px 52px; border-radius: var(--r); background: var(--jaune); color: var(--nuit); transform: rotate(-2.5deg); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.ai-fiche::before { content: ""; position: absolute; left: 16px; top: 18px; width: 24px; height: 24px; border-radius: 50%; background: var(--blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23280F2B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.ai-fiche__titre { font-weight: 700; font-size: .95rem; }
.ai-fiche__ligne { font-size: .85rem; }
.ai-fiche__statut { margin-top: 4px; font-family: "Caveat", "Segoe Print", cursive; font-size: 1.3rem; font-weight: 600; line-height: 1; color: #6A3A8C; }
.ai-scene__note { position: absolute; right: 0; bottom: 16px; max-width: 36%; text-align: right; font-family: "Caveat", "Segoe Print", cursive; font-size: 1.55rem; font-weight: 600; line-height: 1.05; color: var(--jaune); rotate: 3deg; }

@media (prefers-reduced-motion: no-preference) {
  .ai-msg--1 { animation: ai-m1 var(--cycle) cubic-bezier(.16,1,.3,1) infinite; }
  .ai-ecrit { animation: ai-ecrit var(--cycle) infinite; }
  .ai-ecrit > div { animation: ai-point 1s ease-in-out infinite; }
  .ai-ecrit > div:nth-child(2) { animation-delay: .15s; }
  .ai-ecrit > div:nth-child(3) { animation-delay: .3s; }
  .ai-msg--2 { animation: ai-m2 var(--cycle) cubic-bezier(.16,1,.3,1) infinite; }
  .ai-msg--3 { animation: ai-m3 var(--cycle) cubic-bezier(.16,1,.3,1) infinite; }
  .ai-fiche { animation: ai-fiche var(--cycle) cubic-bezier(.16,1,.3,1) infinite; }
  .ai-scene__note { animation: ai-note var(--cycle) infinite; }
  .ai-scene:not(.vu) *, .ai-scene:not(.vu) *::before { animation-play-state: paused; }
}
@keyframes ai-m1 { 0%, 3% { opacity: 0; translate: 0 12px; } 7%, 94% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes ai-ecrit { 0%, 12% { opacity: 0; } 14%, 26% { opacity: 1; } 28%, 100% { opacity: 0; } }
@keyframes ai-point { 0%, 100% { translate: 0 0; opacity: .4; } 50% { translate: 0 -4px; opacity: 1; } }
@keyframes ai-m2 { 0%, 27% { opacity: 0; translate: 0 12px; } 31%, 94% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes ai-m3 { 0%, 42% { opacity: 0; translate: 0 12px; } 46%, 94% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes ai-fiche { 0%, 56% { opacity: 0; translate: -30px 20px; } 62%, 94% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 0; } }
@keyframes ai-note { 0%, 64% { opacity: 0; translate: 0 8px; } 70%, 94% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }

/* ---------- 01 · Ce que ce n'est pas / ce qu'il fait bien ---------- */
.ai-constat { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: end; }
.ai-constat__texte { color: var(--gris); font-size: 1.05rem; }
.ai-tri { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ai-colonne { padding: 28px 30px 18px; border-radius: var(--r); background: var(--clair); }
.ai-colonne--non { rotate: -1deg; }
.ai-colonne--oui { rotate: 1deg; background: var(--aubergine); color: var(--blanc); }
.ai-colonne__titre { font-family: "Caveat", "Segoe Print", cursive; font-size: 1.7rem; font-weight: 600; line-height: 1; color: #9B6BB5; rotate: -2deg; margin-bottom: 10px; }
.ai-colonne--oui .ai-colonne__titre { color: var(--jaune); }
.ai-liste { list-style: none; margin: 0; padding: 0; }
.ai-liste li { position: relative; padding: 14px 0 14px 36px; border-bottom: 1px solid var(--trait); font-weight: 500; font-size: 1.05rem; }
.ai-colonne--oui .ai-liste li { border-color: var(--trait-sombre); }
.ai-liste li:last-child { border-bottom: 0; }
/* Côté « non » : une croix, puis le trait qui raye */
.ai-colonne--non .ai-liste li { color: var(--gris); }
.ai-colonne--non .ai-liste li::before { content: "×"; position: absolute; left: 4px; top: 50%; translate: 0 -52%; font-size: 1.5rem; line-height: 1; color: #9B6BB5; }
.ai-colonne--non .ai-liste li::after { content: ""; position: absolute; left: 34px; right: 10%; top: 50%; height: 2px; background: var(--lilas); transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.65,0,.25,1) calc(var(--d, 0s) + .4s); }
.ai-colonne--non .ai-liste li.vu::after, :root:not(.anim) .ai-colonne--non .ai-liste li::after { transform: scaleX(1); }
/* Côté « oui » : la coche jaune qui apparaît */
.ai-colonne--oui .ai-liste li::before { content: ""; position: absolute; left: 0; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--jaune) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23280F2B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E") center / 12px no-repeat; scale: 0; transition: scale .5s cubic-bezier(.16,1,.3,1) calc(var(--d, 0s) + .4s); }
.ai-colonne--oui .ai-liste li.vu::before, :root:not(.anim) .ai-colonne--oui .ai-liste li::before { scale: 1; }

/* ---------- 03 · Une journée, du matin au soir ---------- */
.ai-journee { margin-top: 48px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.ai-heure { display: grid; gap: 10px; align-content: start; padding: 22px 20px 24px; border-radius: var(--r); background: var(--clair); transition: transform .6s cubic-bezier(.16,1,.3,1); }
.ai-heure:nth-child(even) { margin-top: 28px; }
.ai-heure:hover { transform: translateY(-6px) rotate(-1deg); }
.ai-heure__h { font-family: "Caveat", "Segoe Print", cursive; font-size: 2.3rem; font-weight: 600; line-height: 1; color: var(--aubergine); }
.ai-heure p:last-child { font-size: .93rem; color: #4A3F4C; }
.ai-heure--lilas { background: var(--lilas); }
.ai-heure--lilas p:last-child { color: var(--aubergine); }
.ai-heure--nuit { background: var(--aubergine); }
.ai-heure--nuit .ai-heure__h { color: var(--jaune); }
.ai-heure--nuit p:last-child { color: var(--gris-sombre); }

/* ---------- 04 · Les étapes, de part et d'autre d'un fil ---------- */
.ai-methode { padding-block: 110px; }
.ai-etapes { position: relative; margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 90px; row-gap: 18px; align-items: start; }
.ai-etapes::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px dashed rgba(255,255,255,.2); }
.ai-etape { position: relative; display: grid; gap: 8px; padding: 22px 24px; border-radius: var(--r); background: var(--aubergine-3); border: 1px solid var(--trait-sombre); transition: transform .6s cubic-bezier(.16,1,.3,1); }
.ai-etape:nth-child(even) { margin-top: 70px; }
.ai-etape:hover { transform: translateY(-6px); }
.ai-etape h3 { font-size: 1.4rem; }
.ai-etape p:last-child { color: var(--gris-sombre); font-size: .93rem; }
.ai-etape__num { font-family: "Caveat", "Segoe Print", cursive; font-size: 1.6rem; font-weight: 600; line-height: 1; color: var(--jaune); }
/* Le point sur le fil s'allume quand l'étape arrive */
.ai-etape::after { content: ""; position: absolute; top: 28px; width: 14px; height: 14px; border-radius: 50%; background: var(--nuit); border: 2px solid var(--jaune); transition: background-color .5s calc(var(--d, 0s) + .4s), box-shadow .5s calc(var(--d, 0s) + .4s); }
.ai-etape:nth-child(odd)::after { right: -53px; }
.ai-etape:nth-child(even)::after { left: -53px; }
.ai-etape.vu::after, :root:not(.anim) .ai-etape::after { background: var(--jaune); box-shadow: 0 0 0 6px rgba(240,240,45,.15); }
.ai-etape:last-child { background: var(--jaune); color: var(--nuit); border-color: var(--jaune); }
.ai-etape:last-child .ai-etape__num { color: #6A3A8C; }
.ai-etape:last-child p:last-child { color: rgba(28,10,31,.75); }

/* Les révélations au scroll ne doivent pas écraser les transitions de survol */
.anim .ai-heure[data-rv], .anim .ai-etape[data-rv] { transition: opacity .9s cubic-bezier(.2,.7,.2,1), translate .9s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0s), var(--d, 0s), 0s; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .ai-heros__grille, .ai-constat { grid-template-columns: 1fr; gap: 48px; }
  .ai-scene { max-width: 560px; }
  .ai-journee { grid-template-columns: 1fr 1fr; }
  .ai-heure:nth-child(even) { margin-top: 0; }
  .ai-heure--nuit { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .ai-heros { padding: 56px 0 90px; }
  .ai-fenetre { width: 100%; }
  .ai-msg { font-size: .84rem; max-width: 88%; }
  .ai-fil { padding: 14px; }
  .ai-scene { padding-bottom: 205px; }
  .ai-fiche { width: 78%; bottom: 44px; }
  .ai-scene__note { max-width: none; bottom: 0; top: auto; right: auto; left: 0; text-align: left; rotate: -3deg; font-size: 1.3rem; }
  .ai-tri { grid-template-columns: 1fr; }
  .ai-colonne--non, .ai-colonne--oui { rotate: 0deg; padding: 22px 20px 12px; }
  .ai-liste li { font-size: .98rem; }
  .ai-journee { grid-template-columns: 1fr; }
  .ai-etapes { grid-template-columns: 1fr; padding-left: 30px; }
  .ai-etapes::before { left: 6px; }
  .ai-etape:nth-child(even) { margin-top: 0; }
  .ai-etape:nth-child(n)::after { left: -31px; right: auto; }
}


/* ================= Service Logiciel métier — le carnet, en mouvement =================
   Réutilise : chapitres (.ap-marque), avant/après (.ai-tri), fiches (.sg-chantier),
   mots qui se remplissent (.sg-mot), liste de liens (.sv-situations) et fin signée (.ap-fin). */

/* ---------- Héros : les fichiers éparpillés se rangent dans un seul outil ---------- */
.lm-heros { position: relative; overflow: hidden; padding: 80px 0 120px; }
.lm-heros::before { content: ""; position: absolute; right: -10%; top: -20%; width: 800px; height: 700px; background: radial-gradient(closest-side, rgba(186,134,213,.24), transparent); pointer-events: none; }
.lm-heros > .enveloppe { position: relative; z-index: 1; }
.lm-heros__grille { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.lm-heros__texte { display: grid; gap: 22px; justify-items: start; }
.lm-heros__titre { font-size: clamp(2.5rem, 5vw, 4.4rem); }
.lm-heros__titre em { color: var(--jaune); }
.lm-heros__chapo { color: var(--gris-sombre); font-size: 1.08rem; max-width: 500px; }
.lm-heros .heros__actions { margin-top: 6px; }

.lm-scene { --cycle: 10s; position: relative; height: 430px; }
.lm-bouts { position: absolute; inset: 0; }
.lm-bout { position: absolute; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 8px; background: var(--blanc); color: var(--aubergine); font-size: .85rem; font-weight: 500; white-space: nowrap; box-shadow: 0 20px 40px -24px rgba(0,0,0,.8); rotate: var(--r); opacity: 0; }
.lm-bout::before { content: ""; flex: none; width: 14px; height: 16px; border-radius: 2px; background: var(--lilas); }
.lm-bout--3 { padding: 16px 18px 20px; background: var(--jaune); color: var(--nuit); font-family: "Caveat", "Segoe Print", cursive; font-size: 1.45rem; font-weight: 600; border-radius: 2px; }
.lm-bout--3::before { display: none; }
.lm-bout--4::before { background: var(--gris); border-radius: 50%; width: 14px; height: 14px; }
.lm-bout--1 { left: 0; top: 4%; --r: -8deg; --vx: 170px; --vy: 190px; animation-delay: 0.00s; }
.lm-bout--2 { right: 0; top: 0; --r: 6deg; --vx: -150px; --vy: 210px; animation-delay: 0.12s; }
.lm-bout--3 { left: 4%; top: 52%; --r: -4deg; --vx: 150px; --vy: -30px; animation-delay: 0.24s; }
.lm-bout--4 { right: 0; top: 47%; --r: 5deg; --vx: -160px; --vy: 0px; animation-delay: 0.36s; }
.lm-bout--5 { left: 32%; bottom: 0; --r: -3deg; --vx: 0px; --vy: -200px; animation-delay: 0.48s; }

.lm-outil { position: absolute; inset: 44px 24px auto; z-index: 2; display: grid; align-content: start; gap: 14px; padding: 18px; border-radius: var(--r); background: var(--blanc); color: var(--aubergine); box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); rotate: -1.5deg; }
.lm-outil__tete { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--trait); }
.lm-outil__nom { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.lm-outil__nom::before { content: ""; width: 26px; height: 26px; border-radius: 8px; background: var(--aubergine); box-shadow: inset 0 0 0 7px var(--aubergine), inset 0 0 0 20px var(--jaune); }
.lm-outil__date { font-size: .8rem; color: var(--gris); }
.lm-tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lm-tuile { padding: 12px; border-radius: 12px; background: var(--clair); display: grid; gap: 2px; }
.lm-tuile--lilas { background: var(--lilas); }
.lm-tuile--jaune { background: var(--jaune); }
.lm-tuile__chiffre { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.lm-tuile__nom { font-size: .75rem; line-height: 1.25; }
.lm-lignes { display: grid; }
.lm-ligne { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--trait); font-size: .86rem; font-weight: 500; }
.lm-ligne:last-child { border-bottom: 0; }
.lm-ligne em { flex: none; font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: var(--pilule); background: var(--clair); color: var(--gris); }
.lm-scene__note { position: absolute; right: 2%; bottom: 0; z-index: 3; display: flex; align-items: center; gap: .35em; font-family: "Caveat", "Segoe Print", cursive; font-size: 1.6rem; font-weight: 600; line-height: 1; color: var(--jaune); rotate: -3deg; }

@media (prefers-reduced-motion: no-preference) {
  .lm-bout { animation: lm-bout var(--cycle) cubic-bezier(.65,0,.25,1) infinite; }
  .lm-outil { animation: lm-outil var(--cycle) cubic-bezier(.16,1,.3,1) infinite; }
  .lm-tuile__chiffre { animation: lm-chiffre var(--cycle) cubic-bezier(.16,1,.3,1) infinite; }
  .lm-ligne--1 { animation: lm-ligne-1 var(--cycle) infinite; }
  .lm-ligne--2 { animation: lm-ligne-2 var(--cycle) infinite; }
  .lm-ligne--3 { animation: lm-ligne-3 var(--cycle) infinite; }
  .lm-scene__note { animation: lm-note var(--cycle) infinite; }
  .lm-scene:not(.vu) *, .lm-scene:not(.vu) *::before { animation-play-state: paused; }
}
@keyframes lm-bout {
  0% { opacity: 0; scale: .7; translate: 0 0; }
  6%, 32% { opacity: 1; scale: 1; translate: 0 0; }
  46% { opacity: 0; scale: .3; translate: var(--vx) var(--vy); }
  100% { opacity: 0; scale: .3; translate: var(--vx) var(--vy); }
}
@keyframes lm-outil { 0%, 42% { opacity: 0; scale: .88; translate: 0 18px; } 50%, 94% { opacity: 1; scale: 1; translate: 0 0; } 100% { opacity: 0; scale: .96; } }
@keyframes lm-chiffre { 0%, 52% { scale: .4; opacity: 0; } 57%, 94% { scale: 1; opacity: 1; } 100% { opacity: 0; } }
@keyframes lm-ligne-1 { 0%, 56% { opacity: 0; translate: -10px 0; } 60%, 94% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes lm-ligne-2 { 0%, 60% { opacity: 0; translate: -10px 0; } 64%, 94% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes lm-ligne-3 { 0%, 64% { opacity: 0; translate: -10px 0; } 68%, 94% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes lm-note { 0%, 68% { opacity: 0; translate: 0 8px; } 74%, 94% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }

/* ---------- 03 · Les modules autour de l'outil ---------- */
.lm-modules { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lm-module { display: grid; gap: 6px; align-content: start; padding: 22px 24px; border-radius: var(--r); background: var(--blanc); box-shadow: 0 0 0 1px var(--trait); transition: transform .6s cubic-bezier(.16,1,.3,1), box-shadow .6s, background-color .4s; }
.lm-module h3 { font-size: 1.2rem; display: flex; align-items: center; gap: 10px; }
.lm-module h3::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--lilas); transition: background-color .4s, rotate .6s cubic-bezier(.16,1,.3,1); }
.lm-module p { color: var(--gris); font-size: .93rem; }
.lm-module:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--trait), 0 28px 50px -30px rgba(40,15,43,.45); }
.lm-module:hover h3::before { background: var(--jaune); rotate: 45deg; }
.lm-centre { display: grid; place-content: center; text-align: center; gap: 8px; padding: 28px; border-radius: var(--r); background: var(--aubergine); color: var(--blanc); box-shadow: 0 0 0 8px rgba(186,134,213,.25); }
.lm-centre__nom { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.lm-centre__note { font-family: "Caveat", "Segoe Print", cursive; font-size: 1.4rem; font-weight: 600; line-height: 1; color: var(--jaune); rotate: -3deg; }

/* ---------- 04 · Du plan à l'outil : papier quadrillé et règle qui se remplit ---------- */
.lm-methode { padding-block: 110px; background-color: var(--nuit); background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 32px 32px; }
.lm-plan { position: relative; margin-top: 90px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lm-plan::before, .lm-plan::after { content: ""; position: absolute; left: 0; right: 0; top: -34px; height: 2px; }
.lm-plan::before { background: rgba(255,255,255,.18); }
.lm-plan::after { background: var(--jaune); transform: scaleX(0); transform-origin: left; transition: transform 2s cubic-bezier(.65,0,.25,1) .3s; }
.lm-plan.vu::after, :root:not(.anim) .lm-plan::after { transform: scaleX(1); }
.lm-etape { position: relative; display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: var(--r); background: var(--aubergine-3); border: 1px solid var(--trait-sombre); transition: transform .6s cubic-bezier(.16,1,.3,1); }
.lm-etape::before { content: ""; position: absolute; left: 24px; top: -41px; width: 16px; height: 16px; border-radius: 50%; background: var(--nuit); border: 2px solid rgba(255,255,255,.35); box-sizing: border-box; transition: background-color .4s, border-color .4s; }
.lm-etape:nth-child(1)::before { transition-delay: .5s; }
.lm-etape:nth-child(2)::before { transition-delay: 1s; }
.lm-etape:nth-child(3)::before { transition-delay: 1.5s; }
.lm-etape:nth-child(4)::before { transition-delay: 2s; }
.lm-plan.vu .lm-etape::before, :root:not(.anim) .lm-etape::before { background: var(--jaune); border-color: var(--jaune); }
.lm-etape:hover { transform: translateY(-8px); }
.lm-etape h3 { font-size: 1.45rem; }
.lm-etape p:last-child { color: var(--gris-sombre); font-size: .93rem; }
.lm-etape__num { font-family: "Caveat", "Segoe Print", cursive; font-size: 1.6rem; font-weight: 600; line-height: 1; color: var(--jaune); }
.lm-etape--fin { background: var(--jaune); color: var(--nuit); border-color: var(--jaune); }
.lm-etape--fin .lm-etape__num { color: #6A3A8C; }
.lm-etape--fin p:last-child { color: rgba(28,10,31,.75); }

/* Les révélations au scroll ne doivent pas écraser les transitions de survol */
.anim .lm-module[data-rv], .anim .lm-etape[data-rv] { transition: opacity .9s cubic-bezier(.2,.7,.2,1), translate .9s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.16,1,.3,1), box-shadow .6s; transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s; }
.anim .lm-centre[data-rv]:not(.vu) { scale: .85; }
.anim .lm-centre[data-rv] { transition: opacity .9s, translate .9s, scale 1s cubic-bezier(.16,1,.3,1); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .lm-heros__grille { grid-template-columns: 1fr; gap: 48px; }
  .lm-scene { max-width: 560px; }
  .lm-modules { grid-template-columns: 1fr 1fr; }
  .lm-centre { grid-column: 1 / -1; order: -1; }
  .lm-plan { grid-template-columns: 1fr 1fr; margin-top: 56px; }
  .lm-plan::before, .lm-plan::after, .lm-etape::before { display: none; }
}
@media (max-width: 600px) {
  .lm-heros { padding: 56px 0 90px; }
  .lm-scene { height: 380px; }
  .lm-outil { inset: 30px 0 auto; padding: 14px; }
  .lm-tuile { padding: 10px 8px; }
  .lm-tuile__chiffre { font-size: 1.5rem; }
  .lm-tuile__nom { font-size: .68rem; }
  .lm-ligne { font-size: .78rem; }
  .lm-ligne em { font-size: .65rem; padding: 2px 7px; }
  .lm-bout { font-size: .75rem; padding: 8px 10px; }
  .lm-bout--3 { font-size: 1.2rem; padding: 12px 14px 14px; }
  .lm-scene__note { font-size: 1.3rem; right: auto; left: 0; }
  .lm-modules, .lm-plan { grid-template-columns: 1fr; }
}


/* ================= Service Réseaux sociaux — le carnet, en mouvement =================
   Réutilise : chapitres (.ap-marque), tirages (.ap-cadre), fiches (.sg-chantier),
   mots qui se remplissent (.sg-mot), liste de liens (.sv-situations) et fin signée (.ap-fin). */

/* ---------- Héros : une publication qui se construit ---------- */
.rs-heros { position: relative; overflow: hidden; padding: 70px 0 110px; }
.rs-heros::before { content: ""; position: absolute; right: -10%; top: -20%; width: 800px; height: 700px; background: radial-gradient(closest-side, rgba(186,134,213,.24), transparent); pointer-events: none; }
.rs-heros > .enveloppe { position: relative; z-index: 1; }
.rs-heros__grille { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.rs-heros__texte { display: grid; gap: 22px; justify-items: start; }
.rs-heros__titre { font-size: clamp(2.5rem, 5vw, 4.4rem); }
.rs-heros__titre em { color: var(--jaune); }
.rs-heros__chapo { color: var(--gris-sombre); font-size: 1.08rem; max-width: 520px; }
.rs-heros .heros__actions { margin-top: 6px; }

.rs-scene { --cycle: 11s; position: relative; padding-bottom: 84px; }
.rs-tel { position: relative; width: min(330px, 86%); margin-inline: auto; background: var(--blanc); color: var(--aubergine); border-radius: 30px; padding: 14px 12px 18px; box-shadow: 0 0 0 8px var(--aubergine-3), 0 50px 90px -40px rgba(0,0,0,.85); rotate: 2deg; }
.rs-post__tete { display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; align-items: center; padding: 2px 4px 10px; }
.rs-post__tete::before { content: ""; grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; background: var(--aubergine); box-shadow: 0 0 0 2px var(--blanc), 0 0 0 4px var(--jaune); }
.rs-post__compte { font-weight: 700; font-size: .85rem; line-height: 1.1; }
.rs-post__lieu { font-size: .72rem; color: var(--gris); line-height: 1.1; }
.rs-photo { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; }
.rs-photo__img { position: absolute; inset: 0; margin: 0; }
.rs-photo__img img { width: 100%; height: 100%; object-fit: cover; }
/* Le filtre sur mesure : cadre, teinte légère et logo */
.rs-filtre { position: absolute; inset: 0; z-index: 1; box-shadow: inset 0 0 0 7px var(--jaune), inset 0 0 0 9px var(--aubergine); background: linear-gradient(rgba(186,134,213,.14), rgba(186,134,213,.14)); pointer-events: none; }
.rs-filtre__logo { position: absolute; left: 16px; bottom: 16px; padding: 4px 10px 6px; border-radius: 6px; background: var(--aubergine); color: var(--jaune); font-family: "Caveat", "Segoe Print", cursive; font-size: 1.15rem; font-weight: 600; line-height: 1; }
.rs-post__corps { display: grid; gap: 6px; padding: 10px 4px 0; }
.rs-post__aime { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: .8rem; }
.rs-post__aime::before { content: ""; width: 16px; height: 16px; background: #E0457B; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C.9 8.5 3 4.5 6.9 4.5c2.2 0 3.6 1.2 5.1 3 1.5-1.8 2.9-3 5.1-3 3.9 0 6 4 4.5 7.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C.9 8.5 3 4.5 6.9 4.5c2.2 0 3.6 1.2 5.1 3 1.5-1.8 2.9-3 5.1-3 3.9 0 6 4 4.5 7.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat; }
.rs-post__texte { font-size: .8rem; line-height: 1.4; }
.rs-post__texte::before { content: "votre.entreprise "; font-weight: 700; }
.rs-post__com, .rs-post__rep { font-size: .76rem; line-height: 1.35; padding: 7px 10px; border-radius: 10px; background: var(--clair); }
.rs-post__com::before { content: "un.client "; font-weight: 700; }
.rs-post__rep { margin-left: 18px; background: rgba(186,134,213,.25); }
.rs-post__rep::before { content: "votre.entreprise "; font-weight: 700; }
.rs-scene__note { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-family: "Caveat", "Segoe Print", cursive; font-size: 1.5rem; font-weight: 600; line-height: 1.05; color: var(--jaune); rotate: -4deg; }

@media (prefers-reduced-motion: no-preference) {
  .rs-scene .rs-filtre { animation: rs-filtre var(--cycle) cubic-bezier(.65,0,.25,1) infinite; }
  .rs-post__aime { animation: rs-aime var(--cycle) cubic-bezier(.16,1,.3,1) infinite; }
  .rs-post__texte { animation: rs-texte var(--cycle) infinite; }
  .rs-post__com { animation: rs-com var(--cycle) cubic-bezier(.16,1,.3,1) infinite; }
  .rs-post__rep { animation: rs-rep var(--cycle) cubic-bezier(.16,1,.3,1) infinite; }
  .rs-scene__note { animation: rs-note var(--cycle) infinite; }
  .rs-scene:not(.vu) *, .rs-scene:not(.vu) *::before { animation-play-state: paused; }
}
@keyframes rs-filtre { 0%, 10% { clip-path: inset(0 100% 0 0); } 22%, 94% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes rs-aime { 0%, 26% { opacity: 0; scale: .6; } 31%, 94% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
@keyframes rs-texte { 0%, 33% { opacity: 0; } 40%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rs-com { 0%, 50% { opacity: 0; translate: 0 8px; } 55%, 94% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes rs-rep { 0%, 64% { opacity: 0; translate: 0 8px; } 69%, 94% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes rs-note { 0%, 72% { opacity: 0; translate: 0 8px; } 78%, 94% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }

/* ---------- 01 · Deux semaines, deux calendriers ---------- */
.rs-calendriers { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rs-calendrier { display: grid; gap: 16px; padding: 28px; border-radius: var(--r); background: var(--clair); rotate: -1deg; }
.rs-calendrier--rythme { background: var(--aubergine); color: var(--blanc); rotate: 1deg; }
.rs-calendrier__titre { font-family: "Caveat", "Segoe Print", cursive; font-size: 1.6rem; font-weight: 600; line-height: 1; color: #9B6BB5; rotate: -2deg; }
.rs-calendrier--rythme .rs-calendrier__titre { color: var(--jaune); }
.rs-jours { display: grid; grid-template-columns: repeat(7, minmax(0, 46px)); gap: 8px; }
.rs-jour { aspect-ratio: 1; border-radius: 10px; background: rgba(40,15,43,.07); }
.rs-calendrier--rythme .rs-jour { background: rgba(255,255,255,.08); }
.rs-jour--post { background: var(--lilas); scale: 0; transition: scale .5s cubic-bezier(.16,1,.3,1); }
.rs-calendrier--rythme .rs-jour--post { background: var(--jaune); }
.rs-calendrier.vu .rs-jour--post, :root:not(.anim) .rs-jour--post { scale: 1; }
.rs-jour:nth-child(1) { transition-delay: 0.30s; }
.rs-jour:nth-child(2) { transition-delay: 0.36s; }
.rs-jour:nth-child(3) { transition-delay: 0.42s; }
.rs-jour:nth-child(4) { transition-delay: 0.48s; }
.rs-jour:nth-child(5) { transition-delay: 0.54s; }
.rs-jour:nth-child(6) { transition-delay: 0.60s; }
.rs-jour:nth-child(7) { transition-delay: 0.66s; }
.rs-jour:nth-child(8) { transition-delay: 0.72s; }
.rs-jour:nth-child(9) { transition-delay: 0.78s; }
.rs-jour:nth-child(10) { transition-delay: 0.84s; }
.rs-jour:nth-child(11) { transition-delay: 0.90s; }
.rs-jour:nth-child(12) { transition-delay: 0.96s; }
.rs-jour:nth-child(13) { transition-delay: 1.02s; }
.rs-jour:nth-child(14) { transition-delay: 1.08s; }
.rs-calendrier__bilan { font-size: .95rem; color: var(--gris); }
.rs-calendrier--rythme .rs-calendrier__bilan { color: var(--gris-sombre); }

/* ---------- 03 · Le filtre : avant / après ---------- */
.rs-filtre-bloc { display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: center; }
.rs-filtre-bloc__texte { display: grid; gap: 18px; }
.rs-filtre-bloc__texte p { color: var(--gris); font-size: 1.02rem; }
.rs-comparaison { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.rs-avant .ap-cadre { transform: rotate(-3deg); }
.rs-apres { position: relative; margin-top: 40px; transform: rotate(2.5deg); transition: transform .8s cubic-bezier(.16,1,.3,1); }
.rs-apres .ap-cadre { transform: none; }
.rs-filtre--grand { inset: 12px 12px auto; aspect-ratio: 4 / 3; border-radius: 3px; clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(.65,0,.25,1) .4s; }
.rs-apres.vu .rs-filtre--grand, :root:not(.anim) .rs-filtre--grand { clip-path: inset(0 0 0 0); }
.rs-filtre--grand .rs-filtre__logo { left: 14px; bottom: 14px; font-size: 1.05rem; }
.rs-comparaison:hover .rs-apres { transform: rotate(0deg) translateY(-6px); }

/* ---------- 04 · Les feuillets du calendrier ---------- */
.rs-methode { padding-block: 110px; }
.rs-feuillets { margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; perspective: 900px; }
.rs-feuillet { position: relative; display: grid; gap: 8px; align-content: start; padding: 34px 22px 24px; border-radius: 6px var(--r) var(--r) var(--r); background: var(--blanc); color: var(--aubergine); transform-origin: top center; transition: transform .6s cubic-bezier(.16,1,.3,1); }
/* Bande et anneaux du calendrier */
.rs-feuillet::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16px; border-radius: 6px 6px 0 0; background: var(--lilas); }
.rs-feuillet::after { content: ""; position: absolute; left: 28%; top: -6px; width: 9px; height: 16px; border-radius: 5px; background: var(--nuit); box-shadow: 0 0 0 2px var(--aubergine-3); }
.rs-feuillet:nth-child(odd) { rotate: -1deg; }
.rs-feuillet:nth-child(even) { rotate: 1deg; }
.rs-feuillet:hover { transform: translateY(-8px); }
.rs-feuillet__num { font-size: 3rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.rs-feuillet h3 { font-size: 1.35rem; }
.rs-feuillet p:last-child { color: var(--gris); font-size: .93rem; }
.rs-feuillet--fin { background: var(--jaune); color: var(--nuit); }
.rs-feuillet--fin::before { background: var(--aubergine); }
.rs-feuillet--fin p:last-child { color: rgba(28,10,31,.75); }
.anim .rs-feuillet[data-rv]:not(.vu) { transform: rotateX(-65deg); }

/* Les révélations au scroll ne doivent pas écraser les transitions de survol */
.anim .rs-feuillet[data-rv] { transition: opacity .9s cubic-bezier(.2,.7,.2,1), translate .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0s), var(--d, 0s), var(--d, 0s); }
.anim .rs-apres[data-rv] { transition: opacity .9s cubic-bezier(.2,.7,.2,1), translate .9s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0s), var(--d, 0s), 0s; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .rs-heros__grille, .rs-filtre-bloc { grid-template-columns: 1fr; gap: 48px; }
  .rs-scene { max-width: 560px; }
  .rs-feuillets { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .rs-heros { padding: 56px 0 90px; }
  .rs-scene { padding-bottom: 80px; }
  .rs-scene__note { font-size: 1.25rem; }
  .rs-calendriers { grid-template-columns: 1fr; }
  .rs-calendrier, .rs-calendrier--rythme { rotate: 0deg; padding: 22px 18px; }
  .rs-jours { gap: 6px; }
  .rs-comparaison { gap: 10px; }
  .rs-apres { margin-top: 24px; }
  .rs-comparaison figcaption { font-size: 1.05rem; }
  .rs-filtre--grand .rs-filtre__logo { font-size: .85rem; left: 8px; bottom: 8px; padding: 3px 6px 4px; }
  .rs-filtre--grand { inset: 12px 12px auto; }
  .rs-feuillets { grid-template-columns: 1fr; }
}
/* Les grands mots longs (« Reconnaissable. ») doivent tenir sur un téléphone */
@media (max-width: 600px) { .sg-mot__grand { font-size: min(3.4rem, 10.5vw); } }


/* ================= Service Site internet — le carnet, en mouvement =================
   Réutilise : chapitres (.ap-marque), fiches (.sg-chantier), mots qui se remplissent (.sg-mot),
   liste de liens (.sv-situations) et fin signée (.ap-fin). */

/* ---------- Héros : de la maquette au site premium, puis la première demande ---------- */
.si-heros { position: relative; overflow: hidden; padding: 80px 0 120px; }
.si-heros::before { content: ""; position: absolute; right: -10%; top: -20%; width: 800px; height: 700px; background: radial-gradient(closest-side, rgba(186,134,213,.24), transparent); pointer-events: none; }
.si-heros > .enveloppe { position: relative; z-index: 1; }
.si-heros__grille { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; }
.si-heros__texte { display: grid; gap: 22px; justify-items: start; }
.si-heros__titre { font-size: clamp(2.6rem, 5.2vw, 4.6rem); }
.si-heros__titre em { color: var(--jaune); }
.si-heros__chapo { color: var(--gris-sombre); font-size: 1.08rem; max-width: 520px; }
.si-heros .heros__actions { margin-top: 6px; }

.si-scene { --cycle: 12s; position: relative; padding: 40px 0 110px 40px; }
.si-navigateur { position: relative; background: var(--blanc); color: var(--aubergine); border-radius: var(--r); overflow: hidden; rotate: -1.5deg; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); }
/* Le reflet qui balaie la page une fois finie : la touche de finition */
.si-navigateur::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.65) 50%, transparent 62%); translate: -120% 0; }
.si-navigateur__barre { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: var(--clair); border-bottom: 1px solid var(--trait); }
.si-navigateur__barre::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #D8D2DA; box-shadow: 14px 0 0 #D8D2DA, 28px 0 0 #D8D2DA; margin-right: 30px; }
.si-navigateur__url { flex: 1; padding: 4px 12px; border-radius: var(--pilule); background: var(--blanc); font-size: .75rem; color: var(--gris); }
.si-page { padding: 14px 16px 20px; display: grid; gap: 14px; }
.si-page__menu { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.si-page__logo { --sq-couleur: var(--aubergine); font-weight: 700; font-size: .85rem; border-radius: 6px; }
.si-page__lien { --sq-couleur: var(--aubergine); font-size: .72rem; font-weight: 600; padding: 4px 10px; border-radius: var(--pilule); }
.si-page__heros { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; align-items: center; }
.si-page__texte { display: grid; gap: 10px; justify-items: start; }
.si-page__titre { --sq-couleur: var(--aubergine); position: relative; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; border-radius: 6px; }
/* Le trait de plume sous le titre */
.si-page__titre::after { content: ""; position: absolute; left: 0; bottom: -7px; width: 62%; height: 8px; background: var(--lilas); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M3 8c25-5 60-7 114-3'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M3 8c25-5 60-7 114-3'/%3E%3C/svg%3E") center / 100% 100% no-repeat; transform-origin: left; }
.si-page__chapo { --sq-couleur: var(--gris); font-size: .8rem; line-height: 1.4; color: var(--gris); border-radius: 6px; }
.si-page__bouton { --sq-couleur: var(--nuit); font-size: .76rem; font-weight: 700; padding: 8px 14px; border-radius: var(--pilule); background: var(--jaune); color: var(--nuit); }
.si-page__photo { margin: 0; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: rgba(40,15,43,.09); }
.si-page__photo img { width: 100%; height: 100%; object-fit: cover; }

/* La même page sur téléphone : le site s'adapte à tous les écrans */
.si-mobile { position: absolute; left: -6px; bottom: -34px; z-index: 2; width: 118px; display: grid; gap: 6px; padding: 16px 8px 12px; border-radius: 20px; background: var(--blanc); color: var(--aubergine); box-shadow: 0 0 0 5px var(--aubergine-3), 0 30px 60px -24px rgba(0,0,0,.85); rotate: -6deg; }
.si-mobile__logo { font-size: .5rem; font-weight: 700; }
.si-mobile__photo { margin: 0; aspect-ratio: 1; border-radius: 8px; overflow: hidden; }
.si-mobile__photo img { width: 100%; height: 100%; object-fit: cover; }
.si-mobile__titre { font-size: .68rem; font-weight: 700; line-height: 1.1; }
.si-mobile__bouton { justify-self: start; font-size: .5rem; font-weight: 700; padding: 4px 8px; border-radius: var(--pilule); background: var(--jaune); color: var(--nuit); }

/* Les tampons de qualité */
.si-tampons { position: absolute; right: -4px; top: -10px; z-index: 3; display: grid; justify-items: end; gap: 8px; }
.si-tampon { display: flex; align-items: center; gap: 6px; padding: 6px 12px 7px; border-radius: 6px; font-family: "Caveat", "Segoe Print", cursive; font-size: 1.25rem; font-weight: 600; line-height: 1; box-shadow: 0 14px 28px -14px rgba(0,0,0,.7); }
.si-tampon::before { content: "✓"; font-family: var(--police); font-size: .75rem; font-weight: 700; }
.si-tampon--1 { background: var(--jaune); color: var(--nuit); rotate: 4deg; }
.si-tampon--2 { background: var(--lilas); color: var(--aubergine); rotate: -3deg; margin-right: 18px; }
.si-tampon--3 { background: var(--blanc); color: var(--aubergine); rotate: 2deg; }

/* Le curseur qui vient survoler le bouton */
.si-curseur { position: absolute; left: 22%; top: 60%; z-index: 4; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l16 10-7 1.5-3.5 7z' fill='white' stroke='%231C0A1F' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0; pointer-events: none; }

.si-alerte { position: absolute; right: -2%; bottom: 62px; z-index: 3; display: grid; gap: 2px; padding: 14px 18px 14px 54px; border-radius: var(--r); background: var(--lilas); color: var(--aubergine); rotate: 2.5deg; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.si-alerte::before { content: ""; position: absolute; left: 16px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--aubergine); box-shadow: inset 0 0 0 8px var(--aubergine), inset 0 0 0 13px var(--jaune); }
.si-alerte__titre { font-weight: 700; font-size: .92rem; }
.si-alerte__texte { font-size: .78rem; }
.si-scene__note { position: absolute; left: 150px; bottom: 6px; font-family: "Caveat", "Segoe Print", cursive; font-size: 1.5rem; font-weight: 600; line-height: 1.05; color: var(--jaune); rotate: -3deg; }

@media (prefers-reduced-motion: no-preference) {
  .si-page__logo, .si-page__lien { animation: si-sq-menu var(--cycle) infinite; }
  .si-page__titre { animation: si-sq-titre var(--cycle) infinite; }
  .si-page__titre::after { animation: si-souligne var(--cycle) cubic-bezier(.65,0,.25,1) infinite; }
  .si-page__chapo { animation: si-sq-chapo var(--cycle) infinite; }
  .si-page__bouton { animation: si-sq-bouton var(--cycle) cubic-bezier(.16,1,.3,1) infinite; }
  .si-page__photo img { animation: si-photo var(--cycle) infinite; }
  .si-navigateur::after { animation: si-reflet var(--cycle) cubic-bezier(.65,0,.25,1) infinite; }
  .si-mobile { animation: si-mobile var(--cycle) cubic-bezier(.16,1,.3,1) infinite; }
  .si-curseur { animation: si-curseur var(--cycle) cubic-bezier(.65,0,.25,1) infinite; }
  .si-tampon--1 { animation: si-tampon-1 var(--cycle) cubic-bezier(.16,1,.3,1) infinite; }
  .si-tampon--2 { animation: si-tampon-2 var(--cycle) cubic-bezier(.16,1,.3,1) infinite; }
  .si-tampon--3 { animation: si-tampon-3 var(--cycle) cubic-bezier(.16,1,.3,1) infinite; }
  .si-alerte { animation: si-alerte var(--cycle) cubic-bezier(.16,1,.3,1) infinite; }
  .si-scene__note { animation: si-note var(--cycle) infinite; }
  .si-scene:not(.vu) *, .si-scene:not(.vu) *::before, .si-scene:not(.vu) *::after { animation-play-state: paused; }
}
@keyframes si-sq-menu { 0%, 3% { color: transparent; background-color: rgba(40,15,43,.09); } 6%, 94% { color: var(--sq-couleur); background-color: transparent; } 100% { color: transparent; background-color: rgba(40,15,43,.09); } }
@keyframes si-sq-titre { 0%, 6% { color: transparent; background-color: rgba(40,15,43,.09); } 9%, 94% { color: var(--sq-couleur); background-color: transparent; } 100% { color: transparent; background-color: rgba(40,15,43,.09); } }
@keyframes si-sq-chapo { 0%, 9% { color: transparent; background-color: rgba(40,15,43,.09); } 12%, 94% { color: var(--sq-couleur); background-color: transparent; } 100% { color: transparent; background-color: rgba(40,15,43,.09); } }
@keyframes si-sq-bouton { 0%, 12% { color: transparent; background-color: rgba(40,15,43,.09); translate: 0 0; box-shadow: none; } 15%, 45% { color: var(--sq-couleur); background-color: var(--jaune); translate: 0 0; box-shadow: none; } 48%, 94% { color: var(--sq-couleur); background-color: var(--jaune); translate: 0 -3px; box-shadow: 0 10px 20px -8px rgba(40,15,43,.45); } 100% { color: transparent; background-color: rgba(40,15,43,.09); } }
@keyframes si-photo { 0%, 14% { opacity: 0; scale: 1.12; } 20% { opacity: 1; scale: 1.06; } 94% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
@keyframes si-reflet { 0%, 22% { translate: -120% 0; } 30%, 100% { translate: 120% 0; } }
@keyframes si-souligne { 0%, 26% { scale: 0 1; } 32%, 94% { scale: 1 1; } 100% { scale: 0 1; } }
@keyframes si-mobile { 0%, 31% { opacity: 0; translate: -20px 40px; } 37%, 94% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes si-curseur { 0%, 38% { opacity: 0; translate: 220px 120px; scale: 1; } 40% { opacity: 1; translate: 220px 120px; } 46% { translate: 0 0; scale: 1; } 48% { scale: .82; } 50%, 90% { opacity: 1; translate: 0 0; scale: 1; } 94%, 100% { opacity: 0; translate: 0 0; } }
@keyframes si-tampon-1 { 0%, 50% { opacity: 0; scale: 1.6; } 53%, 94% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
@keyframes si-tampon-2 { 0%, 53% { opacity: 0; scale: 1.6; } 56%, 94% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
@keyframes si-tampon-3 { 0%, 56% { opacity: 0; scale: 1.6; } 59%, 94% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
@keyframes si-alerte { 0%, 61% { opacity: 0; translate: 30px 10px; } 66%, 94% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes si-note { 0%, 67% { opacity: 0; translate: 0 8px; } 71%, 94% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }

/* ---------- 01 · Trois secondes ---------- */
.si-secondes { position: relative; margin-top: 70px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.si-secondes::before, .si-secondes::after { content: ""; position: absolute; left: 0; right: 0; top: -28px; height: 6px; border-radius: 3px; }
.si-secondes::before { background: var(--clair); }
/* Le chronomètre : la barre se remplit en trois secondes */
.si-secondes::after { background: var(--aubergine); transform: scaleX(0); transform-origin: left; transition: transform 3s linear .4s; }
.si-secondes.vu::after, :root:not(.anim) .si-secondes::after { transform: scaleX(1); }
.si-seconde { display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: var(--r); background: var(--clair); transition: background-color .5s, color .5s; }
.si-seconde__temps { font-family: "Caveat", "Segoe Print", cursive; font-size: 2.2rem; font-weight: 600; line-height: 1; color: #9B6BB5; }
.si-seconde h3 { font-size: 1.35rem; }
.si-seconde p:last-child { color: var(--gris); font-size: .95rem; }
/* Chaque carte s'allume quand le chronomètre passe dessus */
.si-secondes.vu .si-seconde { background: var(--aubergine); color: var(--blanc); }
.si-secondes.vu .si-seconde .si-seconde__temps { color: var(--jaune); }
.si-secondes.vu .si-seconde p:last-child { color: var(--gris-sombre); }
.si-seconde:nth-child(1) { transition-delay: 1.4s; }
.si-seconde:nth-child(2) { transition-delay: 2.4s; }
.si-seconde:nth-child(3) { transition-delay: 3.4s; }

/* ---------- 03 · L'anatomie d'une page, annotée à la main ---------- */
.si-anatomie { margin-top: 56px; display: grid; }
.si-bloc { display: grid; grid-template-columns: 1fr minmax(240px, 340px) 1fr; column-gap: 34px; align-items: center; }
.si-bloc__nom { grid-column: 2; grid-row: 1; display: grid; place-items: center; min-height: 92px; padding: 16px; font-weight: 600; font-size: 1.05rem; text-align: center; background: var(--clair); border-left: 1px solid var(--trait); border-right: 1px solid var(--trait); transition: background-color .4s, scale .5s cubic-bezier(.16,1,.3,1); }
.si-bloc--entete .si-bloc__nom { min-height: 120px; background: var(--aubergine); color: var(--jaune); border-radius: var(--r) var(--r) 0 0; border: 0; }
.si-bloc--realisations .si-bloc__nom { min-height: 130px; background: var(--lilas); border: 0; }
.si-bloc--avis .si-bloc__nom { background: var(--blanc); border: 1px solid var(--trait); border-top: 0; border-bottom: 0; }
.si-bloc--faq .si-bloc__nom { background: var(--blanc); border: 1px solid var(--trait); border-top: 0; border-bottom: 0; }
.si-bloc--devis .si-bloc__nom { background: var(--jaune); border-radius: 0 0 var(--r) var(--r); border: 0; }
.si-bloc__note { grid-row: 1; display: flex; align-items: center; gap: .4em; font-family: "Caveat", "Segoe Print", cursive; font-size: 1.45rem; font-weight: 600; line-height: 1.1; color: var(--aubergine); }
.si-bloc:nth-child(odd) .si-bloc__note { grid-column: 1; justify-content: flex-end; text-align: right; rotate: -2deg; }
.si-bloc:nth-child(even) .si-bloc__note { grid-column: 3; rotate: 2deg; }
.si-bloc__note::after, .si-bloc__note::before { flex: none; width: 1.4em; height: .8em; background: #9B6BB5; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 20' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12c10-5 22-6 36-2'/%3E%3Cpath d='M32 4l7 6-8 5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 20' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12c10-5 22-6 36-2'/%3E%3Cpath d='M32 4l7 6-8 5'/%3E%3C/svg%3E") center / contain no-repeat; }
.si-bloc:nth-child(odd) .si-bloc__note::after { content: ""; }
.si-bloc:nth-child(even) .si-bloc__note::before { content: ""; transform: scaleX(-1); }
.si-bloc:hover .si-bloc__nom { scale: 1.04; }

/* ---------- 04 · La barre de chargement ---------- */
.si-methode { padding-block: 110px; }
.si-progression { margin-top: 80px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.si-etape { position: relative; display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: var(--r); background: var(--aubergine-3); border: 1px solid var(--trait-sombre); transition: transform .6s cubic-bezier(.16,1,.3,1); }
.si-etape::before, .si-etape::after { content: ""; position: absolute; left: 0; right: 0; top: -30px; height: 10px; }
.si-etape:first-child::before, .si-etape:first-child::after { border-radius: 5px 0 0 5px; }
.si-etape:last-child::before, .si-etape:last-child::after { border-radius: 0 5px 5px 0; }
.si-etape::before { background: rgba(255,255,255,.12); }
.si-etape::after { background: var(--jaune); transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.65,0,.25,1); }
.si-progression.vu .si-etape::after, :root:not(.anim) .si-etape::after { transform: scaleX(1); }
.si-etape:nth-child(1)::after { transition-delay: .3s; }
.si-etape:nth-child(2)::after { transition-delay: 1s; }
.si-etape:nth-child(3)::after { transition-delay: 1.7s; }
.si-etape:nth-child(4)::after { transition-delay: 2.4s; }
.si-etape:hover { transform: translateY(-8px); }
.si-etape__pct { font-family: "Caveat", "Segoe Print", cursive; font-size: 1.7rem; font-weight: 600; line-height: 1; color: var(--jaune); }
.si-etape h3 { font-size: 1.45rem; }
.si-etape p:last-child { color: var(--gris-sombre); font-size: .93rem; }
.si-etape--fin { background: var(--jaune); color: var(--nuit); border-color: var(--jaune); }
.si-etape--fin .si-etape__pct { color: #6A3A8C; }
.si-etape--fin p:last-child { color: rgba(28,10,31,.75); }

/* Les révélations au scroll ne doivent pas écraser les transitions de survol */
.anim .si-etape[data-rv] { transition: opacity .9s cubic-bezier(.2,.7,.2,1), translate .9s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0s), var(--d, 0s), 0s; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .si-heros__grille { grid-template-columns: 1fr; gap: 48px; }
  .si-scene { max-width: 580px; }
  .si-progression { grid-template-columns: 1fr 1fr; row-gap: 50px; }
  .si-etape:nth-child(n)::before, .si-etape:nth-child(n)::after { border-radius: 5px; }
}
@media (max-width: 760px) {
  .si-secondes { grid-template-columns: 1fr; }
  .si-bloc { grid-template-columns: 1fr; row-gap: 8px; }
  .si-bloc__nom { grid-column: 1; min-height: 72px; }
  .si-bloc:nth-child(n) .si-bloc__note { grid-column: 1; grid-row: 2; justify-content: flex-start; text-align: left; rotate: -1deg; padding: 4px 0 18px; font-size: 1.3rem; }
  .si-bloc:nth-child(odd) .si-bloc__note::after { content: none; }
  .si-bloc:nth-child(n) .si-bloc__note::before { content: ""; transform: rotate(-90deg); }
  .si-bloc .si-bloc__nom { border-radius: var(--r); border: 0; }
}
@media (max-width: 600px) {
  .si-heros { padding: 56px 0 90px; }
  /* Sur téléphone : on garde le navigateur, deux tampons, la demande et la note ; la maquette mobile est superflue */
  .si-scene { padding: 52px 0 128px 0; }
  .si-page__heros { grid-template-columns: 1.3fr 1fr; }
  .si-page__titre { font-size: 1.02rem; }
  .si-page__chapo { font-size: .7rem; }
  .si-mobile, .si-tampon--3 { display: none; }
  .si-tampons { right: 0; top: 0; grid-auto-flow: column; gap: 6px; }
  .si-tampon { font-size: 1rem; padding: 5px 8px 6px; }
  .si-tampon--2 { margin-right: 0; }
  .si-alerte { left: 8%; right: 0; bottom: 40px; padding: 12px 14px 12px 48px; }
  .si-scene__note { left: 0; bottom: 0; font-size: 1.3rem; }
  .si-progression { grid-template-columns: 1fr; }
}

/* ---------- Accueil : Qui sommes-nous (quatre prestataires deviennent un seul système) ---------- */
.qs { position: relative; padding-block: 110px 120px; overflow: hidden; }
.qs-grille { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; }
.qs-titre { font-size: clamp(2.1rem, 3.7vw, 3.3rem); font-weight: 600; line-height: 1.06; letter-spacing: -0.04em; margin: 0; }
.qs-titre em { display: inline; padding-inline: .06em; background: linear-gradient(var(--jaune), var(--jaune)) 0 88% / 0% 34% no-repeat; transition: background-size 1.1s cubic-bezier(.16,1,.3,1) .45s; }
.qs-titre.vu em, html:not(.anim) .qs-titre em { background-size: 100% 34%; }
.qs-chapo { margin: 28px 0 0; font-size: clamp(1.15rem, 1.5vw, 1.3rem); font-weight: 500; line-height: 1.4; letter-spacing: -0.015em; }
.qs-detail { margin: 16px 0 0; color: var(--gris); max-width: 520px; }
.qs-points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.qs-points li { position: relative; padding-left: 34px; font-weight: 500; }
.qs-points li::before { content: "✓"; position: absolute; left: 0; top: .05em; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700; background: var(--jaune); color: var(--nuit); }

.qs-scene { --cycle: 11s; --l: 360px; position: relative; height: 530px; }
.qs-scene::before { content: ""; position: absolute; inset: -10% -20%; background: radial-gradient(closest-side, rgba(186,134,213,.22), transparent); pointer-events: none; }
.qs-systeme { position: absolute; left: calc(50% - var(--l) / 2); top: 40px; width: var(--l); height: 418px; border-radius: var(--r); background: var(--aubergine); box-shadow: 0 40px 80px -40px rgba(40,15,43,.7); display: flex; justify-content: space-between; align-items: center; align-content: start; flex-wrap: wrap; padding: 20px 20px 0; }
.qs-systeme__nom { margin: 0; color: var(--blanc); font-weight: 800; letter-spacing: .06em; font-size: .9rem; }
.qs-systeme__pastille { margin: 0; font-size: .75rem; font-weight: 600; padding: 4px 10px; border-radius: var(--pilule); background: var(--jaune); color: var(--nuit); }
.qs-flux { position: absolute; left: calc(50% - var(--l) / 2 + 39px); top: 125px; width: 2px; height: 290px; background: var(--jaune); transform-origin: top; z-index: 1; }
.qs-brique { --dep: none; position: absolute; z-index: 2; left: calc(50% - var(--l) / 2 + 16px); width: calc(var(--l) - 32px); height: 50px; border-radius: var(--r-petit); border: 1px solid transparent; background: rgba(255,255,255,.07); color: var(--blanc); display: grid; grid-template-columns: 14px 1fr; grid-template-rows: auto auto; column-gap: 16px; align-content: center; padding: 0 16px; }
.qs-brique::before { content: ""; grid-row: 1 / 3; align-self: center; width: 14px; height: 14px; border-radius: 50%; background: var(--jaune); box-shadow: 0 0 0 4px rgba(240,240,45,.18); }
.qs-brique p { margin: 0; grid-column: 2; }
.qs-brique__nom { font-weight: 600; font-size: .98rem; line-height: 1.2; letter-spacing: -0.01em; }
.qs-brique__avant, .qs-brique__apres { grid-row: 2; font-size: .8rem; line-height: 1.3; }
.qs-brique__avant { font-family: "Caveat", "Segoe Print", cursive; font-size: 1.1rem; line-height: 1; font-weight: 600; color: var(--gris); opacity: 0; }
.qs-brique__apres { color: var(--jaune); }
.qs-brique--a { top: 100px; --dep: translate(-120px, -92px) rotate(-5deg) scale(.9); }
.qs-brique--b { top: 158px; --dep: translate(130px, -70px) rotate(4deg) scale(.9); }
.qs-brique--c { top: 216px; --dep: translate(-110px, -46px) rotate(3deg) scale(.9); }
.qs-brique--d { top: 274px; --dep: translate(125px, -22px) rotate(-4deg) scale(.9); }
.qs-brique--e { top: 332px; --dep: translate(-125px, 0) rotate(-3deg) scale(.9); }
.qs-brique--f { top: 390px; --dep: translate(115px, 22px) rotate(5deg) scale(.9); }
.qs-note { position: absolute; right: 0; top: 478px; margin: 0; font-family: "Caveat", "Segoe Print", cursive; font-size: 1.65rem; font-weight: 600; line-height: 1.1; rotate: -2deg; text-align: right; }
.qs-note--avant { opacity: 0; color: var(--gris); }
.qs-note--apres { color: var(--aubergine); }
.qs-note--apres::after { content: ""; display: block; height: 6px; margin-top: 2px; background: var(--jaune); border-radius: 3px; rotate: 1deg; }

/* La boucle : quatre prestataires éparpillés, puis un seul système qui s'allume. */
@media (prefers-reduced-motion: no-preference) {
  .qs-systeme { animation: qs-carte var(--cycle) cubic-bezier(.16,1,.3,1) infinite; opacity: 0; }
  .qs-flux { animation: qs-flux var(--cycle) cubic-bezier(.65,0,.35,1) infinite; transform: scaleY(0); }
  .qs-brique { animation: qs-brique var(--cycle) cubic-bezier(.65,0,.25,1) infinite; transform: var(--dep); background-color: var(--blanc); color: var(--aubergine); border-color: rgba(186,134,213,.7); box-shadow: 0 18px 30px -18px rgba(40,15,43,.4); }
  .qs-brique::before { animation: qs-point var(--cycle) infinite; background: var(--trait); box-shadow: none; }
  .qs-brique__avant { animation: qs-avant var(--cycle) infinite; opacity: 1; }
  .qs-brique__apres { animation: qs-apres var(--cycle) infinite; opacity: 0; }
  .qs-brique--b { animation-delay: .12s; }
  .qs-brique--b::before { animation-delay: .45s; }
  .qs-brique--c { animation-delay: .24s; }
  .qs-brique--c::before { animation-delay: .9s; }
  .qs-brique--d { animation-delay: .36s; }
  .qs-brique--d::before { animation-delay: 1.35s; }
  .qs-brique--e { animation-delay: .48s; }
  .qs-brique--e::before { animation-delay: 1.8s; }
  .qs-brique--f { animation-delay: .6s; }
  .qs-brique--f::before { animation-delay: 2.25s; }
  .qs-note--avant { animation: qs-note-avant var(--cycle) infinite; opacity: 1; }
  .qs-note--apres { animation: qs-note-apres var(--cycle) infinite; opacity: 0; }
  .qs-scene:not(.vu) *, .qs-scene:not(.vu) *::before, .qs-scene:not(.vu) *::after { animation-play-state: paused; }
}
@keyframes qs-carte {
  0%, 32% { opacity: 0; transform: scale(.94); }
  42%, 90% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes qs-flux {
  0%, 44% { transform: scaleY(0); opacity: 1; }
  68%, 90% { transform: scaleY(1); opacity: 1; }
  94%, 100% { transform: scaleY(1); opacity: 0; }
}
@keyframes qs-brique {
  0%, 30% { transform: var(--dep); background-color: var(--blanc); color: var(--aubergine); border-color: rgba(186,134,213,.7); box-shadow: 0 18px 30px -18px rgba(40,15,43,.4); opacity: 1; }
  42%, 90% { transform: none; background-color: rgba(255,255,255,.07); color: var(--blanc); border-color: transparent; box-shadow: 0 0 0 0 rgba(40,15,43,0); opacity: 1; }
  94% { transform: none; background-color: rgba(255,255,255,.07); color: var(--blanc); border-color: transparent; opacity: 0; }
  95% { transform: var(--dep); background-color: var(--blanc); color: var(--aubergine); border-color: rgba(186,134,213,.7); opacity: 0; }
  100% { transform: var(--dep); background-color: var(--blanc); color: var(--aubergine); border-color: rgba(186,134,213,.7); opacity: 1; }
}
@keyframes qs-point {
  0%, 44% { background: var(--trait); box-shadow: 0 0 0 0 rgba(240,240,45,0); }
  48%, 90% { background: var(--jaune); box-shadow: 0 0 0 4px rgba(240,240,45,.18); }
  94%, 100% { background: var(--trait); box-shadow: 0 0 0 0 rgba(240,240,45,0); }
}
@keyframes qs-avant { 0%, 30% { opacity: 1; } 36%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes qs-apres { 0%, 42% { opacity: 0; translate: 0 4px; } 50%, 90% { opacity: 1; translate: 0 0; } 94%, 100% { opacity: 0; } }
@keyframes qs-note-avant { 0%, 28% { opacity: 1; translate: 0 0; } 34%, 95% { opacity: 0; translate: 0 6px; } 100% { opacity: 1; translate: 0 0; } }
@keyframes qs-note-apres { 0%, 58% { opacity: 0; translate: 0 6px; } 64%, 90% { opacity: 1; translate: 0 0; } 94%, 100% { opacity: 0; } }

.qs-rangee { margin-top: 80px; display: grid; grid-template-columns: 1fr 1fr 1.05fr; gap: 32px; align-items: center; }
.qs-tirage { margin: 0; }
.qs-tirage--a { transform: rotate(-2.5deg); }
.qs-tirage--b { transform: rotate(2deg) translateY(18px); }
.qs-tirage:hover { transform: rotate(0) translateY(-6px); }
.qs-fondateur { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r); background: var(--aubergine); color: var(--blanc); padding: 34px 30px 32px; display: grid; justify-items: start; }
.qs-fondateur > .heros__reseau { -webkit-mask-image: none; mask-image: none; z-index: 0; opacity: .35; transition: opacity .6s; }
.qs-fondateur:hover > .heros__reseau { opacity: 1; }
.qs-fondateur > :not(canvas) { position: relative; z-index: 1; }
.qs-fondateur__photo { width: 84px; height: 84px; margin: 0 0 22px 8px; }
.qs-fondateur:hover .contact__photo::before { transform: translate(-12px, 9px); }
.qs-fondateur:hover .contact__photo::after { transform: translate(11px, -9px); }
.qs-fondateur__texte { margin: 0; font-size: 1.35rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; }
.qs-fondateur__signature { margin: 10px 0 0; font-family: "Caveat", "Segoe Print", cursive; font-weight: 600; font-size: 1.9rem; line-height: 1; color: var(--lilas); rotate: -4deg; }
.qs-fondateur__signature::before { content: "— "; }
.qs-fondateur .bouton > .wp-block-button__link { margin-top: 22px; }
.qs-fondateur p:last-child { margin: 0; }

@media (max-width: 1000px) {
  .qs-grille { grid-template-columns: 1fr; gap: 40px; }
  .qs-scene { max-width: 620px; width: 100%; justify-self: center; }
  .qs-rangee { grid-template-columns: 1fr 1fr; }
  .qs-fondateur { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .qs { padding-block: 80px; }
  .qs-scene { --l: min(320px, 100%); height: 530px; }
  .qs-brique--a { --dep: translate(-10px, -92px) rotate(-4deg) scale(.88); }
  .qs-brique--b { --dep: translate(14px, -70px) rotate(3deg) scale(.88); }
  .qs-brique--c { --dep: translate(-12px, -46px) rotate(2.5deg) scale(.88); }
  .qs-brique--d { --dep: translate(10px, -22px) rotate(-3deg) scale(.88); }
  .qs-brique--e { --dep: translate(-14px, 0) rotate(-2.5deg) scale(.88); }
  .qs-brique--f { --dep: translate(12px, 22px) rotate(3.5deg) scale(.88); }
  .qs-note { top: 478px; font-size: 1.45rem; }
  .qs-rangee { grid-template-columns: 1fr; gap: 28px; margin-top: 56px; }
  .qs-tirage--b { transform: rotate(1.5deg); }
}

/* ---------- Grand titre et oiseau : cadrage de chaque photo ---------- */
.affiche--martin { --ox: 56%; --oy: 32%; }
.affiche--macareux { --ox: 58%; --oy: 50%; }
.affiche--faucon { --ox: 54%; --oy: 24%; }

/* ---------- Grand titre : le médaillon de l'oiseau au bout de la première ligne ---------- */
.affiche__medaillon { position: relative; flex: none; display: inline-block; width: .78em; height: .78em; margin-left: .04em; border-radius: 50%; overflow: hidden; background: var(--aubergine); box-shadow: 0 0 0 .028em var(--blanc), 0 0 0 .05em var(--jaune); transition: box-shadow .5s cubic-bezier(.16,1,.3,1); }
.affiche__medaillon img { width: 100%; height: 100%; object-fit: cover; object-position: var(--ox) var(--oy); scale: 1.15; translate: var(--mx, 0%) var(--my, 0%); transition: translate .9s cubic-bezier(.16,1,.3,1); }
.affiche--medaillon .affiche__titre:hover .affiche__medaillon { box-shadow: 0 0 0 .028em var(--blanc), 0 0 0 .075em var(--jaune); }
@media (prefers-reduced-motion: no-preference) {
  .anim .affiche--medaillon [data-rv="ligne"].vu { clip-path: inset(-25% -25% -25% -25%); }
  .anim .affiche--medaillon .affiche__medaillon { width: 0; margin-left: 0; transition: width 1s cubic-bezier(.2,.7,.2,1) .35s, margin 1s cubic-bezier(.2,.7,.2,1) .35s, box-shadow .5s; }
  .anim .affiche--medaillon .vu .affiche__medaillon { width: .78em; margin-left: .04em; }
  .anim .affiche--medaillon .affiche__medaillon img { scale: 1.7; rotate: -8deg; transition: scale 1.8s cubic-bezier(.16,1,.3,1) .45s, rotate 1.8s cubic-bezier(.16,1,.3,1) .45s, translate .9s cubic-bezier(.16,1,.3,1); }
  .anim .affiche--medaillon .vu .affiche__medaillon img { scale: 1.15; rotate: 0deg; }
}


/* ==================================================================================
   ADAPTATIONS GUTENBERG
   Le CSS des blocs est imprimé APRÈS cette feuille : toute surcharge d'un style de
   bloc doit être plus spécifique, pas simplement placée plus bas.
   ================================================================================== */

img { height: auto; }
:where(.wp-block-group) > :where(*), :where(.wp-block-buttons) { margin-block: 0; }
figure.wp-block-image { margin: 0; }
.wp-block-image figcaption.wp-element-caption { margin: 0; }
ul.wp-block-list, ol.wp-block-list { margin: 0; }

/* ---------- En-tête : le « collant » doit porter sur l'élément <header> du modèle ---------- */
header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
.admin-bar header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { .admin-bar header.wp-block-template-part { top: 46px; } }
.entete { position: static; }
.entete__logo { display: flex; align-items: center; }
.entete__logo .wp-block-image img { height: 36px; width: auto; }
.entete__logo-court { display: none; }
.wp-block-navigation.entete__nav { gap: 6px; }
.entete__nav .wp-block-navigation__container { gap: 6px; }
.entete__nav .wp-block-navigation-item__content { display: block; color: rgba(255,255,255,.78); text-decoration: none; font-size: .9rem; font-weight: 500; padding: .45em 1.1em; border-radius: var(--pilule); }
.entete__nav .wp-block-navigation-item__content:hover { color: var(--blanc); }
.entete__nav .wp-block-navigation-item__content[aria-current="page"] { background: var(--blanc); color: var(--nuit); }
.entete__nav .wp-block-navigation__responsive-container-open,
.entete__nav .wp-block-navigation__responsive-container-close { color: var(--blanc); }
/* Panneau mobile : sans ceci, il s'ouvre blanc sur blanc (CSS du bloc imprimé après le thème). */
.wp-block-navigation.entete__nav .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--nuit) !important; color: var(--blanc) !important; padding: 28px 24px;
}
.wp-block-navigation.entete__nav .is-menu-open .wp-block-navigation-item__content { font-size: 1.6rem; padding: .35em 0; }
@media (max-width: 760px) {
  .entete__barre { grid-template-columns: 1fr auto; }
  .entete__logo-complet { display: none; }
  .entete__logo-court { display: block; }
  .entete__logo-court img { height: 34px !important; }
  .wp-block-navigation.entete__nav { display: flex; background: none; border: 0; padding: 0; }
  .wp-block-buttons.entete__actions { display: none; }
}

/* ---------- Boutons : la classe est sur le conteneur, le style sur le lien ---------- */
.wp-block-buttons { gap: 10px; }
.wp-block-button.bouton { display: inline-block; background: none; border: 0; padding: 0; border-radius: 0; }
.wp-block-button.bouton::after { content: none; }
.wp-block-buttons.heros__actions, .wp-block-buttons.appel__actions { justify-content: center; }
.vitrine__suite.wp-block-buttons { justify-content: center; }
.wp-block-buttons.parole__action { justify-content: center; margin-top: 32px; }

/* ---------- Images en couverture : l'emporter sur « .wp-block-image img { height:auto } » ---------- */
.wp-block-image.collage__photo img,
.collage__c > .wp-block-image img,
.wp-block-image.projet__visuel img,
.intro__rangee .wp-block-image img,
.wp-block-image.recit__photo img,
.wp-block-image.fondateur__photo img,
.wp-block-image.affiche__vignette img,
.bandeau__carte > .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
.collage__c > .wp-block-image { height: 100%; }
.intro__rangee .wp-block-image { border-radius: var(--r); overflow: hidden; height: 250px; }
.wp-block-image.affiche__vignette { margin: 0; }

/* Étiquettes « Logiciel métier » / « Site internet » = légendes des images */
.wp-block-image.collage__photo figcaption { margin: 0; line-height: 1.4; }

/* Carte « 30 min » */
.collage__carte p { font-size: .8rem; }
.collage__carte p strong { display: block; font-size: 1.7rem; letter-spacing: -0.04em; line-height: 1; }

/* Monogrammes */
.wp-block-image.collage__monogramme { position: absolute; right: 18px; top: 18px; width: 30px; }
.wp-block-image.pied__monogramme { width: 56px; margin-bottom: 22px; }
.recit__lien .wp-block-image { width: 50px; }
@media (max-width: 900px) { .recit__lien .wp-block-image { width: 40px; } }

/* ---------- Vitrine : bouton « Réserver » posé sur l'image ---------- */
.vitrine--superpose .projet__infos > .wp-block-buttons { grid-area: lien; align-self: end; }
.vitrine--superpose .projet__lien > .wp-block-button__link { background: var(--jaune); color: var(--nuit); border-color: var(--jaune); padding: .8em 1.35em; font-size: .95rem; transition: translate .5s cubic-bezier(.16,1,.3,1), background-color .3s; }
.vitrine--superpose .projet__lien > .wp-block-button__link:hover { background: var(--blanc); border-color: var(--blanc); transform: none; }
@media (hover: hover) { .vitrine--superpose .projet:hover .projet__lien > .wp-block-button__link { translate: 0 -6px; } }
@media (max-width: 760px) { .vitrine--superpose .projet__infos > .wp-block-buttons { justify-self: start; } }
/* Grand numéro en filigrane : compteur CSS (un attribut data-* ne survit pas à l'éditeur) */
.vitrine__liste { counter-reset: projet; }
.vitrine--superpose .projet { counter-increment: projet; }
.vitrine--superpose .projet__visuel::before { content: "0" counter(projet); }
.wp-block-image.projet__visuel { position: relative; }

/* ---------- Bandeaux défilants : listes ---------- */
.defile__piste, .ruban__piste { list-style: none; margin: 0; padding: 0; }
.defile__piste li, .ruban__piste li { display: inline-flex; align-items: center; }

/* ---------- Cartes cliquables (clients, services liés) : le lien du nom couvre la carte ---------- */
.client, .lie { position: relative; }
.client__nom a, .lie__nom a { color: inherit; text-decoration: none; }
.client__nom a::after, .lie__nom a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.wp-block-image.client__logo { display: grid; }
.wp-block-image.client__logo img { max-width: 82%; max-height: 92px; width: auto; height: auto; }
.lie .wp-block-image { border-radius: var(--r-petit); overflow: hidden; margin-bottom: 8px; }
.lie .wp-block-image img { width: 100%; height: 170px; object-fit: cover; }
.lie__nom, .lie__texte { padding-inline: 8px; }

/* ---------- Pastille d'icône des cartes de service (anciennement un <span> vide) ---------- */
.service::before { content: ""; flex: none; width: 48px; height: 48px; border-radius: 12px;
  background: linear-gradient(var(--jaune), var(--jaune)) center / 14px 14px no-repeat, var(--aubergine); }
.service--sombre::before { background: linear-gradient(var(--aubergine), var(--aubergine)) center / 14px 14px no-repeat, var(--jaune); }
.service__titre { margin-top: auto; }
.service__probleme ~ .service__titre { margin-top: 0; }

/* ---------- FAQ : bloc Détails natif ---------- */
.faq__item > summary { list-style: none; }
.faq__item > summary::after { content: ""; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(var(--aubergine), var(--aubergine)) center / 12px 2px no-repeat,
              linear-gradient(var(--aubergine), var(--aubergine)) center / 2px 12px no-repeat, var(--clair); }
.faq__item[open] > summary::after { background: linear-gradient(var(--aubergine), var(--aubergine)) center / 12px 2px no-repeat, var(--jaune); }
.faq__item > .faq__reponse { padding: 0 60px 26px 0; }
@media (max-width: 760px) { .faq__item > .faq__reponse { padding-right: 0; } }

/* ---------- Citation du fondateur ---------- */
.parole__auteur { display: grid; grid-template-columns: 52px auto; column-gap: 14px; align-items: center; }
.parole__photo { grid-row: span 2; width: 52px; height: 52px; margin: 0; }
.parole__photo img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 2px var(--blanc), 0 0 0 4px var(--jaune); }
.parole__nom { font-weight: 500; }
.parole__role { color: var(--gris); font-size: .85rem; }
.parole .lien { margin-top: 28px; }

/* ---------- Photo de l'atelier (À propos) ---------- */
.wp-block-image.fondateur__photo { position: relative; }
.wp-block-image.fondateur__photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }

/* ---------- Bandeau final des pages ---------- */
.bandeau__carte > .wp-block-image { position: absolute; inset: 0; z-index: -2; }

/* ---------- Fil d'Ariane ---------- */
.fil { display: block; }
.fil a { color: var(--lilas); text-decoration: none; }

/* ---------- Formulaire Contact Form 7 aux couleurs du site ---------- */
.formulaire .wpcf7 form { display: grid; gap: 16px; }
.formulaire .wpcf7-form-control-wrap { display: block; }
.formulaire .wpcf7 label { display: grid; gap: 7px; font-size: .85rem; font-weight: 600; }
.formulaire .wpcf7 input:not([type="submit"]), .formulaire .wpcf7 select, .formulaire .wpcf7 textarea {
  font: inherit; font-weight: 400; color: var(--aubergine); background: var(--clair); border: 1px solid transparent;
  border-radius: var(--r-petit); padding: .85em 1em; width: 100%; }
.formulaire .wpcf7 input:focus, .formulaire .wpcf7 select:focus, .formulaire .wpcf7 textarea:focus {
  outline: none; border-color: var(--lilas); background: var(--blanc); box-shadow: 0 0 0 4px rgba(186,134,213,.22); }
.formulaire .wpcf7 textarea { resize: vertical; min-height: 140px; }
.formulaire .wpcf7-submit { justify-self: start; display: inline-flex; padding: .78em 1.35em; border-radius: var(--pilule);
  background: var(--aubergine); color: var(--blanc); border: 1px solid var(--aubergine); font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; }
.formulaire .wpcf7-submit:hover { background: var(--nuit); }
.formulaire .wpcf7-spinner { display: none; }
.formulaire .wpcf7-not-valid-tip { color: #B3261E; font-size: .8rem; font-weight: 500; margin-top: 4px; }
.formulaire .wpcf7-response-output { margin: 0 !important; border-radius: var(--r-petit); padding: 12px 16px !important; font-size: .9rem; }
.formulaire .wpcf7-mail-sent-ok, .formulaire .wpcf7 form.sent .wpcf7-response-output { border-color: var(--lilas) !important; background: #F6EEFA; }
.formulaire__mention a { color: var(--aubergine); }
@media (max-width: 760px) { .formulaire .formulaire__ligne { grid-template-columns: 1fr; } }

/* ---------- Pages légales : fiches et tableau en paragraphes ---------- */
.legal__fiche, .legal__table { display: block; margin: 14px 0; border-top: 1px solid var(--trait); }
.legal__ligne { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--trait); }
.legal__cle { font-weight: 600; font-size: .92rem; color: var(--aubergine) !important; }
.legal__table .legal__ligne { grid-template-columns: 1fr 1fr; }
.legal__ligne--tete { border-bottom: 2px solid var(--aubergine); }
.legal__ligne--tete .legal__cellule { font-weight: 600; color: var(--aubergine) !important; }
.legal__sommaire ol { list-style: none; }
@media (max-width: 760px) { .legal__ligne, .legal__table .legal__ligne { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- Pages simples (articles, 404) ---------- */
.page-simple { padding-block: 80px 120px; }

/* ---------- Corrections après recette en ligne (v1.0.1) ---------- */
/* Les mises en couleur utilisent le format « italique » natif : on neutralise l'italique. */
.heros__titre em, .page-heros__titre em, .intro__texte em, .devise__texte em,
.recit__conclusion em, .wp-block-image.fondateur__photo figcaption em, .manifeste__titre em { font-style: normal; }
/* Menu : le CSS du bloc navigation (0,3,0) impose « inherit » ; on donne la couleur au menu lui-même. */
.wp-block-navigation.entete__nav { color: rgba(255,255,255,.78); }
.wp-block-navigation.entete__nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover { color: var(--blanc); }
.wp-block-navigation.entete__nav .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current="page"] { color: var(--nuit); }
.wp-block-navigation.entete__nav .is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content { color: var(--blanc); }
/* Carte « 10 ans » : le chiffre est un paragraphe, il ne doit pas prendre le gris des paragraphes de la carte. */
.fondateur__carte .fondateur__chiffre { color: var(--jaune); }
/* Photo de l'atelier : la figure s'étire sur la hauteur de la carte voisine, l'image la remplit. */
.wp-block-image.fondateur__photo { width: 100%; min-height: 380px; height: 100%; overflow: hidden; border-radius: var(--r); }
.wp-block-image.fondateur__photo img { position: absolute; inset: 0; }
@media (max-width: 1000px) { .wp-block-image.fondateur__photo { height: 300px; min-height: 0; } }

/* ---------- Menu du haut (v1.0.2) ---------- */
/* Le bloc navigation donne « background-color: inherit » à chaque niveau : le fond translucide de la
   pilule s'empilait et dessinait un rectangle autour de chaque lien. Seule la pilule garde un fond. */
.wp-block-navigation.entete__nav .wp-block-navigation__responsive-container:not(.is-menu-open),
.wp-block-navigation.entete__nav .wp-block-navigation__responsive-container-content,
.wp-block-navigation.entete__nav .wp-block-navigation__container,
.wp-block-navigation.entete__nav .wp-block-navigation-item { background-color: transparent; border: 0; box-shadow: none; }
/* Les boutons ne passent jamais sur deux lignes. */
.wp-block-button.bouton > .wp-block-button__link { white-space: nowrap; }
/* Entre la tablette et le petit portable, l'en-tête manque de place : le bouton laisse le menu respirer. */
@media (max-width: 1000px) {
  .entete__barre { grid-template-columns: 1fr auto; }
  .wp-block-buttons.entete__actions { display: none; }
  .wp-block-navigation.entete__nav { justify-self: end; }
}
/* Menu mobile ouvert : la page en cours en jaune, sans pastille blanche (sinon blanc sur blanc). */
/* Menu mobile ouvert : la page en cours dans une pastille blanche, texte sombre (lisible). */
.wp-block-navigation.entete__nav .is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current="page"] {
  background: var(--blanc); color: var(--nuit); border-radius: var(--pilule); padding: .35em 1.1em; }

/* ---------- Menu du haut (v1.0.4) ---------- */
/* Le bloc navigation impose « background-color: inherit !important » à son conteneur interne :
   il redessinait le fond translucide de la pilule en rectangle à angles droits. */
.wp-block-navigation.entete__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
  background-color: transparent !important; border-radius: inherit; }

/* ---------- Contact : photo du fondateur (le core impose marge et hauteur auto aux images) ---------- */
.wp-block-image.contact__photo { margin: 0; }
.wp-block-image.contact__photo img { width: 100%; height: 100%; max-width: none; }

/* ---------- À propos (v1.0.8) ---------- */
.ap-heros__titre em, .ap-titre em, .ap-zone__titre em, .ap-services a em { font-style: normal; }
/* Portrait et tirage : le core impose marge, hauteur auto et légende centrée aux blocs image. */
.wp-block-image.ap-portrait { margin: 0; }
.wp-block-image.ap-portrait img { width: 100%; height: 100%; max-width: none; }
.wp-block-image.ap-portrait .wp-element-caption { margin: 0; text-align: left; color: var(--lilas); font-size: 1.7rem; }
.wp-block-image.ap-cadre { margin: 0; }
.wp-block-image.ap-cadre .wp-element-caption { margin: 0; text-align: right; color: var(--gris); font-size: 1.45rem; }
.wp-block-image.contact__photo.ap-fin__photo { margin: 0 0 26px; }
.ap-marque__num, .ap-marque__nom { margin: 0; }
.ap-fin__carte .wp-block-buttons { justify-content: center; }
@media (max-width: 600px) { .wp-block-image.ap-portrait .wp-element-caption { font-size: 1.4rem; } }
/* Les chiffres sont des paragraphes dans WordPress : ils ne doivent pas prendre le style des textes de la carte. */
.ap-dix p.ap-dix__chiffre { margin: 0; font-size: 3.6rem; color: var(--jaune); }
.ap-etape p.ap-etape__num { margin: 0; font-size: 1rem; color: var(--jaune); }
.ap-etape--lilas p.ap-etape__num, .ap-etape--jaune p.ap-etape__num { color: var(--aubergine); }
/* Le core remet à zéro la marge des listes. */
.wp-block-list.ap-services { margin-top: 36px; }
.wp-block-list.ap-faits { margin-top: 12px; }
/* Mobile : place sous le portrait pour l'annotation manuscrite (le core remet la marge à zéro). */
@media (max-width: 600px) { .wp-block-image.ap-portrait { margin-bottom: 84px; } }

/* ---------- Services (v1.0.12) ---------- */
.sv-heros__titre em, .sv-situations a em, .sv-fin__titre em { font-style: normal; }
.wp-block-image.sv-tirage .wp-element-caption { font-size: 1.3rem; }
.wp-block-image.sv-fiche__photo .wp-element-caption { font-size: 1.45rem; }
.wp-block-list.sv-fiche__points { margin: 6px 0 4px; }
.wp-block-image.sv-orbite__centre { margin: -75px 0 0 -75px; }
.wp-block-image.sv-orbite__centre img { width: 70px; height: auto; }
.ap-fin__carte .sv-fin__titre { margin: 0; }
@media (max-width: 600px) {
  .wp-block-image.sv-tirage .wp-element-caption { font-size: 1rem; text-align: center; }
  .wp-block-image.sv-orbite__centre { margin: -52px 0 0 -52px; }
  .wp-block-image.sv-orbite__centre img { width: 48px; }
}

/* ---------- Héros mobile condensé (v1.0.13) : le core et les règles ci-dessus sont plus précis ---------- */
@media (max-width: 760px) {
  .wp-block-image.collage__monogramme { width: 22px; right: 14px; top: 14px; }
  .collage__carte p { font-size: .72rem; line-height: 1.3; }
  .collage__carte p strong { font-size: 1.4rem; }
}

/* ---------- SEO / GEO (v1.0.17) ---------- */
.sg-heros__titre em { font-style: normal; }
.sg-heros .wp-block-buttons.heros__actions { margin-top: 6px; }
/* Fil d'Ariane : le séparateur est du texte entre le lien et la page courante (en <em>). */
.fil a { margin-right: 10px; }
.fil em { margin-left: 10px; font-style: normal; color: var(--gris-sombre); }

/* ---------- Automatisations (v1.0.19) ---------- */
.au-heros__titre em, .au-taches li em { font-style: normal; }
.au-heros .wp-block-buttons.heros__actions { margin-top: 6px; }
.wp-block-list.au-taches { margin: 0; padding: 0; }

/* ---------- Agents IA (v1.0.21) ---------- */
.ai-heros__titre em { font-style: normal; }
.ai-heros .wp-block-buttons.heros__actions { margin-top: 6px; }
.wp-block-list.ai-liste { margin: 0; padding: 0; }

/* ---------- Logiciel métier (v1.0.22) ---------- */
.lm-heros__titre em, .lm-ligne em { font-style: normal; }
.lm-heros .wp-block-buttons.heros__actions { margin-top: 6px; }

/* ---------- Réseaux sociaux (v1.0.23) ---------- */
.rs-heros__titre em { font-style: normal; }
.rs-heros .wp-block-buttons.heros__actions { margin-top: 6px; }
.wp-block-image.rs-photo__img { position: absolute; inset: 0; margin: 0; }
.wp-block-image.rs-photo__img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Site internet (v1.0.24) ---------- */
.si-heros__titre em { font-style: normal; }
.si-heros .wp-block-buttons.heros__actions { margin-top: 6px; }
.wp-block-image.si-page__photo, .wp-block-image.si-mobile__photo { margin: 0; }
.wp-block-image.si-page__photo img, .wp-block-image.si-mobile__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Accueil : deux boutons par offre (v1.0.25) ---------- */
.vitrine--superpose .projet__infos > .wp-block-buttons { gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.vitrine--superpose .projet__lien.projet__lien--page > .wp-block-button__link { background: transparent; color: var(--blanc); border: 1px solid rgba(255,255,255,.55); }
.vitrine--superpose .projet__lien.projet__lien--page > .wp-block-button__link:hover { background: transparent; color: var(--jaune); border-color: var(--jaune); }
@media (max-width: 760px) { .vitrine--superpose .projet__infos > .wp-block-buttons { justify-content: flex-start; } }

/* 1.0.27 : section « Qui sommes-nous » de l'accueil */
.qs-titre em { font-style: normal; }
.wp-block-list.qs-points { margin: 28px 0 0; padding: 0; }
.wp-block-image.contact__photo.qs-fondateur__photo { margin: 0 0 22px 8px; }
.qs-fondateur > .wp-block-buttons { margin-top: 22px; }
.qs-fondateur .bouton > .wp-block-button__link { margin-top: 0; }

/* 1.0.28 : vitrine de l'accueil à six offres, visuels un peu moins hauts */
.vitrine--superpose .wp-block-image.projet__visuel { height: clamp(300px, 36vw, 460px); }
.vitrine--superpose .projet__visuel--rs img { object-position: 50% 62%; }
@media (max-width: 760px) { .vitrine--superpose .wp-block-image.projet__visuel { height: 420px; } }

/* 1.0.29 : grand titre, médaillon de l'oiseau au bout de la première ligne */
.wp-block-image.affiche__medaillon { margin: 0 0 0 .04em; }
.wp-block-image.affiche__medaillon img { width: 100%; height: 100%; max-width: none; object-fit: cover; }