/* ==========================================================================
   COLETTE — Feuille de style unique
   Conforme à la charte graphique (marketing/charte/COLETTE_CHARTEGRAPHIQUE.pdf)
   Pensée pour un portage WordPress : variables, classes utilitaires, blocs.
   ========================================================================== */

/* ---------- 1. FONTES ---------- */
@font-face{font-family:"Season Mix";src:url("../fonts/SeasonMix-Bold.woff2") format("woff2"),url("../fonts/SeasonMix-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Season Serif";src:url("../fonts/SeasonSerif-Bold.woff2") format("woff2"),url("../fonts/SeasonSerif-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Pitch Sans";src:url("../fonts/PitchSans-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Pitch Sans";src:url("../fonts/PitchSans-Medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Pitch Sans";src:url("../fonts/PitchSans-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Circular Std";src:url("../fonts/CircularStd-Book.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Circular Std";src:url("../fonts/CircularStd-BookItalic.woff") format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Circular Std";src:url("../fonts/CircularStd-Medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Circular Std";src:url("../fonts/CircularStd-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Lyyra";src:url("../fonts/LyyraExtended-Medium.woff2") format("woff2"),url("../fonts/LyyraExtended-Medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Lyyra";src:url("../fonts/LyyraExtended-Bold.woff2") format("woff2"),url("../fonts/LyyraExtended-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}

/* ---------- 2. TOKENS ---------- */
:root{
  /* Palette charte — 01 → 06, + 07 extension 2026 */
  --creme-clair:#f9f2e8;
  --creme:#f3e7d4;
  --beige:#ead6bb;
  --noir-chaud:#2d2825;
  --noir:#000000;
  --violet:#7e95f8;
  --bleu-electrique:#1b2a6e;

  /* Dérivés d'usage (uniquement des opacités de la palette) */
  --texte:var(--noir-chaud);
  --texte-doux:rgba(45,40,37,.68);
  --trait:rgba(45,40,37,.16);
  --trait-fort:rgba(45,40,37,.32);
  --violet-voile:rgba(126,149,248,.14);

  /* Typographies */
  --f-titre:"Season Mix","Times New Roman",serif;
  --f-titre-serif:"Season Serif","Times New Roman",serif;
  --f-sur:"Pitch Sans","Courier New",monospace;
  --f-texte:"Circular Std",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-chiffre:"Lyyra","Circular Std",sans-serif;

  /* Échelle */
  --t-xs:.75rem; --t-sm:.875rem; --t-md:1.0625rem; --t-lg:1.25rem;
  --t-xl:1.5rem; --t-2xl:2rem; --t-3xl:2.75rem; --t-4xl:4rem;

  /* Espacements */
  --e-1:.25rem; --e-2:.5rem; --e-3:.75rem; --e-4:1rem; --e-5:1.5rem;
  --e-6:2rem; --e-7:3rem; --e-8:4rem; --e-9:6rem; --e-10:8rem;

  --largeur:1200px;
  --largeur-etroite:760px;
  --rayon:2px;          /* charte sobre : angles quasi vifs */
  --rayon-pilule:999px;
  --rayon-carte:18px;    /* écart volontaire à la charte, sur les cartes uniquement */

  /* Forme du séparateur en vague entre blocs de couleur (voir section 4).
     --vague-h est réutilisée à la fois pour la hauteur de la vague et pour la
     réserve de padding qui l'accueille : les deux valeurs ne peuvent donc pas
     se désynchroniser, ce qui évite qu'elle morde sur le texte du bloc voisin. */
  --vague:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0,58 C260,14 520,14 760,54 C1000,94 1220,26 1440,46 L1440,100 L0,100 Z'/%3E%3C/svg%3E");
  --vague-h:clamp(10px,1.5vw,18px);

  /* Grain scintillant (héros + cartes) : bruit fractal désaturé et contrasté */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--creme-clair);
  color:var(--texte);
  font-family:var(--f-texte);
  font-size:var(--t-md);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  font-synthesis:none;
}
img{max-width:100%;height:auto;display:block}
.logo img,.pied-marque img{width:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--violet);color:var(--creme-clair)}

h1,h2,h3,h4{
  font-family:var(--f-titre);
  font-weight:700;
  color:var(--noir);
  line-height:1.06;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.4rem,5.6vw,var(--t-4xl))}
h2{font-size:clamp(2rem,4.2vw,var(--t-3xl))}
h3{font-size:var(--t-xl);line-height:1.15}
h4{font-size:var(--t-lg);line-height:1.2}
/* Le mix & match : un mot en Season Serif italique à l'intérieur d'un titre */
h1 em,h2 em,h3 em,.mix{
  font-family:var(--f-titre-serif);
  font-style:normal;
  font-weight:700;
  letter-spacing:-.005em;
}
p{margin:0 0 var(--e-4)}
p:last-child{margin-bottom:0}

/* Sur-titre — Pitch Sans capitales très espacées */
.sur-titre{
  font-family:var(--f-sur);
  font-weight:500;
  font-size:var(--t-xs);
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--texte-doux);
  margin:0 0 var(--e-4);
}
.chapo{font-size:var(--t-lg);line-height:1.55;color:var(--texte-doux)}
.note{font-size:var(--t-sm);color:var(--texte-doux);font-style:italic}
strong{font-weight:700}

/* ---------- 4. STRUCTURE ---------- */
.contenu{width:min(100% - 2.5rem,var(--largeur));margin-inline:auto}
.contenu-etroit{width:min(100% - 2.5rem,var(--largeur-etroite));margin-inline:auto}
.section{
  position:relative;
  padding-block:clamp(var(--e-5),3vw,var(--e-6));
  /* Réserve réelle (jamais du texte) pour que la vague de la section suivante
     puisse déborder ici sans jamais recouvrir de contenu. */
  padding-bottom:calc(clamp(var(--e-5),3vw,var(--e-6)) + var(--vague-h));
}
.section-courte{padding-block:var(--e-4);padding-bottom:calc(var(--e-4) + var(--vague-h))}
.entete-section{max-width:44rem;margin:0 auto var(--e-5);text-align:center}
.entete-section .chapo{margin-top:var(--e-4)}

/* Fonds de section — alternance charte */
.fond-creme{background:var(--creme)}
.fond-beige{background:var(--beige)}
.fond-noir{background:var(--noir-chaud);color:var(--creme-clair)}
.fond-noir h1,.fond-noir h2,.fond-noir h3,.fond-noir h4{color:var(--creme-clair)}
.fond-noir .sur-titre,.fond-noir .chapo{color:rgba(249,242,232,.72)}
.fond-violet{background:var(--violet);color:var(--creme-clair)}
.fond-violet h1,.fond-violet h2,.fond-violet h3{color:var(--creme-clair)}
.fond-violet .sur-titre,.fond-violet .chapo{color:rgba(249,242,232,.86)}

/* Séparateurs en vague entre blocs de couleur — chaque section peint, dans sa
   propre couleur de fond, une vague qui déborde sur le bloc précédent : plus de
   ligne droite à la jonction. Invisible quand les deux blocs partagent la même
   couleur. */
.section::before{
  content:"";position:absolute;left:0;right:0;pointer-events:none;
  top:calc(-1 * var(--vague-h) - 1px);height:calc(var(--vague-h) + 2px);
  background:var(--creme-clair);
  -webkit-mask-image:var(--vague);mask-image:var(--vague);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
.section.fond-creme::before{background:var(--creme)}
.section.fond-beige::before{background:var(--beige)}
.section.fond-noir::before{background:var(--noir-chaud)}
.section.fond-violet::before{background:var(--violet)}

/* Grilles */
.grille{display:grid;gap:var(--e-5)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-large{gap:var(--e-8)}
.aligner-centre{align-items:center}

/* Utilitaires */
.centre{text-align:center}
.rangee{display:flex;gap:var(--e-3);flex-wrap:wrap}
.rangee-centre{display:flex;gap:var(--e-3);flex-wrap:wrap;justify-content:center}
.rangee-espacee{display:flex;gap:var(--e-5);flex-wrap:wrap;align-items:flex-end;justify-content:space-between}
.mt-3{margin-top:var(--e-3)}.mt-4{margin-top:var(--e-4)}.mt-5{margin-top:var(--e-5)}
.mt-6{margin-top:var(--e-6)}.mt-7{margin-top:var(--e-7)}.mt-8{margin-top:var(--e-8)}
.mb-6{margin-bottom:var(--e-6)}.mb-8{margin-bottom:var(--e-8)}

/* ---------- 5. BOUTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--f-sur);font-weight:500;font-size:var(--t-xs);
  text-transform:uppercase;letter-spacing:.14em;
  padding:1em 1.65em;border:1px solid transparent;border-radius:var(--rayon-pilule);
  cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.btn .fleche{transition:transform .18s ease}
.btn:hover .fleche{transform:translateX(3px)}
.btn-principal{background:var(--violet);color:var(--creme-clair);border-color:var(--violet)}
.btn-principal:hover{background:var(--noir-chaud);border-color:var(--noir-chaud)}
.btn-fantome{background:transparent;color:var(--noir-chaud);border-color:var(--trait-fort)}
.btn-fantome:hover{background:var(--noir-chaud);color:var(--creme-clair);border-color:var(--noir-chaud)}
.btn-clair{background:var(--creme-clair);color:var(--noir-chaud);border-color:var(--creme-clair)}
.btn-clair:hover{background:var(--violet);color:var(--creme-clair);border-color:var(--violet)}
.btn-contour-clair{background:transparent;color:var(--creme-clair);border-color:rgba(249,242,232,.42)}
.btn-contour-clair:hover{background:var(--creme-clair);color:var(--noir-chaud)}
.btn-lg{padding:1.15em 2em;font-size:var(--t-sm)}
.btn-sm{padding:.7em 1.15em;letter-spacing:.12em}
.fond-noir .btn-fantome,.fond-violet .btn-fantome{color:var(--creme-clair);border-color:rgba(249,242,232,.42)}
.fond-noir .btn-fantome:hover,.fond-violet .btn-fantome:hover{background:var(--creme-clair);color:var(--noir-chaud)}

/* ---------- 6. EN-TÊTE ---------- */
.entete{
  position:sticky;top:0;z-index:60;
  background:rgba(249,242,232,.92);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--trait);
}
.entete .contenu{display:flex;align-items:center;justify-content:space-between;gap:var(--e-5);min-height:76px}
.logo{display:flex;align-items:center}
.logo img{height:30px;width:auto}
.nav-liste{display:flex;align-items:center;gap:var(--e-5);list-style:none;margin:0;padding:0}
.nav-liste a:not(.btn){
  font-family:var(--f-sur);font-size:var(--t-xs);font-weight:500;
  text-transform:uppercase;letter-spacing:.13em;color:var(--texte-doux);
  white-space:nowrap;
  padding-block:.4em;border-bottom:1px solid transparent;transition:color .18s,border-color .18s;
}
.nav-liste .btn{white-space:nowrap}
.nav-liste a:not(.btn):hover,.nav-liste a[aria-current="page"]{color:var(--noir);border-color:var(--violet)}
.bascule-nav{display:none;background:none;border:0;padding:.5rem;cursor:pointer}
.bascule-nav span,.bascule-nav span::before,.bascule-nav span::after{
  display:block;width:22px;height:1.5px;background:var(--noir-chaud);content:"";transition:transform .2s,opacity .2s}
.bascule-nav span::before{transform:translateY(-7px)}
.bascule-nav span::after{transform:translateY(5.5px)}
.bascule-nav[aria-expanded="true"] span{background:transparent}
.bascule-nav[aria-expanded="true"] span::before{transform:rotate(45deg)}
.bascule-nav[aria-expanded="true"] span::after{transform:rotate(-45deg) translateY(-1px)}

/* ---------- 7. FIL D'ARIANE ---------- */
.ariane{
  font-family:var(--f-sur);font-size:var(--t-xs);text-transform:uppercase;
  letter-spacing:.14em;color:var(--texte-doux);padding-block:var(--e-5) 0;
}
.ariane a:hover{color:var(--noir)}
.ariane .sep{margin-inline:.6em;opacity:.5}

/* ---------- 8. HERO ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(var(--e-7),7vw,var(--e-9)) clamp(var(--e-7),5vw,var(--e-8))}
.hero::before{
  content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background-image:var(--grain);
  background-size:160px 160px;
  opacity:.5;mix-blend-mode:multiply;
  animation:scintiller 1.2s steps(4) infinite;
}
.hero::after{
  content:"";position:absolute;right:2%;top:14%;width:min(30vw,340px);aspect-ratio:1;
  background:radial-gradient(circle,rgba(126,149,248,.26),rgba(126,149,248,.08) 62%,transparent 71%);
  border-radius:50%;z-index:0;
}
.hero .contenu{position:relative;z-index:1}
.hero-texte{max-width:56rem}
.hero h1{margin-bottom:var(--e-5)}
.hero .chapo{max-width:44rem;font-size:clamp(1.125rem,2vw,1.35rem)}
.hero-actions{display:flex;gap:var(--e-3);flex-wrap:wrap;margin-top:var(--e-7)}

/* ---------- 9. CARTES ---------- */
.carte{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  background-color:var(--creme-clair);
  border:1px solid var(--trait);
  border-radius:var(--rayon-carte);
  padding:var(--e-6);
  transition:border-color .2s ease,transform .2s ease;
}
.carte > *{position:relative;z-index:1}
.carte .btn{margin-top:auto}
.fond-creme .carte,.fond-beige .carte{background-color:var(--creme-clair)}
.fond-noir .carte{background-color:rgba(249,242,232,.06);border-color:rgba(249,242,232,.18)}
.carte:hover{border-color:var(--trait-fort)}
.carte h3,.carte h4{margin-bottom:var(--e-3)}
.carte p{color:var(--texte-doux);font-size:var(--t-sm);line-height:1.7}
.fond-noir .carte p{color:rgba(249,242,232,.75)}

/* Grain scintillant : réservé aux cartes de ces sections précises, à la demande
   d'Alicia — pas un comportement par défaut de .carte. Chaque id est posé
   directement sur le bloc Gutenberg concerné (pas sur toute la page), pour ne
   pas déborder sur les autres cartes du même article.
   #blocages           accueil — « Prendre la parole sur LinkedIn est tout un art. »
   #methode            accueil — « 4 étapes pour faire entendre votre voix sur LinkedIn »
   #coaching-methode   coaching-formation-linkedin — « Comment se déroule un coaching... »
   #algorithme         conseil-strategique-linkedin — « Comprendre l'algorithme LinkedIn »
   #personal-branding  ghostwriting-linkedin — « Le personal branding LinkedIn qui amplifie... » */
#blocages .carte::before,
#methode .carte::before,
#coaching-methode .carte::before,
#algorithme .carte::before,
#personal-branding .carte::before{
  content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background-image:var(--grain);
  background-size:110px 110px;
  opacity:.4;mix-blend-mode:multiply;
  animation:scintiller 1.2s steps(4) infinite;
}
#algorithme .carte::before,
#personal-branding .carte::before{mix-blend-mode:soft-light;opacity:.5}

/* Balayage violet animé : réservé à « 4 étapes pour faire entendre votre voix
   sur LinkedIn », pas un comportement par défaut de .carte. */
#methode .carte{
  background-image:linear-gradient(115deg,transparent 35%,rgba(126,149,248,.22) 48%,rgba(126,149,248,.32) 50%,rgba(126,149,248,.22) 52%,transparent 65%);
  background-repeat:no-repeat;
  background-size:260% 100%;
  background-position:160% 0;
  animation:carte-scintille 5s ease-in-out infinite;
}
@keyframes carte-scintille{
  0%{background-position:160% 0}
  35%{background-position:-160% 0}
  100%{background-position:-160% 0}
}

/* Carte cas client — variante illustrée : bandeau portrait sombre, chiffres clés,
   lien de lecture. Chiffres en Lyyra et lien en Pitch Sans réutilisent les classes
   .chiffre/.chiffre-libelle et .fleche déjà en place ailleurs sur le site. Le bandeau
   est en noir chaud (fond dominant autorisé par la charte) et non en violet/bleu
   électrique, réservés à l'accent : le halo radial en violet suffit à faire le lien. */
.carte-cas-client{
  display:flex;flex-direction:column;
  background:var(--creme-clair);
  border:1px solid var(--trait);
  border-radius:var(--rayon-carte);
  overflow:hidden;
  transition:border-color .2s ease;
}
.carte-cas-client:hover{border-color:var(--trait-fort)}
/* Grille de la vitrine cas clients sur la page d'accueil : auto-fit centre les cartes
   qu'il y en ait une seule (en attendant les prochains vrais cas) ou deux. */
.grille-cas-clients-accueil{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,380px));
  gap:var(--e-5);justify-content:center;
}
.ccc-entete{position:relative;overflow:hidden;padding:var(--e-5) var(--e-5) var(--e-6);background:var(--noir-chaud)}
.ccc-entete::before{
  content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background-image:var(--grain);
  background-size:110px 110px;
  opacity:.4;mix-blend-mode:multiply;
  animation:scintiller 1.2s steps(4) infinite;
}
.ccc-entete::after{
  content:"";position:absolute;right:-18%;top:-30%;width:70%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(126,149,248,.32),rgba(126,149,248,.08) 60%,transparent 72%);
  border-radius:50%;pointer-events:none;
}
.ccc-ligne-haut{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
.ccc-portrait{width:64px;height:64px;flex:0 0 64px;border-radius:50%;overflow:hidden;border:2px solid var(--creme-clair);background:var(--beige)}
.ccc-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.ccc-entete .etiquette{background:rgba(249,242,232,.14);color:var(--creme-clair)}
.ccc-nom{position:relative;z-index:1;margin-top:var(--e-5);line-height:1.05;color:var(--creme-clair);white-space:nowrap}
.ccc-role{
  position:relative;z-index:1;margin-top:var(--e-2);
  font-family:var(--f-sur);font-weight:500;font-size:var(--t-xs);
  text-transform:uppercase;letter-spacing:.12em;color:rgba(249,242,232,.55);
}
.ccc-corps{padding:var(--e-6);display:flex;flex-direction:column;gap:var(--e-4);flex:1}
.ccc-resultat{font-weight:700;color:var(--noir);font-size:var(--t-md);line-height:1.4;margin:0}
.ccc-meta{font-size:var(--t-sm);color:var(--texte-doux);margin:0}
.ccc-stats{display:flex;flex-wrap:wrap;gap:var(--e-5) var(--e-6);padding-top:var(--e-4);border-top:1px dashed var(--trait-fort)}
.ccc-stats .chiffre{font-size:var(--t-2xl)}
.ccc-lien{
  margin-top:auto;align-self:flex-start;
  font-family:var(--f-sur);font-size:var(--t-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;color:var(--violet);
  display:inline-flex;align-items:center;gap:.5em;
}
.ccc-lien .fleche{transition:transform .18s ease}
.ccc-lien:hover .fleche{transform:translateX(3px)}
.ccc-lien:hover{color:var(--bleu-electrique)}

/* Carte chiffre — Lyyra */
.carte-chiffre{text-align:center;padding-block:var(--e-7)}
.chiffre{font-family:var(--f-chiffre);font-weight:500;font-size:clamp(2.5rem,5vw,3.5rem);line-height:1;color:var(--violet);letter-spacing:.01em}
.chiffre-libelle{
  font-family:var(--f-sur);font-size:var(--t-xs);text-transform:uppercase;
  letter-spacing:.16em;color:var(--texte-doux);margin-top:var(--e-4);display:block;line-height:1.5;
}
.fond-noir .chiffre{color:var(--creme)}
.fond-noir .chiffre-libelle{color:rgba(249,242,232,.7)}

/* Carte numérotée (méthode) */
.numero{font-family:var(--f-chiffre);font-weight:500;font-size:var(--t-2xl);color:var(--violet);line-height:1;display:block}

/* Frise chronologique — étapes reliées par une ligne verticale (pages services).
   Contour par défaut ; le numéro et la ligne s'allument en violet plein au fil du
   scroll (IntersectionObserver dans colette.js) et restent aussi actifs au survol.
   Le h3 partage la hauteur exacte du numéro (2.8rem) et centre son texte dedans :
   ça aligne le centre du cercle sur le titre quelle que soit la police, sans
   réglage au pixel. min-height sur .frise-texte, calé sur l'étape la plus longue
   (« Optimisation du profil LinkedIn »), pour que les 5 lignes fassent la même
   longueur. */
.frise{list-style:none;margin:0;padding:0}
.frise-etape{display:flex;gap:var(--e-6)}
.frise-jalon{display:flex;flex-direction:column;align-items:center;flex:0 0 2.8rem}
.frise-numero{
  width:2.8rem;height:2.8rem;flex:0 0 2.8rem;border-radius:50%;
  background:transparent;border:1.5px solid var(--trait-fort);color:var(--texte-doux);
  display:grid;place-items:center;
  font-family:var(--f-chiffre);font-weight:500;font-size:var(--t-lg);
  transition:background-color .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease;
}
.frise-ligne{flex:1;width:1px;background:var(--trait-fort);margin-block:var(--e-2);transition:background-color .3s ease}
.frise-etape:last-child .frise-ligne{display:none}
.frise-etape.vue .frise-numero,.frise-etape:hover .frise-numero{background:var(--violet);border-color:var(--violet);color:var(--creme-clair)}
.frise-etape.vue .frise-ligne{background:var(--violet)}
.frise-etape.actif .frise-numero{box-shadow:0 0 0 6px var(--violet-voile)}
.frise-texte{flex:1;min-height:9.5rem;padding-bottom:var(--e-5)}
.frise-etape:last-child .frise-texte{min-height:0;padding-bottom:0}
.frise-texte h3{display:flex;align-items:center;min-height:2.8rem;margin:0 0 var(--e-2)}
.frise-texte p{color:var(--texte-doux);font-size:var(--t-sm);line-height:1.7}

/* Étiquettes */
.etiquette{
  display:inline-block;font-family:var(--f-sur);font-size:var(--t-xs);font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;color:var(--noir-chaud);
  background:var(--beige);border-radius:var(--rayon-pilule);padding:.42em 1em;
}
.etiquette-violet{background:var(--violet);color:var(--creme-clair)}
.fond-beige .etiquette{background:var(--creme-clair)}

/* Listes à puces charte */
.liste-puces{list-style:none;margin:var(--e-4) 0 0;padding:0}
.liste-puces li{
  position:relative;padding-left:1.9em;margin-bottom:.6em;
  font-size:var(--t-sm);color:var(--texte-doux);line-height:1.6;
}
.liste-puces li::before{
  content:"";position:absolute;left:0;top:.42em;width:.85em;height:.85em;
  background:url("../img/puces/puce-2-noir.png") center/contain no-repeat;opacity:.75;
}
.fond-noir .liste-puces li::before{background-image:url("../img/puces/puce-2-creme.png")}

/* Bande de mots-clés défilante — mur de texte plein écran au-dessus du titre de la
   section Services, inspiré de centreviasana.com. Violet de la charte par défaut,
   bleu électrique au survol comme le CTA de colette-maquette.vercel.app. Chaque ligne
   défile indépendamment et ne s'arrête que si on survole un mot de CETTE ligne. */
.bande-mots{overflow:hidden;width:100%;padding-block:var(--e-6);margin-bottom:var(--e-7)}
.bande-mots-ligne{overflow:hidden;white-space:nowrap}
.bande-mots-ligne + .bande-mots-ligne{margin-top:var(--e-5)}
.bande-mots-piste{
  display:inline-block;white-space:nowrap;margin:0;
  font-family:var(--f-titre);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.75rem,7vw,5.5rem);line-height:1;letter-spacing:-.01em;
  animation:defiler-mots 150s linear infinite;
}
.bande-mots-ligne--inverse .bande-mots-piste{animation-direction:reverse;animation-duration:165s}
.bande-mots-ligne:hover .bande-mots-piste{animation-play-state:paused}
.bande-mots-piste span{color:var(--violet);transition:color .25s ease}
.bande-mots-piste span:hover{color:var(--bleu-electrique)}
@keyframes defiler-mots{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes scintiller{
  0%{transform:translate(0,0)}
  25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-2%)}
  75%{transform:translate(-2%,-3%)}
  100%{transform:translate(0,0)}
}

/* Bande de visages clients défilante — même mécanique que sur skaale.fr : la liste de
   portraits est dupliquée deux fois et glisse en boucle continue, sans à-coup. */
.bande-clients{overflow:hidden}
.bande-clients-defilement{
  overflow:hidden;margin-top:var(--e-6);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.bande-clients-piste{display:flex;align-items:center;gap:var(--e-5);width:max-content;animation:defiler-visages 40s linear infinite}
.bande-clients-defilement:hover .bande-clients-piste{animation-play-state:paused}
.visage-client{
  display:block;width:110px;height:110px;flex:0 0 110px;border-radius:50%;overflow:hidden;
  border:1px solid var(--trait);background:var(--beige);
}
.visage-client img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes defiler-visages{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 10. TÉMOIGNAGES ---------- */
.temoignage{
  background:var(--creme-clair);border:1px solid var(--trait);border-radius:var(--rayon);
  padding:var(--e-6);display:flex;flex-direction:column;justify-content:space-between;gap:var(--e-5);
}
.fond-creme .temoignage,.fond-beige .temoignage{background:var(--creme-clair)}
.citation{font-family:var(--f-titre-serif);font-style:normal;font-size:var(--t-lg);line-height:1.45;color:var(--noir)}
.citation::before{content:"« "}.citation::after{content:" »"}
.auteur{display:flex;align-items:center;gap:var(--e-3)}
.avatar{
  width:44px;height:44px;flex:0 0 44px;border-radius:50%;
  background:var(--violet);color:var(--creme-clair);
  display:grid;place-items:center;
  font-family:var(--f-sur);font-size:var(--t-xs);letter-spacing:.06em;
}
.avatar-photo{background:var(--beige);overflow:hidden}
.avatar-photo img{width:100%;height:100%;object-fit:cover;display:block}
.auteur .nom{display:block;font-weight:500;font-size:var(--t-sm)}
.auteur .role{display:block;font-family:var(--f-sur);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--texte-doux)}

/* ---------- 11. FAQ ---------- */
.faq{border-top:1px solid var(--trait)}
.faq-item{border-bottom:1px solid var(--trait)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:var(--e-5) 2.5rem var(--e-5) 0;position:relative;
  font-family:var(--f-titre);font-size:var(--t-lg);color:var(--noir);line-height:1.3;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";position:absolute;right:.35rem;top:50%;width:12px;height:12px;
  border-right:1.5px solid var(--noir-chaud);border-bottom:1.5px solid var(--noir-chaud);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.faq-item[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq-reponse{padding:0 2.5rem var(--e-5) 0;color:var(--texte-doux);font-size:var(--t-sm);line-height:1.75}

/* ---------- 12. BLOC CTA ---------- */
.bloc-cta{
  background:var(--noir-chaud);color:var(--creme-clair);
  border-radius:var(--rayon);padding:clamp(var(--e-7),6vw,var(--e-9)) var(--e-6);
  text-align:center;position:relative;overflow:hidden;
}
.bloc-cta::before{
  content:"";position:absolute;inset:auto auto -30% -10%;width:340px;aspect-ratio:1;
  background:radial-gradient(circle,rgba(126,149,248,.34),transparent 68%);
}
.bloc-cta > *{position:relative}
.bloc-cta h2{color:var(--creme-clair);max-width:22ch;margin-inline:auto}
.bloc-cta p{color:rgba(249,242,232,.78);max-width:46ch;margin:var(--e-4) auto var(--e-7)}
.bloc-cta .sur-titre{color:rgba(249,242,232,.7)}

/* ---------- 13. VIDÉO ---------- */
.lien-video{display:block;position:relative;border-radius:var(--rayon);overflow:hidden;border:1px solid rgba(249,242,232,.2)}
.lien-video img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .4s ease}
.lien-video:hover img{transform:scale(1.03)}
.lecture{
  position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);
  width:66px;height:66px;border-radius:50%;background:var(--violet);display:grid;place-items:center;
}
.lecture::after{content:"";border-left:16px solid var(--creme-clair);border-block:10px solid transparent;margin-left:4px}
.legende-video{
  font-family:var(--f-sur);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.16em;
  color:var(--texte-doux);text-align:center;margin-top:var(--e-3);
}
.fond-noir .legende-video{color:rgba(249,242,232,.65)}

/* ---------- 14. ILLUSTRATIONS & ORNEMENTS ---------- */
.illustration{width:min(100%,300px)}
.illustration-fond{position:absolute;opacity:.9;pointer-events:none}
.ornement{display:block;width:34px;margin:0 auto var(--e-5)}
.separateur-puce{display:flex;align-items:center;gap:var(--e-4);color:var(--trait)}
.separateur-puce::before,.separateur-puce::after{content:"";flex:1;height:1px;background:var(--trait)}
.separateur-puce img{width:18px}

/* ---------- 15. FORMULAIRES ---------- */
.champ{margin-bottom:var(--e-5)}
.champ label{
  display:block;font-family:var(--f-sur);font-size:var(--t-xs);text-transform:uppercase;
  letter-spacing:.14em;color:var(--texte-doux);margin-bottom:var(--e-2);
}
.champ input,.champ select,.champ textarea{
  width:100%;font-family:var(--f-texte);font-size:var(--t-md);color:var(--texte);
  background:var(--creme-clair);border:1px solid var(--trait-fort);border-radius:var(--rayon);
  padding:.85em 1em;transition:border-color .18s ease;
}
.champ textarea{min-height:150px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--violet)}
.champ input::placeholder,.champ textarea::placeholder{color:rgba(45,40,37,.35)}
.case{display:flex;gap:var(--e-3);align-items:flex-start;font-size:var(--t-sm);color:var(--texte-doux)}
.case input{margin-top:.35em;accent-color:var(--violet)}
.case a{text-decoration:underline;text-underline-offset:2px}

/* ---------- 16. FILTRES BLOG ---------- */
.pilule{
  font-family:var(--f-sur);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.13em;
  padding:.62em 1.15em;border:1px solid var(--trait-fort);border-radius:var(--rayon-pilule);
  color:var(--texte-doux);transition:all .18s ease;
}
.pilule:hover,.pilule[aria-current="true"]{background:var(--noir-chaud);color:var(--creme-clair);border-color:var(--noir-chaud)}
.carte-article{display:flex;flex-direction:column;gap:var(--e-3)}
.carte-article h3{font-size:var(--t-lg)}
.carte-article h3 a:hover{color:var(--violet)}
.visuel-article{
  aspect-ratio:16/10;background:var(--beige);border-radius:var(--rayon);
  display:grid;place-items:center;margin:calc(var(--e-6) * -1) calc(var(--e-6) * -1) var(--e-5);
  border-bottom:1px solid var(--trait);
}
.visuel-article img{width:100%;height:100%;object-fit:cover;display:block}
.visuel-article a{display:block;width:100%;height:100%}
/* Repli sans photo : le monogramme de la charte, discret, au centre. */
.visuel-article.sans-photo{background:var(--beige)}
.visuel-article.sans-photo img{
  width:34%;max-width:110px;height:auto;object-fit:contain;opacity:.55;margin:auto
}
.meta-article{font-family:var(--f-sur);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--texte-doux)}

/* ---------- 17. ARTICLE ---------- */
.grille-article{display:grid;grid-template-columns:230px 1fr;gap:var(--e-8);align-items:start}
.sommaire{position:sticky;top:110px;border-left:1px solid var(--trait);padding-left:var(--e-5)}
.sommaire ul{list-style:none;margin:0;padding:0}
.sommaire li{margin-bottom:.7em}
.sommaire a{font-size:var(--t-sm);color:var(--texte-doux);line-height:1.4;display:block}
.sommaire a:hover{color:var(--violet)}
.corps-article{max-width:68ch}
.corps-article h2{font-size:var(--t-2xl);margin:var(--e-8) 0 var(--e-4)}
.corps-article h3{font-size:var(--t-xl);margin:var(--e-6) 0 var(--e-3)}
.corps-article p{margin-bottom:var(--e-4);line-height:1.8}
.corps-article ul{padding-left:0;list-style:none;margin:var(--e-5) 0}
.corps-article ul li{position:relative;padding-left:1.9em;margin-bottom:.8em;line-height:1.75}
.corps-article ul li::before{content:"";position:absolute;left:0;top:.5em;width:.8em;height:.8em;background:url("../img/puces/puce-11-noir.png") center/contain no-repeat;opacity:.75}
.corps-article blockquote{
  margin:var(--e-6) 0;padding:var(--e-5) var(--e-6);background:var(--creme);
  border-left:3px solid var(--violet);border-radius:var(--rayon);
  font-family:var(--f-titre-serif);font-size:var(--t-lg);color:var(--noir);
}
.corps-article code{font-family:var(--f-sur);font-size:.9em;background:var(--beige);padding:.15em .45em;border-radius:var(--rayon)}
.banniere-article{
  aspect-ratio:16/10;background:var(--beige);border-radius:var(--rayon);
  display:grid;place-items:center;overflow:hidden
}
.banniere-article img{width:100%;height:100%;object-fit:cover;display:block}
.banniere-article.sans-photo img{width:34%;max-width:130px;height:auto;object-fit:contain;opacity:.55}

/* ---------- 18. LÉGAL ---------- */
.corps-legal h2{font-size:var(--t-xl);margin:var(--e-7) 0 var(--e-3)}
.corps-legal h3{font-size:var(--t-md);font-family:var(--f-texte);font-weight:700;margin:var(--e-5) 0 var(--e-2)}
.corps-legal p,.corps-legal li{color:var(--texte-doux);font-size:var(--t-sm);line-height:1.8}
.corps-legal ul{padding-left:1.2em;margin:var(--e-3) 0}
.corps-legal a{text-decoration:underline;text-underline-offset:2px}
.a-completer{background:var(--violet-voile);border-bottom:1px dashed var(--violet);padding:.05em .3em;font-style:italic}
.encart{border:1px dashed var(--trait-fort);border-radius:var(--rayon);padding:var(--e-5);background:var(--creme)}

/* Placeholder logos presse */
.logo-presse{
  aspect-ratio:5/2;border:1px solid var(--trait);border-radius:var(--rayon);
  display:grid;place-items:center;font-family:var(--f-sur);font-size:var(--t-xs);
  text-transform:uppercase;letter-spacing:.16em;color:var(--texte-doux);background:var(--creme-clair);
}

/* ---------- 19. PIED DE PAGE ---------- */
.pied{background:var(--noir-chaud);color:var(--creme-clair);padding-block:var(--e-8) var(--e-6);margin-top:0}
.pied-grille{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--e-7)}
.pied-marque img{height:28px;width:auto;margin-bottom:var(--e-4)}
.pied-marque p{color:rgba(249,242,232,.7);font-size:var(--t-sm);max-width:34ch;line-height:1.7}
.pied h4{
  font-family:var(--f-sur);font-size:var(--t-xs);font-weight:500;color:var(--creme-clair);
  text-transform:uppercase;letter-spacing:.18em;margin-bottom:var(--e-4);
}
.pied ul{list-style:none;margin:0;padding:0}
.pied li{margin-bottom:.65em}
.pied li a{font-size:var(--t-sm);color:rgba(249,242,232,.7);transition:color .18s}
.pied li a:hover{color:var(--violet)}
.pied-bas{
  display:flex;justify-content:space-between;gap:var(--e-4);flex-wrap:wrap;
  border-top:1px solid rgba(249,242,232,.16);margin-top:var(--e-8);padding-top:var(--e-5);
  font-family:var(--f-sur);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.14em;
  color:rgba(249,242,232,.55);
}

/* ---------- 20. RESPONSIVE ---------- */
@media (max-width:980px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .grille-article{grid-template-columns:1fr}
  .sommaire{position:static;border-left:0;border-top:1px solid var(--trait);padding:var(--e-5) 0 0}
  .pied-grille{grid-template-columns:1fr 1fr;gap:var(--e-6)}
}
/* Palier intermédiaire : on resserre avant de basculer en tiroir. */
@media (max-width:1240px){
  .nav-liste{gap:var(--e-4)}
  .nav-liste a:not(.btn){letter-spacing:.1em}
  .nav-liste .btn{padding-inline:1.1em}
}

/* Tiroir : dès que la barre ne peut plus tenir sur une seule ligne. */
@media (max-width:1080px){
  .bascule-nav{display:block;position:relative;z-index:2}
  .nav{
    position:absolute;left:0;right:0;top:100%;
    background:var(--creme-clair);
    border-bottom:1px solid var(--trait);
    box-shadow:0 18px 30px -22px rgba(45,40,37,.45);
    padding:var(--e-4) 1.25rem var(--e-5);
    display:none;
    max-height:calc(100dvh - 76px);overflow-y:auto;
  }
  .nav[data-ouvert="true"]{display:block}
  .nav-liste{flex-direction:column;align-items:stretch;gap:0}
  .nav-liste li + li{border-top:1px solid var(--trait)}
  .nav-liste a:not(.btn){
    display:block;padding-block:1.05em;font-size:var(--t-sm);letter-spacing:.14em;
    border-bottom:0;color:var(--noir-chaud);
  }
  .nav-liste a:not(.btn):hover,
  .nav-liste a[aria-current="page"]{color:var(--violet)}
  .nav-liste li:has(.btn){border-top:0}
  .nav-liste .btn{justify-content:center;margin-top:var(--e-4);width:100%}
}
@media (max-width:640px){
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .visuel-article{margin-inline:calc(var(--e-5) * -1)}
  .carte{padding:var(--e-5)}
  .hero::after,.hero::before,.carte::before{display:none}
  .pied-grille{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto}
}

/* ==========================================================================
   21. INTÉGRATION WORDPRESS
   Blocs Gutenberg, admin bar, commentaires, pagination, accessibilité.
   ========================================================================== */

/* Accessibilité : lien d'évitement et texte hors écran */
.aller-au-contenu{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--noir-chaud);color:var(--creme-clair);
  font-family:var(--f-sur);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.14em;
  padding:1em 1.5em;
}
.aller-au-contenu:focus{left:0}
.hors-ecran,.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap
}
:where(a,button,summary,input,select,textarea):focus-visible{
  outline:2px solid var(--violet);outline-offset:3px;border-radius:2px
}

/* Barre d'administration */
.admin-bar .entete{top:32px}
@media (max-width:782px){.admin-bar .entete{top:46px}}

/* Menus WordPress : le pied de page rend des <ul> générés */
.pied .menu,.pied ul{list-style:none;margin:0;padding:0}

/* Contenu composé dans l'éditeur de blocs */
.contenu-blocs > *{margin-block:var(--e-5)}
.contenu-blocs > *:first-child{margin-top:0}
.contenu-blocs > h2{font-size:var(--t-2xl);margin-top:var(--e-8)}
.contenu-blocs > h3{font-size:var(--t-xl);margin-top:var(--e-6)}
.contenu-blocs p{max-width:68ch}
.contenu-blocs .chapo{max-width:60ch}
.contenu-blocs > .alignwide{width:min(100%,var(--largeur));margin-inline:auto}
.contenu-blocs > .alignfull{
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)
}
.contenu-blocs .wp-block-columns{gap:var(--e-5)}
.contenu-blocs .wp-block-column.carte{flex-basis:auto}
.contenu-blocs .wp-block-image img{border-radius:var(--rayon)}
.contenu-blocs figcaption,.wp-element-caption{
  font-family:var(--f-sur);font-size:var(--t-xs);text-transform:uppercase;
  letter-spacing:.14em;color:var(--texte-doux);text-align:center;margin-top:var(--e-3)
}
.contenu-blocs .wp-block-quote{
  margin:var(--e-6) 0;padding:var(--e-5) var(--e-6);background:var(--creme);
  border-left:3px solid var(--violet);border-radius:var(--rayon);
  font-family:var(--f-titre-serif);font-size:var(--t-lg);color:var(--noir)
}
.contenu-blocs .wp-block-quote p{margin-bottom:var(--e-3)}
.contenu-blocs .wp-block-quote cite{
  font-family:var(--f-sur);font-size:var(--t-xs);font-style:normal;
  text-transform:uppercase;letter-spacing:.14em;color:var(--texte-doux)
}
.contenu-blocs .wp-block-table table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.contenu-blocs .wp-block-table th,.contenu-blocs .wp-block-table td{
  border:1px solid var(--trait);padding:var(--e-3) var(--e-4);text-align:left
}
.contenu-blocs .wp-block-table th{font-family:var(--f-sur);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.12em}
.contenu-blocs .wp-block-separator{border:0;border-top:1px solid var(--trait);margin-block:var(--e-7)}
.contenu-blocs .wp-block-button__link{
  font-family:var(--f-sur);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.14em;
  background:var(--violet);color:var(--creme-clair);border-radius:var(--rayon-pilule);padding:1em 1.65em
}
.contenu-blocs .wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent;color:var(--noir-chaud);border:1px solid var(--trait-fort)
}
.contenu-blocs ul:not(.liste-puces),.contenu-blocs ol{padding-left:1.4em;max-width:68ch}
.contenu-blocs ul:not(.liste-puces) li,.contenu-blocs ol li{margin-bottom:.5em}
.contenu-blocs .wp-block-details{border-bottom:1px solid var(--trait)}
.contenu-blocs .wp-block-details summary{
  cursor:pointer;padding:var(--e-5) 0;font-family:var(--f-titre);font-size:var(--t-lg);color:var(--noir)
}
.image-pleine{border-radius:var(--rayon);margin-bottom:var(--e-7)}

/* Groupes de section composés dans l'éditeur */
.contenu-blocs .section{padding-block:var(--e-7)}
.wp-block-group.fond-creme,.wp-block-group.fond-beige,
.wp-block-group.fond-noir,.wp-block-group.fond-violet{
  padding:clamp(var(--e-6),5vw,var(--e-8));border-radius:var(--rayon)
}

/* Bandes de couleur pleine largeur composées dans l'éditeur.
   Un groupe portant une classe de fond sort du conteneur et reprend la
   respiration d'une section, sans que le rédacteur ait à s'en soucier. */
.contenu-blocs > .wp-block-group.fond-creme,
.contenu-blocs > .wp-block-group.fond-beige,
.contenu-blocs > .wp-block-group.fond-noir,
.contenu-blocs > .wp-block-group.fond-violet{
  position:relative;
  margin-inline:calc(50% - 50vw);
  padding-inline:max(1.25rem, calc(50vw - var(--largeur) / 2));
  padding-block:clamp(var(--e-7),6vw,var(--e-9));
  padding-bottom:calc(clamp(var(--e-7),6vw,var(--e-9)) + var(--vague-h));
  border-radius:0;
}
.contenu-blocs > .wp-block-group.fond-creme::before,
.contenu-blocs > .wp-block-group.fond-beige::before,
.contenu-blocs > .wp-block-group.fond-noir::before,
.contenu-blocs > .wp-block-group.fond-violet::before{
  content:"";position:absolute;left:0;right:0;pointer-events:none;
  top:calc(-1 * var(--vague-h) - 1px);height:calc(var(--vague-h) + 2px);
  -webkit-mask-image:var(--vague);mask-image:var(--vague);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
.contenu-blocs > .wp-block-group.fond-creme::before{background:var(--creme)}
.contenu-blocs > .wp-block-group.fond-beige::before{background:var(--beige)}
.contenu-blocs > .wp-block-group.fond-noir::before{background:var(--noir-chaud)}
.contenu-blocs > .wp-block-group.fond-violet::before{background:var(--violet)}
.contenu-etroit .contenu-blocs > .wp-block-group.fond-creme,
.contenu-etroit .contenu-blocs > .wp-block-group.fond-beige,
.contenu-etroit .contenu-blocs > .wp-block-group.fond-noir,
.contenu-etroit .contenu-blocs > .wp-block-group.fond-violet{
  padding-inline:max(1.25rem, calc(50vw - var(--largeur-etroite) / 2));
}

/* Dans une bande, le « layout constrained » de Gutenberg ramènerait les enfants à
   la largeur de lecture : on lui rend la pleine largeur, sauf pour l'entête. */
.contenu-blocs > .wp-block-group.fond-creme > *:not(.entete-section),
.contenu-blocs > .wp-block-group.fond-beige > *:not(.entete-section),
.contenu-blocs > .wp-block-group.fond-noir > *:not(.entete-section),
.contenu-blocs > .wp-block-group.fond-violet > *:not(.entete-section){
  max-width:none;
}
.contenu-blocs .entete-section{max-width:44rem;margin-inline:auto}

/* Les liens au fil du texte restent soulignés : c'est le seul repère,
   la charte n'utilisant pas de couleur de lien. */
.chapo a,
.contenu-blocs p a,
.corps-article p a,
.corps-article li a,
.temoignage a{text-decoration:underline;text-underline-offset:3px}
.chapo a:hover,.contenu-blocs p a:hover,.corps-article a:hover{color:var(--violet)}

/* Les colonnes Gutenberg portant une classe de grille suivent la grille du thème
   (sinon le flex natif des blocs l'emporte et casse les largeurs). */
.contenu-blocs .wp-block-columns.grille{display:grid;gap:var(--e-5)}
.contenu-blocs .wp-block-columns.grille > .wp-block-column{flex-basis:auto !important}

/* Pagination */
.wp-block-query-pagination,.navigation.pagination{margin-top:var(--e-8)}
.navigation.pagination .nav-links{
  display:flex;gap:var(--e-2);justify-content:center;flex-wrap:wrap
}
.navigation.pagination .page-numbers{
  font-family:var(--f-sur);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.12em;
  padding:.7em 1.05em;border:1px solid var(--trait-fort);border-radius:var(--rayon-pilule);
  color:var(--texte-doux);transition:all .18s ease
}
.navigation.pagination .page-numbers:hover,
.navigation.pagination .page-numbers.current{
  background:var(--noir-chaud);color:var(--creme-clair);border-color:var(--noir-chaud)
}

/* Commentaires */
.comment-list{list-style:none;margin:0;padding:0}
.comment-list li{border-top:1px solid var(--trait);padding-block:var(--e-5)}
.comment-list .children{list-style:none;padding-left:var(--e-6)}
.comment-meta{font-family:var(--f-sur);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--texte-doux)}
.comment-form label{
  display:block;font-family:var(--f-sur);font-size:var(--t-xs);text-transform:uppercase;
  letter-spacing:.14em;color:var(--texte-doux);margin-bottom:var(--e-2)
}
.comment-form input:not([type="submit"]),.comment-form textarea{
  width:100%;font-family:var(--f-texte);font-size:var(--t-md);color:var(--texte);
  background:var(--creme-clair);border:1px solid var(--trait-fort);border-radius:var(--rayon);padding:.85em 1em
}
.comment-form .submit{
  font-family:var(--f-sur);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.14em;
  background:var(--violet);color:var(--creme-clair);border:0;border-radius:var(--rayon-pilule);
  padding:1em 1.65em;cursor:pointer
}

/* Éditeur : le fond de la zone d'édition suit la charte */
.editor-styles-wrapper{background:var(--creme-clair);font-family:var(--f-texte)}
.editor-styles-wrapper h1,.editor-styles-wrapper h2,
.editor-styles-wrapper h3,.editor-styles-wrapper h4{font-family:var(--f-titre)}