/*
 * Polices auto-hébergées (aucun appel à fonts.googleapis.com au runtime :
 * exigence RGPD, cf. bannière cookies MG-090).
 *
 * Les deux familles sont distribuées par Google Fonts en police VARIABLE :
 * un seul fichier couvre toute la plage de graisses, d'où le `font-weight`
 * exprimé en intervalle plutôt qu'en valeur unique.
 *
 * Les .woff2 sont copiés vers public/build/fonts/ par Webpack Encore
 * (bloc copyFiles de webpack.config.js), d'où le chemin relatif ./fonts/.
 */

/* ── Cormorant Garamond (titres) ───────────────────────────────────── */

@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url(/build/fonts/cormorant-garamond-latin.ed9f3c30.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url(/build/fonts/cormorant-garamond-latin-ext.bbc9c24c.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url(/build/fonts/cormorant-garamond-italic-latin.f56542fd.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url(/build/fonts/cormorant-garamond-italic-latin-ext.6d127227.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

/* ── DM Sans (corps de texte et interface) ─────────────────────────── */

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    src: url(/build/fonts/dm-sans-latin.09cead27.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    src: url(/build/fonts/dm-sans-latin-ext.ac0988d8.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

/*
 * Feuille de style du site public.
 *
 * Reprise à l'identique du bloc \3c style> des maquettes Claude Design
 * (design-reference/front/*.dc.html). Ne rien ajouter ici qui ne figure pas
 * dans les maquettes.
 *
 * Deux écarts assumés, et deux seulement :
 *
 * 1. Les maquettes expriment les survols via un attribut propriétaire
 *    `style-hover="…"` interprété par l'outil de design. Les navigateurs ne le
 *    connaissent pas : ces règles sont retranscrites plus bas en :hover CSS,
 *    valeur pour valeur.
 *
 * 2. Accessibilité (MG-111). Partout où du texte BLANC repose sur une de ces
 *    deux couleurs, la teinte des maquettes est assombrie pour atteindre le
 *    minimum WCAG AA de 4,5:1 :
 *
 *      terracotta  #C88772 (2,93:1) → #A85E44 (4,83:1)
 *      survol      #bd7761 (3,81:1) → #96523B (5,89:1)
 *      bleu        #7895A5 (3,16:1) → #5C7A8B (4,55:1)
 *      survol      #688798 (3,81:1) → #4B6675 (6,08:1)
 *
 *    Ratios calculés par tools/contraste.php, dont le calibrage est vérifié
 *    sur #767676 (valeur WCAG de référence : 4,54:1).
 *
 *    Les teintes d'origine restent inchangées partout ailleurs : filets,
 *    pictogrammes, glyphes Ψ, les deux moitiés du rideau du menu, et tous les
 *    textes terracotta ou bleus posés sur fond clair.
 */

/* ══ Bloc \3c style> des maquettes ══════════════════════════════════════ */

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: #F7F4EF;
    color: #283331;
    font-family: "DM Sans", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

a { color: #7895A5; text-decoration: none; }
a:hover { color: #C88772; }

input, select, textarea { font-family: "DM Sans", system-ui, sans-serif; }

@keyframes riseIn {
    from { opacity: 0; transform: translateY(26px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes riseInSoft {
    from { opacity: 0; transform: translateY(34px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes floatA {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50% { transform: translate3d(14px, -26px, 0) rotate(7deg); }
}

@keyframes floatB {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50% { transform: translate3d(-18px, -20px, 0) rotate(-6deg); }
}

[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 1s cubic-bezier(0.22, 1, 0.28, 1), transform 1s cubic-bezier(0.22, 1, 0.28, 1);
}

[data-reveal="in"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; }
    * { animation: none !important; }
}

#mobile-cta { display: none; }

@media (max-width: 760px) {
    #mobile-cta { display: flex; }
    body { padding-bottom: 76px; }
}

.nav-desktop { display: flex; }
.nav-burger { display: none; }

@media (max-width: 1040px) {
    .nav-desktop { display: none; }
    .nav-burger { display: flex; }
}

.has-sub .submenu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
}

.has-sub:hover .submenu,
.has-sub:focus-within .submenu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

[data-mg-menu] { position: fixed; inset: 0; z-index: 90; visibility: hidden; }
[data-mg-menu][data-open="1"] { visibility: visible; }

.mg-half {
    position: absolute;
    left: 0;
    right: 0;
    height: 50.5%;
    transition: transform .6s cubic-bezier(.76, 0, .24, 1);
}

.mg-top { top: 0; background: #C88772; transform: translateY(-101%); }
.mg-bot { bottom: 0; background: #7895A5; transform: translateY(101%); }

[data-mg-menu][data-open="1"] .mg-half { transform: translateY(0); }
[data-mg-menu][data-part="1"] .mg-top { transform: translateY(-86%); }
[data-mg-menu][data-part="1"] .mg-bot { transform: translateY(86%); }

.mg-panel {
    position: absolute;
    inset: 0;
    background: #283331;
    opacity: 0;
    transition: opacity .3s ease .2s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: clamp(80px, 17vh, 140px) 34px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

[data-mg-menu][data-part="1"] .mg-panel { opacity: 1; }

.mg-item {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s cubic-bezier(.22, 1, .28, 1), transform .5s cubic-bezier(.22, 1, .28, 1);
}

[data-mg-menu][data-part="1"] .mg-item { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .mg-half, .mg-panel, .mg-item { transition-duration: .01ms !important; }
}

/* ══ Survols (transcription des attributs style-hover) ═══════════════ */

/* Liens de la navigation principale et du sous-menu déroulant. */
.mgh-nav:hover { color: #7895A5; }

.mgh-sub:hover { color: #7895A5; background: #F7F4EF; }

/* Bouton « Prendre rendez-vous » terracotta. */
.mgh-cta-terra:hover {
    background: #96523B;
    color: #FFFFFF;
    transform: translateY(-2px);
}

/* Bouton « Prendre rendez-vous » bleu (hero, section contact). */
.mgh-cta-blue:hover {
    background: #4B6675;
    color: #FFFFFF;
    transform: translateY(-2px);
}

/* Lien souligné « En savoir plus » du hero. */
.mgh-underline:hover {
    color: #7895A5;
    border-bottom: 1px solid #7895A5;
}

/* Lien fléché d'une carte (« Prendre rendez-vous → »). */
.mgh-arrow:hover { color: #C88772; }

/* Cartes « Mon accompagnement » de l'accueil. */
.mgh-card:hover {
    transform: translateY(-4px);
    border-color: #7895A5;
    box-shadow: 0 22px 44px -30px rgba(40, 51, 49, 0.3);
}

/* Cartes « Mes valeurs ». */
.mgh-card-soft:hover {
    transform: translateY(-3px);
    border-color: #7895A5;
}

/* Vignettes « Motifs fréquents de consultation ». */
.mgh-figure:hover { transform: translateY(-6px); }

/* Liens du pied de page. */
.mgh-footer:hover { color: #FFFFFF; }

/* Ligne de question d'un accordéon. */
.mgh-accordion:hover { color: #7895A5; }

/* Boutons « Demander des informations » des blocs ateliers : le fond se
   remplit de la couleur de la bordure, le texte passe en blanc. */
/* Le fond prend la teinte accessible ; la bordure suit, sans quoi un liseré
   de terracotta claire subsisterait autour du fond assombri. */
.mgh-atelier-terra:hover { background: #A85E44; border-color: #A85E44; color: #FFFFFF; }
.mgh-atelier-blue:hover { background: #5C7A8B; border-color: #5C7A8B; color: #FFFFFF; }
.mgh-atelier-sage:hover { background: #8FA99A; color: #FFFFFF; }

/* Bouton d'envoi du formulaire de contact. */
.mgh-submit:hover { background: #96523B; transform: translateY(-2px); }

/* ── Texte riche des blocs éditables (bloc_html) ───────────────────────
   Le conteneur porte la typographie de la maquette (style en ligne) ; ses
   paragraphes et listes, saisis au back-office, n'ajoutent que l'espacement.
   L'écart entre paragraphes se règle par --mg-riche-ecart. */
.mg-riche p,
.mg-riche ul,
.mg-riche ol { margin: 0 0 var(--mg-riche-ecart, 0.9em); }
.mg-riche > :last-child { margin-bottom: 0; }
.mg-riche ul,
.mg-riche ol { padding-left: 1.3em; }
.mg-riche li + li { margin-top: 0.3em; }
.mg-riche strong { font-weight: 500; }
.mg-riche a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/*
 * Messages flash (MG-062).
 *
 * Absents des maquettes : elles ne montrent aucun état de confirmation ni
 * d'erreur de formulaire. Le style reprend donc strictement les couleurs et
 * les rayons déjà utilisés par les maquettes, sans introduire de nouvelle
 * couleur (#F7F4EF, #7895A5, #8FA99A, #C88772, #283331, #EEF3F7).
 */

.flash-zone {
    position: relative;
    z-index: 55;
    max-width: 1180px;
    margin: 0 auto;
    padding: 16px 24px 0;
}

.flash {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 14px;
    border-left: 3px solid transparent;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.6;
}

.flash + .flash {
    margin-top: 10px;
}

.flash__icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

.flash__body {
    flex: 1 1 auto;
}

.flash__close {
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 4px;
    cursor: pointer;
    color: inherit;
    opacity: 0.55;
    line-height: 0;
}

.flash__close:hover {
    opacity: 1;
}

.flash--success {
    background: #EEF3F7;
    border-left-color: #8FA99A;
    color: #283331;
}

.flash--error {
    background: #F7F4EF;
    border-left-color: #C88772;
    color: #283331;
}

.flash--warning,
.flash--info {
    background: #EEF3F7;
    border-left-color: #7895A5;
    color: #283331;
}

/*
 * Bannière de consentement cookies (MG-090).
 *
 * Absente des maquettes. Le style reprend les codes du CTA collant mobile
 * qu'elles définissent (fond ivoire translucide, flou, filet bleuté, bouton
 * terracotta arrondi à 999px) pour rester cohérent avec le reste du site.
 */

.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    display: none;
    background: rgba(247, 244, 239, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(120, 149, 165, 0.22);
    padding: 20px 24px calc(20px + env(safe-area-inset-bottom));
}

.cookie-banner.is-visible {
    display: block;
}

.cookie-banner__inner {
    display: flex;
    align-items: center;
    gap: 28px;
    max-width: 1180px;
    margin: 0 auto;
}

.cookie-banner__text {
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.65;
    color: rgba(40, 51, 49, 0.78);
    margin: 0;
}

.cookie-banner__text strong {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 21px;
    font-weight: 400;
    color: #283331;
    margin-bottom: 4px;
}

.cookie-banner__actions {
    flex: 0 0 auto;
    display: flex;
    gap: 12px;
}

.cookie-btn {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 14px;
    padding: 11px 24px;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.cookie-btn--accept {
    background: #A85E44;
    color: #FFFFFF;
    border: 1px solid #A85E44;
}

.cookie-btn--accept:hover {
    background: #96523B;
    border-color: #96523B;
    transform: translateY(-2px);
}

.cookie-btn--refuse {
    background: transparent;
    color: #283331;
    border: 1px solid rgba(120, 149, 165, 0.4);
}

.cookie-btn--refuse:hover {
    color: #7895A5;
    border-color: #7895A5;
}

/* Laisse la place au CTA collant mobile des pages intérieures. */
@media (max-width: 760px) {
    .cookie-banner {
        bottom: 76px;
    }

    .cookie-banner__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .cookie-banner__actions .cookie-btn {
        flex: 1 1 0;
    }
}