/* base.css — DBCR mockup v6 FINAL
 * Variables CSS, reset, body, typo, reveal, a11y.
 * Mobile-first strict (aucune media query ici, sauf reduced-motion).
 */

/* Utility nobreak — protege les expressions inseparables d'un wrap mi-mot
   (Maitre Drusilla Bret-Cunynghame-Robertson, noms institutions, etc.).
   Au desktop ou il y a la place, on garde nowrap. */
.nobreak {
    white-space: nowrap;
    /* Defense ultime : si l'expression depasse meme la largeur ecran,
       on autorise un wrap soft pour eviter overflow. */
    overflow-wrap: anywhere;
}

/* Wrap V2 patch (Drusilla 21/05/2026) — sur mobile/tablette ≤768px,
   autoriser le wrap des expressions longues. Une expression comme
   "Haut-Commissariat des Nations unies aux droits de l'homme" (400px)
   doit pouvoir se replier sur 2-3 lignes plutot que d'imposer un
   min-content de 400px qui fait deborder toute la section.
   text-wrap: pretty (defini plus bas) gere l'esthetique du wrap. */
@media (max-width: 768px) {
    .nobreak {
        white-space: normal;
    }
}

/* Wrap intelligent moderne (Chrome 114+, Safari 17.4+, Firefox 121+)
   - balance : equilibre les lignes des titres pour eviter orphan/widow
   - pretty  : reajuste les 2-3 dernieres lignes des paragraphes
   Fallback gracieux sur vieux browsers (texte wrap normal).            */
h1, h2, h3, h4, h5, h6,
.hero__kicker,
.hero__lead,
.cabinet__index,
.cabinet-page__index,
.cabinet-page__hero-kicker,
.cabinet-page__hero-sub,
.domaines-hub-page__kicker,
.contact-page__kicker,
.cta-final__index,
.domaines__index,
.presence__index,
.domaines-hub-page__philo-index {
    text-wrap: balance;
}

p,
li,
blockquote,
.cabinet-page__hero-bio p,
.cabinet__bio,
.cabinet__pullquote-text,
.parcours-step__desc,
.engagement-card__desc,
.langue-card__contexte,
.domaine-hub-card__desc,
.domaine__desc,
.domaines__lead,
.domaines-hub-page__hero-lead,
.domaines-hub-page__philo-lead,
.presence__lead,
.presence__outre-mer,
.contact-page__hero-lead,
.cta-final__lead,
.cmplz-cookiebanner .cmplz-message {
    text-wrap: pretty;
}

/* ========================================================== */
/* @font-face — self-hosted (RGPD-friendly, zero tracking)    */
/* Cormorant Garamond + Inter sont servis par Google en       */
/* variable fonts : un seul fichier couvre 300-600 par style. */
/* ========================================================== */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url('../fonts/cormorant-garamond-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300 600;
    font-display: swap;
    src: url('../fonts/cormorant-garamond-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url('../fonts/inter.woff2') format('woff2');
}

/* ========================================================== */
/* VARIABLES CSS — palette mockup v6                         */
/* ========================================================== */
:root {
    --creme:        #F8F7F2;
    --creme-warm:   #F2EFE6;
    --bleu-cpi:     #0F2A4A;
    --bleu-deep:    #0A1E36;
    --or:           #C9A961;
    --or-deep:      #A07F3D;
    --or-soft:      #E8D9B0;
    --charbon:      #1A1A1A;
    --charbon-soft: #4A4A45;
    --gris-text:    #5A5A55;
    --gris-soft:    #9B9990;
    --line:         rgba(15, 42, 74, 0.1);
    --line-soft:    rgba(15, 42, 74, 0.06);

    /* Aliases retro-compat (Phase 4.3-4.6 migrera vers les vars sans prefixe) */
    --dbcr-creme:               var(--creme);
    --dbcr-bleu-cpi:            var(--bleu-cpi);
    --dbcr-bleu-institutionnel: #1F4E79;
    --dbcr-or:                  var(--or);
    --dbcr-rouge-sang:          #A52A2A;
    --dbcr-noir-charbon:        var(--charbon);
    --dbcr-font-display:        'Cormorant Garamond', Georgia, serif;
    --dbcr-font-body:           'Inter', system-ui, -apple-system, sans-serif;
}

/* ========================================================== */
/* RESET MINIMAL                                              */
/* ========================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Couche 1 (Drusilla 21/05/2026) — securite globale overflow horizontal.
   Neutralise tout scroll lateral residuel meme si un enfant deborde
   (notamment apres open/close du menu drawer mobile).
   Ne PAS mettre sur un parent intermediaire : casserait position:sticky. */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--charbon);
    background: var(--creme);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; background: none; border: none; padding: 0; }
input, textarea, select { font: inherit; }

/* ========================================================== */
/* TYPO BASE                                                  */
/* ========================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    line-height: 1.15;
    color: var(--bleu-cpi);
}
em, i { font-style: italic; }
strong, b { font-weight: 600; }
a { color: inherit; text-decoration: none; }

/* ========================================================== */
/* REVEAL on scroll                                           */
/* ========================================================== */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.65, 0, 0.35, 1),
                transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================================== */
/* A11y                                                       */
/* ========================================================== */
.screen-reader-text {
    position: absolute !important;
    clip-path: inset(50%);
    width: 1px; height: 1px;
    overflow: hidden;
    word-wrap: normal !important;
}
:focus-visible {
    outline: 2px solid var(--or);
    outline-offset: 4px;
    border-radius: 1px;
}
::selection { background: var(--or); color: var(--bleu-cpi); }

/* ========================================================== */
/* PREFERS-REDUCED-MOTION universal                           */
/* ========================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
}

/* ========================================================== */
/* LEGACY-COMPAT — pour page.php (Cabinet, Domaines, Contact, */
/* Mentions, Politique). À retirer Phase 4.3-4.6 quand ces    */
/* pages seront rebuildées sur classes mockup v6.             */
/* ========================================================== */
.dbcr-container {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 1.5rem;
}
.dbcr-container--wide   { max-width: 1480px; }
.dbcr-container--narrow { max-width: 800px; }

.dbcr-section    { padding: 5rem 0; }
.dbcr-section--lg { padding: 8rem 0; }
.dbcr-section--sm { padding: 3rem 0; }

.dbcr-rule {
    border: none;
    height: 1px;
    background: var(--or);
    width: 60px;
    margin: 2rem auto;
}

.dbcr-page__header {
    background: var(--creme);
    text-align: center;
}
.dbcr-page__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-size: clamp(28px, 4vw, 44px);
    color: var(--bleu-cpi);
}
.dbcr-page__content {
    line-height: 1.75;
}
.dbcr-page__content p {
    margin: 0 0 1rem;
    color: var(--charbon-soft);
}
.dbcr-page__content a {
    color: var(--or-deep);
    border-bottom: 1px solid currentColor;
}
.dbcr-page__content a:hover { color: var(--or); }