/* ══════════════════════════════════════════════════════════════
   ★ PANNEAU DE RÉGLAGES
   ──────────────────────────────────────────────────────────────
   Les seules valeurs à toucher pour ajuster les animations.
   Tout le reste du fichier s'y adapte automatiquement.

   Où éditer ce fichier :
     Outils › Éditeur de fichiers du thème › assets/cairnota.css
     ou par le gestionnaire de fichiers Hostinger.
   ══════════════════════════════════════════════════════════════ */
:root{
  /* Apparition des sections au défilement */
  --crn-anim-duree:     .65s;   /* .3s = vif · 1.2s = posé          */
  --crn-anim-decalage:  16px;   /* 0 = pas de glissement · 40 = ample */

  /* Titres qui se révèlent mot par mot */
  --crn-titre-duree:    .78s;   /* durée de la montée d'un mot      */
  --crn-titre-cadence:  55;     /* ms entre deux mots · 0 = ensemble */

  /* Le cairn de la section « D'où vient le nom » */
  --crn-cairn-cadence:  .30s;   /* écart entre deux pierres         */

  /* Ambiance */
  --crn-grain:          .035;   /* 0 = aucun grain · .08 = marqué   */
  --crn-chiffre:        .035;   /* opacité des chiffres géants      */
  --crn-balayage:       .75s;   /* durée du scan à la bascule       */

  /* ── En-tête ── */
  --crn-entete-fond:    88%;    /* opacité du fond · 100% = opaque    */
  --crn-entete-teinte:  var(--crn-bg);  /* mets var(--crn-encre) pour un en-tête sombre */
  --crn-entete-hauteur: 64px;
  --crn-entete-texte:   var(--crn-fg);

  /* ── Logo de l'en-tête ── */
  --crn-logo-taille:    30px;   /* la marque, en pixels              */
  --crn-logo-mot:       1rem;   /* le mot CAIRNOTA                   */
  --crn-logo-espace:    .1em;   /* interlettrage du mot              */

  /* ── Espace au-dessus du logo du héros ── de combien le bloc logo
     remonte vers l'en-tête, accueil seulement, au-dessus de 768 px. 0 = comme en 5.2.2.
     5.3.8 : 60px (138 → 98 px à 1440), avec un plancher de 44 px de rembourrage. */
  --crn-heros-remonte:  60px;

  /* ── Espace avant le pied de page ── de combien le pied de page
     remonte vers la fin du contenu, sur toutes les pages. 0 = comme en 5.2.3.
     5.3.2 : 36 px sur mobile, 50 px dès 1430 px de large. Plafond sûr :
     60 px (il ne reste alors que l'espace vide de la dernière section). */
  --crn-pied-rapproche: clamp(36px, 3.5vw, 50px);

  /* ── Logo du héros, page d'accueil ── */
  --crn-heros-marque:   clamp(78px,12vw,120px); /* les trois pierres  */
  --crn-heros-nom:      clamp(1.8rem,4.5vw,2.7rem); /* CAIRNOTA      */
  --crn-heros-base:     1.375rem;   /* « Agence GEO · France »       */
  --crn-heros-base-esp: .18em;      /* son interlettrage             */

  /* ── Gouttière ── marge latérale du site, identique à celle de
     l'en-tête. Sur mobile, elle prend la valeur de --crn-marge. */
  --gut:                clamp(1.15rem, 4vw, 3.5rem);

  /* ── Rythme des pages intérieures ── */
  --crn-ecart-titre:      clamp(2.25rem, 4vw, 3.5rem);  /* au-dessus d'un H2 */
  --crn-ecart-sous-titre: clamp(1.5rem, 2.6vw, 2rem);    /* entre un H2 et son texte */
  /* H3 et H4 en dérivent : 80 % et 65 % au-dessus, 70 % et 55 % dessous. */
}

/* ══════════════════════════════════════════════════════════════
   CAIRNOTA — charte
   ──────────────────────────────────────────────────────────────
   Toutes les classes sont préfixées « crn- » pour ne jamais
   entrer en conflit avec le thème parent ni avec une extension.

   Les couleurs et les polices viennent de theme.json : elles sont
   donc modifiables depuis l'éditeur de site, sans toucher ce fichier.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* Les couleurs sont reprises de la palette déclarée dans theme.json.
     Conséquence : les modifier depuis Apparence › Éditeur › Styles
     suffit — elles se propagent partout, y compris ici.
     Les valeurs après la virgule ne servent que de repli. */
  --crn-papier:   var(--wp--preset--color--papier,   #EFF1F0);
  --crn-encre:    var(--wp--preset--color--encre,    #101317);
  --crn-ambre:    var(--wp--preset--color--ambre,    #FFB020);
  --crn-graphite: var(--wp--preset--color--graphite, #5C6663);
  --crn-trait:    var(--wp--preset--color--trait,    #D6DAD8);
  --crn-carte:    var(--wp--preset--color--carte,    #F7F8F7);

  --crn-bg:var(--crn-papier);
  --crn-fg:var(--crn-encre);
  --crn-muted:var(--crn-graphite);
  --crn-rule:var(--crn-trait);
  --crn-surface:var(--crn-carte);

  --crn-display:"Bricolage Grotesque",system-ui,sans-serif;
  --crn-lecture:"Newsreader",Georgia,serif;
  --crn-machine:"JetBrains Mono",ui-monospace,monospace;

  --crn-ease:cubic-bezier(.4,0,.2,1);
}

/* ── Vue machine : inversion complète ───────────────────────── */
html[data-vue="machine"]{
  --crn-bg:var(--crn-encre);
  --crn-fg:var(--crn-papier);
  --crn-muted:#8C9793;
  --crn-rule:#272D34;
  --crn-surface:#171B21;
}
html[data-vue="machine"] body{
  background:var(--crn-encre)!important;
  color:var(--crn-papier)!important;
  font-family:var(--crn-machine)!important;
  font-size:.9375rem;
  line-height:1.75;
}
html[data-vue="machine"] h1,
html[data-vue="machine"] h2,
html[data-vue="machine"] h3,
html[data-vue="machine"] h4,
html[data-vue="machine"] p,
html[data-vue="machine"] li,
html[data-vue="machine"] a:not(.crn-cta-entete):not(.wp-element-button):not(.wp-block-button__link){color:var(--crn-papier)!important}
html[data-vue="machine"] .crn-section{border-color:var(--crn-rule)!important}

body{transition:background .5s var(--crn-ease),color .5s var(--crn-ease)}


/* ══════════════════════════════════════════════════════════════
   POLICES AUTO-HÉBERGÉES  (v5)
   ──────────────────────────────────────────────────────────────
   Les fichiers sont dans assets/fonts/. Plus aucun appel à Google :
   l'adresse IP des visiteurs n'est plus transmise à un tiers.
   Sous-ensembles latin et latin étendu ; le navigateur ne
   télécharge que celui dont la page a besoin.
   Licence : SIL Open Font License (assets/fonts/LICENCE-OFL.txt).
   ══════════════════════════════════════════════════════════════ */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url("fonts/bricolage-grotesque-latin-ext-standard-normal.woff2") format("woff2-variations"),url("fonts/bricolage-grotesque-latin-ext-standard-normal.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:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url("fonts/bricolage-grotesque-latin-standard-normal.woff2") format("woff2-variations"),url("fonts/bricolage-grotesque-latin-standard-normal.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:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url("fonts/newsreader-latin-ext-standard-normal.woff2") format("woff2-variations"),url("fonts/newsreader-latin-ext-standard-normal.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:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url("fonts/newsreader-latin-standard-normal.woff2") format("woff2-variations"),url("fonts/newsreader-latin-standard-normal.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:"Newsreader";font-style:italic;font-weight:200 800;font-display:swap;src:url("fonts/newsreader-latin-ext-standard-italic.woff2") format("woff2-variations"),url("fonts/newsreader-latin-ext-standard-italic.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:"Newsreader";font-style:italic;font-weight:200 800;font-display:swap;src:url("fonts/newsreader-latin-standard-italic.woff2") format("woff2-variations"),url("fonts/newsreader-latin-standard-italic.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:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url("fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2-variations"),url("fonts/jetbrains-mono-latin-ext-wght-normal.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:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations"),url("fonts/jetbrains-mono-latin-wght-normal.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}

/* ══════════════════════════════════════════════════════════════
   SECTIONS
   ══════════════════════════════════════════════════════════════ */
.crn-section{
  border-top:1px solid var(--crn-rule);
  padding-top:clamp(3.75rem,8.5vw,7.5rem);
  padding-bottom:clamp(3.75rem,8.5vw,7.5rem);
  transition:border-color .5s var(--crn-ease);
}
.crn-section.crn-heros{border-top:0}

.crn-surtitre{
  font-family:var(--crn-machine)!important;
  font-size:.6875rem;
  font-weight:500;letter-spacing:.17em;text-transform:uppercase;
  color:var(--crn-muted)!important;
  margin:0 0 1.15rem!important;
}
.crn-chapo{
  font-size:clamp(1.05rem,1.85vw,1.28rem);
  line-height:1.55;max-width:56ch;
}
html[data-vue="machine"] .crn-chapo{font-family:var(--crn-machine)!important;font-size:.9375rem}
.crn-note{
  font-family:var(--crn-machine)!important;
  font-size:.75rem;line-height:1.65;
  color:var(--crn-muted)!important;
}
.crn-etroit{max-width:66ch}

/* ══════════════════════════════════════════════════════════════
   MOTIF D'EXTRACTION
   ══════════════════════════════════════════════════════════════ */
.crn-extrait{position:relative;display:inline;padding:0 .05em}
.crn-extrait::before,.crn-extrait::after{
  content:"";position:absolute;top:-.17em;bottom:-.17em;width:.26em;
  border:2px solid var(--crn-ambre);opacity:0;transition:opacity .3s .25s;
}
.crn-extrait::before{left:-.34em;border-right:0}
.crn-extrait::after{right:-.34em;border-left:0}
.crn-extrait mark{
  background:linear-gradient(var(--crn-ambre),var(--crn-ambre)) no-repeat left center;
  background-size:0% 100%;color:inherit;padding:.03em 0;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size 1s var(--crn-ease) .15s,color .3s .85s;
}
.crn-vu .crn-extrait::before,.crn-vu .crn-extrait::after{opacity:1}
.crn-vu .crn-extrait mark{background-size:100% 100%;color:var(--crn-encre)!important}

/* ══════════════════════════════════════════════════════════════
   RÉVÉLATION DES BALISES EN VUE MACHINE
   ══════════════════════════════════════════════════════════════ */
[data-balise]{position:relative}
[data-balise]::after{
  content:attr(data-balise);
  font-family:var(--crn-machine);font-size:.5625rem;font-weight:500;letter-spacing:.1em;
  color:var(--crn-ambre);border:1px solid var(--crn-ambre);
  padding:.18em .45em;border-radius:2px;margin-left:.55em;
  vertical-align:middle;white-space:nowrap;
  pointer-events:none;
  /* 5.3.2 : retirée de la mise en page en vue humaine. Invisible mais
     présente, elle passait à la ligne sous un titre presque aussi large
     que la colonne (« Politique de confidentialité ») : une ligne vide. */
  display:none;
}
html[data-vue="machine"] [data-balise]::after{display:inline-block;animation:crn-balise .4s both}
@keyframes crn-balise{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}

.crn-machine-only{display:none}
html[data-vue="machine"] .crn-machine-only{display:block}

.crn-bandeau-machine{
  display:none;background:var(--crn-ambre);color:var(--crn-encre);
  font-family:var(--crn-machine);font-size:.6875rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;text-align:center;
  padding:.55rem 1rem;position:relative;z-index:120;
}
html[data-vue="machine"] .crn-bandeau-machine{display:block}

/* ══════════════════════════════════════════════════════════════
   COMMUTATEUR
   ══════════════════════════════════════════════════════════════ */
.crn-bascule{
  position:fixed;top:14px;right:16px;z-index:130;
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  font-family:var(--crn-machine);font-size:.5938rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--crn-muted);
  background:color-mix(in srgb,var(--crn-bg) 90%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--crn-rule);border-radius:999px;
  padding:.38rem .5rem .38rem .72rem;
  transition:border-color .3s,color .3s,background .5s var(--crn-ease);
}
html[data-vue="machine"] .crn-bascule{top:46px}
.crn-bascule:hover,.crn-bascule:focus-visible{border-color:var(--crn-ambre);color:var(--crn-fg)}
.crn-bascule .crn-txt{display:none}
@media(min-width:640px){.crn-bascule .crn-txt{display:inline}}
.crn-rail{width:32px;height:17px;border-radius:999px;border:1px solid var(--crn-rule);position:relative;flex:none}
.crn-pastille{
  position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;
  background:var(--crn-muted);transition:transform .4s var(--crn-ease),background .4s;
}
html[data-vue="machine"] .crn-pastille{transform:translateX(15px);background:var(--crn-ambre)}

/* ══════════════════════════════════════════════════════════════
   COMPOSANTS
   ══════════════════════════════════════════════════════════════ */

/* Le panneau « ce que la machine retient » */
.crn-panneau{
  border:1px solid var(--crn-ambre);border-radius:4px;
  padding:1.15rem 1.25rem;background:rgba(255,176,32,.05);
  max-width:56ch;margin-top:2.75rem;
}
.crn-panneau .crn-titre{
  font-family:var(--crn-machine);font-size:.625rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--crn-ambre);margin:0 0 .85rem;
}
.crn-panneau pre{
  font-family:var(--crn-machine);font-size:.6875rem;line-height:1.75;
  margin:0;white-space:pre-wrap;color:var(--crn-fg);background:none;padding:0;
}
.crn-panneau .crn-cle{color:var(--crn-ambre)}

/* Fichier mis en scène (robots.txt) */
.crn-fichier{
  border:1px solid var(--crn-rule);border-radius:4px;overflow:hidden;
  background:var(--crn-surface);
  transition:background .5s var(--crn-ease),border-color .5s var(--crn-ease);
}
.crn-fichier .crn-tete{
  border-bottom:1px solid var(--crn-rule);padding:.6rem .9rem;
  font-family:var(--crn-machine);font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--crn-muted);
}
.crn-fichier pre{
  font-family:var(--crn-machine);font-size:.75rem;line-height:1.95;
  margin:0;padding:1.1rem .9rem;white-space:pre-wrap;background:none;
}
.crn-bloque{color:#C0392B;font-weight:700}
html[data-vue="machine"] .crn-bloque{color:#FF6B5A}
.crn-ok{color:var(--crn-ambre)}

/* Encadré */
.crn-encadre{
  border-left:2px solid var(--crn-ambre);
  padding:.15rem 0 .15rem 1.15rem;max-width:52ch;
}

/* Grille des 7 blocs */
.crn-blocs{
  display:grid;gap:1px;background:var(--crn-rule);
  border:1px solid var(--crn-rule);
  transition:background .5s var(--crn-ease),border-color .5s var(--crn-ease);
}
@media(min-width:640px){.crn-blocs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.crn-blocs{grid-template-columns:repeat(4,1fr)}}
.crn-bloc{
  background:var(--crn-bg);padding:1.4rem 1.25rem 1.5rem;
  display:flex;flex-direction:column;gap:.55rem;min-height:140px;
  opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--crn-ease),transform .55s var(--crn-ease),background .5s var(--crn-ease);
}
.crn-vu .crn-bloc{opacity:1;transform:none}
.crn-bloc .crn-num{font-family:var(--crn-machine);font-size:.625rem;letter-spacing:.14em;color:var(--crn-muted)}
.crn-bloc h4{margin:0;font-family:var(--crn-display);font-weight:700;font-size:.9375rem;line-height:1.3}
.crn-bloc .crn-pts{font-family:var(--crn-machine);font-size:.625rem;font-weight:700;letter-spacing:.08em;color:var(--crn-ambre);margin-top:auto}
.crn-bloc.crn-fort{background:var(--crn-surface)}

/* Cartes de prestations */
.crn-offres{
  display:grid;gap:1px;background:var(--crn-rule);
  border:1px solid var(--crn-rule);
  transition:background .5s var(--crn-ease),border-color .5s var(--crn-ease);
}
@media(min-width:920px){.crn-offres{grid-template-columns:repeat(3,1fr)}}
.crn-offre{
  background:var(--crn-bg);padding:clamp(1.6rem,3vw,2.25rem);
  display:flex;flex-direction:column;gap:1rem;
  transition:background .5s var(--crn-ease);
}
.crn-offre .crn-prix{
  font-family:var(--crn-display);font-weight:800;
  font-size:clamp(2rem,4.5vw,2.9rem);letter-spacing:-.03em;line-height:1;
}
.crn-offre .crn-duree{font-family:var(--crn-machine);font-size:.6875rem;letter-spacing:.1em;color:var(--crn-muted);margin-top:.4rem}
.crn-offre h3{margin:0}
.crn-offre p{margin:0;font-size:1rem;line-height:1.55}
html[data-vue="machine"] .crn-offre p{font-family:var(--crn-machine);font-size:.875rem}
.crn-offre .crn-apres{margin-top:auto;padding-top:1.15rem;border-top:1px solid var(--crn-rule)}
.crn-offre.crn-offerte .crn-prix{color:var(--crn-ambre)}
.crn-large{grid-column:1/-1}

/* Le cairn qui se construit */
.crn-cairn{display:flex;justify-content:center;padding:1rem 0 .5rem;color:var(--crn-fg)}
.crn-cairn .crn-pierre{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--crn-ease),transform .7s var(--crn-ease);
}
.crn-vu .crn-cairn .crn-p1{transition-delay:.05s}
.crn-vu .crn-cairn .crn-p2{transition-delay:.35s}
.crn-vu .crn-cairn .crn-p3{transition-delay:.65s}
.crn-vu .crn-cairn .crn-pierre{opacity:1;transform:none}

/* ══════════════════════════════════════════════════════════════
   FORMULAIRE
   ══════════════════════════════════════════════════════════════ */
.crn-form input,.crn-form select,.crn-form textarea,
.wpforms-container input,.wpforms-container select,.wpforms-container textarea,
.fluentform input,.fluentform select,.fluentform textarea{
  font-family:var(--crn-machine)!important;font-size:.875rem;
  color:var(--crn-fg)!important;background:var(--crn-surface)!important;
  border:1px solid var(--crn-rule)!important;border-radius:3px!important;
  padding:.8rem .85rem!important;
  transition:border-color .25s,background .5s var(--crn-ease),color .5s var(--crn-ease);
}
.crn-form input:focus,.crn-form select:focus,.crn-form textarea:focus{
  outline:none!important;border-color:var(--crn-ambre)!important;
}
.crn-form label{
  font-family:var(--crn-machine)!important;font-size:.625rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--crn-muted)!important;
}

/* ══════════════════════════════════════════════════════════════
   APPARITIONS AU DÉFILEMENT
   ══════════════════════════════════════════════════════════════ */
.crn-anim{opacity:0;transform:translateY(16px);
  transition:opacity .65s var(--crn-ease),transform .65s var(--crn-ease)}
.crn-anim.crn-vu{opacity:1;transform:none}

:focus-visible{outline:2px solid var(--crn-ambre);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .crn-anim,.crn-bloc,.crn-cairn .crn-pierre{opacity:1!important;transform:none!important}
  .crn-extrait::before,.crn-extrait::after{opacity:1}
  .crn-extrait mark{background-size:100% 100%;color:var(--crn-encre)!important}
}

/* ══════════════════════════════════════════════════════════════
   ÉDITEUR — le commutateur n'y a pas lieu d'être
   ══════════════════════════════════════════════════════════════ */
.editor-styles-wrapper .crn-bascule,
.editor-styles-wrapper .crn-bandeau-machine{display:none!important}
.editor-styles-wrapper .crn-anim,
.editor-styles-wrapper .crn-bloc,
.editor-styles-wrapper .crn-cairn .crn-pierre{opacity:1!important;transform:none!important}

/* ══════════════════════════════════════════════════════════════
   EN-TÊTE DU SITE
   ══════════════════════════════════════════════════════════════ */
.crn-entete{
  position:sticky;
  top:var(--wp-admin--admin-bar--height,0px);
  z-index:100;
  background:color-mix(in srgb,var(--crn-entete-teinte) var(--crn-entete-fond),transparent);
  color:var(--crn-entete-texte);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--crn-rule);
  padding:0 clamp(1.15rem,4vw,3.5rem)!important;
  transition:background .5s var(--crn-ease),border-color .5s var(--crn-ease);
}
.crn-entete-in{
  max-width:1200px;margin:0 auto;
  min-height:var(--crn-entete-hauteur);gap:1rem!important;
}
.crn-entete-droite{gap:.9rem!important}

.crn-marque{
  display:inline-flex;align-items:center;gap:.55rem;
  text-decoration:none!important;color:var(--crn-entete-texte)!important;flex:none;
}
.crn-marque svg{width:var(--crn-logo-taille);height:var(--crn-logo-taille)}
.crn-marque .crn-mot{
  font-family:var(--crn-display);font-weight:800;
  letter-spacing:var(--crn-logo-espace);font-size:var(--crn-logo-mot);line-height:1;
}

/* Navigation */
.crn-nav a,.crn-nav .wp-block-navigation-item__content{
  font-family:var(--crn-machine)!important;font-size:.6875rem;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--crn-muted)!important;text-decoration:none!important;
  transition:color .25s;
}
.crn-nav a:hover,.crn-nav .wp-block-navigation-item__content:hover{color:var(--crn-fg)!important}
.crn-nav .wp-block-navigation__responsive-container-open,
.crn-nav .wp-block-navigation__responsive-container-close{color:var(--crn-fg)!important}
.crn-nav .wp-block-navigation__responsive-container.is-menu-open{
  background:var(--crn-bg)!important;color:var(--crn-fg)!important;padding:4rem 2rem;
}
@media(max-width:900px){.crn-nav{display:none}}

/* Le commutateur, désormais dans l'en-tête */
.crn-bascule{
  position:static;display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  font-family:var(--crn-machine);font-size:.5938rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--crn-muted);
  background:none;border:1px solid var(--crn-rule);border-radius:999px;
  padding:.38rem .5rem .38rem .72rem;flex:none;
  transition:border-color .3s,color .3s;
}
.crn-bascule:hover,.crn-bascule:focus-visible{border-color:var(--crn-ambre);color:var(--crn-fg)}
.crn-bascule .crn-txt{display:none}
@media(min-width:700px){.crn-bascule .crn-txt{display:inline}}

.crn-cta-entete{
  display:none;font-family:var(--crn-machine);font-size:.625rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none!important;
  background:var(--crn-fg);color:var(--crn-bg)!important;
  padding:.62rem 1rem;border-radius:3px;flex:none;
  transition:opacity .2s,background .5s var(--crn-ease),color .5s var(--crn-ease);
}
.crn-cta-entete:hover{opacity:.85}
@media(min-width:560px){.crn-cta-entete{display:inline-block}}

.crn-bandeau-machine{position:relative;z-index:110}

/* ══════════════════════════════════════════════════════════════
   PIED DE PAGE
   ══════════════════════════════════════════════════════════════ */
.crn-pied{
  border-top:1px solid var(--crn-rule);
  padding-top:clamp(2.5rem,5vw,4rem)!important;
  padding-bottom:clamp(2.5rem,5vw,3.5rem)!important;
  margin-top:0!important;
  transition:border-color .5s var(--crn-ease);
}
.crn-pied h4{margin:0 0 .9rem!important;font-family:var(--crn-display);font-weight:700;font-size:.9375rem}
.crn-liens{list-style:none!important;margin:0!important;padding:0!important}
.crn-liens li{margin:0 0 .5rem!important}
.crn-liens a{
  font-family:var(--crn-machine)!important;font-size:.75rem;
  color:var(--crn-muted)!important;text-decoration:none!important;
  transition:color .25s;
}
.crn-liens a:hover{color:var(--crn-fg)!important}
/* Lien vers la page LinkedIn, sous la phrase de la marque (5.3.6) */
.crn-liens.crn-suivre{margin-top:1.1rem!important}
.crn-copy{
  margin-top:clamp(2rem,4vw,3rem);padding-top:1.5rem;
  border-top:1px solid var(--crn-rule);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-family:var(--crn-machine);font-size:.6875rem;letter-spacing:.06em;
  color:var(--crn-muted);
}
.crn-copy a{color:var(--crn-muted);text-decoration:none}
.crn-copy a:hover{color:var(--crn-fg)}

/* ══════════════════════════════════════════════════════════════
   PAGES INTÉRIEURES
   ══════════════════════════════════════════════════════════════ */
.crn-main{min-height:50vh}

.crn-page-tete{
  padding-top:clamp(2.75rem,7vw,5.5rem);
  padding-bottom:clamp(2rem,5vw,3.5rem);
  border-bottom:1px solid var(--crn-rule);
  margin-bottom:clamp(2.25rem,5vw,3.5rem);
}
.crn-page-tete h1{
  font-size:clamp(2.2rem,6vw,4.2rem);
  max-width:18ch;margin:0!important;
}
.crn-page-tete .crn-chapo{margin-top:1.25rem!important}

/* Tableaux */
.wp-block-table table{border-collapse:collapse;width:100%;font-size:.9375rem}
.wp-block-table th{
  font-family:var(--crn-machine);font-size:.625rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--crn-muted);
  text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--crn-rule);
}
.wp-block-table td{padding:.8rem;border-bottom:1px solid var(--crn-rule);vertical-align:top}

/* FAQ — bloc Détails natif */
.wp-block-details{
  border-bottom:1px solid var(--crn-rule);padding:1.15rem 0;
  transition:border-color .5s var(--crn-ease);
}
.wp-block-details summary{
  font-family:var(--crn-display);font-weight:700;font-size:1.0625rem;
  cursor:pointer;list-style:none;position:relative;padding-right:2rem;
}
.wp-block-details summary::-webkit-details-marker{display:none}
.wp-block-details summary::after{
  content:"+";position:absolute;right:0;top:-.1em;
  font-family:var(--crn-machine);font-size:1.25rem;color:var(--crn-ambre);
  transition:transform .3s var(--crn-ease);
}
.wp-block-details[open] summary::after{transform:rotate(45deg)}
.wp-block-details > *:not(summary){margin-top:.9rem;max-width:66ch}

/* Liste des articles */
.crn-liste-articles > li,.crn-liste-articles .wp-block-post{
  border-bottom:1px solid var(--crn-rule);padding:1.75rem 0;list-style:none;
}
.crn-liste-articles h2{font-size:clamp(1.3rem,2.6vw,1.8rem);margin:.4rem 0 .6rem!important}
.crn-liste-articles h2 a{text-decoration:none!important}
.crn-fin-article{
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.75rem;
  border-top:1px solid var(--crn-rule);
}

/* Le bloc Détails et les listes en vue machine */
html[data-vue="machine"] .wp-block-details summary{color:var(--crn-papier)!important}

/* ══════════════════════════════════════════════════════════════
   V3 — RELIEF, RYTHME ET MOUVEMENT
   ══════════════════════════════════════════════════════════════ */

/* ── Grain : une texture très fine qui enlève l'aspect « à plat » ── */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:200;
  opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-vue="machine"] body::after{mix-blend-mode:screen;opacity:.05}

/* ══════════════════════════════════════════════════════════════
   LE SENTIER — repères de progression
   Le cairn se construit : une pierre se pose à chaque quart
   du parcours, et le compteur indique le repère atteint.
   ══════════════════════════════════════════════════════════════ */
.crn-sentier{
  position:fixed;left:clamp(10px,2vw,26px);top:0;bottom:0;
  width:40px;z-index:90;pointer-events:none;display:none;
}
@media(min-width:1100px){.crn-sentier{display:block}}

.crn-sentier-rail{
  position:absolute;left:19px;top:16vh;bottom:16vh;width:1px;
  background:var(--crn-rule);transition:background .5s var(--crn-ease);
}
.crn-sentier-jauge{
  position:absolute;left:0;top:0;width:1px;height:0;
  background:var(--crn-ambre);box-shadow:0 0 8px rgba(255,176,32,.55);
}
.crn-sentier-cairn{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:color-mix(in srgb,var(--crn-bg) 92%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:8px 6px 6px;border-radius:20px;border:1px solid var(--crn-rule);
  display:flex;flex-direction:column;align-items:center;gap:5px;
  transition:background .5s var(--crn-ease),border-color .5s var(--crn-ease);
}
.crn-sentier-cairn svg .crn-pierre{
  fill:var(--crn-muted);opacity:.28;
  transition:fill .45s var(--crn-ease),opacity .45s var(--crn-ease);
}
.crn-sentier-cairn svg .crn-pierre.crn-posee{fill:var(--crn-ambre);opacity:1}
.crn-sentier-num{
  font-family:var(--crn-machine);font-size:.6875rem;font-weight:700;
  color:var(--crn-fg);line-height:1;
}
.crn-sentier-num span{color:var(--crn-muted);font-weight:400}
.crn-sentier-legende{
  position:absolute;left:50%;top:calc(50% + 46px);transform:translateX(-50%);
  font-family:var(--crn-machine);font-size:.5313rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--crn-muted);white-space:nowrap;
}

/* ══════════════════════════════════════════════════════════════
   RÉVÉLATION DES TITRES, MOT PAR MOT
   ══════════════════════════════════════════════════════════════ */
.crn-mot-masque{display:inline-block;overflow:hidden;vertical-align:bottom}
.crn-mot-in{
  display:inline-block;transform:translateY(105%);
  transition:transform .78s cubic-bezier(.22,1,.36,1);
}
.crn-vu .crn-mot-in{transform:translateY(0)}

/* ══════════════════════════════════════════════════════════════
   RYTHME — chiffres géants en filigrane
   ══════════════════════════════════════════════════════════════ */
.crn-section{position:relative;overflow:hidden}
.crn-section[data-chiffre]::before{
  content:attr(data-chiffre);
  position:absolute;right:-.08em;top:-.12em;
  font-family:var(--crn-display);font-weight:800;
  font-variation-settings:"wdth" 76;
  font-size:clamp(9rem,26vw,22rem);line-height:.75;
  color:var(--crn-fg);opacity:.035;
  pointer-events:none;user-select:none;z-index:0;
  transition:opacity .5s var(--crn-ease);
}
html[data-vue="machine"] .crn-section[data-chiffre]::before{opacity:.07}
.crn-section > *{position:relative;z-index:1}

/* ══════════════════════════════════════════════════════════════
   SECTION INVERSÉE — casse la monotonie
   ══════════════════════════════════════════════════════════════ */
.crn-inverse{
  background:var(--crn-encre);color:var(--crn-papier);
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding-left:clamp(1.15rem,4vw,3.5rem)!important;
  padding-right:clamp(1.15rem,4vw,3.5rem)!important;
  border-top:0;
}
.crn-inverse > .wp-block-group,.crn-inverse > *{max-width:1200px;margin-inline:auto}
.crn-inverse h1,.crn-inverse h2,.crn-inverse h3,.crn-inverse h4,
.crn-inverse p,.crn-inverse li,.crn-inverse strong{color:var(--crn-papier)!important}
.crn-inverse .crn-surtitre,.crn-inverse .crn-note{color:#8C9793!important}
.crn-inverse .crn-fichier{background:#171B21;border-color:#272D34}
.crn-inverse .crn-fichier .crn-tete{border-color:#272D34;color:#8C9793}
.crn-inverse .crn-bloque{color:#FF6B5A}
.crn-inverse[data-chiffre]::before{color:var(--crn-papier);opacity:.05}
html[data-vue="machine"] .crn-inverse{background:#080A0D}

/* ══════════════════════════════════════════════════════════════
   MÉTHODE — le titre reste collé pendant que les blocs défilent
   ══════════════════════════════════════════════════════════════ */
@media(min-width:1000px){
  .crn-methode-grille{
    display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);
    gap:clamp(2rem,4vw,4rem);align-items:start;
  }
  .crn-methode-tete{position:sticky;top:120px}
}

/* Les blocs apparaissent en cascade */
.crn-vu .crn-bloc:nth-child(1){transition-delay:.02s}
.crn-vu .crn-bloc:nth-child(2){transition-delay:.08s}
.crn-vu .crn-bloc:nth-child(3){transition-delay:.14s}
.crn-vu .crn-bloc:nth-child(4){transition-delay:.20s}
.crn-vu .crn-bloc:nth-child(5){transition-delay:.26s}
.crn-vu .crn-bloc:nth-child(6){transition-delay:.32s}
.crn-vu .crn-bloc:nth-child(7){transition-delay:.38s}
.crn-vu .crn-bloc:nth-child(8){transition-delay:.44s}

.crn-bloc{position:relative;cursor:default}
.crn-bloc::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--crn-ambre);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--crn-ease);
}
.crn-bloc:hover::after{transform:scaleX(1)}

/* ══════════════════════════════════════════════════════════════
   GRAPHE D'ENTITÉS — canvas 2D, ~3 ko, remplace Vanta
   ══════════════════════════════════════════════════════════════ */
.crn-graphe{
  position:relative;width:100%;aspect-ratio:16/9;max-height:520px;
  border:1px solid var(--crn-rule);border-radius:4px;overflow:hidden;
  background:var(--crn-surface);
  transition:background .5s var(--crn-ease),border-color .5s var(--crn-ease);
}
.crn-graphe canvas{display:block;width:100%;height:100%}
.crn-graphe-legende{
  position:absolute;left:1rem;bottom:1rem;
  font-family:var(--crn-machine);font-size:.625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--crn-muted);
}
@media(max-width:1023px){.crn-graphe{aspect-ratio:4/3}}

/* ══════════════════════════════════════════════════════════════
   OFFRES — relief au survol
   ══════════════════════════════════════════════════════════════ */
.crn-offre{position:relative;transition:background .35s var(--crn-ease)}
.crn-offre::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--crn-ambre);transform:scaleY(0);transform-origin:top;
  transition:transform .45s var(--crn-ease);
}
.crn-offre:hover::before{transform:scaleY(1)}
.crn-offre:hover{background:var(--crn-surface)}

/* ══════════════════════════════════════════════════════════════
   LIENS — soulignement qui se trace
   ══════════════════════════════════════════════════════════════ */
.crn-main p a,.crn-main li a{
  text-decoration:none;background-image:linear-gradient(var(--crn-ambre),var(--crn-ambre));
  background-size:0% 2px;background-repeat:no-repeat;background-position:left bottom;
  padding-bottom:2px;transition:background-size .4s var(--crn-ease);
}
.crn-main p a:hover,.crn-main li a:hover{background-size:100% 2px}

/* ══════════════════════════════════════════════════════════════
   VUE MACHINE — balayage à la bascule
   ══════════════════════════════════════════════════════════════ */
.crn-scan{
  position:fixed;left:0;right:0;height:2px;z-index:210;pointer-events:none;
  background:var(--crn-ambre);box-shadow:0 0 24px 6px rgba(255,176,32,.6);
  opacity:0;
}
.crn-scan.crn-actif{animation:crn-balayage .75s cubic-bezier(.5,0,.2,1)}
@keyframes crn-balayage{
  0%{opacity:0;top:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{opacity:0;top:100%}
}

@media(prefers-reduced-motion:reduce){
  .crn-mot-in{transform:none!important}
  .crn-scan{display:none}
  body::after{display:none}
}

/* ══════════════════════════════════════════════════════════════
   ★ BRANCHEMENT DES RÉGLAGES
   ══════════════════════════════════════════════════════════════ */
.crn-anim{
  transform:translateY(var(--crn-anim-decalage));
  transition:opacity var(--crn-anim-duree) var(--crn-ease),
             transform var(--crn-anim-duree) var(--crn-ease);
}
.crn-mot-in{transition-duration:var(--crn-titre-duree)}
body::after{opacity:var(--crn-grain)}
.crn-section[data-chiffre]::before{opacity:var(--crn-chiffre)}
.crn-scan.crn-actif{animation-duration:var(--crn-balayage)}
.crn-vu .crn-cairn .crn-p2{transition-delay:var(--crn-cairn-cadence)}
.crn-vu .crn-cairn .crn-p3{transition-delay:calc(var(--crn-cairn-cadence) * 2)}

/* ══════════════════════════════════════════════════════════════
   ★ CLASSES UTILITAIRES
   ──────────────────────────────────────────────────────────────
   À taper dans le panneau latéral d'un bloc, onglet « Avancé »,
   champ « Classe(s) CSS additionnelle(s) ». Aucun code à écrire.
   ══════════════════════════════════════════════════════════════ */

/* — Animation — */
.crn-sans-anim,
.crn-sans-anim .crn-bloc,
.crn-sans-anim .crn-pierre{opacity:1!important;transform:none!important;transition:none!important}
.crn-anim-lente{--crn-anim-duree:1.2s;--crn-titre-duree:1.1s;--crn-titre-cadence:90}
.crn-anim-vive{--crn-anim-duree:.35s;--crn-titre-duree:.5s;--crn-titre-cadence:30}

/* — Fond — */
.crn-clair{background:var(--crn-surface)}
.crn-sans-filet{border-top:0!important}

/* — Espacement — */
.crn-serre{padding-top:clamp(2rem,4vw,3.5rem)!important;padding-bottom:clamp(2rem,4vw,3.5rem)!important}
.crn-aere{padding-top:clamp(5rem,12vw,10rem)!important;padding-bottom:clamp(5rem,12vw,10rem)!important}

/* — Alignement — */
.crn-centre{text-align:center}
.crn-centre .crn-chapo,.crn-centre .crn-etroit{margin-inline:auto}

/* — Mise en avant — */
.crn-souligne{border-bottom:2px solid var(--crn-ambre);padding-bottom:.15em}
.crn-grand p{font-size:clamp(1.15rem,2.2vw,1.45rem);line-height:1.5}

/* Retire le chiffre en filigrane d'une section */
.crn-sans-chiffre::before{display:none!important}

/* ══════════════════════════════════════════════════════════════
   ★ CORRECTIFS 3.4 — alignement sur le rendu de référence
   ══════════════════════════════════════════════════════════════ */

/* — 1 — Largeur de lecture.
   Les conteneurs font 1200 px ; ce sont les éléments de texte qui
   limitent la longueur de ligne, comme dans la maquette. */
.crn-main p:not(.crn-chapo):not(.crn-note):not(.crn-surtitre),
.crn-main li{max-width:66ch}
.crn-main h1{max-width:16ch}
.crn-main h2{max-width:20ch}
.crn-main .wp-block-column p,
.crn-main .wp-block-column li,
.crn-main .crn-offre p,
.crn-main .crn-bloc p{max-width:none}

/* — 3 — En-tête collant.
   Dans un thème de blocs, la partie de modèle est un <header> qui
   n'occupe que sa propre hauteur : un position:sticky posé sur son
   enfant ne peut pas fonctionner. Il faut le poser sur le <header>. */
.wp-site-blocks > header,
header.wp-block-template-part{
  position:sticky;
  top:var(--wp-admin--admin-bar--height,0px);
  z-index:100;
}
.crn-entete{position:static}

/* — 4 — Bouton d'appel en vue machine.
   La règle qui force tous les liens en papier rendait le bouton
   blanc sur blanc. On l'en exclut et on fixe ses couleurs. */
html[data-vue="machine"] .crn-cta-entete,
html[data-vue="machine"] .wp-element-button,
html[data-vue="machine"] .wp-block-button__link{
  background:var(--crn-papier)!important;
  color:var(--crn-encre)!important;
}
html[data-vue="machine"] .is-style-outline .wp-block-button__link{
  background:transparent!important;
  color:var(--crn-papier)!important;
  border-color:var(--crn-rule)!important;
}

/* ══════════════════════════════════════════════════════════════
   ★ EN-TÊTE SOMBRE
   Décommente ce bloc pour un en-tête encre en permanence,
   y compris en vue humaine.
   ══════════════════════════════════════════════════════════════
:root{
  --crn-entete-teinte: var(--crn-encre);
  --crn-entete-fond:   94%;
  --crn-entete-texte:  var(--crn-papier);
}
.crn-entete .crn-nav a,
.crn-entete .crn-bascule{color:#8C9793!important}
.crn-entete .crn-nav a:hover{color:var(--crn-papier)!important}
.crn-entete .crn-cta-entete{background:var(--crn-ambre);color:var(--crn-encre)!important}
.crn-entete .crn-rail{border-color:#3A424B}
*/

/* ══════════════════════════════════════════════════════════════
   ★ V4 — CORRECTIFS
   ══════════════════════════════════════════════════════════════ */

/* ── 1. ALIGNEMENT À GAUCHE ─────────────────────────────────────
   Cause des « passages décalés » : la mise en page contrainte de
   WordPress centre tout enfant plus étroit que le conteneur, avec
   margin-inline:auto en !important. Nos textes limités à 66ch se
   retrouvaient donc au milieu. On les recale à gauche. */
/* (remplacé par le bloc d'alignement V4.2, plus bas) */

/* Les titres peuvent respirer davantage sur les pages intérieures */
.crn-main h2{max-width:24ch}
.crn-page-tete ~ * h2,
.crn-main .crn-page-tete + * h2{max-width:28ch}

/* ── 2. TABLEAUX ────────────────────────────────────────────────
   Alignés sur le reste du système : filets d'un pixel, en-têtes en
   monospace, pas de cadre extérieur lourd. */
.wp-block-table{margin-left:0!important;overflow-x:auto}
.wp-block-table table{
  border-collapse:collapse;width:100%;
  border:0;font-size:.9375rem;
}
.wp-block-table thead{border-bottom:1px solid var(--crn-rule)}
.wp-block-table th{
  font-family:var(--crn-machine)!important;
  font-size:.625rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--crn-muted)!important;
  text-align:left;padding:.55rem .9rem .7rem;
  border:0;background:none;
}
.wp-block-table td{
  padding:.85rem .9rem;
  border:0;border-bottom:1px solid var(--crn-rule);
  vertical-align:top;line-height:1.5;
}
.wp-block-table tr:last-child td{border-bottom:0}
.wp-block-table td:first-child{padding-left:0;font-weight:500}
.wp-block-table th:first-child{padding-left:0}
.wp-block-table td strong{font-family:var(--crn-display);font-weight:700;font-size:1rem}
.wp-block-table tbody tr{transition:background .25s var(--crn-ease)}
.wp-block-table tbody tr:hover{background:var(--crn-surface)}
html[data-vue="machine"] .wp-block-table td,
html[data-vue="machine"] .wp-block-table th{font-family:var(--crn-machine)!important;font-size:.8125rem}

/* ── 3. LES BLOCS DE LA MÉTHODE ─────────────────────────────────
   Ils restaient invisibles hors de la page d'accueil : la classe
   de révélation n'était posée que sur les sections. Ils sont
   désormais visibles par défaut, et ne s'animent que si le
   JavaScript est actif. */
.crn-bloc{opacity:1;transform:none}
html.crn-js .crn-blocs:not(.crn-vu) .crn-bloc{opacity:0;transform:translateY(14px)}
.crn-blocs.crn-vu .crn-bloc{opacity:1;transform:none}
.crn-blocs.crn-vu .crn-bloc:nth-child(1){transition-delay:.02s}
.crn-blocs.crn-vu .crn-bloc:nth-child(2){transition-delay:.08s}
.crn-blocs.crn-vu .crn-bloc:nth-child(3){transition-delay:.14s}
.crn-blocs.crn-vu .crn-bloc:nth-child(4){transition-delay:.20s}
.crn-blocs.crn-vu .crn-bloc:nth-child(5){transition-delay:.26s}
.crn-blocs.crn-vu .crn-bloc:nth-child(6){transition-delay:.32s}
.crn-blocs.crn-vu .crn-bloc:nth-child(7){transition-delay:.38s}
.crn-blocs.crn-vu .crn-bloc:nth-child(8){transition-delay:.44s}

/* La grille des blocs fonctionne partout, pas seulement sur l'accueil */
.crn-blocs{grid-template-columns:1fr}
@media(min-width:560px){.crn-blocs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){
  .crn-methode-grille .crn-blocs{grid-template-columns:repeat(2,1fr)}
  .crn-main > .crn-blocs,
  .crn-main .wp-block-group > .crn-blocs{grid-template-columns:repeat(4,1fr)}
}

/* ══════════════════════════════════════════════════════════════
   ★ V4 — MOBILE ET TABLETTE
   ══════════════════════════════════════════════════════════════ */


/* ── Titres : réduction franche sur petit écran ── */
@media(max-width:600px){
  h1{font-size:clamp(2.15rem,10vw,3rem);line-height:.96}
  h2{font-size:clamp(1.55rem,7vw,2.1rem);line-height:1.02}
  .crn-page-tete h1{font-size:clamp(1.9rem,9vw,2.6rem)}
  .crn-main h1,.crn-main h2{max-width:none}
  .crn-chapo{font-size:1.0625rem}
}

/* ── Sections : marges resserrées ── */
@media(max-width:768px){
  .crn-section{
    padding-top:clamp(2.75rem,9vw,4rem)!important;
    padding-bottom:clamp(2.75rem,9vw,4rem)!important;
  }
  .crn-page-tete{padding-top:2.25rem;padding-bottom:1.75rem;margin-bottom:2rem}
}

/* ── Chiffres géants : discrets sur mobile ── */
@media(max-width:768px){
  .crn-section[data-chiffre]::before{
    font-size:clamp(6rem,34vw,10rem);
    right:-.06em;top:-.05em;opacity:calc(var(--crn-chiffre) * .7);
  }
}

/* ── Tableaux : défilement horizontal plutôt qu'écrasement ── */
@media(max-width:700px){
  .wp-block-table{
    -webkit-overflow-scrolling:touch;
    border:1px solid var(--crn-rule);border-radius:4px;
  }
  .wp-block-table table{min-width:460px;font-size:.875rem}
  .wp-block-table td,.wp-block-table th{padding:.7rem}
  .wp-block-table td:first-child,.wp-block-table th:first-child{padding-left:.7rem}
}

/* ── Cartes de prestations et blocs ── */
@media(max-width:919px){
  .crn-offre{padding:1.5rem 1.35rem}
  .crn-offre .crn-prix{font-size:2.1rem}
}

/* ── Colonnes : vraie pile sur mobile ── */
@media(max-width:781px){
  .crn-main .wp-block-columns{gap:2rem!important}
  .crn-main .wp-block-column{flex-basis:100%!important}
}


/* ── En-tête compact ── */
@media(max-width:560px){
  .crn-entete-in{min-height:56px}
  .crn-marque .crn-mot{font-size:.8rem;letter-spacing:.08em}
  .crn-bascule{padding:.34rem .42rem .34rem .58rem}
}

/* ── FAQ : accordéons confortables au doigt ── */
@media(max-width:600px){
  .wp-block-details summary{font-size:1rem;padding-right:1.75rem;padding-block:.35rem}
}

/* ── Formulaires : pas de zoom automatique sur iOS ──
   Sous 16 px, Safari agrandit la page à la mise au point. */
@media(max-width:768px){
  .crn-form input,.crn-form select,.crn-form textarea,
  .wpforms-container input,.wpforms-container select,.wpforms-container textarea,
  .fluentform input,.fluentform select,.fluentform textarea{font-size:16px}
}

/* ── Graphe : plus haut, donc lisible sur mobile ── */
@media(max-width:699px){
  .crn-graphe{aspect-ratio:1/1;max-height:340px}
}

/* ── Zones tactiles d'au moins 44 px ── */
@media(pointer:coarse){
  .crn-main p a,.crn-main li a,.crn-liens a{padding-block:.35em}
  .crn-cta-entete,.wp-element-button{min-height:44px;display:inline-flex;align-items:center}
}

/* ── Pied de page ── */
@media(max-width:780px){
  .crn-pied-cols{gap:2rem!important}
  .crn-copy{flex-direction:column;gap:.6rem}
}

/* ── Rien ne doit déborder horizontalement ── */
html,body{max-width:100%;overflow-x:clip}


/* ══════════════════════════════════════════════════════════════
   ★ V4.1 — CORRECTIFS
   ══════════════════════════════════════════════════════════════ */

/* ── C · Alignement des groupes ─────────────────────────────────
   Les blocs de type Groupe étaient encore centrés par la mise en
   page contrainte de WordPress. On les cale à gauche eux aussi. */
/* (remplacé par le bloc d'alignement V4.2, plus bas) */

/* Les titres respirent : plus de coupure disgracieuse */
.crn-main h1{max-width:20ch}
.crn-main h2{max-width:26ch}
.crn-main h3,.crn-main h4{max-width:34ch}

/* ── B · Priorité aux réglages de l'éditeur ────────────────────
   Une taille choisie dans le panneau de droite doit gagner. */
.crn-main [style*="font-size"]{font-size:revert-layer}

/* ── D · En-tête et pied de page légèrement contrastés ─────────
   Réglable depuis le panneau de réglages, en haut du fichier. */
:root{
  --crn-ombre:      #E3E7E4;             /* teinte du bandeau      */
  --crn-pied-fond:  var(--crn-ombre);    /* fond du pied de page   */
}
html[data-vue="machine"]{--crn-ombre:#0A0C0F}

.crn-entete{
  background:color-mix(in srgb,var(--crn-ombre) 92%,transparent);
  border-bottom:1px solid var(--crn-rule);
}
.crn-pied{
  background:var(--crn-pied-fond);
  border-top:1px solid var(--crn-rule);
  transition:background .5s var(--crn-ease),border-color .5s var(--crn-ease);
  padding-left:var(--gut)!important;padding-right:var(--gut)!important;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  max-width:100vw;
}
.crn-pied > *{max-width:1200px;margin-inline:auto!important}

/* ── E · Logo agrandi ── v5.2.0 : ces deux valeurs sont remontées au
   PANNEAU DE RÉGLAGES. Elles y étaient déjà, mais ce :root les écrasait,
   donc éditer le panneau ne faisait rien. ── */

/* Le logo mis en avant dans le héros */
.crn-heros-logo{
  display:flex;align-items:center;gap:1.15rem;
  margin:0 0 clamp(1.75rem,4vw,2.75rem);
}
.crn-heros-logo svg{
  width:clamp(52px,9vw,84px);height:auto;color:var(--crn-fg);flex:none;
}
.crn-heros-logo .crn-pierre{
  opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--crn-ease),transform .7s var(--crn-ease);
}
.crn-vu .crn-heros-logo .crn-p1{transition-delay:.10s}
.crn-vu .crn-heros-logo .crn-p2{transition-delay:.32s}
.crn-vu .crn-heros-logo .crn-p3{transition-delay:.54s}
.crn-vu .crn-heros-logo .crn-pierre{opacity:1;transform:none}
.crn-heros-logo .crn-nom{
  font-family:var(--crn-display);font-weight:800;
  /* v5.2.0 : plus de « wdth 78 ». C'est cette ligne, et elle seule, qui
     comprimait les lettres à 78 % ici et nulle part ailleurs. Le mot
     s'écrit maintenant comme dans l'en-tête et le pied de page. */
  font-size:clamp(1.25rem,3vw,1.9rem);letter-spacing:var(--crn-logo-espace);line-height:1;
}
.crn-heros-logo .crn-base{
  font-family:var(--crn-machine);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--crn-muted);margin-top:.5rem;
}

/* ══════════════════════════════════════════════════════════════
   ★ V4.2 — ALIGNEMENT
   ──────────────────────────────────────────────────────────────
   Deux niveaux à ne pas confondre :

   1. Les CONTENEURS — sections, en-têtes de page, colonnes —
      restent centrés dans la fenêtre. C'est le comportement
      natif de WordPress, on ne le touche pas.

   2. Le CONTENU — titres, paragraphes, listes, tableaux — se
      cale à gauche de son conteneur. Sans cette règle, WordPress
      centre tout élément plus étroit que son conteneur, ce qui
      décalait les textes limités en longueur de ligne.
   ══════════════════════════════════════════════════════════════ */

/* 1 · Les conteneurs sont centrés */
.crn-main .crn-section,
.crn-main .crn-page-tete,
.crn-main .wp-block-columns,
.crn-main .crn-blocs,
.crn-main .crn-offres,
.crn-main .crn-graphe,
.crn-main .wp-block-post-content > .wp-block-group{
  margin-left:auto!important;
  margin-right:auto!important;
}
.crn-main .crn-page-tete{width:100%}

/* 2 · Le contenu se cale à gauche de son conteneur */
.crn-main :is(p, h1, h2, h3, h4, ul, ol, figure,
              .crn-encadre, .wp-block-buttons, .wp-block-details){
  margin-left:0!important;
  margin-right:auto!important;
}

/* 3 · Ce qui doit rester centré le reste */
.crn-main .has-text-align-center,
.crn-main .aligncenter,
.crn-main .crn-cairn,
.crn-main .crn-centre :is(p, h1, h2, h3, h4){
  margin-left:auto!important;
  margin-right:auto!important;
}

/* 4 · Pleine largeur */
.crn-main .alignfull{
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  max-width:100vw;
}

/* ══════════════════════════════════════════════════════════════
   ★ V4.3 — LA COLONNE DE CONTENU
   ──────────────────────────────────────────────────────────────
   Le défaut venait d'une subtilité de WordPress : la mise en page
   « contrainte » ne crée pas de boîte centrée. Elle applique une
   largeur maximale et des marges automatiques à CHAQUE enfant,
   individuellement, dans un conteneur qui reste pleine largeur.

   Conséquence : dès qu'on cale un texte à gauche, il ne va pas au
   bord de la colonne — il va au bord de l'écran.

   Sur l'accueil, chaque section est un groupe qui sert de boîte,
   donc rien ne se voyait. Sur les pages intérieures, les titres
   et paragraphes sont des enfants directs du contenu : ils
   partaient contre le bord gauche de la fenêtre.

   Correctif : on transforme la zone de contenu en vraie boîte
   centrée de 1200 px, alignée sur celle de l'en-tête.
   ══════════════════════════════════════════════════════════════ */
.crn-main .wp-block-post-content,
.crn-main > .entry-content{
  max-width:1200px;
  margin-left:auto!important;
  margin-right:auto!important;
  width:100%;
}

/* Les sections occupent toute la largeur de cette boîte */
.crn-main .crn-section,
.crn-main .crn-page-tete{
  width:100%;
  max-width:100%;
}

/* La pleine largeur reste calculée depuis la fenêtre, pas la boîte */
.crn-main .alignfull,
.crn-main .crn-inverse{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
}

/* Le pied de page suit la même logique */
.crn-pied{width:100vw;max-width:100vw}

/* ══════════════════════════════════════════════════════════════
   ★ V4.4 — COLONNE DE LECTURE DES PAGES INTÉRIEURES
   ──────────────────────────────────────────────────────────────
   L'accueil a besoin de 1200 px : ses sections sont en colonnes,
   avec des grilles et des cartes. Les pages intérieures, elles,
   sont du texte suivi. Y limiter chaque paragraphe à 66 caractères
   dans une boîte de 1200 px créait une colonne de 600 px collée à
   gauche, avec autant de vide à droite.

   Les pages intérieures ont donc leur propre colonne, calibrée
   pour que le texte la remplisse.
   ══════════════════════════════════════════════════════════════ */
body.page:not(.home) .crn-main .wp-block-post-content{max-width:820px}
body.single .crn-main .wp-block-post-content{max-width:760px}

/* Dans cette colonne, plus aucune limite par élément :
   c'est la colonne elle-même qui règle la longueur de ligne. */
body.page:not(.home) .crn-main :is(p, h1, h2, h3, h4, ul, ol, li),
body.single .crn-main :is(p, h1, h2, h3, h4, ul, ol, li){max-width:none}


/* ── Débordement des titres ─────────────────────────────────────
   Une largeur exprimée en « ch » sur un très gros caractère peut
   dépasser le conteneur. On borne systématiquement à 100 %. */
.crn-main h1{max-width:min(100%,20ch)}
.crn-main h2{max-width:min(100%,26ch)}
.crn-main h3,.crn-main h4{max-width:min(100%,34ch)}
.crn-main :is(h1,h2,h3,h4){overflow-wrap:break-word;hyphens:none}

/* ── Pleine largeur sans débordement horizontal ─────────────────
   100vw inclut la barre de défilement et provoque un décalage.
   On étend plutôt la couleur au-delà du conteneur. */
.crn-main .crn-inverse,
.crn-main .alignfull{
  width:auto!important;max-width:none!important;
  margin-left:0!important;margin-right:0!important;
  box-shadow:0 0 0 100vmax var(--crn-encre);
  clip-path:inset(0 -100vmax);
}
.crn-pied{
  width:auto;max-width:none;
  margin-left:0;margin-right:0;
  box-shadow:0 0 0 100vmax var(--crn-pied-fond);
  clip-path:inset(0 -100vmax);
}
.crn-pied > *{max-width:1200px}

/* ── FAQ : plus de cadre noir au clic ─────────────────────────── */
.wp-block-details summary{outline:none}
.wp-block-details summary:focus{outline:none;box-shadow:none}
.wp-block-details summary:focus-visible{
  outline:2px solid var(--crn-ambre);outline-offset:5px;border-radius:2px;
}
.wp-block-details summary::-moz-focus-inner{border:0}
.wp-block-details[open] summary{color:var(--crn-fg)}
.wp-block-details summary:hover{color:var(--crn-ambre)}

/* ══════════════════════════════════════════════════════════════
   ★ V4.4 — RELIEF DE LA MÉTHODE
   ══════════════════════════════════════════════════════════════ */

/* ── L'échelle de notation ── */
.crn-echelle{
  border-top:1px solid var(--crn-rule);
  margin:1.5rem 0 0;
}
.crn-cran{
  display:grid;
  grid-template-columns:2.75rem minmax(80px,1fr) minmax(0,1.4fr);
  gap:1.25rem;align-items:center;
  padding:1rem 0;
  border-bottom:1px solid var(--crn-rule);
  transition:background .3s var(--crn-ease);
}
.crn-cran:hover{background:var(--crn-surface)}
.crn-cran-num{
  font-family:var(--crn-display);font-weight:800;
  font-variation-settings:"wdth" 78,"opsz" 32;
  font-size:1.85rem;line-height:1;color:var(--crn-muted);
  transition:color .3s var(--crn-ease);
}
.crn-cran:hover .crn-cran-num,
.crn-cran-plein .crn-cran-num{color:var(--crn-fg)}
.crn-cran-jauge{
  display:block;height:6px;border-radius:3px;
  background:color-mix(in srgb,var(--crn-rule) 70%,transparent);
  overflow:hidden;
}
.crn-cran-jauge i{
  display:block;height:100%;width:var(--part);border-radius:3px;
  background:var(--crn-ambre);
  transform-origin:left;transform:scaleX(0);
  transition:transform .8s var(--crn-ease);
}
.crn-vu .crn-cran-jauge i,
.crn-echelle.crn-vu .crn-cran-jauge i{transform:scaleX(1)}
.crn-cran:nth-child(1) .crn-cran-jauge i{transition-delay:.05s}
.crn-cran:nth-child(2) .crn-cran-jauge i{transition-delay:.15s}
.crn-cran:nth-child(3) .crn-cran-jauge i{transition-delay:.25s}
.crn-cran:nth-child(4) .crn-cran-jauge i{transition-delay:.35s}
.crn-cran:nth-child(5) .crn-cran-jauge i{transition-delay:.45s}
.crn-cran-txt{font-family:var(--crn-lecture);font-size:1rem;line-height:1.4}
html[data-vue="machine"] .crn-cran-txt{font-family:var(--crn-machine);font-size:.875rem}
@media(max-width:600px){
  .crn-cran{grid-template-columns:2rem 1fr;gap:.85rem;row-gap:.5rem}
  .crn-cran-txt{grid-column:2}
  .crn-cran-num{font-size:1.4rem}
}

/* ── Jauge de pondération sur les sept blocs ── */
.crn-bloc .crn-pts{position:relative;padding-top:.7rem}
.crn-bloc .crn-pts::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:color-mix(in srgb,var(--crn-rule) 70%,transparent);border-radius:2px;
}
.crn-bloc .crn-pts::after{
  content:"";position:absolute;left:0;top:0;height:3px;
  width:var(--poids,50%);background:var(--crn-ambre);border-radius:2px;
  transform-origin:left;transform:scaleX(0);
  transition:transform .75s var(--crn-ease) .2s;
}
.crn-blocs.crn-vu .crn-bloc .crn-pts::after,
.crn-vu .crn-bloc .crn-pts::after{transform:scaleX(1)}

/* ══════════════════════════════════════════════════════════════
   ★ V4.5 — CORRECTIFS MOBILE
   ══════════════════════════════════════════════════════════════ */

/* ── Le graphe ─────────────────────────────────────────────────
   Il était désactivé sous 700 px et laissait un cadre vide.
   Hauteur garantie même sans prise en charge d'aspect-ratio. */
.crn-graphe{min-height:300px;touch-action:pan-y}
@media(max-width:640px){.crn-graphe{aspect-ratio:1/1;max-height:360px;min-height:300px}}
@media(max-width:400px){.crn-graphe{min-height:280px}}
.crn-graphe canvas{max-width:100%;height:100%}
/* Si le canvas ne peut pas être créé, on retire le cadre */
.crn-graphe-absent{display:none}

/* ── Débordements horizontaux ──────────────────────────────────
   La cause la plus fréquente d'un « site cassé » sur téléphone :
   un seul élément trop large décale toute la page. */
.crn-main img,.crn-main svg,.crn-main video,.crn-main iframe{max-width:100%;height:auto}
.crn-main pre,.crn-fichier pre{overflow-x:auto;-webkit-overflow-scrolling:touch}
.crn-panneau{max-width:100%;overflow-x:auto}
.crn-panneau pre{white-space:pre;min-width:0}
@media(max-width:600px){
  .crn-panneau pre{font-size:.625rem;white-space:pre-wrap;word-break:break-word}
}

/* ── En-tête collant sur iOS ───────────────────────────────────
   Safari a besoin d'un contexte d'empilement explicite. */
.wp-site-blocks > header,header.wp-block-template-part{
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  will-change:transform;
}


/* ── Grilles : une seule colonne sur petit écran ── */
@media(max-width:559px){
  .crn-blocs,.crn-blocs-large{grid-template-columns:1fr!important}
  .crn-offres{grid-template-columns:1fr!important}
  .crn-large{grid-column:auto!important}
}

/* ── L'échelle de notation au doigt ── */
@media(max-width:600px){
  .crn-cran{padding:.85rem 0}
  .crn-cran-jauge{height:8px}
}

/* ── Le commutateur reste atteignable ── */
@media(max-width:400px){
  .crn-entete-in{gap:.5rem!important}
  .crn-cta-entete{padding:.55rem .7rem;font-size:.5625rem}
  .crn-marque svg{width:24px;height:24px}
  .crn-marque .crn-mot{font-size:.75rem}
}

/* ── Accordéons FAQ : cible tactile confortable ── */
@media(pointer:coarse){
  .wp-block-details summary{min-height:44px;display:flex;align-items:center}
  .wp-block-details summary::after{top:50%;transform:translateY(-50%)}
  .wp-block-details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
}

/* ══════════════════════════════════════════════════════════════
   ★ V4.6 — RESPIRATION AVANT LE PIED DE PAGE
   ──────────────────────────────────────────────────────────────
   Sur l'accueil, la page se termine par une section, qui porte
   déjà sa marge basse. Sur les pages intérieures, elle se termine
   par un bouton ou un paragraphe, sans aucune marge : le pied de
   page arrivait trop près.

   La règle n'ajoute de l'espace que lorsque le dernier élément
   n'est pas une section — l'accueil n'est donc pas touché, et
   la respiration reste identique partout, quel que soit l'ordre
   des blocs.
   ══════════════════════════════════════════════════════════════ */
.crn-main .wp-block-post-content > :last-child:not(.crn-section),
.crn-main > .entry-content > :last-child:not(.crn-section){
  margin-bottom:clamp(3.75rem,8.5vw,7.5rem)!important;
}

/* Filet de sécurité : le contenu ne colle jamais au pied de page */
.crn-main{padding-bottom:clamp(1rem,2vw,2rem)}

/* ══════════════════════════════════════════════════════════════
   ★ V4.7 — LARGEUR ET RESPIRATION DES PAGES INTÉRIEURES
   ──────────────────────────────────────────────────────────────
   1. La règle qui libérait la largeur sur les pages intérieures
      était moins prioritaire que celle qui bridait les
      paragraphes à 66 caractères : ils restaient étroits, alors
      que le chapô — explicitement exclu — remplissait la colonne.
      D'où l'alignement à droite qui « décrochait » sous le titre.

   2. L'interlignage et les écarts entre blocs étaient calés pour
      l'accueil, où le texte est découpé en courtes colonnes. Sur
      du texte suivi, c'était trop serré.
   ══════════════════════════════════════════════════════════════ */

/* 1 · Le texte remplit la colonne, sans exception */
body.page:not(.home) .crn-main :is(p, h1, h2, h3, h4, ul, ol, li, figure, .crn-chapo),
body.single .crn-main :is(p, h1, h2, h3, h4, ul, ol, li, figure, .crn-chapo){
  max-width:none!important;
}

/* 2 · Respiration du texte suivi */
body.page:not(.home) .crn-main p,
body.single .crn-main p{
  line-height:1.72;
  margin-bottom:1.35em;
}
body.page:not(.home) .crn-main li,
body.single .crn-main li{
  line-height:1.7;
  margin-bottom:.65em;
}
body.page:not(.home) .crn-main ul,
body.page:not(.home) .crn-main ol{margin-bottom:1.6em}


/* Tableaux, accordéons et échelles : même respiration */
body.page:not(.home) .crn-main .wp-block-table{margin-top:1.75rem;margin-bottom:2.5rem}
body.page:not(.home) .crn-main .crn-echelle{margin-top:1.75rem;margin-bottom:2.5rem}
body.page:not(.home) .crn-main .crn-blocs{margin-top:1.75rem;margin-bottom:2.5rem}
body.page:not(.home) .crn-main .wp-block-details{padding:1.35rem 0}
body.page:not(.home) .crn-main .wp-block-buttons{margin-top:2.5rem}

/* Sur mobile, on resserre un peu ces écarts */
@media(max-width:600px){
  body.page:not(.home) .crn-main p{line-height:1.68;margin-bottom:1.2em}
}

/* ══════════════════════════════════════════════════════════════
   ★ V4.8 — PAS DE CADRE AU CLIC
   ──────────────────────────────────────────────────────────────
   Le cadre noir est l'anneau de focus par défaut du navigateur.
   On le retire au clic à la souris, mais on le conserve — en
   ambre — pour la navigation au clavier : un lien sur lequel on
   ne voit pas qu'on est arrivé est inutilisable à la tabulation.
   ══════════════════════════════════════════════════════════════ */
.crn-marque:focus,
.crn-marque:active,
.crn-cta-entete:focus,
.crn-bascule:focus,
.crn-nav a:focus,
.crn-liens a:focus,
.crn-main a:focus,
.wp-element-button:focus,
.wp-block-button__link:focus{
  outline:none;
  box-shadow:none;
}
.crn-marque::-moz-focus-inner,
.crn-cta-entete::-moz-focus-inner,
.crn-bascule::-moz-focus-inner{border:0;padding:0}

/* Au clavier, le repère reste visible */
.crn-marque:focus-visible,
.crn-cta-entete:focus-visible,
.crn-bascule:focus-visible,
.crn-nav a:focus-visible,
.crn-liens a:focus-visible,
.crn-main a:focus-visible,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible{
  outline:2px solid var(--crn-ambre);
  outline-offset:4px;
  border-radius:3px;
}

/* 5.3.3 — Le cadre revenait sur les liens du bas de page (Mentions
   légales, Confidentialité) : WordPress met un trait de 2 px, couleur
   du texte, sur tout élément cliqué (:where(.wp-site-blocks :focus)),
   et la liste ci-dessus ne couvrait pas ces liens. Cette règle couvre
   tout le site, y compris les éléments à venir. Au clavier
   (:focus-visible), le repère ambre reste affiché. */
.wp-site-blocks :focus:not(:focus-visible){
  outline:none!important;
  box-shadow:none!important;
}

/* Le logo ne se sélectionne pas non plus par mégarde */
.crn-marque{-webkit-tap-highlight-color:transparent;user-select:none}
.crn-marque svg{pointer-events:none}

/* ══════════════════════════════════════════════════════════════
   ★ V4.10 — LE LOGO DU HÉROS
   ──────────────────────────────────────────────────────────────
   Les pierres restaient invisibles : la règle qui les masquait
   avant animation était plus prioritaire que celle qui les
   révélait. Seul le texte CAIRNOTA s'affichait.

   L'ordre correct est celui-ci, du plus général au plus précis :
     1. visibles par défaut — donc affichées même sans JavaScript
     2. masquées si le JavaScript est actif
     3. révélées quand la section entre à l'écran
   ══════════════════════════════════════════════════════════════ */
.crn-heros-logo .crn-pierre{
  opacity:1;transform:none;
  transition:opacity .7s var(--crn-ease),transform .7s var(--crn-ease);
}
html.crn-js .crn-heros-logo .crn-pierre{opacity:0;transform:translateY(18px)}
html.crn-js .crn-vu .crn-heros-logo .crn-pierre{opacity:1;transform:none}
html.crn-js .crn-vu .crn-heros-logo .crn-p1{transition-delay:.10s}
html.crn-js .crn-vu .crn-heros-logo .crn-p2{transition-delay:.32s}
html.crn-js .crn-vu .crn-heros-logo .crn-p3{transition-delay:.54s}

/* Repli : si la section n'est jamais marquée comme vue,
   les pierres réapparaissent au bout de deux secondes. */
@keyframes crn-secours-logo{to{opacity:1;transform:none}}
html.crn-js .crn-heros-logo .crn-pierre{
  animation:crn-secours-logo .01s linear 2.5s forwards;
}

@media(prefers-reduced-motion:reduce){
  html.crn-js .crn-heros-logo .crn-pierre{opacity:1;transform:none;animation:none}
}

/* ══════════════════════════════════════════════════════════════
   ★ V4.11 — L'ENCADRÉ
   ──────────────────────────────────────────────────────────────
   Il est construit avec un bloc Groupe. Or la règle qui centre
   les groupes — pensée pour les conteneurs de section — était
   plus prioritaire que celle qui l'alignait à gauche. Étant plus
   étroit que la colonne, il apparaissait décalé vers le centre.
   ══════════════════════════════════════════════════════════════ */
.crn-main .crn-encadre,
.crn-main .wp-block-post-content > .crn-encadre,
.crn-main .is-layout-constrained > .crn-encadre{
  margin-left:0!important;
  margin-right:auto!important;
}

/* Sur les pages intérieures, il occupe toute la colonne de lecture
   et marque une vraie pause dans le texte */
body.page:not(.home) .crn-main .crn-encadre{
  max-width:none;
  margin-top:1.75rem!important;
  margin-bottom:1.75rem!important;
}

/* ══════════════════════════════════════════════════════════════
   ★ V4.12 — LE LOGO DU HÉROS SE RÈGLE AU PANNEAU
   ──────────────────────────────────────────────────────────────
   Plus besoin de toucher au bloc HTML de la page : les trois
   tailles se changent en haut de ce fichier, section
   ★ PANNEAU DE RÉGLAGES.
   ══════════════════════════════════════════════════════════════ */
.crn-heros-logo svg{
  width:var(--crn-heros-marque);
  height:auto;
}
.crn-heros-logo .crn-nom{
  font-size:var(--crn-heros-nom);
}
.crn-heros-logo .crn-base{
  font-size:var(--crn-heros-base);
  letter-spacing:var(--crn-heros-base-esp);
  color:var(--crn-muted);
}

/* Sur petit écran, la ligne reste lisible sans déborder */
@media(max-width:480px){
  .crn-heros-logo .crn-base{
    font-size:calc(var(--crn-heros-base) * .85);
    letter-spacing:calc(var(--crn-heros-base-esp) * .7);
  }
}

/* ══════════════════════════════════════════════════════════════
   ★ V4.13 — LA LIGNE SOUS LE NOM
   ──────────────────────────────────────────────────────────────
   « Agence GEO · France » passe de .8125rem à 1rem, soit environ
   un quart plus grande, et gagne un peu d'air sous le nom.
   ══════════════════════════════════════════════════════════════ */
.crn-heros-logo .crn-base{
  font-size:var(--crn-heros-base);
  letter-spacing:var(--crn-heros-base-esp);
  margin-top:.6rem;
  color:var(--crn-muted);
}

/* ══════════════════════════════════════════════════════════════
   ★ V4.14 — TYPOGRAPHIE, PORTRAIT, MOBILE
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · « Agence GEO · France » plus lisible ── */
/* v5.2.0 : --crn-heros-base et --crn-heros-base-esp sont remontées au
   PANNEAU DE RÉGLAGES, pour la même raison qu'en ── E ── plus haut. */
.crn-heros-logo .crn-base{
  font-size:var(--crn-heros-base);
  letter-spacing:var(--crn-heros-base-esp);
  margin-top:.65rem;
  color:var(--crn-muted);
}

/* ── 2 · Le titre d'accueil adopte la taille des autres pages ──
   L'accueil montait à 6,6 rem, les pages intérieures à 4,2 rem.
   Une seule échelle désormais, sur tout le site. */
.crn-main .crn-heros h1,
.crn-main .crn-titre-heros,
.crn-page-tete h1{
  font-size:clamp(2.2rem,6vw,4.2rem);
  line-height:.94;
}

/* ── 3 · Emplacement du portrait ──
   À poser sur un bloc Colonnes, ou directement sur une image. */
.crn-portrait img,
.crn-portrait .wp-block-image img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:center 25%;
  border-radius:4px;
  display:block;
}
.crn-portrait figure{margin:0}
.crn-portrait figcaption{
  font-family:var(--crn-machine);
  font-size:.6875rem;
  letter-spacing:.08em;
  color:var(--crn-muted);
  margin-top:.75rem;
  text-align:left;
}
/* Variante carrée */
.crn-portrait-carre img{aspect-ratio:1/1}
@media(max-width:781px){
  .crn-portrait img{aspect-ratio:4/3;max-width:340px}
}

/* ══════════════════════════════════════════════════════════════
   ★ V4.14 — MOBILE : REMISE À PLAT
   ══════════════════════════════════════════════════════════════ */
@media(max-width:781px){

  /* Aucun élément ne peut dépasser la largeur de l'écran */
  html,body{overflow-x:clip;max-width:100%}
  .crn-main,.crn-main *{max-width:100%}
  .crn-main img,.crn-main svg,.crn-main canvas{height:auto}

  /* Le contenu se cale à gauche, sans exception */
  .crn-main :is(p,h1,h2,h3,h4,ul,ol,figure,.crn-encadre,.wp-block-buttons){
    margin-left:0!important;
    margin-right:0!important;
    max-width:100%!important;
  }
  .crn-main .has-text-align-center{margin-left:auto!important;margin-right:auto!important}

  /* Colonnes empilées, sans décalage */
  .crn-main .wp-block-columns{
    flex-direction:column!important;
    gap:1.75rem!important;
    margin-left:0!important;margin-right:0!important;
  }
  .crn-main .wp-block-column{
    flex-basis:100%!important;width:100%!important;
    margin-left:0!important;margin-right:0!important;
  }


  /* Chiffres géants : ils ne doivent jamais pousser la mise en page */
  .crn-section[data-chiffre]::before{
    right:0!important;max-width:100%;overflow:hidden;
  }
}


/* ══════════════════════════════════════════════════════════════
   ★ V4.15 — LE MOBILE, CAUSE RACINE
   ──────────────────────────────────────────────────────────────
   Sur iOS, un élément portant backdrop-filter devient le bloc
   conteneur de ses descendants en position fixe. Le menu plein
   écran se retrouvait donc enfermé dans la barre d'en-tête de
   66 px, débordait à droite, et rendait toute la page scrollable
   horizontalement — d'où les titres coupés et le contenu décalé.

   Sous 900 px : l'en-tête devient opaque et perd son filtre.
   ══════════════════════════════════════════════════════════════ */
@media(max-width:900px){

  /* 1 · L'en-tête ne crée plus de bloc conteneur */
  .crn-entete,
  .wp-site-blocks > header,
  header.wp-block-template-part{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background:var(--crn-ombre)!important;
    will-change:auto!important;
  }
  html[data-vue="machine"] .crn-entete{background:var(--crn-encre)!important}

  /* 3 · Plus de rognage : il empêchait l'en-tête de rester collé
        sur iOS. Le débordement est traité à la source. */
  html,body{overflow-x:visible!important}
  body{overflow-x:hidden}

  /* 4 · Rien ne peut dépasser en largeur */
  .crn-main,.crn-entete,.crn-pied{max-width:100vw;overflow-x:hidden}
  .crn-main :is(h1,h2,h3,h4){
    overflow-wrap:anywhere;
    word-break:normal;
    hyphens:auto;
    max-width:100%!important;
  }
}

/* ── Très petits écrans : l'en-tête se resserre ── */
@media(max-width:430px){
  .crn-entete-in{min-height:58px;gap:.4rem!important}
  .crn-marque svg{width:26px;height:26px}
  .crn-marque .crn-mot{font-size:.75rem;letter-spacing:.06em}
  .crn-cta-entete{padding:.5rem .65rem;font-size:.5313rem;letter-spacing:.06em}
  .crn-bascule{padding:.3rem .38rem .3rem .5rem}
  .crn-bascule .crn-rail{width:26px;height:15px}
  .crn-bascule .crn-pastille{width:9px;height:9px}
  html[data-vue="machine"] .crn-bascule .crn-pastille{transform:translateX(12px)}
}

/* ── Le titre d'accueil sur petit écran ── */
@media(max-width:600px){
  .crn-main .crn-heros h1,
  .crn-main .crn-titre-heros{
    font-size:clamp(1.9rem,8vw,2.6rem);
    line-height:.98;
    letter-spacing:-.025em;
  }
  .crn-heros-logo{gap:.85rem}
  /* v5.2.0 : déclinaison mobile du bloc logo, agrandie du même rapport
     que le panneau (×1,5 sur les pierres). Ces deux valeurs échappent au
     PANNEAU DE RÉGLAGES : sous 600 px, c'est ici qu'on les change, et
     nulle part ailleurs. Mesuré à 360 px : le bloc ne déborde pas. */
  .crn-heros-logo svg{width:clamp(56px,17vw,90px)}
  .crn-heros-logo .crn-base{font-size:clamp(.9375rem,3.6vw,1.125rem);letter-spacing:.12em}
}


/* ══════════════════════════════════════════════════════════════
   ★ V4.18 — HABILLAGE DU FORMULAIRE
   ──────────────────────────────────────────────────────────────
   Fluent Forms prend la charte du site : étiquettes en monospace,
   champs sur fond carte, filet ambre à la mise au point.
   ══════════════════════════════════════════════════════════════ */
.fluentform{max-width:640px}
.fluentform .ff-el-group{margin-bottom:1.35rem}

/* Étiquettes */
.fluentform .ff-el-input--label label{
  font-family:var(--crn-machine)!important;
  font-size:.625rem!important;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--crn-muted)!important;margin-bottom:.45rem;
}
.fluentform .ff-el-is-required.asterisk-right label:after{color:var(--crn-ambre);margin-left:.3em}

/* Champs */
.fluentform input[type=text],
.fluentform input[type=email],
.fluentform input[type=url],
.fluentform input[type=tel],
.fluentform input[type=number],
.fluentform select,
.fluentform textarea{
  font-family:var(--crn-machine)!important;
  font-size:.875rem!important;
  color:var(--crn-fg)!important;
  background:var(--crn-surface)!important;
  border:1px solid var(--crn-rule)!important;
  border-radius:3px!important;
  padding:.8rem .85rem!important;
  height:auto!important;box-shadow:none!important;
  transition:border-color .25s,background .5s var(--crn-ease),color .5s var(--crn-ease);
}
.fluentform input:focus,
.fluentform select:focus,
.fluentform textarea:focus{
  outline:none!important;
  border-color:var(--crn-ambre)!important;
  box-shadow:none!important;
}
.fluentform textarea{min-height:110px!important;resize:vertical}
.fluentform ::placeholder{color:var(--crn-muted)!important;opacity:.7}

/* Message d'aide sous un champ */
.fluentform .ff-el-help-message{
  font-family:var(--crn-machine)!important;font-size:.6875rem!important;
  color:var(--crn-muted)!important;margin-top:.4rem;line-height:1.5;
}

/* Case à cocher du consentement */
.fluentform .ff-el-form-check{display:flex;gap:.7rem;align-items:flex-start}
.fluentform .ff-el-form-check-input{
  accent-color:var(--crn-ambre);width:auto!important;
  margin-top:.3rem;flex:none;
}
.fluentform .ff-el-form-check-label{
  font-family:var(--crn-machine)!important;font-size:.75rem!important;
  line-height:1.6;color:var(--crn-muted)!important;text-transform:none;letter-spacing:0;
}

/* Bouton */
.fluentform .ff-btn-submit{
  font-family:var(--crn-machine)!important;
  font-size:.6875rem!important;font-weight:500!important;
  letter-spacing:.1em!important;text-transform:uppercase!important;
  background:var(--crn-fg)!important;color:var(--crn-bg)!important;
  border:0!important;border-radius:3px!important;
  padding:1rem 1.75rem!important;
  transition:opacity .2s,transform .3s var(--crn-ease),background .5s var(--crn-ease);
}
.fluentform .ff-btn-submit:hover{opacity:.88;transform:translateY(-2px)}

/* Erreurs */
.fluentform .error,.fluentform .text-danger,.fluentform .ff-el-is-error .error{
  font-family:var(--crn-machine)!important;font-size:.6875rem!important;
  color:#C0392B!important;margin-top:.4rem;
}
html[data-vue="machine"] .fluentform .error{color:#FF6B5A!important}
.fluentform .ff-el-is-error input,
.fluentform .ff-el-is-error textarea{border-color:#C0392B!important}

/* Message de confirmation */
.fluentform .ff-message-success,.ff_submit_success{
  font-family:var(--crn-lecture)!important;font-size:1.0625rem!important;
  background:none!important;border:0!important;
  border-left:2px solid var(--crn-ambre)!important;
  padding:.2rem 0 .2rem 1.15rem!important;
  color:var(--crn-fg)!important;
}
html[data-vue="machine"] .fluentform .ff-message-success{font-family:var(--crn-machine)!important;font-size:.9375rem!important}

/* Mobile : pas de zoom automatique sur iOS */
@media(max-width:768px){
  .fluentform input,.fluentform select,.fluentform textarea{font-size:16px!important}
  .fluentform{max-width:100%}
}

/* ══════════════════════════════════════════════════════════════
   ★ V4.19 — MOBILE, MODÈLE DÉFINITIF
   ──────────────────────────────────────────────────────────────
   Mes règles précédentes déplaçaient la gouttière d'un élément à
   l'autre, et il suffisait qu'une seule ne s'applique pas pour
   que le texte touche le bord.

   Modèle unique désormais : UNE seule marge, portée par le
   conteneur racine. Tout le reste est à zéro. Les sections
   pleine largeur débordent de cette même valeur — donc elles ne
   peuvent pas se désynchroniser.
   ══════════════════════════════════════════════════════════════ */
@media(max-width:781px){

  :root{--crn-marge:1.25rem;--gut:var(--crn-marge)}

  /* La seule marge du site */
  .wp-site-blocks{
    padding-left:var(--crn-marge)!important;
    padding-right:var(--crn-marge)!important;
  }

  /* Tout le reste : aucune marge propre */
  .crn-main,
  .crn-main .wp-block-post-content,
  .crn-main > .entry-content,
  .crn-main .crn-section,
  .crn-main .crn-page-tete,
  .crn-main .wp-block-group,
  .crn-main .wp-block-columns,
  .crn-main .wp-block-column{
    padding-left:0!important;
    padding-right:0!important;
    margin-left:0!important;
    margin-right:0!important;
    width:100%!important;
    max-width:100%!important;
  }

  /* Pleine largeur : on déborde exactement de la marge racine */
  .crn-main .crn-inverse,
  .crn-main .alignfull,
  .crn-pied{
    margin-left:calc(-1 * var(--crn-marge))!important;
    margin-right:calc(-1 * var(--crn-marge))!important;
    padding-left:var(--crn-marge)!important;
    padding-right:var(--crn-marge)!important;
    width:auto!important;
    max-width:none!important;
    box-shadow:none!important;
    clip-path:none!important;
  }
  .crn-pied > *{margin-left:0!important;margin-right:0!important;max-width:100%}

  /* L'en-tête porte sa marge lui-même, il est hors du flux */
  .crn-entete{
    padding-left:var(--crn-marge)!important;
    padding-right:var(--crn-marge)!important;
  }
  .crn-entete-in{
    padding-left:0!important;padding-right:0!important;
    margin-left:0!important;margin-right:0!important;
  }
}

/* ══════════════════════════════════════════════════════════════
   ★ V4.19 — LE MENU, ALIGNEMENT À GAUCHE
   ──────────────────────────────────────────────────────────────
   L'alignement à droite était inscrit dans les attributs du bloc
   Navigation, donc généré par WordPress avec une priorité qu'un
   simple correctif ne pouvait pas dépasser. Il est retiré à la
   source ; l'alignement à droite de la barre horizontale est
   désormais rétabli par le CSS, uniquement sur grand écran.
   ══════════════════════════════════════════════════════════════ */
@media(min-width:901px){
  .crn-entete .wp-block-navigation__container{justify-content:flex-end}
}


/* ══════════════════════════════════════════════════════════════
   ★ V4.20 — RYTHME VERTICAL ET BLOCS COMPACTS
   ══════════════════════════════════════════════════════════════ */

/* ── 2 · Les sept blocs deviennent compacts ─────────────────────
   Les marges des titres des pages intérieures s'appliquaient
   aussi aux titres à l'intérieur des blocs, qui se retrouvaient
   étirés en hauteur. On les neutralise à l'intérieur de la
   grille, et on resserre la carte. */
.crn-blocs{align-items:stretch}

.crn-bloc{
  min-height:0!important;
  padding:1.05rem 1.15rem 1.15rem!important;
  gap:.35rem!important;
}
.crn-bloc :is(h1, h2, h3, h4, p, span){
  margin-top:0!important;
  margin-bottom:0!important;
  max-width:none!important;
}
.crn-bloc h4{
  font-size:.9375rem;
  line-height:1.25;
  font-family:var(--crn-display);
  font-weight:700;
}
.crn-bloc .crn-num{font-size:.5938rem;letter-spacing:.16em}
.crn-bloc .crn-pts{
  margin-top:.75rem!important;
  padding-top:.55rem;
  font-size:.5938rem;
}
.crn-bloc .crn-pts::before,
.crn-bloc .crn-pts::after{height:2px}

/* Quatre colonnes dès que la place le permet, même sur une page */
@media(min-width:900px){
  .crn-blocs,.crn-blocs-large{grid-template-columns:repeat(4,1fr)!important}
}
@media(min-width:560px) and (max-width:899px){
  .crn-blocs,.crn-blocs-large{grid-template-columns:repeat(2,1fr)!important}
}

/* ══════════════════════════════════════════════════════════════
   ★ V5.0 — REMISE EN ORDRE
   ──────────────────────────────────────────────────────────────
   Les versions 4.14 à 4.22 avaient empilé plusieurs correctifs
   sur les mêmes sujets. Ils sont regroupés ici, une seule règle
   par sujet. Les anciennes versions ont été retirées du fichier.

   1. Rythme vertical des pages intérieures
   2. Cartes : blocs de la méthode et offres
   3. Grilles des pages Méthode et Prestations
   4. Menu mobile
   5. Page Qui suis-je
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · Rythme vertical ────────────────────────────────────────
   La cause des blocs étirés : les écarts de titre visaient tous
   les titres de la page, y compris ceux à l'intérieur des cartes,
   avec une priorité plus forte que les exceptions prévues.

   Ils ne visent plus que les titres du texte courant : enfants
   directs du contenu de la page, d'une colonne, ou d'un groupe
   portant la classe « crn-flux ». Les cartes ne sont plus
   concernées, par construction.

   Réglage : --crn-ecart-titre, dans le panneau en haut du fichier. */
.crn-main{--wp--style--block-gap:1.4rem}

/* Un titre n'a jamais de marge propre dessous */
.crn-main :is(h1, h2, h3, h4){
  margin-bottom:0!important;
  margin-block-end:0!important;
  padding-bottom:0!important;
}

/* Repli pour tout titre hors texte courant */
.crn-main :is(h1, h2, h3, h4) + *{
  margin-top:.8rem!important;
  margin-block-start:.8rem!important;
}

/* Texte courant (5.3.1) : plus d'espace au-dessus d'un titre qu'en
   dessous, pour que le titre colle à son texte ; et des écarts qui
   diminuent avec le niveau du titre (H2 > H3 > H4). */
body:is(.page:not(.home), .single) .crn-main :is(.wp-block-post-content, .wp-block-column, .crn-flux) > :is(h2, h3, h4){
  margin-top:var(--crn-ecart-titre)!important;
  margin-block-start:var(--crn-ecart-titre)!important;
}
body:is(.page:not(.home), .single) .crn-main :is(.wp-block-post-content, .wp-block-column, .crn-flux) > h3{
  margin-top:calc(var(--crn-ecart-titre) * .8)!important;
  margin-block-start:calc(var(--crn-ecart-titre) * .8)!important;
}
body:is(.page:not(.home), .single) .crn-main :is(.wp-block-post-content, .wp-block-column, .crn-flux) > h4{
  margin-top:calc(var(--crn-ecart-titre) * .65)!important;
  margin-block-start:calc(var(--crn-ecart-titre) * .65)!important;
}
body:is(.page:not(.home), .single) .crn-main :is(.wp-block-post-content, .wp-block-column, .crn-flux) > h2 + *{
  margin-top:var(--crn-ecart-sous-titre)!important;
  margin-block-start:var(--crn-ecart-sous-titre)!important;
}
body:is(.page:not(.home), .single) .crn-main :is(.wp-block-post-content, .wp-block-column, .crn-flux) > h3 + *{
  margin-top:calc(var(--crn-ecart-sous-titre) * .7)!important;
  margin-block-start:calc(var(--crn-ecart-sous-titre) * .7)!important;
}
body:is(.page:not(.home), .single) .crn-main :is(.wp-block-post-content, .wp-block-column, .crn-flux) > h4 + *{
  margin-top:calc(var(--crn-ecart-sous-titre) * .55)!important;
  margin-block-start:calc(var(--crn-ecart-sous-titre) * .55)!important;
}
/* Le bloc qui précède un titre (tableau, paragraphe) perd sa marge
   basse : seul le réglage ci-dessus décide de l'écart. L'en-tête de
   page garde la sienne. */
body:is(.page:not(.home), .single) .crn-main :is(.wp-block-post-content, .wp-block-column, .crn-flux) > :not(.crn-page-tete):has(+ :is(h2, h3, h4)){
  margin-bottom:0!important;
  margin-block-end:0!important;
}

/* Sauf le premier titre, qui suit l'en-tête de page ou ouvre une colonne */
body:is(.page:not(.home), .single) .crn-main :is(.wp-block-post-content, .wp-block-column, .crn-flux) > :is(h2, h3, h4):first-child,
body:is(.page:not(.home), .single) .crn-main .crn-page-tete + :is(h2, h3, h4){
  margin-top:0!important;
  margin-block-start:0!important;
}

/* Entre deux paragraphes, l'espace reste plus court : c'est ce
   qui fait que le titre et son texte forment un ensemble. */
body.page:not(.home) .crn-main :is(.wp-block-post-content, .wp-block-column, .crn-flux) > :is(p, ul, ol) + :is(p, ul, ol){
  margin-top:1.4rem!important;
  margin-block-start:1.4rem!important;
}

/* En-tête de page : le chapô suit le titre de près */
.crn-main .crn-page-tete :is(h1, h2, h3, h4){
  margin-top:0!important;
  margin-block-start:0!important;
}
.crn-main .crn-page-tete :is(h1, h2, h3, h4) + *{
  margin-top:1.25rem!important;
  margin-block-start:1.25rem!important;
}
.crn-main .crn-page-tete .crn-chapo,
.crn-main .crn-page-tete > p:last-child{
  margin-bottom:0!important;
  margin-block-end:0!important;
}

/* L'accueil conserve le rythme de ses sections */
body.home .crn-main .crn-section :is(h2, h3, h4){
  margin-top:0!important;
  margin-block-start:0!important;
}
body.home .crn-main .crn-section :is(h2, h3, h4) + *{
  margin-top:1.15rem!important;
  margin-block-start:1.15rem!important;
}

/* ── 2 · Cartes ─────────────────────────────────────────────────
   Même réglage sur l'accueil et sur les pages : c'est l'écart
   entre éléments de la carte (gap) qui gouverne, plus aucune
   marge héritée du texte courant. */
body .crn-main :is(.crn-bloc, .crn-offre) :is(h1, h2, h3, h4, p){
  margin-top:0!important;
  margin-block-start:0!important;
  margin-bottom:0!important;
  margin-block-end:0!important;
  max-width:none!important;
}
body .crn-main :is(.crn-bloc, .crn-offre) :is(h1, h2, h3, h4) + *{
  margin-top:1.15rem!important;
  margin-block-start:1.15rem!important;
}

/* ── 3 · Grilles des pages intérieures ──────────────────────────
   Les sept blocs passent à quatre colonnes, les offres à trois,
   comme sur l'accueil. Sur grand écran, les deux grilles sortent
   de la colonne de lecture (820 px) pour occuper 1200 px, en
   restant centrées. */
body.page:not(.home) .crn-main :is(.crn-blocs, .crn-offres){
  margin-top:1.75rem;
  margin-bottom:2.5rem;
}
@media(min-width:1000px){
  body.page:not(.home) .crn-main :is(.crn-blocs, .crn-offres){
    --crn-large:min(1200px, calc(100vw - 4rem));
    width:var(--crn-large);
    max-width:none!important;
    margin-left:calc((100% - var(--crn-large)) / 2)!important;
    margin-right:0!important;
  }
  body.page:not(.home) .crn-main .crn-offres{grid-template-columns:repeat(3, 1fr)}
}
/* En dessous, les offres restent empilées : trois colonnes
   dans 820 px rendraient les cartes trop étroites */
@media(max-width:999px){
  body.page:not(.home) .crn-main .crn-offres{grid-template-columns:1fr!important}
  body.page:not(.home) .crn-main .crn-large{grid-column:auto!important}
}

/* Tablette : la colonne de contenu ne déborde plus.
   « width:100% » s'ajoutait à la marge intérieure : entre 782 et
   890 px environ, tout le contenu dépassait de l'écran à droite.
   En largeur automatique, la colonne se centre exactement comme
   avant sur grand écran, et tient dans l'écran en dessous. */
.crn-main .wp-block-post-content,
.crn-main > .entry-content{width:auto}

/* Les grilles élargies comptent leur bordure dans leur largeur */
body.page:not(.home) .crn-main :is(.crn-blocs, .crn-offres){box-sizing:border-box}

/* ── 4 · Menu mobile ────────────────────────────────────────────
   Les entrées collaient au bord gauche parce que leur marge
   reposait sur --gut, qui n'était défini nulle part : la règle
   entière était ignorée, et la croix de fermeture, privée de
   position, venait se poser sur « Le GEO ».

   --gut existe désormais, et vaut exactement la marge du contenu
   sur mobile. Le menu s'aligne donc sur le reste de la page, et
   la croix prend la place du bouton d'ouverture. */
@media(max-width:900px){
  .crn-nav{display:block}

  /* Le bouton d'ouverture */
  .crn-entete .wp-block-navigation__responsive-container-open{
    display:flex!important;
    align-items:center;
    color:var(--crn-entete-texte)!important;
    background:none!important;
    border:0;
    padding:.4rem;
    cursor:pointer;
  }
  .crn-entete .wp-block-navigation__responsive-container:not(.is-menu-open){display:none}

  /* Le panneau plein écran. Largeur donnée par inset, jamais par
     100vw : avec la marge intérieure, 100vw déborderait. */
  .crn-entete .wp-block-navigation__responsive-container.is-menu-open{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    position:fixed!important;
    inset:0!important;
    width:auto!important;
    height:100dvh!important;
    max-width:none!important;
    box-sizing:border-box!important;
    z-index:99999!important;
    padding:0 var(--gut) 3rem!important;
    background:var(--crn-bg)!important;
    color:var(--crn-fg)!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }
  .crn-entete .is-menu-open :is(.wp-block-navigation__responsive-close, .wp-block-navigation__responsive-dialog){
    width:100%;
    max-width:none;
    margin:0;
  }
  .crn-entete .is-menu-open .wp-block-navigation__responsive-dialog{
    position:relative;
    min-height:100%;
  }

  /* La croix, au bord droit, à la hauteur du bouton d'ouverture */
  .crn-entete .wp-block-navigation__responsive-container-close{
    position:absolute!important;
    top:calc((var(--crn-entete-mobile, 58px) - 24px) / 2 - .4rem)!important;
    right:0!important;
    left:auto!important;
    padding:.4rem!important;
    color:var(--crn-fg)!important;
  }

  /* Les entrées, alignées à gauche sur la marge du contenu */
  .crn-entete .is-menu-open .wp-block-navigation__responsive-container-content{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    width:100%!important;
    margin:0!important;
    padding:clamp(4.5rem, 18vw, 6rem) 0 0!important;
  }
  .crn-entete .is-menu-open :is(ul, .wp-block-navigation__container){
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    width:100%!important;
    gap:.2rem!important;
    margin:0!important;
    padding:0!important;
    list-style:none!important;
  }
  .crn-entete .is-menu-open li{
    width:100%!important;
    justify-content:flex-start!important;
    text-align:left!important;
  }
  .crn-entete .is-menu-open a{
    display:inline-flex!important;
    width:auto!important;
    justify-content:flex-start!important;
    text-align:left!important;
    padding:.6rem 0!important;
    font-family:var(--crn-display)!important;
    font-size:1.5rem!important;
    font-weight:800;
    line-height:1.15;
    letter-spacing:-.01em!important;
    text-transform:none!important;
    color:var(--crn-fg)!important;
  }
}
/* L'en-tête occupe toute la largeur : la marge globale du site
   (v4.19) le décalait aussi, laissant le bandeau gris en retrait
   des bords et le logo 20 px plus à droite que le texte. */
@media(max-width:781px){
  .wp-site-blocks > header.wp-block-template-part{
    margin-left:calc(-1 * var(--crn-marge))!important;
    margin-right:calc(-1 * var(--crn-marge))!important;
  }
}
@media(max-width:560px){:root{--crn-entete-mobile:56px}}
@media(max-width:430px){:root{--crn-entete-mobile:58px}}

/* ── 5 · Qui suis-je ────────────────────────────────────────────
   Sur ordinateur, pas de filet sous le titre : le portrait
   placé à droite venait le couper. Sur mobile, le filet reste,
   le portrait passant sous le texte. */
@media(min-width:782px){
  body.crn-page-qui-suis-je .crn-main .crn-page-tete{border-bottom:0!important}
  body.crn-page-qui-suis-je .crn-main :is(.crn-page-tete + hr.wp-block-separator, .crn-page-tete hr.wp-block-separator){
    display:none!important;
  }
}

/* ══════════════════════════════════════════════════════════════
   ★ V5.1.3 — EMPLACEMENT DE PORTRAIT
   ──────────────────────────────────────────────────────────────
   La photo est centrée, à toutes les largeurs, avec exactement le
   même écart au-dessus et en dessous.

   Sur la page Qui suis-je, l'unique image prend cet emplacement
   TOUTE SEULE : aucune classe à saisir dans l'éditeur. Ailleurs,
   la classe `crn-portrait-droite` fait la même chose à la demande.

   Deux réglages, une ligne chacun, dans :root ci-dessous :
     --crn-largeur-portrait  la largeur maximale de la photo
     --crn-ecart-portrait    l'écart, identique en haut et en bas

   ── Pourquoi ces sélecteurs sont si longs ───────────────────────
   La remise à plat des pages intérieures pose
     body.page:not(.home) .crn-main :is(p,…,figure,.crn-chapo)
       { max-width:none !important }
   soit une spécificité de 0,4,1 qui écrasait toute largeur posée
   ici. Mesuré le 17/09 : la photo occupait 820 px au lieu de 340.
   Les sélecteurs ci-dessous montent donc à 0,4,2 et 0,5,2 pour
   passer devant, plutôt que d'empiler un correctif de plus.

   Les marges du voisin du dessus sont reprises via :has(), parce
   que deux marges verticales fusionnent : la plus grande gagne, et
   celle du bloc de titre imposait 56 px en haut contre 32 en bas.
   Un navigateur sans :has() retombe simplement sur l'espacement
   naturel du thème, sans rien casser.
   ══════════════════════════════════════════════════════════════ */

:root{
  --crn-largeur-portrait: 340px;
  --crn-ecart-portrait:   2rem;
}

/* La photo : centrée, bornée, écarts identiques haut et bas. */
body.page:not(.home) .crn-main figure.crn-portrait-droite,
body.page.crn-page-qui-suis-je .crn-main figure.wp-block-image{
  float:none!important;
  display:block!important;
  width:auto!important;
  max-width:min(100%, var(--crn-largeur-portrait))!important;
  margin-left:auto!important;
  margin-right:auto!important;
  margin-top:var(--crn-ecart-portrait)!important;
  margin-bottom:var(--crn-ecart-portrait)!important;
}

/* L'image suit son cadre, y compris si elle a été redimensionnée
   à la main dans l'éditeur (largeur en style direct). */
body.page:not(.home) .crn-main figure.crn-portrait-droite img,
body.page.crn-page-qui-suis-je .crn-main figure.wp-block-image img{
  width:100%!important;
  height:auto!important;
  display:block;
  border-radius:4px;
}

/* Le bloc qui suit la photo. */
body.page:not(.home) .crn-main .wp-block-post-content figure.crn-portrait-droite + *,
body.page.crn-page-qui-suis-je .crn-main .wp-block-post-content figure.wp-block-image + *{
  margin-top:var(--crn-ecart-portrait)!important;
  margin-block-start:var(--crn-ecart-portrait)!important;
}

/* Le bloc qui précède la photo.
   Son rembourrage bas est mis à zéro, sinon il s'ajoute à la marge :
   mesuré le 17/09, le bloc de titre ajoutait 56 px sous « Consultant
   GEO », ce qui donnait 88 px visibles au-dessus de la photo contre
   32 en dessous. L'écart se compte du texte visible à la photo, pas
   du bord invisible du bloc. */
body.page:not(.home) .crn-main .wp-block-post-content > *:has(+ figure.crn-portrait-droite),
body.page.crn-page-qui-suis-je .crn-main .wp-block-post-content > *:has(+ figure.wp-block-image){
  padding-bottom:0!important;
  margin-bottom:var(--crn-ecart-portrait)!important;
  margin-block-end:var(--crn-ecart-portrait)!important;
}

/* La légende reste alignée sur le bord de la photo. */
body.page:not(.home) .crn-main figure.crn-portrait-droite figcaption,
body.page.crn-page-qui-suis-je .crn-main figure.wp-block-image figcaption{text-align:left}

/* ══════════════════════════════════════════════════════════════
   ★ V5.2.3 — L'ESPACE AU-DESSUS DU LOGO DU HÉROS
   ──────────────────────────────────────────────────────────────
   Seule la section héros est visée : le rembourrage haut des autres
   sections ne bouge pas, sinon c'est le rythme de toute la page qui
   change. La soustraction est en pixels : au-dessus de 768 px, l'écart
   perd exactement --crn-heros-remonte. En dessous, la règle
   « Sections : marges resserrées » impose déjà ses marges en
   !important et l'emporte — c'est voulu, l'écart mobile (44 à 64 px)
   n'a pas 20 px à rendre. Mesuré le 24/09 à 1440 px, du bas de
   l'en-tête au haut des pierres : 158 px avant, 138 px après.
   ══════════════════════════════════════════════════════════════ */
/* 5.3.8 : plancher de 44 px (2,75rem), le rembourrage mobile, pour que
   les tablettes ne perdent pas plus d'espace que les téléphones.
   Mesuré le 07/10, en-tête → pierres : 1920 et 1470 px 98, 1280 px 87,
   1024 et 800 px 82, 390 px 82 (inchangé). */
.crn-section.crn-heros{
  padding-top:max(2.75rem, calc(clamp(3.75rem,8.5vw,7.5rem) - var(--crn-heros-remonte)));
}

/* ══════════════════════════════════════════════════════════════
   ★ V5.2.4 — LE PIED DE PAGE SE RAPPROCHE DU CONTENU
   ──────────────────────────────────────────────────────────────
   Toutes les pages partagent la même fin : le rembourrage bas de
   .crn-main, clamp(1rem,2vw,2rem), puis la marge que WordPress met
   au-dessus du pied de page, --wp--style--block-gap (1,2rem). Soit
   au moins 35 px de vide sans contenu, à toutes les largeurs. On y
   retire --crn-pied-rapproche en remontant le pied de page : la marge
   peut devenir négative (19,2 - 30 = -10,8 px), elle ne mord alors
   que sur le rembourrage vide de .crn-main, jamais sur le contenu.
   Le rythme propre à chaque page reste intact.
   Mesuré le 24/09, dernier élément visible → trait du pied de page :
     1440 px   accueil, Le GEO, Méthode, Prestations  168 → 138
               Qui suis-je 187 → 157 · FAQ 151 → 121 · Audit 190 → 160
      390 px   accueil 79 → 49 · Audit 117 → 87, contenu à 5 px du pied
   ══════════════════════════════════════════════════════════════ */
.wp-site-blocks > footer.wp-block-template-part{
  margin-block-start:calc(var(--wp--style--block-gap, 1.2rem) - var(--crn-pied-rapproche));
}

/* ══════════════════════════════════════════════════════════════
   ★ V5.2.6 — LE BOUTON DU FORMULAIRE D'AUDIT
   ──────────────────────────────────────────────────────────────
   Fluent Forms met 21,6 px de marge sous chaque groupe de champs,
   bouton d'envoi compris. Sous le dernier élément de la page, cette
   marge s'ajoutait à l'espace avant le pied de page : Demander un
   audit était à 160 px quand les autres pages sont à 138. Seul le
   bouton d'envoi est visé ; l'espacement entre les champs ne bouge
   pas. Sélecteur à quatre classes pour passer devant la feuille de
   Fluent Forms quel que soit son ordre de chargement.
   Mesuré le 24/09 : 1440 px 160 → 138, 390 px 87 → 65.
   ══════════════════════════════════════════════════════════════ */
.crn-form .fluentform .ff-el-group.ff_submit_btn_wrapper{
  margin-bottom:0;
}