/*
Theme Name:   Creativ'Coach
Theme URI:    https://creativcoach.fr
Description:  Thème enfant Hello Elementor — direction visuelle 1C « Carnet ».
              Palette terre et sauge, Literata + Karla en local, aucun dégradé,
              aucune ombre, aucune animation d'apparition, pas de mode sombre.
Author:       Enquête d'Immo — Benjamin Dulieu
Template:     hello-elementor
Version:      1.29.0
Text Domain:  creativcoach
License:      GNU General Public License v2 or later
*/

/* ==========================================================================
   1. POLICES — variables, servies en local. Aucune requête vers Google.
   Sous-ensemble « latin » : il couvre tout le français (œ Œ, €, guillemets,
   insécables). Seul absent : ᵉ (U+1D49) — écrire 1<sup>er</sup>.
   ========================================================================== */

@font-face{font-family:'Literata';src:url('fonts/literata-var-latin.woff2') format('woff2-variations');font-weight:300 500;font-style:normal;font-display:swap}
@font-face{font-family:'Literata';src:url('fonts/literata-italic-var-latin.woff2') format('woff2-variations');font-weight:300 500;font-style:italic;font-display:swap}
@font-face{font-family:'Karla';src:url('fonts/karla-var-latin.woff2') format('woff2-variations');font-weight:400 600;font-style:normal;font-display:swap}

/* ==========================================================================
   2. JETONS — identiques à ceux de la maquette de référence
   ========================================================================== */

:root {
  --cc-bg:          #FBF9F5;
  --cc-bg-sage:     #EFF1EA;
  --cc-surface:     #F2EEE5;
  --cc-ink:         #2C3327;
  --cc-body:        #4E5548;
  --cc-muted:       #7C8474;
  --cc-sage:        #6E7F63;
  --cc-sage-dark:   #3E4A38;
  --cc-accent:      #C4703F;
  --cc-accent-hover:#AC5F31;
  --cc-border:      #D7DBCF;
  --cc-border-warm: #DCD8CB;
  --cc-border-soft: #B9C0B0;

  --cc-serif: 'Literata', Georgia, 'Times New Roman', serif;
  --cc-sans:  'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --cc-radius-card: 20px;
  --cc-radius-pill: 100px;
  --cc-radius-img:  12px;
  --cc-arch: 200px 200px 12px 12px;
  --cc-t: 180ms;
}

/* ==========================================================================
   3. TYPOGRAPHIE
   Elementor gratuit ne permet pas d'enregistrer une police personnalisée :
   Literata et Karla n'apparaissent pas dans les menus du builder. On les
   applique donc ici. Conséquence assumée : les tailles de titre se modifient
   dans ce fichier, pas dans Elementor.
   ========================================================================== */

body,
.elementor-widget-text-editor,
.elementor-widget-icon-list .elementor-icon-list-text,
.elementor-widget-icon-box .elementor-icon-box-description,
.elementor-accordion .elementor-tab-content,
input, textarea, select, button {
  font-family: var(--cc-sans);
  font-size: 16px;
  line-height: 1.68;
  color: var(--cc-body);
}

body { background: var(--cc-bg); }

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-accordion .elementor-tab-title {
  font-family: var(--cc-serif);
  color: var(--cc-ink);
  font-weight: 400;
  letter-spacing: -0.015em;
}

h1, .elementor-widget-heading h1.elementor-heading-title { font-size: 60px; line-height: 1.08; }
h2, .elementor-widget-heading h2.elementor-heading-title { font-size: 38px; line-height: 1.15; }
h3, .elementor-widget-heading h3.elementor-heading-title,
.elementor-widget-icon-box .elementor-icon-box-title {
  font-size: 22px; line-height: 1.3; font-weight: 500; letter-spacing: 0;
}
.elementor-accordion .elementor-tab-title { font-size: 20px; font-weight: 500; letter-spacing: 0; }

h1, h2 { text-wrap: balance; }
p, blockquote { text-wrap: pretty; }

/* Les chiffres ne dansent pas d'une ligne à l'autre */
.cc-tabular, .cc-price, .elementor-widget-heading .elementor-heading-title { font-variant-numeric: tabular-nums; }

@media (max-width: 1024px) {
  h1, .elementor-widget-heading h1.elementor-heading-title { font-size: 46px; }
  h2, .elementor-widget-heading h2.elementor-heading-title { font-size: 32px; }
  h3, .elementor-widget-heading h3.elementor-heading-title { font-size: 21px; }
}
@media (max-width: 767px) {
  h1, .elementor-widget-heading h1.elementor-heading-title { font-size: 34px; }
  h2, .elementor-widget-heading h2.elementor-heading-title { font-size: 26px; }
  h3, .elementor-widget-heading h3.elementor-heading-title { font-size: 20px; }
}

/* ==========================================================================
   4. BOUTONS — pilule, aucun relief, aucun déplacement au survol
   ========================================================================== */

.elementor-button, .btn, button, input[type="submit"] {
  font-family: var(--cc-sans);
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--cc-radius-pill);
  box-shadow: none !important;
  transition: background-color var(--cc-t) ease, color var(--cc-t) ease,
              border-color var(--cc-t) ease;
}

.elementor-button:hover, .btn:hover { transform: none !important; box-shadow: none !important; }

a { color: var(--cc-sage-dark); text-decoration: none; transition: color var(--cc-t) ease; }
a:hover { color: var(--cc-accent); }

/* Lien d'action : #C4703F sur #FBF9F5 ne donne que 3,9:1 — insuffisant à
   14,5px. On assombrit ET on souligne. */
.cc-more {
  font-family: var(--cc-sans); font-size: 14.5px; font-weight: 600;
  color: var(--cc-sage-dark);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 1px; text-decoration-color: var(--cc-border-soft);
}
.cc-more:hover { color: var(--cc-accent); text-decoration-color: var(--cc-accent); }
.cc-more .cc-arrow { display: inline-block; transition: transform var(--cc-t) ease; }
.cc-more:hover .cc-arrow { transform: translateX(3px); }

/* ==========================================================================
   5. CE QUE LA DIRECTION SUPPRIME — garde-fous
   Si un réglage oublié réintroduit une ombre, un dégradé ou une animation
   d'apparition, il est neutralisé ici.
   ========================================================================== */

.elementor-section, .elementor-column, .e-con, .elementor-widget-container,
.elementor-widget-image img, .elementor-accordion-item {
  box-shadow: none !important;
}

.elementor-invisible { visibility: visible !important; opacity: 1 !important; animation: none !important; }

/* ==========================================================================
   6. CARTES ET FILETS
   La carte est plate et réservée aux blocs de réassurance chiffrée.
   Ailleurs, une liste se sépare par un filet 1px.
   ========================================================================== */

.cc-card {
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-card);
}

.cc-rule { width: 1px; align-self: stretch; background: var(--cc-border-warm); flex: 0 0 1px; }
@media (max-width: 767px) { .cc-rule { width: 100%; height: 1px; align-self: auto; } }

/* ==========================================================================
   7. IMAGES — toutes désaturées pour faire famille, sauf Qualiopi
   ========================================================================== */

.elementor-widget-image img { filter: saturate(.9); border-radius: var(--cc-radius-img); }
img[src*="qualiopi"], .cc-no-filter img { filter: none; }

/* La forme arquée, signature de la direction */
.cc-arch img { border-radius: var(--cc-arch); object-fit: cover; object-position: center top; }
.cc-arch-down img { border-radius: 12px 12px 200px 200px; object-fit: cover; object-position: center top; }
@media (max-width: 767px) {
  .cc-arch img { border-radius: 140px 140px 12px 12px; }
  .cc-arch-down img { border-radius: 12px 12px 140px 140px; }
}

/* Le liseré décalé derrière la photo du hero — inset négatif, impossible
   à exprimer proprement dans le builder. */
.cc-hero-media { position: relative; }
.cc-hero-media .elementor-widget-image { position: relative; z-index: 1; }
.cc-hero-frame {
  position: absolute; inset: 18px -18px -18px 18px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-arch);
  pointer-events: none;
}
@media (max-width: 767px) { .cc-hero-frame { display: none; } }

/* ==========================================================================
   8. HEADER COLLANT — les Motion Effects sont réservés à Elementor Pro
   ========================================================================== */

.cc-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--cc-bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--cc-t) ease;
}
.cc-header.cc-scrolled { border-bottom-color: var(--cc-border); }

/* ==========================================================================
   9. ACCORDÉON FAQ — filets entre items, aucun fond, aucune carte
   ========================================================================== */

.elementor-accordion .elementor-accordion-item {
  border: 0; border-top: 1px solid var(--cc-border); background: transparent;
}
.elementor-accordion .elementor-accordion-item:last-child { border-bottom: 1px solid var(--cc-border); }
.elementor-accordion .elementor-tab-title { background: transparent; padding: 22px 0; }
.elementor-accordion .elementor-tab-content { border: 0; padding: 0 0 22px; }

/* ==========================================================================
   10. ACCESSIBILITÉ
   ========================================================================== */

a:focus-visible, button:focus-visible, .elementor-button:focus-visible,
input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--cc-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   11. CE QUE LE DÉPOUILLEMENT DES MODÈLES DÉPLACE ICI (02/09/2026)
   Les 7 modèles Elementor portaient 982 réglages de typographie et 363 de
   couleur écrits en dur, hérités de l'ancienne charte violette. Ils ont été
   retirés : la direction vit désormais entièrement dans ce fichier, et les
   modèles ne gardent que la STRUCTURE. Quatre familles de classes prennent
   le relais là où une valeur était nécessaire.
   ========================================================================== */

/* --- Bandeaux sombres (les « Prêt à … ») ---------------------------------- */

.cc-invert .elementor-heading-title,
.cc-invert .elementor-widget-text-editor,
.cc-invert .elementor-widget-text-editor p,
.cc-invert .elementor-icon-list-text,
.cc-invert p,
.cc-invert li { color: var(--cc-bg); }

.cc-invert .elementor-heading-title { color: var(--cc-bg); }
.cc-invert a { color: var(--cc-bg); text-decoration-color: var(--cc-border-soft); }
.cc-invert a:hover { color: var(--cc-surface); }

/* --- Boutons : la couleur ne vient plus du builder ------------------------ */

.elementor-element.cc-btn-primary .elementor-button {
  background-color: var(--cc-accent);
  color: var(--cc-bg);
  border: 1px solid var(--cc-accent);
}
.elementor-element.cc-btn-primary .elementor-button:hover {
  background-color: var(--cc-accent-hover);
  border-color: var(--cc-accent-hover);
  color: var(--cc-bg);
}

.elementor-element.cc-btn-secondary .elementor-button {
  background-color: transparent;
  color: var(--cc-sage-dark);
  border: 1px solid var(--cc-sage);
}
.elementor-element.cc-btn-secondary .elementor-button:hover {
  background-color: var(--cc-sage);
  color: var(--cc-bg);
}

/* Sur fond sombre : le bouton s'inverse. */
.elementor-element.cc-btn-white .elementor-button {
  background-color: var(--cc-bg);
  color: var(--cc-ink);
  border: 1px solid var(--cc-bg);
}
.elementor-element.cc-btn-white .elementor-button:hover {
  background-color: var(--cc-surface);
  color: var(--cc-ink);
  border-color: var(--cc-surface);
}
.cc-invert .elementor-element.cc-btn-secondary .elementor-button {
  color: var(--cc-bg);
  border-color: var(--cc-border-soft);
}
.cc-invert .elementor-element.cc-btn-secondary .elementor-button:hover {
  background-color: var(--cc-bg);
  color: var(--cc-ink);
}

/* --- Cartes : c'était un fond blanc posé sur la colonne ------------------- */

.elementor-column.cc-card > .elementor-widget-wrap,
.elementor-column.cc-card > .elementor-element-populated {
  background-color: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-card);
  padding: 28px;
}
@media (max-width: 767px) {
  .elementor-column.cc-card > .elementor-element-populated { padding: 22px; }
}

/* --- Filets : le widget « divider » n'avait pas de règle ------------------ */

.elementor-widget-divider .elementor-divider-separator {
  border-top-color: var(--cc-border);
  border-top-width: 1px;
}
.cc-invert .elementor-widget-divider .elementor-divider-separator {
  border-top-color: rgba(251, 249, 245, .22);
}

/* --- Largeur de contenu ---------------------------------------------------
   Le kit Elementor (post 450) bride les sections à 1140 px. La direction 1C
   travaille à 1240, valeur déjà posée dans functions.php ($content_width).
   Même sélecteur que le kit, donc même spécificité : on gagne par l'ordre de
   chargement (notre feuille dépend de celle du parent, chargée après le kit).
   -------------------------------------------------------------------------- */

/* La maquette : `.wrap { max-width: 1240px; padding: 0 60px }` — le padding est
   INCLUS dans les 1240 (border-box), donc le contenu fait 1120.
   Chez Elementor le padding est porté par la SECTION, à l'extérieur du
   conteneur : il faut donc plafonner le conteneur à 1120, sinon toutes les
   colonnes sont 60 px trop larges (mesuré le 02/09 : 590 au lieu de 530). */
.elementor-section.elementor-section-boxed > .elementor-container { max-width: 1120px; }

@media (max-width: 1279px) {
  .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: calc(100vw - 80px);
  }
}
@media (max-width: 767px) {
  .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: calc(100vw - 32px);
  }
}

/* ==========================================================================
   12. LE KIT ELEMENTOR — remapper ses variables globales (02/09/2026)
   Une fois les réglages retirés des modèles, les widgets retombent sur les
   valeurs GLOBALES du kit (post 450) : Open Sans, Roboto Slab, du noir, une
   accroche rose, et un corps de texte à 12 px. Elementor les écrit sous forme
   de `var(--e-global-…)` dans le CSS de CHAQUE page, avec une spécificité
   (0,2,0) qui bat nos sélecteurs. Plutôt que de surenchérir partout, on
   remappe les variables elles-mêmes vers les jetons 1C : tout ce qui les
   consomme suit, où que ce soit.
   `[class*="elementor-kit-"]` plutôt que `.elementor-kit-450` : l'identifiant
   du kit changerait si un kit était recréé.
   ========================================================================== */

body[class*="elementor-kit-"] {
  --e-global-color-primary:   var(--cc-ink);
  --e-global-color-secondary: var(--cc-sage-dark);
  --e-global-color-text:      var(--cc-body);
  --e-global-color-accent:    var(--cc-accent);
  --e-global-color-9f8430d:   var(--cc-bg);
  --e-global-color-c2858a0:   var(--cc-bg);
  --e-global-color-e34f234:   var(--cc-bg-sage);
  --e-global-color-accb278:   var(--cc-surface);

  --e-global-typography-primary-font-family:    'Literata', Georgia, serif;
  --e-global-typography-primary-font-weight:    400;
  --e-global-typography-primary-letter-spacing: -0.015em;
  --e-global-typography-secondary-font-family:  'Literata', Georgia, serif;
  --e-global-typography-secondary-font-weight:  400;
  --e-global-typography-text-font-family:       'Karla', system-ui, sans-serif;
  --e-global-typography-text-font-size:         16px;
  --e-global-typography-text-font-weight:       400;
  --e-global-typography-accent-font-family:     'Karla', system-ui, sans-serif;
  --e-global-typography-accent-font-weight:     600;
}

/* Ceinture et bretelles : on double le remappage par des règles à la même
   spécificité qu'Elementor (0,2,0), placées plus loin dans la cascade.
   Les TAILLES sont déjà traitées plus haut en (0,2,1), on n'y touche pas. */

.elementor-widget-heading .elementor-heading-title {
  font-family: var(--cc-serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--cc-ink);
}
.elementor-widget-heading h3.elementor-heading-title { font-weight: 500; letter-spacing: 0; }

.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-icon-list .elementor-icon-list-text {
  font-family: var(--cc-sans);
  font-size: 16px;
  line-height: 1.68;
  color: var(--cc-body);
}

.cc-invert .elementor-widget-heading .elementor-heading-title,
.cc-invert .elementor-widget-text-editor,
.cc-invert .elementor-widget-text-editor p { color: var(--cc-bg); }

/* Le kit impose `border-radius: 30px` sur les boutons en (0,2,0), ce qui bat
   notre règle de la section 4 en (0,1,0). Même sélecteur qu'Elementor, donc
   même poids : on gagne par l'ordre de chargement. */
.elementor-widget-button .elementor-button,
.elementor-element.cc-btn-primary .elementor-button,
.elementor-element.cc-btn-secondary .elementor-button,
.elementor-element.cc-btn-white .elementor-button { border-radius: var(--cc-radius-pill); }

/* ==========================================================================
   13. EN-TÊTE ET PIED DE PAGE (gabarits UAE, 02/09/2026)
   Montés en `section > colonne`, sans aucun réglage de design dans le
   builder : tout est ici, comme pour les pages.
   ========================================================================== */

/* --- Logo texte, en-tête et pied de page --------------------------------- */

.cc-logo .elementor-heading-title {
  font-family: var(--cc-serif);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--cc-ink);
}
.cc-logo .elementor-heading-title a { color: inherit; text-decoration: none; }
.cc-logo .elementor-heading-title a:hover { color: var(--cc-accent); }
.cc-footer .cc-logo .elementor-heading-title,
.cc-footer .cc-logo .elementor-heading-title a { color: var(--cc-bg); }

/* --- Navigation (widget UAE) --------------------------------------------- */

.cc-nav .hfe-nav-menu a.hfe-menu-item,
.cc-nav .hfe-nav-menu a.hfe-sub-menu-item {
  font-family: var(--cc-sans);
  font-size: 14.5px;
  font-weight: 400;
  color: var(--cc-ink);
  white-space: nowrap;                    /* la barre se cassait entre 1025 et 1150 px */
  transition: color var(--cc-t) ease;
}
.cc-nav .hfe-nav-menu a.hfe-menu-item:hover,
.cc-nav .hfe-nav-menu .current-menu-item > a.hfe-menu-item { color: var(--cc-accent); }
.cc-nav .hfe-nav-menu li.menu-item { margin: 0 0 0 30px; }
@media (max-width: 1200px) { .cc-nav .hfe-nav-menu li.menu-item { margin-left: 22px; } }

/* Sous-menu : plat, encadré d'un filet, aucune ombre */
.cc-nav .hfe-nav-menu .sub-menu {
  background: var(--cc-bg);
  border: 1px solid var(--cc-border);
  border-radius: 12px;
  box-shadow: none;
  padding: 6px 0;
}
.cc-nav .hfe-nav-menu .sub-menu a.hfe-sub-menu-item { padding: 9px 18px; }

/* Burger : trait fin, zone de touche 44×44 */
.cc-nav .hfe-nav-menu__toggle {
  color: var(--cc-ink);
  background: transparent;
  min-width: 44px; min-height: 44px;
}
.cc-nav .hfe-nav-menu__toggle .hfe-menu-toggle-icon { font-size: 22px; }

/* --- Bouton de l'en-tête : un cran plus compact -------------------------- */

.cc-header-cta .elementor-button {
  font-size: 13.5px;
  padding: 10px 20px;
}

/* --- Pied de page --------------------------------------------------------- */

.cc-footer .cc-fmuted p,
.cc-footer .cc-fsmall p { font-size: 13.5px; color: #9BA492; }

.cc-flabel-h .elementor-heading-title,
.cc-footer .cc-flabel {
  font-family: var(--cc-sans);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #9BA492;
  margin: 0 0 6px;
}
.cc-footer .cc-flabel + .cc-fval { margin: 0 0 14px; }

.cc-footer .cc-fnav,
.cc-footer .cc-fval { font-size: 15px; line-height: 1.6; margin: 0 0 8px; }
.cc-footer .cc-fnav a,
.cc-footer .cc-fval a,
.cc-footer-legal a { color: #E4E8DE; text-decoration: none; }
.cc-footer .cc-fnav a:hover,
.cc-footer .cc-fval a:hover,
.cc-footer-legal a:hover { color: var(--cc-accent); }

.cc-footer-legal .cc-fsmall p { font-size: 13px; color: #9BA492; margin: 0; }
.cc-footer-legal .cc-fright { text-align: right; }
.cc-footer-legal > .elementor-container { border-top: 1px solid rgba(251,249,245,.15); padding-top: 24px; }

@media (max-width: 767px) {
  .cc-footer-legal .cc-fright { text-align: left; margin-top: 10px; }
}

/* --- Corrections de cascade relevées en prévisualisation (02/09) -----------
   1. Elementor écrit `.elementor-widget-navigation-menu .menu-item a.hfe-menu-item`
      en (0,3,0) ET une seconde fois en inline, donc après notre feuille.
      On passe en (0,4,0) en accrochant la classe au widget lui-même.
   2. Les règles `.cc-invert` de la section 11 sont en (0,3,0) et écrasaient les
      gris du pied de page. On les repasse au-dessus, jamais en `!important`.
   -------------------------------------------------------------------------- */

.elementor-widget-navigation-menu.cc-nav .menu-item a.hfe-menu-item,
.elementor-widget-navigation-menu.cc-nav .menu-item a.hfe-sub-menu-item { color: var(--cc-ink); }
.elementor-widget-navigation-menu.cc-nav .menu-item a.hfe-menu-item:hover,
.elementor-widget-navigation-menu.cc-nav .menu-item a.hfe-sub-menu-item:hover,
.elementor-widget-navigation-menu.cc-nav .menu-item.current-menu-item > a.hfe-menu-item { color: var(--cc-accent); }

.cc-invert .elementor-widget-heading.cc-flabel-h .elementor-heading-title,
.cc-invert .elementor-widget-text-editor p.cc-flabel,
.cc-invert .elementor-widget-text-editor.cc-fmuted p,
.cc-invert .elementor-widget-text-editor.cc-fsmall p { color: #9BA492; }

.cc-invert .elementor-widget-text-editor p.cc-fnav a,
.cc-invert .elementor-widget-text-editor p.cc-fval a,
.cc-invert .elementor-widget-text-editor p.cc-fright a { color: #E4E8DE; }
.cc-invert .elementor-widget-text-editor p.cc-fnav a:hover,
.cc-invert .elementor-widget-text-editor p.cc-fval a:hover,
.cc-invert .elementor-widget-text-editor p.cc-fright a:hover { color: var(--cc-accent); }

/* --- La plage 1025-1200 px, mesurée le 02/09 ------------------------------
   Le burger UAE ne prend le relais qu'au point de rupture « tablette »
   d'Elementor (1024 px). Entre 1025 et 1200, le menu réclamait 704 px pour
   529 disponibles et passait sur DEUX lignes (header à 142 px au lieu de 98).
   On récupère la place là où elle est perdue : la colonne du logo (255 px
   pour un texte de 130) et les marges latérales de la section.
   -------------------------------------------------------------------------- */

@media (max-width: 1300px) {
  .cc-header > .elementor-container > .elementor-column.elementor-col-26 { width: 17%; }
  .cc-header > .elementor-container > .elementor-column.elementor-col-54 { width: 64%; }
  .cc-header > .elementor-container > .elementor-column.elementor-col-20 { width: 19%; }
  .cc-nav .hfe-nav-menu li.menu-item { margin: 0 0 0 14px; }
  .elementor-widget-navigation-menu.cc-nav .menu-item a.hfe-menu-item { font-size: 13.5px; }
  .cc-header { padding-left: 28px !important; padding-right: 28px !important; }
}

/* --- Menu replié : il gardait sa largeur de bureau (529 px à 375 px de
   fenêtre), d'où un défilement horizontal sur toute la page. -------------- */

@media (max-width: 1024px) {
  .cc-nav .hfe-nav-menu,
  .cc-nav nav.hfe-nav-menu__layout-horizontal,
  .cc-nav ul.hfe-nav-menu { max-width: 100%; }
  .cc-nav ul.hfe-nav-menu { flex-wrap: wrap; }
  .cc-nav ul.hfe-nav-menu > li.menu-item { margin-left: 0; width: 100%; }
  .cc-header { overflow-x: clip; }          /* le sous-menu s'ouvre dans le flux à ce palier */
}

/* --- En-tête mobile : logo · burger · bouton sur UNE ligne ----------------
   Constaté en prévisualisation à 375 px : les trois colonnes empilées
   donnaient un bouton écrasé sur trois lignes et un panneau de menu flottant
   au milieu du contenu. On rend la ligne compacte et le panneau pleine
   largeur, sous l'en-tête.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .cc-header > .elementor-container { flex-wrap: nowrap; align-items: center; }
  .cc-header > .elementor-container > .elementor-column.elementor-col-26 { width: 46%; }
  .cc-header > .elementor-container > .elementor-column.elementor-col-54 { width: 16%; }
  .cc-header > .elementor-container > .elementor-column.elementor-col-20 { width: 38%; }

  .cc-nav .hfe-nav-menu__toggle { margin: 0 auto; }

  .cc-header-cta .elementor-button {
    width: 100%;
    justify-content: center;
    white-space: nowrap;
    font-size: 12.5px;
    padding: 9px 12px;
  }

  /* Le panneau déroulant : pleine largeur, sous l'en-tête, plat. */
  .cc-nav .hfe-nav-menu__layout-horizontal .hfe-nav-menu {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    width: 100%;
    background: var(--cc-bg);
    border-top: 1px solid var(--cc-border);
    padding: 6px 0 10px;
    box-shadow: none;
  }
  /* `width:100%` se calcule sur le bloc conteneur : il faut que ce soit
     l'en-tête lui-même, pas la colonne (51 px de large). On rend les
     conteneurs intermédiaires `static` — `.cc-header` est en `sticky`,
     donc positionné, et devient le référent. */
  .cc-header .elementor-column,
  .cc-header .elementor-widget-wrap,
  .cc-header .elementor-widget,
  .cc-nav .hfe-nav-menu__layout-horizontal { position: static; }
  .cc-nav ul.hfe-nav-menu > li.menu-item > a.hfe-menu-item {
    padding: 13px 28px;
    font-size: 15px;
    border-bottom: 1px solid var(--cc-border);
  }
  .cc-nav ul.hfe-nav-menu > li.menu-item:last-child > a.hfe-menu-item { border-bottom: 0; }
}

@media (max-width: 400px) {
  .cc-header > .elementor-container > .elementor-column.elementor-col-26 { width: 42%; }
  .cc-header > .elementor-container > .elementor-column.elementor-col-20 { width: 42%; }
  .cc-logo .elementor-heading-title { font-size: 20px; }
}

/* Hello Elementor souligne tous les liens du contenu via `.page-content a`,
   soit (0,1,1) — ce qui bat `.elementor-button` en (0,1,0). On repasse au-dessus
   en (0,2,0), sans `!important`. Concerne AUSSI les boutons dans les pages. */
.elementor-button,
.elementor-button:hover,
.elementor-button:focus,
.page-content .elementor-button,
.page-content .elementor-button:hover,
.page-content .elementor-button:focus,
.elementor-widget-button .elementor-button { text-decoration: none; }

/* ==========================================================================
   14. RAPPROCHEMENT DE LA MAQUETTE (02/09) — valeurs relevées dans le build
   Astro, pas inventées. Trois écarts signalés par Benjamin : le bandeau de
   chiffres monté en grosses cartes, les encarts de services trop lourds, et
   des éléments manquants.
   ========================================================================== */

/* --- Sur-titre du hero : Literata italique, sauge (.hero-eyebrow) --------- */

.cc-eyebrow p {
  margin: 0 0 14px;
  font-family: var(--cc-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.45;
  color: var(--cc-sage);
}

/* --- Légende sous la photo (.photo-card-name / .about-role) --------------- */

.cc-photo-name {
  margin: 22px 0 2px;
  font-family: var(--cc-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--cc-ink);
}
.cc-photo-role {
  margin: 0;
  font-family: var(--cc-sans);
  font-size: 14px;
  color: var(--cc-muted);
}

/* --- Bandeau de chiffres : une ligne discrète, pas une carte (.trust-line) */

.cc-figures .elementor-column > .elementor-element-populated { padding: 0 22px; }
.cc-figures .elementor-column:first-child > .elementor-element-populated { padding-left: 0; }
.cc-figures .elementor-column:last-child > .elementor-element-populated { padding-right: 0; }
.cc-figures .elementor-column + .elementor-column > .elementor-element-populated {
  border-left: 1px solid var(--cc-border-warm);
}

.cc-figure-line {
  display: flex;
  gap: .35em;
  margin: 0;
  font-family: var(--cc-sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cc-muted);
}
.cc-figure {
  font-weight: 600;
  color: var(--cc-ink);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  .cc-figures .elementor-column > .elementor-element-populated { padding: 18px 0 0; }
  .cc-figures .elementor-column + .elementor-column > .elementor-element-populated {
    border-left: 0;
    border-top: 1px solid var(--cc-border-warm);
  }
}

/* --- Offres : aucun encart, aucun fond, aucune icône (.offer) ------------- */

.cc-offer > .elementor-container { padding-bottom: 28px; }
.cc-offer .elementor-widget-heading .elementor-heading-title { margin: 0 0 12px; }
.cc-offer .elementor-widget-text-editor p { margin: 0 0 16px; }
.cc-offer .elementor-widget-text-editor p:last-child { margin: 0; }

/* Le chapô du bloc de titre (.sect-lede) */
.cc-services .elementor-column:first-child .elementor-widget-text-editor p {
  margin: 18px 0 0;
  max-width: 24em;
  font-size: 17px;
  line-height: 1.7;
}

/* Les règles ci-dessus sont en (0,1,0) et perdaient contre
   `.elementor-widget-text-editor p` de la section 12, en (0,2,0).
   On les repasse en (0,2,1). */

.elementor-widget-text-editor p.cc-figure-line {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cc-muted);
  margin: 0;
}
.elementor-widget-text-editor p.cc-photo-name {
  font-family: var(--cc-serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--cc-ink);
  margin: 22px 0 2px;
}
.elementor-widget-text-editor p.cc-photo-role {
  font-size: 14px;
  color: var(--cc-muted);
  margin: 0;
}
.cc-eyebrow.elementor-widget-text-editor p {
  font-family: var(--cc-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: var(--cc-sage);
  margin: 0 0 14px;
}

/* --- Pied de page : présentation et réseaux (ajoutés le 02/09) ------------ */

.cc-invert .elementor-widget-text-editor.cc-fdesc p {
  margin: 12px 0 18px;
  max-width: 30em;
  font-size: 14px;
  line-height: 1.7;
  color: #9BA492;
}

.cc-fsocial .elementor-social-icon {
  background-color: transparent;
  color: #E4E8DE;
  padding: 0;
  margin: 0 14px 0 0;
  transition: color var(--cc-t) ease;
}
.cc-fsocial .elementor-social-icon:hover { background-color: transparent; color: var(--cc-accent); }
.cc-fsocial .elementor-social-icon svg { width: 16px; height: 16px; fill: currentColor; }

/* ==========================================================================
   15. RÉPLIQUE FIDÈLE DE LA MAQUETTE — hero, réassurance, à propos, questions
   Toutes les valeurs sont RELEVÉES dans le build Astro (02/09), pas choisies.
   ========================================================================== */

/* --- Hero (.hero-grid / .hero-content) ----------------------------------- */

.cc-hero > .elementor-container { align-items: center; }
.cc-hero .cc-hero-content .elementor-widget:not(:last-child) { margin-block-end: 26px; }
.cc-hero .elementor-widget-heading.cc-hero-title .elementor-heading-title { margin: 0; }
.cc-hero .elementor-widget-text-editor.cc-hero-lede p {
  margin: 0; max-width: 30em; font-size: 17.5px; line-height: 1.7; color: var(--cc-body);
}
@media (max-width: 1024px) { .cc-hero .cc-hero-content .elementor-widget:not(:last-child) { margin-block-end: 22px; } }

.cc-hero-ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
@media (max-width: 1024px) { .cc-hero-ctas { gap: 18px; } }

.cc-hero-phone {
  position: relative;
  font-family: var(--cc-sans); font-size: 15px; font-weight: 600;
  color: var(--cc-sage-dark);
  border-bottom: 1px solid var(--cc-border-soft);
  padding-bottom: 3px; text-decoration: none;
  transition: color var(--cc-t), border-color var(--cc-t);
}
.cc-hero-phone:hover { color: var(--cc-accent); border-bottom-color: var(--cc-accent); }
.cc-hero-phone::after { content: ""; position: absolute; inset: -14px -8px -12px; }

/* Boutons hors widget Elementor (.btn de la maquette) */
.cc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 17px 30px;
  font-family: var(--cc-sans); font-size: 15px; font-weight: 600;
  border: none; border-radius: var(--cc-radius-pill);
  cursor: pointer; text-decoration: none;
  transition: background-color var(--cc-t), color var(--cc-t), border-color var(--cc-t);
}
.cc-btn-accent { background: var(--cc-accent); color: var(--cc-bg); }
.cc-btn-accent:hover { background: var(--cc-accent-hover); color: var(--cc-bg); }
.cc-btn-ghost { background: transparent; color: var(--cc-sage-dark); border: 1px solid var(--cc-sage); }
.cc-btn-ghost:hover { background: var(--cc-sage); color: var(--cc-bg); }

/* Photo du hero : 480 px, cadrée haut, arche (.hero-photo) */
.cc-hero-media { position: relative; }
.cc-hero-photo img {
  display: block; width: 100%; height: 480px;
  object-fit: cover; object-position: center top;
  border-radius: var(--cc-arch);
}
@media (max-width: 1024px) { .cc-hero-photo img { height: 420px; } }
@media (max-width: 767px)  { .cc-hero-photo img { height: 380px; border-radius: 140px 140px 12px 12px; } }
.cc-hero-frame {
  position: absolute; inset: 18px -18px -18px 18px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-arch); pointer-events: none;
}
@media (max-width: 767px) { .cc-hero-frame { display: none; } }

/* --- Bande de réassurance (.trust-card) ---------------------------------- */

.cc-trust-card {
  display: flex; align-items: center;
  width: fit-content; max-width: 100%; margin: 0 auto;
  padding: 30px 40px;
  background: var(--cc-surface);
  border-radius: var(--cc-radius-card);
}
.cc-trust-block {
  display: flex; flex-direction: column; justify-content: center;
  align-self: stretch; padding: 0 22px; margin: 0; list-style: none;
}
.cc-trust-block:first-child { padding-left: 0; }
.cc-trust-block:last-child  { padding-right: 0; }
.cc-trust-block + .cc-trust-block { border-left: 1px solid var(--cc-border-warm); }

.cc-trust-price { gap: 4px; }
.cc-price-label {
  font-family: var(--cc-sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cc-muted);
}
.cc-price-value {
  font-family: var(--cc-serif); font-weight: 500; font-size: 29px; line-height: 1.15;
  color: var(--cc-ink); font-variant-numeric: tabular-nums;
}
.cc-price-note { font-family: var(--cc-sans); font-size: 13.5px; line-height: 1.5; color: var(--cc-muted); }
.elementor .cc-qualiopi-img { display: block; height: 44px; width: auto; max-width: none; filter: none; }
.cc-trust-figures, .cc-trust-highlights { gap: 2px; }
.cc-trust-card .cc-figure-line {
  display: flex; gap: .35em; margin: 0;
  font-family: var(--cc-sans); font-size: 13.5px; line-height: 1.5; color: var(--cc-muted);
}
.cc-trust-card .cc-figure { font-weight: 600; color: var(--cc-ink); font-variant-numeric: tabular-nums; }

@media (max-width: 1024px) {
  .cc-trust-card { display: grid; grid-template-columns: 1fr 1fr; width: 100%; padding: 26px 30px; }
  .cc-trust-block { padding: 22px; }
  .cc-trust-block + .cc-trust-block { border-left: none; }
  .cc-trust-block:nth-child(odd) { padding-left: 0; }
  .cc-trust-block:nth-child(2n) { padding-right: 0; border-left: 1px solid var(--cc-border-warm); }
  .cc-trust-block:nth-child(1), .cc-trust-block:nth-child(2) { padding-top: 0; }
  .cc-trust-block:nth-child(3), .cc-trust-block:nth-child(4) { padding-bottom: 0; border-top: 1px solid var(--cc-border-warm); }
}
@media (max-width: 767px) {
  .cc-trust-card { display: flex; flex-direction: column; align-items: stretch; width: 100%; padding: 24px 26px; }
  .cc-trust-block { align-self: auto; padding: 22px 0 0; }
  .cc-trust-block:first-child { padding-top: 0; }
  .cc-trust-block + .cc-trust-block { border-left: none; border-top: 1px solid var(--cc-border-warm); }
}

/* --- À propos (.about-grid) ---------------------------------------------- */

.cc-about > .elementor-container { align-items: flex-start; }
.cc-about-photo .cc-arch-down img,
.cc-about-photo .elementor-widget-image img {
  display: block; width: 100%; height: 460px;
  object-fit: cover; object-position: center top;
}
@media (max-width: 1024px) { .cc-about-photo .elementor-widget-image img { height: 400px; } }
@media (max-width: 767px)  { .cc-about-photo .elementor-widget-image img { height: 380px; } }
.cc-about-content .elementor-widget-heading .elementor-heading-title { margin: 0 0 24px; }
.cc-about-content .elementor-widget-text-editor p { font-size: 16.5px; line-height: 1.75; }

/* --- Questions (.questions-grid) ----------------------------------------- */

.cc-questions > .elementor-container { align-items: flex-start; }
.cc-questions .cc-questions-title .elementor-heading-title { margin: 0 0 30px; max-width: 14em; }
.cc-questions-ctas { display: flex; flex-wrap: wrap; gap: 16px; }
/* Chez Astro, `flex: 1 1 auto` sur ces boutons n'existe QUE dans la media
   query mobile : sur grand écran ils gardent leur largeur naturelle. */
@media (max-width: 767px) { .cc-questions-ctas .cc-btn { flex: 1 1 auto; } }

.cc-questions-list { list-style: none; margin: 0; padding: 0; }
.cc-questions-list li {
  padding: 18px 0;
  font-family: var(--cc-serif); font-style: italic; font-weight: 300;
  font-size: 20px; line-height: 1.5; color: var(--cc-ink);
}
.cc-questions-list li:first-child { padding-top: 0; }
.cc-questions-list li:last-child  { padding-bottom: 0; }
.cc-questions-list li + li { border-top: 1px solid var(--cc-border); }
@media (max-width: 767px) { .cc-questions .cc-questions-title .elementor-heading-title { max-width: none; } }

/* Le liseré du hero est porté par un widget HTML : sans cela il occupe une
   place dans le flux et pousse la photo vers le bas (constaté le 02/09). */
.cc-hero-media > .elementor-widget-wrap > .elementor-widget-html:first-child {
  position: absolute; inset: 0; margin: 0; pointer-events: none; z-index: 0;
}
.cc-hero-media > .elementor-widget-wrap > .elementor-widget-image { position: relative; z-index: 1; }
.cc-hero-media .elementor-widget:not(:last-child) { margin-block-end: 0; }

/* ==========================================================================
   16. PAGE BILAN DE COMPÉTENCES — valeurs relevées dans le build Astro
   ========================================================================== */

/* --- Hero de page (.page-hero) ------------------------------------------- */
/* Le filet sous le hero n'existe que sur la page bilan, pas sur coaching. */
.cc-page-hero.cc-hero-rule { border-bottom: 1px solid var(--cc-border-warm); }
.cc-page-hero .elementor-widget-heading .elementor-heading-title { margin-bottom: 22px; }

/* --- Les deux formules (.offers-grid / .offer-card) ---------------------- */

.cc-offers > .elementor-container { align-items: stretch; }
.cc-offers .elementor-column.cc-offer-card > .elementor-element-populated {
  position: relative;
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-card);
  padding: 38px 36px;
}
@media (max-width: 1024px) { .cc-offers .elementor-column.cc-offer-card > .elementor-element-populated { padding: 34px 30px; } }
@media (max-width: 767px)  { .cc-offers .elementor-column.cc-offer-card > .elementor-element-populated { padding: 30px 22px; } }

.cc-offers .cc-offer-title .elementor-heading-title { font-size: 32px; margin: 0 0 10px; }
@media (max-width: 1024px) { .cc-offers .cc-offer-title .elementor-heading-title { font-size: 28px; } }
@media (max-width: 767px)  { .cc-offers .cc-offer-title .elementor-heading-title { font-size: 26px; } }

/* Prix + durée : bloc d'en-tête, souligné d'un filet (.offer-header) */
.cc-offers .elementor-widget-text-editor.cc-offer-header {
  padding-bottom: 22px; margin-bottom: 24px;
  border-bottom: 1px solid var(--cc-border-soft);
}
.cc-offers .cc-offer-header p:first-child {
  font-family: var(--cc-serif); font-size: 29px; font-weight: 400; line-height: 1.1;
  color: var(--cc-ink); font-variant-numeric: tabular-nums; margin: 0 0 6px;
}
.cc-offers .cc-offer-header p + p { font-size: 16px; line-height: 1.5; color: var(--cc-body); margin: 0; }

.cc-offers .cc-offer-h3 .elementor-heading-title { font-size: 20px; margin: 26px 0 6px; }
.cc-offers .elementor-widget-text-editor p,
.cc-offers .elementor-widget-text-editor li { max-width: 36em; }

.cc-offers .elementor-widget-text-editor.cc-offer-note {
  padding-top: 22px; margin: 0 0 26px;
  border-top: 1px solid var(--cc-border-soft);
}
.cc-offers .cc-offer-note p { font-size: 16px; line-height: 1.65; margin: 0; }

/* Boutons pleine largeur dans la carte (.offer-actions .btn) */
.cc-offers .elementor-widget-button .elementor-button { width: 100%; }
.cc-offers .elementor-widget-button:not(:last-child) { margin-block-end: 12px; }

/* Pastille « Recommandé » (.offer-badge) */
.cc-offers .elementor-widget-text-editor.cc-offer-badge { position: absolute; top: -14px; left: 34px; margin: 0; width: auto; z-index: 2; }
.cc-offers .cc-offer-badge p {
  margin: 0; padding: 5px 14px;
  background: var(--cc-accent); color: var(--cc-bg);
  font-family: var(--cc-sans); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  border-radius: var(--cc-radius-pill);
}
@media (max-width: 767px) { .cc-offers .elementor-widget-text-editor.cc-offer-badge { left: 22px; } }

/* --- Chiffres clés (.stats-grid / .stat-card) ---------------------------- */

.cc-stats .elementor-column > .elementor-element-populated {
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-card);
  padding: 32px 24px;
  text-align: center;
}
@media (max-width: 767px) { .cc-stats .elementor-column > .elementor-element-populated { padding: 26px 22px; } }
.cc-stats .elementor-widget-heading .elementor-heading-title {
  font-family: var(--cc-serif); font-size: 42px; font-weight: 400; line-height: 1.05;
  color: var(--cc-ink); font-variant-numeric: tabular-nums; margin: 0 0 8px;
}
@media (max-width: 1024px) { .cc-stats .elementor-widget-heading .elementor-heading-title { font-size: 38px; } }
.cc-stats .elementor-widget-text-editor p { font-size: 16px; line-height: 1.45; color: var(--cc-body); margin: 0; }

/* --- Liste des documents (.docs-list) ------------------------------------ */

.cc-docs-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cc-border); max-width: 640px; }
.cc-docs-list li { border-bottom: 1px solid var(--cc-border); }
.cc-docs-list a { display: block; padding: 15px 0; }

/* --- Accessibilité / médiation (.legal-grid) ----------------------------- */

.cc-legal .elementor-column + .elementor-column > .elementor-element-populated {
  padding-left: 56px; border-left: 1px solid var(--cc-border-soft);
}
@media (max-width: 1024px) { .cc-legal .elementor-column + .elementor-column > .elementor-element-populated { padding-left: 40px; } }
@media (max-width: 767px) {
  .cc-legal .elementor-column + .elementor-column > .elementor-element-populated {
    padding-left: 0; padding-top: 32px; border-left: none; border-top: 1px solid var(--cc-border-soft);
  }
}
.cc-legal .elementor-widget-heading .elementor-heading-title { font-size: 20px; margin-bottom: 14px; }
.cc-legal .elementor-widget-text-editor p { font-size: 16px; line-height: 1.65; margin-bottom: 16px; }

/* Paliers responsive de la maquette : les formules s'empilent dès 1024 px
   (.offers-grid → 1fr) et les chiffres passent à 2 colonnes puis 1
   (.stats-grid → repeat(2,1fr) puis 1fr). */

/* Elementor injecte une règle PAR ÉLÉMENT (`.elementor-1446 .elementor-element…`)
   en (0,3,0), et EN LIGNE donc après notre feuille : à spécificité égale elle
   gagne. On double la classe pour passer en (0,4,0). */
@media (max-width: 1024px) {
  .cc-offers > .elementor-container > .elementor-column.elementor-column { width: 100%; }
  .cc-offers > .elementor-container { row-gap: 40px; }
  .cc-stats > .elementor-container > .elementor-column.elementor-column { width: 50%; }
}
@media (max-width: 767px) {
  .cc-stats > .elementor-container > .elementor-column.elementor-column { width: 100%; }
  .cc-legal > .elementor-container > .elementor-column.elementor-column { width: 100%; }
}

/* ==========================================================================
   17. PAGE COACHING PROFESSIONNEL — valeurs relevées dans le build Astro
   ========================================================================== */

.cc-page-hero .elementor-widget-text-editor p { font-size: 17.5px; line-height: 1.7; max-width: 34em; }
.cc-page-hero .elementor-widget-text-editor.cc-hero-subtitle p { color: var(--cc-ink); }

/* --- « Le coaching, c'est pour vous si… » (.situations-list) -------------- */

.cc-situations-list ul {
  list-style: none; padding: 0; margin: 24px 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 48px;
}
.cc-situations-list li {
  position: relative; padding: 16px 0 16px 22px;
  border-top: 1px solid var(--cc-border);
  font-size: 17px; line-height: 1.6; color: var(--cc-body);
}
.cc-situations-list li::before {
  content: ""; position: absolute; left: 0; top: 26px;
  width: 6px; height: 6px; background: var(--cc-accent);
}
@media (max-width: 767px) { .cc-situations-list ul { grid-template-columns: 1fr; column-gap: 0; } }

/* --- Déroulement des séances (.steps-list) -------------------------------- */

.cc-steps-list { list-style: none; margin: 24px 0 0; padding: 0; }
.cc-step-item {
  display: grid; grid-template-columns: 44px 1fr; gap: 0 16px;
  padding: 26px 0; border-top: 1px solid var(--cc-border);
}
.cc-step-num {
  font-family: var(--cc-serif); font-weight: 300; font-size: 15px; line-height: 1.9;
  color: var(--cc-accent); font-variant-numeric: tabular-nums;
}
.cc-step-body h3 { margin: 0 0 4px; font-size: 22px; font-weight: 500; }
.cc-step-body p { margin: 0; font-size: 17.5px; line-height: 1.7; max-width: 34em; color: var(--cc-body); }
@media (max-width: 767px) { .cc-step-item { grid-template-columns: 32px 1fr; padding: 22px 0; } }

/* --- Tarif sur devis (.tarif-card) : filet accent à GAUCHE ---------------- */

.cc-tarif .elementor-column.cc-tarif-card > .elementor-element-populated {
  background: var(--cc-surface);
  border: none;
  border-left: 4px solid var(--cc-accent);
  border-radius: var(--cc-radius-card);
  padding: 32px 48px;
  max-width: 800px;
}
.cc-tarif .elementor-widget-text-editor p { font-size: 17.5px; line-height: 1.7; color: var(--cc-body); }
.cc-tarif .cc-tarif-note p { font-weight: 600; color: var(--cc-ink); }
@media (max-width: 1024px) { .cc-tarif .elementor-column.cc-tarif-card > .elementor-element-populated { padding: 32px; } }
@media (max-width: 767px)  { .cc-tarif .elementor-column.cc-tarif-card > .elementor-element-populated { padding: 24px; } }

/* --- Coaching Emploi (.offer-card) : fond CLAIR, bordure complète --------- */

.cc-exemple .elementor-column.cc-offer-alt > .elementor-element-populated {
  background: var(--cc-bg-sage);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-card);
  padding: 32px 48px;
  max-width: 800px;
}
@media (max-width: 1024px) { .cc-exemple .elementor-column.cc-offer-alt > .elementor-element-populated { padding: 32px; } }
@media (max-width: 767px)  { .cc-exemple .elementor-column.cc-offer-alt > .elementor-element-populated { padding: 24px; } }

.cc-exemple .elementor-widget-text-editor.cc-offer-eyebrow p {
  font-family: var(--cc-sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--cc-muted); margin: 0 0 8px;
}
.cc-exemple .elementor-widget-text-editor.cc-duration p {
  font-size: 16px; line-height: 1.5; color: var(--cc-muted);
  margin: 0 0 24px; padding-bottom: 16px; border-bottom: 1px solid var(--cc-border);
}
.cc-exemple ul { list-style: none; margin: 16px 0 0; padding: 0; }
.cc-exemple li {
  position: relative; padding: 13px 0 13px 22px;
  border-top: 1px solid var(--cc-border);
  font-size: 17px; line-height: 1.6; color: var(--cc-body);
}
.cc-exemple li::before {
  content: ""; position: absolute; left: 0; top: 22px;
  width: 6px; height: 6px; background: var(--cc-accent);
}

/* --- Déontologie (.values-grid) ------------------------------------------- */

.cc-values-grid {
  list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: 32px; margin: 24px 0 0; padding: 0;
}
.cc-value-item {
  padding: 16px 0; border-top: 1px solid var(--cc-border);
  font-size: 17px; line-height: 1.5; font-weight: 500; color: var(--cc-ink);
}
@media (max-width: 1024px) { .cc-values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .cc-values-grid { grid-template-columns: 1fr; } }

/* --- Filet du bandeau final (.cta-rule) ---------------------------------- */

.cc-cta-rule { display: block; width: 48px; height: 1px; margin: 0 auto 24px; background: var(--cc-accent); }

/* Largeurs de lecture de la maquette : .block = 700, .block-wide = 940,
   .page-hero-content = 760. Elementor étale sinon sur les 1240 du conteneur. */
.elementor-column.cc-block > .elementor-element-populated { max-width: 700px; }
.elementor-column.cc-block-wide > .elementor-element-populated { max-width: 940px; }
.elementor-column.cc-hero-block > .elementor-element-populated { max-width: 760px; }

/* ==========================================================================
   18. PAGES LÉGALES — valeurs relevées dans le build Astro
   Une seule section, colonne de lecture à 38em, titres de rubrique séparés
   par un filet. Elementor étalait le texte sur les 1240 px du conteneur.
   ========================================================================== */

.cc-legal-page .elementor-column.cc-legal-col > .elementor-element-populated { max-width: 38em; }

.cc-legal-page .elementor-widget-heading.cc-legal-h1 .elementor-heading-title {
  font-size: 44px; line-height: 1.1; text-align: left; margin: 0 0 10px;
}
@media (max-width: 1024px) { .cc-legal-page .elementor-widget-heading.cc-legal-h1 .elementor-heading-title { font-size: 36px; } }
@media (max-width: 767px)  { .cc-legal-page .elementor-widget-heading.cc-legal-h1 .elementor-heading-title { font-size: 30px; } }

.cc-legal-page .elementor-widget-heading.cc-legal-h2 .elementor-heading-title {
  font-family: var(--cc-serif);
  font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: 0;
  color: var(--cc-ink);
  border-top: 1px solid var(--cc-border);
  margin: 42px 0 14px; padding-top: 26px;
}
@media (max-width: 767px) {
  .cc-legal-page .elementor-widget-heading.cc-legal-h2 .elementor-heading-title { margin-top: 34px; padding-top: 22px; }
}

.cc-legal-page .elementor-widget-text-editor p,
.cc-legal-page .elementor-widget-text-editor li {
  font-family: var(--cc-sans); font-size: 16px; line-height: 1.68;
  color: var(--cc-body); margin-bottom: 16px;
}
.cc-legal-page .elementor-widget-text-editor strong { font-weight: 600; color: var(--cc-ink); }
.cc-legal-page .elementor-widget-text-editor a {
  color: var(--cc-sage-dark);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; text-decoration-color: var(--cc-border-soft);
}
.cc-legal-page .elementor-widget-text-editor a:hover { color: var(--cc-accent); text-decoration-color: var(--cc-accent); }

.cc-legal-page .elementor-widget-text-editor.cc-last-update p {
  font-size: 13.5px; font-style: italic; line-height: 1.6;
  color: var(--cc-muted); text-align: left; margin: 0;
}
.cc-legal-page .elementor-widget-text-editor.cc-last-update {
  border-top: 1px solid var(--cc-border); margin-top: 42px; padding-top: 22px;
}

/* Les widgets se suivent sans l'espacement par défaut du kit : les marges
   sont portées par les titres et les paragraphes, comme dans la maquette. */
.cc-legal-page .elementor-widget:not(:last-child) { margin-block-end: 0; }

/* Citation d'Épictète (.about-quote) — le dernier style en ligne survivant */
.cc-quote {
  margin: 30px 0; padding-left: 24px;
  border-left: 1px solid var(--cc-border-soft);
  font-family: var(--cc-serif); font-style: italic; font-weight: 300;
  font-size: 20px; line-height: 1.55; color: var(--cc-ink);
}
.cc-quote cite {
  display: block; margin-top: 12px;
  font-family: var(--cc-sans); font-style: normal; font-size: 14px; color: var(--cc-muted);
}

/* ==========================================================================
   19. « Ma méthode » et les écarts de colonnes (02/09)
   Elementor n'applique pas de gouttière équivalente au `gap` des grilles de
   la maquette : services et questions sont à 60 px, à propos à 64.
   ========================================================================== */

.cc-services > .elementor-container { column-gap: 60px; }
.cc-questions > .elementor-container { column-gap: 60px; }
.cc-about > .elementor-container { column-gap: 64px; }
.cc-hero > .elementor-container { column-gap: 72px; }
@media (max-width: 1024px) {
  .cc-services > .elementor-container,
  .cc-questions > .elementor-container { column-gap: 44px; }
  .cc-about > .elementor-container { column-gap: 44px; }
  .cc-hero > .elementor-container { column-gap: 48px; }
}
@media (max-width: 767px) {
  .cc-services > .elementor-container,
  .cc-questions > .elementor-container,
  .cc-about > .elementor-container,
  .cc-hero > .elementor-container { column-gap: 0; row-gap: 32px; }
}

/* --- Liste « Ma méthode » (.method-list) --------------------------------- */

/* 52em calculés sur la taille de police héritée de la maquette (18px) = 936px.
   Notre corps est à 16px : on fige la valeur mesurée. */
.cc-method-list { list-style: none; max-width: 936px; margin: 0; padding: 0; }
.cc-method-item { display: grid; grid-template-columns: 56px 1fr; padding: 26px 0; }
.cc-method-item:first-child { padding-top: 0; }
.cc-method-item:last-child { padding-bottom: 0; }
.cc-method-item + .cc-method-item { border-top: 1px solid var(--cc-border); }
.cc-method-num {
  font-family: var(--cc-serif); font-weight: 300; font-size: 15px; line-height: 28px;
  color: var(--cc-accent); font-variant-numeric: tabular-nums;
}
.cc-method-title { margin: 0 0 8px; font-family: var(--cc-serif); font-size: 22px; font-weight: 500; line-height: 1.3; color: var(--cc-ink); }
.cc-method-text { margin: 0; max-width: 42em; font-size: 16px; line-height: 1.7; color: var(--cc-body); }
@media (max-width: 767px) {
  .cc-method-item { grid-template-columns: 34px 1fr; }
  .cc-method-num { line-height: 26px; }
}

/* Le titre du hero est découpé en blocs, comme `.hero-title-line` : sans ça,
   `text-wrap: balance` répartit sur 4 lignes au lieu des 2 voulues. */
.cc-title-line { display: block; }

/* Blocs de titre de section (.sect-head) : 34em, 44px de marge basse.
   La maquette ne centre QUE « Témoignages », les bandeaux finaux et les
   chiffres clés du bilan — et n'y met aucun filet décoratif. */
.cc-services .elementor-column:first-child .elementor-widget-heading .elementor-heading-title,
.cc-method .elementor-widget-heading .elementor-heading-title { max-width: 34em; }
.cc-method .elementor-widget-html { margin-top: 44px; }

/* ==========================================================================
   20. EN-TÊTE ET PIED DE PAGE — RÉPLIQUE EXACTE DE LA MAQUETTE (02/09)
   Valeurs copiées depuis le build Astro, classe par classe.
   ========================================================================== */

/* --- Logo du header (.logo / .logo-name / .logo-tagline) ----------------- */

.cc-logo .cc-logo-link {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  text-decoration: none; line-height: 1.05;
}
.cc-logo-name {
  font-family: var(--cc-serif); font-size: 23px; font-weight: 500;
  color: var(--cc-ink); white-space: nowrap;
  transition: color var(--cc-t) ease;
}
.cc-logo .cc-logo-link:hover .cc-logo-name { color: var(--cc-accent); }
.cc-logo-tagline {
  font-family: var(--cc-sans); font-size: 13px; font-weight: 400;
  color: var(--cc-muted); white-space: nowrap;
}
@media (max-width: 1024px) { .cc-logo-name { font-size: 21px; } }
@media (max-width: 400px)  { .cc-logo-tagline { display: none; } }

/* --- Pied de page : réplique de .footer ---------------------------------- */

.cc-foot {
  --ft-text: #C9CFC2; --ft-strong: #E4E8DE; --ft-muted: #9BA492;
  --ft-rule: rgba(251, 249, 245, .15);
  background-color: var(--cc-ink);
  color: var(--ft-text);
  padding: 64px 0 40px;
}
.cc-foot-inner {
  width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 60px;
  display: flex; flex-direction: column; gap: 40px;
}
.cc-foot p { margin: 0; }

.cc-foot-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 40px 60px; }

.cc-foot-identity { flex: 1 1 260px; max-width: 340px; }
.cc-foot-logo { display: block; color: inherit; text-decoration: none; }
.cc-foot-name {
  display: block; font-family: var(--cc-serif); font-weight: 500; font-size: 23px;
  line-height: 1.2; letter-spacing: -.01em; color: var(--cc-bg);
}
.cc-foot-baseline { display: block; margin-top: 4px; font-family: var(--cc-sans); font-size: 14px; line-height: 1.5; color: var(--ft-text); }
.cc-foot-logo:hover .cc-foot-name { color: var(--cc-accent); }
.cc-foot p.cc-foot-description { margin-top: 20px; font-size: 16px; line-height: 1.65; color: var(--ft-text); }

.cc-foot-social { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.cc-foot-social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--ft-rule); border-radius: var(--cc-radius-pill);
  color: var(--ft-strong); text-decoration: none;
  transition: color var(--cc-t) ease, border-color var(--cc-t) ease;
}
.cc-foot-social-link:hover { color: var(--cc-accent); border-color: var(--cc-accent); }
.cc-foot-social-link svg { width: 18px; height: 18px; fill: currentColor; }

.cc-foot-col { flex: 1 1 150px; max-width: 230px; }
.cc-foot-col-title, .cc-foot-contact-label {
  font-family: var(--cc-sans); font-weight: 400; font-size: 11.5px; line-height: 1.4;
  text-transform: uppercase; letter-spacing: .15em; color: var(--ft-muted);
}
.cc-foot p.cc-foot-col-title { margin-bottom: 14px; }

.cc-foot-links { list-style: none; display: flex; flex-direction: column; margin: 0; padding: 0; }
.cc-foot-links a, .cc-foot-links span {
  display: inline-flex; align-items: center; min-height: 34px;
  font-size: 15px; line-height: 1.45; color: var(--ft-strong); text-decoration: none;
  transition: color var(--cc-t) ease;
}
.cc-foot-links a:hover { color: var(--cc-accent); text-decoration: underline; text-underline-offset: 3px; }
.cc-foot-links--static span { display: block; min-height: 0; padding: 5px 0; color: var(--ft-text); }

.cc-foot-contact { display: flex; flex-direction: column; gap: 16px; }
.cc-foot-contact-label { display: block; margin-bottom: 2px; }
.cc-foot-contact a {
  display: inline-flex; align-items: center; min-height: 26px;
  font-size: 15px; line-height: 1.45; color: var(--ft-strong); text-decoration: none;
  transition: color var(--cc-t) ease;
}
.cc-foot-contact a:hover { color: var(--cc-accent); text-decoration: underline; text-underline-offset: 3px; }
.cc-foot-contact-value { display: block; font-size: 15px; line-height: 1.45; color: var(--ft-strong); }
.cc-foot-contact-email { overflow-wrap: anywhere; }

.cc-foot-cert { flex: 0 0 auto; }
.cc-foot-cert img { display: block; height: 40px; width: auto; border-radius: 8px; filter: none; max-width: none; }

.cc-foot-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 40px; border-top: 1px solid var(--ft-rule); padding-top: 24px;
}
.cc-foot-bottom p, .cc-foot-legal a { font-size: 13px; line-height: 1.5; color: var(--ft-muted); }
.cc-foot-legal { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.cc-foot-legal a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; transition: color var(--cc-t) ease; }
.cc-foot-legal a:hover { color: var(--cc-accent); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1024px) {
  .cc-foot-inner { padding: 0 40px; }
  .cc-foot-top { gap: 40px; }
  .cc-foot-identity { flex: 1 1 100%; max-width: 460px; }
}
@media (max-width: 767px) {
  .cc-foot { padding: 48px 0 32px; }
  .cc-foot-inner { padding: 0 24px; gap: 32px; }
  .cc-foot-top { flex-direction: column; gap: 32px; }
  .cc-foot-identity, .cc-foot-col { flex: 1 1 auto; max-width: 100%; }
  .cc-foot-links a, .cc-foot-legal a { min-height: 44px; }
  .cc-foot-contact a { min-height: 36px; }
  .cc-foot-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* La section qui porte le pied de page ne doit rien ajouter : c'est
   `.cc-foot-inner` qui gère la largeur (1240 avec 60 de padding = 1120 de
   contenu, comme `.footer-inner` de la maquette). Sans cette règle le
   conteneur d'Elementor plafonne à 1120 et le padding s'ajoute par-dessus :
   le contenu tombe à 1000 et le logo Qualiopi part à la ligne. */
.elementor-section.elementor-section-boxed.cc-footer-wrap > .elementor-container { max-width: none; }
.cc-footer-wrap .elementor-column > .elementor-element-populated { padding: 0; }

/* --- Bandeau final en ligne (.cta-inner) : accueil et bilan -------------- */
.cc-cta-row > .elementor-container { align-items: center; column-gap: 40px; }
.cc-cta-row .elementor-widget-heading .elementor-heading-title { margin: 0 0 12px; }
.cc-cta-row .elementor-widget-text-editor p { margin: 0; }
.cc-cta-row .elementor-widget-button .elementor-button { white-space: nowrap; }
@media (max-width: 767px) {
  .cc-cta-row > .elementor-container > .elementor-column.elementor-column { width: 100%; }
  .cc-cta-row > .elementor-container { row-gap: 28px; }
  .cc-cta-row .elementor-widget-button { text-align: left; }
}

/* Le bouton du bandeau final doit toucher le bord droit du contenu
   (`justify-content: space-between` de `.cta-inner`). */
.cc-cta-row > .elementor-container > .elementor-column:last-child .elementor-widget-button,
.cc-cta-row > .elementor-container > .elementor-column:last-child .elementor-widget-button .elementor-button-wrapper { text-align: right; }
@media (max-width: 767px) {
  .cc-cta-row > .elementor-container > .elementor-column:last-child .elementor-widget-button,
  .cc-cta-row > .elementor-container > .elementor-column:last-child .elementor-widget-button .elementor-button-wrapper { text-align: left; }
}

/* Elementor empile les widgets dans un flex vertical : `text-align` ne
   déplace pas le bouton, il faut aligner l'ITEM du flex. */
.cc-cta-row > .elementor-container > .elementor-column:last-child > .elementor-element-populated,
.cc-cta-row > .elementor-container > .elementor-column:last-child > .elementor-widget-wrap {
  align-items: flex-end;
}
@media (max-width: 767px) {
  .cc-cta-row > .elementor-container > .elementor-column:last-child > .elementor-element-populated,
  .cc-cta-row > .elementor-container > .elementor-column:last-child > .elementor-widget-wrap {
    align-items: flex-start;
  }
}

/* ==========================================================================
   21. SOUS-MENU « SERVICES » — alignement de la maquette            (02/09)
   --------------------------------------------------------------------------
   Constat : dans la liste deroulante, « Bilan de competences » et « Coaching
   professionnel » partaient 20 px trop a droite. UAE ecrit sur le lien
   `padding-left: calc(35px); padding-right: 15px` via la regle
   `.elementor-<page> .elementor-element-<id> .menu-item a.hfe-sub-menu-item`,
   soit (0,5,1), ET la reinjecte en inline APRES notre feuille : nos 9px/18px
   de la section 13 ne passaient jamais.
   On repasse au-dessus en (0,6,1), sans `!important`.

   Valeurs reprises telles quelles de la maquette (Header.astro) :
     .dropdown      { padding: 6px; min-width: 250px;
                      max-width: min(320px, calc(100vw - 2rem)) }
     .dropdown-link { display: block; padding: 11px 14px }

   Portee limitee au desktop : sous 1025 px le menu devient un accordeon et
   UAE y force `width: auto !important` — le retrait a gauche y marque la
   hierarchie, on n'y touche pas.
   ========================================================================== */

@media (min-width: 1025px) {
  .elementor-widget-navigation-menu.cc-nav .hfe-nav-menu ul.sub-menu {
    width: auto;
    min-width: 250px;
    max-width: min(320px, calc(100vw - 2rem));
    padding: 6px;
  }

  .elementor-widget-navigation-menu.cc-nav .hfe-nav-menu .sub-menu .menu-item a.hfe-sub-menu-item {
    display: block;
    padding: 11px 14px;
    border-radius: 8px;
    white-space: nowrap;
  }
}

/* ==========================================================================
   22. BOUTON WHATSAPP FLOTTANT (extension Joinchat)                  (02/09)
   --------------------------------------------------------------------------
   La maquette n'a aucun bouton WhatsApp (verifie : zero occurrence de
   `joinchat`, `whatsapp` ou `wa.me` dans `src/` et `dist/`). L'extension
   Joinchat, elle, est active sur tout le site et pose une pastille verte en
   bas a droite.
   On la masque par le theme, sans toucher a l'extension : tant que le theme
   enfant n'est pas active, le site actuel garde son bouton ; le jour de la
   bascule il disparait avec le reste de l'ancienne presentation.
   La regle a battre est `.joinchat--show { display: block }` en (0,1,0) :
   (0,2,0) suffit, pas besoin de `!important`.
   A la bascule, envisager de desactiver l'extension pour de bon (cela retire
   aussi son CSS et son JS, ~30 ko) — decision de Benjamin.
   ========================================================================== */

.joinchat.joinchat--show { display: none; }

/* ==========================================================================
   23. ANCRES DU MENU — ne pas passer sous l'en-tete collant          (02/09)
   --------------------------------------------------------------------------
   La maquette pose `scroll-margin-top: calc(var(--header-height, 92px) + 16px)`
   sur `.sect` et sur `.hero` (index.astro:508 et 562), parce que son en-tete est
   fixe. Le notre est `position: sticky` : meme probleme, la section arrivait
   collee sous la barre. On reprend la meme formule.
   Les trois paliers sont ceux de la maquette (Header.astro:140-151) :
   92 px au-dessus de 1024, 88 px en dessous, 80 px sous 768.
   ========================================================================== */

:root { --cc-header-h: 92px; }
@media (max-width: 1024px) { :root { --cc-header-h: 88px; } }
@media (max-width: 767px)  { :root { --cc-header-h: 80px; } }

.elementor-section[id] { scroll-margin-top: calc(var(--cc-header-h) + 16px); }

/* ==========================================================================
   24. HAUTEUR DE L'EN-TETE — aligner sur les 92 px de la maquette   (02/09)
   --------------------------------------------------------------------------
   Mesure avant correction : notre barre faisait 96,5 px contre 93 px (92 + le
   filet transparent d'1 px) chez la maquette. Le remplissage 26/26 etait deja
   bon : l'ecart venait de la RANGEE centrale, 43,5 px au lieu de 40.

   Coupable : le widget de menu UAE impose a ses liens `padding: 15px` et
   `font-size: 13.5px / line-height: 13.5px`, soit 15 + 13,5 + 15 = 43,5. Il
   ecrit ca en `.elementor-<page> .elementor-element-<id> .menu-item a...`,
   (0,5,1) ET en inline apres notre feuille — les 14,5 px de la section 13 ne
   passaient donc jamais non plus. On accroche les classes du widget lui-meme
   pour monter a (0,7,1), sans `!important`.

   Valeurs relevees sur la maquette a 1440 px :
     .nav          { min-height: 40px; align-items: center }
     .nav-links    { gap: 30px }              -> ici `margin-left: 30px`
     .nav-link     { padding: 8px 0; font-size: 14.5px; line-height: 17.4px }
                     hauteur rendue 33,4 px
     .nav-cta      { line-height: 16.2px }    -> hauteur rendue 38,2 px
     .logo         { hauteur rendue 39,8 px } -> deja identique chez nous

   Une fois les liens ramenes a 33,4 px, c'est le logo (39,8) qui fixe la
   rangee : 26 + 39,8 + 26 + 1 = 92,8, la valeur de la maquette.

   Portee desktop : sous 1025 px le menu devient un accordeon a pleine largeur,
   ou un remplissage horizontal nul collerait le texte au bord.
   ========================================================================== */

.cc-header > .elementor-container { min-height: 40px; align-items: center; }

.cc-header-cta .elementor-button { line-height: 16.2px; }

@media (min-width: 1025px) {
  /* Le parent « Services » n'est PAS un enfant direct du `li` : UAE l'enveloppe
     dans `div.hfe-has-submenu-container`. Un `>` le rate, et c'est justement lui
     qui tenait la rangee a 43,5 px. Selecteur en descendance, donc. */
  .elementor-element.elementor-widget.elementor-widget-navigation-menu.cc-nav
    .hfe-nav-menu .menu-item a.hfe-menu-item {
    padding: 8px 0;
    font-size: 14.5px;
    line-height: 17.4px;
  }

  .elementor-element.elementor-widget.elementor-widget-navigation-menu.cc-nav
    ul.hfe-nav-menu { align-items: center; }

  .elementor-element.elementor-widget.elementor-widget-navigation-menu.cc-nav
    .hfe-nav-menu li.menu-item { margin: 0 0 0 30px; }
}

/* Le palier de la section 13 : la barre se cassait entre 1025 et 1150 px. */
@media (min-width: 1025px) and (max-width: 1200px) {
  .elementor-element.elementor-widget.elementor-widget-navigation-menu.cc-nav
    .hfe-nav-menu li.menu-item { margin-left: 22px; }
}

/* ==========================================================================
   25. RETOURS DE SOPHIE — relecture du 04/09/2026                    (04/09)
   --------------------------------------------------------------------------
   Chaque point a ete mesure des deux cotes AVANT correction. Les trois quarts
   etaient des ECARTS DE PORTAGE : la maquette avait deja raison, c'est nous
   qui avions derive.
   ========================================================================== */

/* --- Accueil : le numero devient un bouton, comme le rendez-vous ----------
   Sa demande : « faire un Bouton ou un rectangle comme tu l'as fait pour
   prendre un rv ». Dans la maquette le numero est un simple lien souligne
   (`.hero-phone`, border-bottom 1px). On le passe en pastille fantome, la
   meme que `.cc-btn-ghost`, et on ouvre l'ecart de 20 a 24 px.
   ⚠️ C'est un ECART VOULU avec la maquette Astro, pas une correction. */

.cc-hero-ctas { gap: 24px; }

.cc-hero-ctas .cc-hero-phone {
  display: inline-flex; align-items: center; justify-content: center;
  /* 16 et non 17 : le filet d'1 px de chaque cote compense, les deux
     pastilles font alors exactement la meme hauteur (60 px). */
  padding: 16px 30px;
  border: 1px solid var(--cc-sage);
  border-radius: var(--cc-radius-pill);
  color: var(--cc-sage-dark);
}
.cc-hero-ctas .cc-hero-phone:hover {
  background: var(--cc-sage); color: var(--cc-bg); border-color: var(--cc-sage);
}
/* La zone de touche elargie de la version soulignee n'a plus lieu d'etre. */
.cc-hero-ctas .cc-hero-phone::after { content: none; }

/* --- Bilan : scinder les deux formules ------------------------------------
   Mesure : maquette `gap: 30px` entre les deux cartes, la nôtre `0` — elles se
   touchaient et se lisaient comme un seul aplat beige. Les colonnes Elementor
   font 50 % chacune : un `gap` les ferait deborder, on inset donc les cartes.
   Et la carte « Recommande » porte dans la maquette un filet accent
   (#C4703F) la ou nous mettions le meme gris que l'autre. */

@media (min-width: 1025px) {
  .cc-offers > .elementor-container > .elementor-column:first-child > .elementor-element-populated { margin-right: 15px; }
  .cc-offers > .elementor-container > .elementor-column:last-child  > .elementor-element-populated { margin-left: 15px; }
}

.cc-offers .elementor-column.cc-offer-featured > .elementor-element-populated {
  border-color: var(--cc-accent);
}

/* --- Encarts sombres : le corps de texte de la maquette -------------------
   Mesure : maquette 17 px / 1,7 sur `.cta-final p`, nous 16 px / 1,68.
   Le fond, lui, a ete remis a #2C3327 dans les donnees de la page bilan (il
   etait a #3E4A38, seule page du lot dans ce cas) : contraste 8,9:1 -> 12,2:1.
   Le pied de page n'est pas `.cc-invert`, il n'est pas touche (verifie). */

.cc-invert .elementor-widget-text-editor p { font-size: 17px; line-height: 1.7; }

/* --- Un encart sombre colle au pied de page ------------------------------
   Sur la page coaching, le bloc « Pret a avancer ? » est suivi IMMEDIATEMENT
   du pied de page, tous deux en #2C3327 : les deux se fondent, d'ou son
   « noye dans le cadre ». Le defaut existe aussi dans la maquette Astro.
   On reprend le filet deja employe a l'interieur du pied de page. */

.elementor-section.cc-invert + .elementor-section.cc-footer-wrap {
  border-top: 1px solid rgba(251, 249, 245, .18);
}

/* ==========================================================================
   26. COHERENCE DES TAILLES DE TEXTE + ECART MENU/BOUTON             (04/09)
   --------------------------------------------------------------------------
   Retour de Benjamin : « l'onglet Actualites est colle au bouton RDV » et
   « les polices ne sont pas coherentes selon les pages ». Verifie page par
   page, texte par texte, contre la maquette. Quatre derives reelles.
   ========================================================================== */

/* --- 26.1 L'onglet « Actualites » colle au bouton ------------------------
   Mesure : ecart 0 px chez nous, 30 px dans la maquette (`.nav-right`).
   Le bouton flottait a GAUCHE de sa colonne au lieu d'etre cale a droite :
   en le remettant a droite, l'ecart se cree tout seul et le bouton s'aligne
   enfin sur le bord droit du conteneur, comme dans la maquette. */

/* Le widget porte `elementor-widget__width-auto` : il ne fait que la largeur
   du bouton dans un `.elementor-widget-wrap` en flex, donc `text-align` n'a
   aucune prise. C'est la marge automatique d'un element flex qui le cale. */
.cc-header .elementor-widget.cc-header-cta { margin-left: auto; }

/* --- 26.2 Accueil : cartes de service et chapo de section ----------------
   Mesure : cartes a 17 px chez nous / 16 px maquette, et le chapo de la
   section « Ma methode » a 16 px chez nous / 17 px maquette — les deux
   valeurs etaient INVERSEES.
   Cause : `.cc-services .elementor-column:first-child … p` (0,3,1) attrapait
   aussi les cartes, qui vivent dans une section imbriquee. */

/* (0,5,1) : la regle a battre porte `:first-child`, qui compte comme une
   classe — elle est donc a (0,4,1), pas (0,3,1). */
.cc-services .elementor-section.elementor-inner-section .elementor-widget.elementor-widget-text-editor p {
  font-size: 16px;
  line-height: 1.7;
}

.cc-method > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-text-editor p {
  font-size: 17px;
  line-height: 1.7;
}

/* --- 26.3 Bilan : titres des formules et chapo des cartes ----------------
   Mesure : titres 32 px chez nous / 30 px maquette ; paragraphe d'intro de
   chaque formule 16 px chez nous / 16,5 px maquette. */

.cc-offers .cc-offer-title .elementor-heading-title { font-size: 30px; }
@media (max-width: 1024px) { .cc-offers .cc-offer-title .elementor-heading-title { font-size: 28px; } }
@media (max-width: 767px)  { .cc-offers .cc-offer-title .elementor-heading-title { font-size: 26px; } }

.cc-offers .elementor-column.cc-offer-card .elementor-widget-text-editor:not(.cc-offer-header):not(.cc-offer-note):not(.cc-offer-badge) p {
  font-size: 16.5px;
  line-height: 1.75;
}

/* --- 26.4 Coaching : le texte courant --------------------------------------
   La maquette met TOUT le texte courant de cette page a 17,5 px. Quatre
   paragraphes retombaient sur le 16 px par defaut faute de classe : les deux
   sections concernees portent desormais `cc-prose` dans les donnees. */

.cc-prose .elementor-widget-text-editor p { font-size: 17.5px; line-height: 1.7; }

/* Le `strong` de la note de tarif partait a 700 (defaut du navigateur) la ou
   la maquette est a 600. */
.cc-tarif .cc-tarif-note p,
.cc-tarif .cc-tarif-note strong { font-weight: 600; }

/* ==========================================================================
   27. LE FIL D'ACTUALITES — habiller le blog WordPress                (04/09)
   --------------------------------------------------------------------------
   Decision de Benjamin du 04/09 : `/actualites/` reste le **blog dynamique**,
   pour que Sophie continue de publier seule. Il faut donc habiller le balisage
   que sort Hello Elementor, et non recopier la page statique de la maquette.

   Balisage a habiller (releve en prevalisation) :
     .site-main > .page-header > h1
                > .page-content > article.post > h2.entry-title > a
                                               > a > img.attachment-large
                                               > p   (extrait)

   Valeurs reprises de `src/pages/actualites/index.astro` :
     .page-hero    { padding: 74px 0 40px }
     .article-list { max-width: 880px; border-top: 1px solid }
     .article-entry{ grid 240px 1fr; gap 32px; padding 32px 0 }
     .article-thumb img { aspect-ratio: 16/10; object-fit: cover; radius 12px }
     .article-title { serif 500 20px/1.32 }
     .article-excerpt { sans 16px/1.68; max-width 34em }

   ⚠️ Deux elements de la maquette manquent et ne peuvent PAS venir du CSS :
   la DATE et le lien « Lire l'article → ». Hello Elementor ne les sort pas.
   Il faudrait un fichier `home.php` dans le theme enfant — or l'editeur de
   fichiers de WordPress ne sait qu'editer l'existant, pas creer. A faire au
   moment de la bascule, en re-televersant le theme.
   ========================================================================== */

body.blog .site-main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 60px;
}
body.blog .page-header { padding: 74px 0 40px; }
body.blog .page-content { max-width: 880px; padding-bottom: 74px; border-top: 1px solid var(--cc-border); }

body.blog article.post {
  display: grid;
  grid-template-columns: 240px 1fr;
  column-gap: 32px;
  align-items: start;
  padding: 32px 0;
}
body.blog article.post + article.post { border-top: 1px solid var(--cc-border); }

/* Le seul `a` enfant DIRECT de l'article est celui de la vignette : le lien du
   titre, lui, est imbrique dans le `h2`. */
body.blog article.post > a {
  grid-column: 1; grid-row: 1 / span 2;
  overflow: hidden; border-radius: 12px;
  background: var(--cc-bg-sage);
  display: block;
}
body.blog article.post > a img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 10; object-fit: cover;
}

body.blog article.post > .entry-title {
  grid-column: 2; grid-row: 1;
  margin: 0 0 10px;
  font-family: var(--cc-serif); font-weight: 500;
  font-size: 20px; line-height: 1.32; letter-spacing: 0;
}
body.blog article.post > .entry-title a { color: var(--cc-ink); text-decoration: none; }
body.blog article.post > .entry-title a:hover { color: var(--cc-sage-dark); }

body.blog article.post > p {
  grid-column: 2; grid-row: 2;
  margin: 0;
  font-family: var(--cc-sans); font-size: 16px; line-height: 1.68;
  color: var(--cc-body); max-width: 34em;
}

@media (max-width: 1024px) {
  body.blog .site-main { padding: 0 40px; }
  body.blog .page-header { padding: 56px 0 32px; }
  body.blog .page-content { padding-bottom: 56px; }
  body.blog article.post { grid-template-columns: 200px 1fr; column-gap: 24px; padding: 28px 0; }
}
@media (max-width: 767px) {
  body.blog .site-main { padding: 0 24px; }
  body.blog .page-header { padding: 44px 0 24px; }
  body.blog .page-content { padding-bottom: 44px; }
  body.blog article.post { grid-template-columns: 1fr; row-gap: 16px; padding: 24px 0; }
  body.blog article.post > a { grid-column: 1; grid-row: auto; }
  body.blog article.post > .entry-title,
  body.blog article.post > p { grid-column: 1; grid-row: auto; }
}

/* ==========================================================================
   28. UN ARTICLE DU BLOG                                             (04/09)
   --------------------------------------------------------------------------
   Meme balisage que la liste (`.site-main > .page-header + .page-content`),
   mais `body.single`. Valeurs relevees sur
   `creativcoach.pages.dev/actualites/changer-de-voie-sans-se-perdre` :
     .container    { max-width: 1240px; padding: 0 60px }
     .article-page { padding: 74px 0 }
     h1            { 42px / 45,36 ; margin-bottom 16px }
     .article-body { max-width: 544px }   <- colonne de lecture etroite
     p             { 18px / 1,62 ; couleur ENCRE (pas le gris du corps) }
     h2 interne    { 24px serif }
   Avant correction : h1 a 60 px, paragraphes a 16 px gris, colonne a 800 px.
   ⚠️ La colonne de 544 px est celle de la maquette. Si ses images d'article
   paraissent trop petites, c'est le premier reglage a rediscuter.
   ========================================================================== */

body.single .site-main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 74px 60px;
}
body.single .page-header { padding: 0; }
body.single .page-header h1 {
  font-size: 42px; line-height: 1.08; margin: 0 0 16px;
  max-width: 20em;
}
body.single .page-content { max-width: 544px; }
body.single .page-content p {
  font-family: var(--cc-sans);
  font-size: 18px; line-height: 1.62;
  color: var(--cc-ink);
  margin: 0 0 24px;
}
body.single .page-content h2 { font-family: var(--cc-serif); font-size: 24px; font-weight: 500; margin: 32px 0 12px; }
body.single .page-content h3 { font-family: var(--cc-serif); font-size: 20px; font-weight: 500; margin: 28px 0 10px; }
body.single .page-content img { border-radius: 12px; height: auto; }

@media (max-width: 1024px) {
  body.single .site-main { padding: 56px 40px; }
  body.single .page-header h1 { font-size: 36px; }
}
@media (max-width: 767px) {
  body.single .site-main { padding: 44px 24px; }
  body.single .page-header h1 { font-size: 30px; }
  body.single .page-content p { font-size: 17px; }
}

/* ==========================================================================
   29. UN TITRE D'ARTICLE QUI CONTIENT DU HTML                        (04/09)
   --------------------------------------------------------------------------
   Le titre de l'article n° 1 est stocke tel quel dans WordPress :
     5 <strong>CONSEILS POUR FAIRE<br>UNE RECONVERSION PROFESSIONNELLE</strong>
   D'ou un titre en GRAS (700) et casse sur deux lignes, alors que les autres
   sont en 500 et se replient tout seuls. Ce n'est pas un probleme de feuille
   de style : c'est du balisage tape dans le champ du titre.
   On neutralise l'effet a l'affichage. ⚠️ Les MAJUSCULES, elles, sont des
   vraies lettres capitales dans le titre : seule une correction du titre dans
   WordPress les enlevera — et cela modifie le site EN LIGNE.
   ========================================================================== */

body.blog article.post > .entry-title strong,
body.single .page-header h1 strong { font-weight: inherit; }

/* Le `<br>` reste EN PLACE : le masquer collait les mots
   (« …POUR FAIREUNE RECONVERSION… »), il etait le seul separateur entre les
   deux moities du titre. Un saut de ligne premature vaut mieux qu'une faute. */

/* ==========================================================================
   30. LE TITRE WORDPRESS DES PAGES                                   (07/09)
   --------------------------------------------------------------------------
   Hello Elementor sort `.page-header > h1` avec le titre de la page. Sur
   l'accueil cela affichait « Accueil 2 » (le nom interne de la page) au-dessus
   du hero. Aucune des pages ne porte le reglage `hide_title` d'Elementor, donc
   le titre s'affichait deja avant la bascule.
   On le masque sur les PAGES construites avec Elementor uniquement.
   ⚠️ `body.page` est indispensable : sans lui on masquerait aussi le titre du
   blog (« Actualites ») et celui des articles, qui eux sont voulus.
   ========================================================================== */

body.page.elementor-page .page-header { display: none; }

/* ==========================================================================
   31. LOGO QUALIOPI ECRASE SUR TELEPHONE                             (07/09)
   --------------------------------------------------------------------------
   Signale par Benjamin. Mesure a 375 px : le logo sortait en **275 x 44**
   (rapport 6,25) alors que le fichier fait 633 x 338 (rapport 1,87). Aplati.

   Cause : `.cc-trust-qualiopi` est un conteneur flex en COLONNE avec
   `align-items: normal` (= stretch). L'image, en `width: auto`, se fait donc
   etirer sur toute la largeur du bloc, pendant que sa hauteur reste clouee a
   44 px. `width: auto` ne protege pas d'un etirement flex.

   ⚠️ Le meme defaut existe dans la maquette Astro (verifie le 07/09 : 275 x 44
   la aussi). Corrige des deux cotes.
   ========================================================================== */

.elementor .cc-qualiopi-img { align-self: flex-start; }

/* ==========================================================================
   32. EN-TETE SUR TELEPHONE — le burger a droite, le bouton masque  (07/09)
   --------------------------------------------------------------------------
   Mesure a 375 px, maquette contre WordPress :
     maquette : logo 24-167, burger **328-350** (bord droit), bouton `display: none`
     nous     : logo 28-162, burger **165-209** (colle au logo), bouton visible
   Le burger se retrouvait a 4 px du logo parce que la colonne du milieu garde
   ses 54 % et que la colonne du bouton occupe encore sa place a droite.

   On reprend la maquette : sous 1025 px le bouton d'en-tete disparait (le meme
   bouton est juste en dessous, dans le hero) et la colonne du menu prend la
   place liberee, ce qui envoie le burger au bord droit.
   ========================================================================== */

@media (max-width: 1024px) {
  .cc-header > .elementor-container > .elementor-column:nth-child(2) {
    flex: 1 1 auto;
    width: auto;
  }
  .cc-header > .elementor-container > .elementor-column:nth-child(3) { display: none; }
  .cc-nav .hfe-nav-menu { justify-content: flex-end; }
  /* UAE centre le burger avec `margin: 0 auto` — et une marge automatique en
     flex absorbe l'espace libre AVANT que `justify-content` n'ait son mot a
     dire. Mesure : `margin-left` calcule a 70,5 px de chaque cote. On annule
     celle de droite, l'automatique de gauche fait le travail. */
  .cc-nav .hfe-nav-menu__toggle { margin-left: auto; margin-right: 0; }
}

/* ==========================================================================
   33. EN-TETE — un ecart menu/bouton STABLE                          (07/09)
   --------------------------------------------------------------------------
   La section 26.1 avait cale le bouton a droite de sa colonne : l'ecart avec
   le dernier onglet passait de 0 a 27 px. Mais cet ecart DEPEND de la largeur
   de la fenetre, parce que le menu est aligne a droite dans une colonne a 54 %
   et le bouton a droite d'une colonne a 20 %. Mesure : 27 px a 1120, **54 px a
   1440**. La maquette, elle, tient un `gap: 30px` constant (`.nav-right`).

   On reproduit sa mise en page : la colonne du menu s'etire, celle du bouton
   se reduit a son contenu, et l'ecart devient une marge fixe de 30 px.
   ========================================================================== */

@media (min-width: 1025px) {
  .cc-header > .elementor-container > .elementor-column:nth-child(2) {
    flex: 1 1 auto;
    width: auto;
  }
  .cc-header > .elementor-container > .elementor-column:nth-child(3) {
    flex: 0 0 auto;
    width: auto;
  }
  .cc-nav .hfe-nav-menu { justify-content: flex-end; }
  .cc-header .elementor-widget.cc-header-cta { margin-left: 30px; }
}

/* ==========================================================================
   34. CONTRASTES — passer la barre des 4,5:1                         (07/09)
   --------------------------------------------------------------------------
   Releve exhaustif sur le site en ligne (PageSpeed n'en echantillonne qu'une
   partie) : CINQ combinaisons sous la norme AA, dont la plus importante
   commercialement — le texte des boutons d'appel.

     texte creme sur accent (BOUTONS)      3,48  <- le plus grave
     --cc-muted sur --cc-surface           3,35
     --cc-muted sur le fond creme          3,69
     --cc-sage en texte (eyebrow, 17 px)   4,09

   Les gris sont des tons neutres : les assombrir ne touche pas l'identite.
   L'accent, lui, est la couleur de la carte de visite de Sophie : on ne la
   remplace PAS, on prend la nuance foncee DEJA dans la palette (#AC5F31,
   jusqu'ici reservee au survol) pour les surfaces qui portent du texte, et on
   passe le texte en blanc pur. La famille de couleur est identique.
   ========================================================================== */

:root {
  --cc-muted: #626A5B;        /* etait #7C8474 — 3,35 -> 4,68 sur la surface */
  --cc-accent-texte: #AC5F31; /* l'accent quand il porte du texte */
}

/* L'eyebrow etait en --cc-sage (4,09). On le fonce sans toucher au jeton,
   qui sert aussi aux filets et aux bordures. */
/* (0,3,1) : la regle a battre est `.cc-eyebrow.elementor-widget-text-editor p`,
   en (0,2,1) — un simple `.cc-eyebrow p` (0,1,1) perdait. */
.elementor-widget.elementor-widget-text-editor.cc-eyebrow p,
.cc-eyebrow.elementor-widget-text-editor p { color: #647457; }

/* Boutons d'appel : fond plus dense + blanc pur. */
.cc-btn-accent,
.elementor-element.cc-btn-primary .elementor-button,
.cc-offers .elementor-widget-button.cc-btn-primary .elementor-button {
  background-color: var(--cc-accent-texte);
  color: #fff;
}
.cc-btn-accent:hover,
.elementor-element.cc-btn-primary .elementor-button:hover {
  background-color: #944F28;
  color: #fff;
}

/* La pastille « Recommande » porte elle aussi du texte sur l'accent. */
.cc-offers .cc-offer-badge p { background: var(--cc-accent-texte); color: #fff; }

/* ==========================================================================
   35. ACCORDEON FAQ — rendre le contraste CALCULABLE                 (07/09)
   --------------------------------------------------------------------------
   L'audit signale « contraste insuffisant » sur `a.elementor-accordion-title`.
   Mesure reelle : **12,40:1** (encre #2C3327 sur creme #FBF9F5), a 375 px comme
   a 1440 px. Le texte n'a aucun probleme de lisibilite.

   Ce que l'outil ne sait pas resoudre : ce titre est un `<a>` SANS `href`, dans
   un accordeon anime, et TOUS ses parents sont transparents jusqu'a la section
   (verifie sur 7 niveaux). Quand l'arriere-plan n'est pas determinable,
   axe-core classe l'element en non conforme par prudence.

   On pose donc un fond explicite, de la meme couleur que la section : aucun
   changement visible, mais la valeur devient calculable.
   ⚠️ Si l'audit continue de le signaler, ce n'est PAS un probleme de
   lisibilite — ne pas assombrir le texte pour faire plaisir a l'outil.
   ========================================================================== */

#faq .elementor-accordion .elementor-tab-title,
#faq .elementor-accordion .elementor-tab-content {
  background-color: var(--cc-bg);
}