/* ============================================================
   Paola Bolle — Coach TDAH — style-01-base.css  (FEUILLE « SOCLE »)
   ------------------------------------------------------------
   RÔLE : base commune à TOUT le site. On y définit :
     - les « tokens » (couleurs, espacements, réglages réutilisables,
       déclarés dans :root ci-dessous) ;
     - la remise à zéro (« reset ») des marges du navigateur ;
     - le fond crème doux + quelques aplats organiques discrets (body::before) ;
     - la typographie (titres Poppins, textes Nunito) ;
     - les boutons arrondis et les liens standards.

   ORDRE DE CHARGEMENT — TRÈS IMPORTANT :
   Le grand fichier style.css a été DÉCOUPÉ en 4 tranches, chargées
   dans cet ordre par inc/site-header.php et mon-espace/inc/top.php :
        01-base  →  02-home  →  03-pages  →  04-responsive
   En CSS, quand deux règles se contredisent, c'est la DERNIÈRE
   chargée qui gagne (principe de la « cascade »). Il ne faut donc
   JAMAIS changer cet ordre. Ce fichier 01 doit rester le PREMIER :
   tout le reste s'appuie sur ses variables et sa typographie.

   CHARTE GRAPHIQUE PAOLA (à respecter partout) :
     - Univers DOUX, chaleureux, rassurant, accessible, crayonné.
     - Palette : crème (fond), bleu profond (structure/titres),
       vert olive (aplats de sections), ocre doux (chaleur/accents),
       rose peau (touches), gris-bleu clair (bulles/cartes),
       noir crayonné (contours + textes courants).
     - Titres : Poppins (rond, lisible). Textes : Nunito (très lisible).
     - Coins ARRONDIS partout, contours façon crayon, ombres douces.
     - Beaucoup d'air : clarté et faible charge visuelle (public TDAH).
   ============================================================ */

/* ---------- Tokens : les réglages réutilisables partout ----------
   :root = la « racine » du document. Les variables déclarées ici
   (les --xxx) sont accessibles dans TOUT le CSS via var(--xxx).
   NB : on a CONSERVÉ les noms d'origine (--noir, --gris-…, --ligne…)
   pour ne rien casser ailleurs ; on a seulement RÉAFFECTÉ leur VALEUR
   à l'univers Paola, et ajouté des couleurs nommées (--creme, --bleu…). */

:root{
  /* --- Les 7 couleurs de la charte Paola, avec leur rôle --- */
  --creme:#F7F2EA;        /* FOND PRINCIPAL de tout le site (ambiance douce) */
  --bleu:#244F7A;         /* confiance / structure : titres, textes forts, boutons */
  --bleu-fonce:#1B3C5E;   /* variante foncée du bleu (survols de boutons) */
  --olive:#445D2A;        /* nature / calme / progression : aplats de sections */
  --ocre:#C99A55;         /* chaleur, accents, détails, survols, petites touches */
  --ocre-fonce:#A97B39;   /* ocre assombri, pour du texte lisible si besoin */
  --rose:#E7A39A;         /* douceur, touches ponctuelles */
  --bleu-clair:#E8EEF3;   /* bulles, cartes légères, fonds de respiration */
  --noir-crayon:#111111;  /* contours et textes courants (jamais de noir pur en aplat) */

  /* --- Tokens historiques RÉAFFECTÉS à la palette claire ---
     (mêmes noms qu'avant → aucune casse dans le reste du CSS). */
  --noir:#111111;          /* était #000 → devient le noir crayonné (texte/contours foncés) */
  --gris-fonce:#E8EEF3;    /* était #1A1A1A → devient un fond de carte clair (gris-bleu) */
  --gris-moyen:#5F574A;    /* textes secondaires/étiquettes : brun-gris doux, lisible sur crème */
  --gris-clair:#2B2B2B;    /* était texte clair sur noir → devient texte foncé lisible sur crème */
  --blanc:#FFFFFF;
  /* Deux niveaux de « lignes » (cadres/séparateurs), maintenant en NOIR
     crayonné translucide : .14 = trait discret, .72 = trait bien marqué. */
  --ligne:rgba(17,17,17,.14);
  --ligne-forte:rgba(17,17,17,.72);
  --max:1280px;                 /* largeur maxi du contenu centré */
  --pad:clamp(20px,4vw,48px);   /* marge intérieure gauche/droite */
  --s1:clamp(72px,11vw,150px);  /* respiration (grande) entre sections */
  --s2:clamp(40px,6vw,80px);    /* respiration moyenne */
  --ease:cubic-bezier(.22,.61,.36,1);  /* courbe d'accélération douce des animations */

  /* --- Réglages « crayonné » Paola --- */
  --radius:16px;                       /* rayon d'arrondi standard (boutons, champs) */
  --radius-card:20px 18px 22px 16px;   /* rayon LÉGÈREMENT irrégulier = effet dessiné main */
  --ombre:0 6px 18px rgba(17,17,17,.08);   /* ombre douce et floue */
  --ombre-pose:0 4px 0 rgba(17,17,17,.10); /* petite ombre « posée » sous les boutons */
}

/* ---------- Reset : on repart d'une base propre ---------- */
*{margin:0;padding:0;box-sizing:border-box}
/* Base à 17px (confort de lecture, recommandé pour un public TDAH). */
html{scroll-behavior:smooth;font-size:106.25%}   /* 106.25% ≈ 17px */
body{
  background:var(--creme);       /* fond crème doux sur tout le site */
  color:var(--noir);             /* texte courant = noir crayonné */
  /* Nunito en premier (très lisible) ; repli sur des polices équivalentes. */
  font-family:'Nunito','Lato','Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;               /* texte à graisse normale (confort) */
  line-height:1.7;               /* interlignage généreux */
  -webkit-font-smoothing:antialiased;
  /* Empêche une barre de défilement horizontale parasite (hero sur-cadré…). */
  overflow-x:hidden;
}

/* ---------- Fond doux Paola (remplace la texture rayée « studio ») ----------
   body::before = un calque décoratif « fantôme » derrière le contenu.
   Plus de rayures : juste quelques aplats organiques TRÈS discrets
   (olive, rose peau, bleu) qui donnent de la chaleur sans charger l'œil. */
body::before{
  content:"";
  position:fixed;                /* reste collé à l'écran, ne défile pas avec la page */
  left:0;right:0;top:-25vh;bottom:-25vh;  /* léger débord haut/bas pour la parallaxe */
  background:
    radial-gradient(38% 30% at 12% 12%, rgba(68,93,42,.06), rgba(68,93,42,0) 70%),
    radial-gradient(34% 26% at 88% 18%, rgba(231,163,154,.07), rgba(231,163,154,0) 70%),
    radial-gradient(40% 32% at 82% 88%, rgba(36,79,122,.05), rgba(36,79,122,0) 70%);
  opacity:1;                     /* les couleurs sont déjà très translucides ci-dessus */
  pointer-events:none;           /* purement visuel : n'intercepte aucun clic */
  z-index:0;                     /* tout au fond, sous le contenu */
  /* --texture-shift (piloté en JS au défilement) fait glisser doucement les
     aplats ; scale(1.12) évite de découvrir un bord vide pendant le glissement. */
  transform:translateY(var(--texture-shift,0px)) scale(1.12);
  will-change:transform;
}
/* Accessibilité : si « réduire les animations » est demandé, on fige le fond. */
@media(prefers-reduced-motion:reduce){
  body::before{transform:scale(1.12)}
}
/* Le contenu réel passe AU-DESSUS du fond décoratif (z-index:1 > 0). */
main,header,footer{position:relative;z-index:1}

img,video{max-width:100%;display:block}  /* jamais plus large que leur conteneur */
a{color:var(--bleu);text-decoration:none} /* liens bleu profond, sans soulignement par défaut */
::selection{background:var(--bleu);color:var(--creme)}  /* surlignage bleu / texte crème */

/* Conteneur centré : limite la largeur du contenu et ajoute les marges latérales. */
.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
section{padding:var(--s1) 0}                  /* grande respiration verticale par défaut */
.section-tight{padding:var(--s2) 0 var(--s1)} /* variante : haut resserré, bas normal */

/* ---------- Typographie ----------
   Titres ronds et lisibles (Poppins), en casse normale (plus doux que
   des capitales rigides). Bleu profond pour la structure/confiance. */
h1,h2,h3{
  font-family:'Poppins','Nunito','Montserrat',sans-serif;
  font-weight:700;
  text-transform:none;           /* casse normale = plus chaleureux */
  line-height:1.12;
  letter-spacing:-.005em;
  text-wrap:balance;             /* équilibre le nombre de mots par ligne */
  color:var(--bleu);             /* titres en bleu profond */
}
/* Tailles fluides via clamp() : grandissent avec l'écran, entre bornes. */
h1{font-size:clamp(2.4rem,6.5vw,4.8rem);font-weight:800;line-height:1.08}
h2{font-size:clamp(1.7rem,4vw,3rem)}
h3{font-size:1.15rem;line-height:1.35}

/* Petite étiquette au-dessus des sections (ex. « 01 — ACCOMPAGNEMENT »).
   On garde de jolies petites capitales espacées, colorées en olive. */
.section-label{
  font-size:.78rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--olive);
  display:flex;align-items:center;gap:18px;
  margin-bottom:clamp(20px,3vw,34px);
}
/* Le petit trait à droite de l'étiquette (largeur fixe 56px). */
.section-label::after{content:"";flex:0 0 56px;height:2px;background:var(--ocre);border-radius:2px}
.section-title{margin-bottom:clamp(28px,4vw,52px)}

/* Paragraphe d'accroche (« lead ») : plus gros et clair que le corps de texte. */
.lead{
  font-size:clamp(1.12rem,1.8vw,1.4rem);
  font-weight:400;color:var(--gris-clair);
  max-width:48em;
}

/* ---------- Boutons & liens ----------
   Boutons arrondis, contour crayon, petite ombre posée, et léger
   « enfoncement » au survol (feedback doux et rassurant). */
.btn{
  display:inline-block;
  border:2px solid var(--noir);
  padding:15px 32px;
  font-size:.98rem;font-weight:700;
  letter-spacing:.01em;text-transform:none;
  color:var(--creme);background:var(--bleu);   /* action principale : bleu plein, texte crème */
  border-radius:var(--radius);
  box-shadow:var(--ombre-pose);
  cursor:pointer;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),
             background .25s var(--ease),color .25s var(--ease);
}
/* Au survol : le bouton s'enfonce légèrement (l'ombre se réduit). */
.btn:hover{
  background:var(--bleu-fonce);
  transform:translateY(2px);
  box-shadow:0 2px 0 rgba(17,17,17,.10);
}
/* Variante secondaire : ocre doux, texte noir crayonné. */
.btn--solid{background:var(--ocre);color:var(--noir)}
.btn--solid:hover{background:var(--ocre-fonce);color:var(--noir)}

/* Lien « flèche » : un libellé souligné suivi d'une → qui avance au survol. */
.link-arrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:.9rem;font-weight:700;
  letter-spacing:.02em;text-transform:none;
  color:var(--bleu);
  border-bottom:2px solid var(--ocre);   /* soulignement ocre chaleureux */
  padding-bottom:6px;
}
.link-arrow::after{content:"→";transition:transform .25s var(--ease)}
.link-arrow:hover::after{transform:translateX(6px)}

/* ---------- Ornements illustrés (pilotables dans CRM → Site web → Illustrations) ---------- */
.illus-ornement{display:block;max-width:100%;height:auto;border-radius:22px 18px 24px 16px}
.illus-ornement--side{max-width:280px;margin:20px auto 0}
.illus-ornement--hero{max-width:220px;margin:14px auto 0}
@media(max-width:820px){.illus-ornement--side{max-width:240px}.illus-ornement--hero{max-width:180px}}