/* ═══════════════════════════════════════════════════════════════
   THÈME « COZY » — couche de surcharge
   Style : Nature Distilled (terracotta, sable, crème, argile)
   Typo  : Newsreader (titres) · Nunito Sans (texte)

   POURQUOI UNE SURCHARGE PLUTÔT QU'UNE RÉÉCRITURE
   Les pages portent 233 attributs data-i18n traduits en 8 langues.
   Réécrire le balisage aurait détruit ces traductions. Ce fichier ne
   touche donc aucun HTML : il redéfinit les jetons de design, que le
   CSS existant consomme déjà via var() à 167 endroits, puis corrige
   à la main les composants qui codaient leurs couleurs en dur.

   À CHARGER EN DERNIER dans le <head>, après le <style> inline des
   pages : à spécificité égale, c'est la dernière règle qui gagne.

   Contrastes vérifiés par calcul, par usage et par taille de police.
═══════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────
   1. JETONS — thème CLAIR (valeur par défaut)

   Accents repris de « Landing | Designer portfolio » (Purrweb,
   Dribbble) : ambre #FFAB00 et cyan #00FFE0, mesurés sur la maquette.
   Posés ici sur un fond clair, au service de la lisibilité.

   L'ambre et le cyan vifs sont trop lumineux pour servir de texte sur
   du blanc (1.90:1 et 1.28:1). Ils gardent donc deux rôles distincts :
   assombris quand ils écrivent, vifs quand ils servent de fond.

   Contrastes visés au-delà du minimum légal : corps ≈ 17:1,
   texte secondaire ≈ 7.5:1, accents ≈ 5:1.

   Les NOMS de jetons sont inchangés : les ~500 lignes de composants
   plus bas continuent de fonctionner sans retouche.
─────────────────────────────────────────────── */
:root {
    /* Surfaces */
    --cream:          #FAFBFC;   /* fond de page */
    --cream-deep:     #F0F2F5;   /* puces, survols, surfaces secondaires */
    --card:           #FFFFFF;   /* cartes */
    --sand:           #E2E6EC;   /* bordures décoratives */
    --line:           #89909C;   /* bordures de composants interactifs (3.10:1) */

    /* Accents */
    --terracotta:     #C28200;   /* décor : bordures au survol (3.12:1) */
    --terracotta-ink: #946300;   /* accent en texte (5.01:1) */
    --terracotta-btn: #FFAB00;   /* fond de bouton : l'ambre reste vif */
    --clay:           #946300;   /* accent principal : texte ET fond de bouton */
    --clay-deep:      #7A5200;   /* survol */
    --olive:          #007A6C;   /* accent secondaire : coches (5.07:1) */

    /* Texte */
    --ink:            #12151C;   /* 17.63:1 sur le fond */
    --ink-soft:       #4C5262;   /* 7.53:1 */

    /* Texte posé sur --clay (ambre assombri) : le blanc convient, 5.19:1 */
    --on-accent:      #FFFFFF;
    /* Texte posé sur l'ambre VIF, qui reste clair quel que soit le thème :
       toujours foncé, contrairement à --on-accent qui, lui, s'inverse. */
    --on-vivid:       #12151C;

    /* Remappage des jetons historiques du site */
    --primary-color:   var(--clay);
    --secondary-color: var(--clay-deep);
    --accent-color:    var(--olive);
    --dark-bg:         var(--ink);
    --light-bg:        var(--cream);
    --text-primary:    var(--ink);
    --text-secondary:  var(--ink-soft);
    --border-color:    var(--sand);

    --shadow:    0 2px 8px rgba(18, 21, 28, 0.05), 0 8px 24px rgba(18, 21, 28, 0.06);
    --shadow-lg: 0 4px 12px rgba(18, 21, 28, 0.07), 0 16px 40px rgba(18, 21, 28, 0.11);

    --transition: all 0.28s cubic-bezier(0.22, 1, 0.36, 1);

    /* Blocs inversés (CTA, pied de page, en-tête du chat) : ils prennent
       --ink en fond, donc ils sont SOMBRES sur ce thème clair, et leur
       texte doit être clair. */
    --on-invert-soft: rgba(250, 251, 252, 0.80);
    --on-invert-film: rgba(250, 251, 252, 0.15);

    --r-sm: 12px;
    --r-md: 20px;
    --r-lg: 28px;
}

/* ───────────────────────────────────────────────
   2. JETONS — variante SOMBRE, en option explicite
   La direction sombre de la référence reste disponible en posant
   <html data-theme="dark">. Elle n'est pas branchée sur la préférence
   système : le clair est le choix assumé du site.
─────────────────────────────────────────────── */
:root[data-theme="dark"] {
    --cream:          #0C0F17;
    --cream-deep:     #1B2230;
    --card:           #141A26;
    --sand:           #262E3E;
    --line:           #636876;

    --terracotta:     #FFAB00;
    --terracotta-ink: #FFAB00;
    --terracotta-btn: #FFAB00;
    --clay:           #FFAB00;
    --clay-deep:      #FFC44D;
    --olive:          #00FFE0;

    --ink:            #F5F7FA;
    --ink-soft:       #99A2B5;

    --on-accent:      #0C0F17;   /* l'ambre est vif ici : texte foncé dessus */
    --on-vivid:       #0C0F17;

    --shadow:    0 2px 8px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.32);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.48), 0 16px 40px rgba(0, 0, 0, 0.40);

    --on-invert-soft: rgba(12, 15, 23, 0.78);
    --on-invert-film: rgba(12, 15, 23, 0.12);
}
/* ───────────────────────────────────────────────
   3. POLICES
   Les 41 déclarations existantes codaient Space Grotesk,
   Poppins, Inter, Georgia et arial en dur. On les remappe
   sélecteur par sélecteur, à spécificité identique.
─────────────────────────────────────────────── */

/* Titres → Newsreader */
.title .brand, .présentation h1,
.section-title,
.experience-card h3, .competency-card h3, .project-card h3, .menu-card h3, .price,
.restaurant-hero h2, .restaurant-tech-header h2, .tech-card h3, .tech-cta p,
.reservation-section h2, .info-item h3,
.chat-header-info h4,
.hero-title, .stat-number, .about-photo-badge, .about-text h2,
.services-section h2, .service-card h3,
.why-intro h2, .why-card h3, .why-bottom-left h3,
.cta-section h2 {
    font-family: 'Newsreader', Georgia, serif;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* Texte → Nunito Sans */
body, projet-body,
.hero-subtitle, .about-text p,
.form-group select, .form-group textarea,
.i18n-btn, .i18n-option,
.chat-bubble, .quick-btn, .chat-input, .chat-rate-warning {
    font-family: 'Nunito Sans', system-ui, -apple-system, sans-serif;
}

/* Les trois pages qui imposaient un Georgia ou un arial hérité */
.cours p, .langues p, .legal-block p { font-family: 'Nunito Sans', system-ui, sans-serif; }
body p { font-family: 'Nunito Sans', system-ui, sans-serif; }

/* QUATRE éléments du site remplissent leur texte avec un dégradé
   --primary-color → --accent-color : .title .brand, .hero-title .gradient-text,
   .stat-number et .about-text h2 span. Avec cette palette, le dégradé va de
   l'ambre au cyan et son milieu vire au VERT — le nom du site et les chiffres
   s'affichaient en vert. En prime, -webkit-text-fill-color: transparent
   neutralise toute règle `color` : il faut le rendre explicitement, sinon la
   couleur qu'on pose n'a aucun effet.

   Neutralisation commune aux quatre : */
.gradient-text,
.hero-title .gradient-text,
.about-text h2 span,
.stat-number,
.title .brand {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
}

/* Mots accentués : ambre italique, comme le « visual » de la référence. */
.gradient-text,
.hero-title .gradient-text,
.about-text h2 span {
    color: var(--terracotta-ink);
    font-style: italic;
}

/* Les chiffres prennent l'accent, mais surtout pas l'italique. */
.stat-number { color: var(--terracotta-ink); font-style: normal; }

/* Le nom du site reste sobre, comme le wordmark blanc de la référence. */
.title .brand { color: var(--ink); }

/* ───────────────────────────────────────────────
   4. FOND DE PAGE ET GRAIN
─────────────────────────────────────────────── */
body {
    background: var(--cream);
    color: var(--ink);
    line-height: 1.7;
}

/* Texture discrète : donne la « matière » du style.
   SVG en data URI — autorisé par img-src 'self' data: dans la CSP. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9990;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Le grain est discret sur le thème clair, qui est le défaut ;
   il supporte d'être plus marqué sur la variante sombre. */
:root[data-theme="dark"] body::after { opacity: 0.06; }

/* ───────────────────────────────────────────────
   5. EN-TÊTE, NAVIGATION, PIED DE PAGE
─────────────────────────────────────────────── */
header {
    background: color-mix(in srgb, var(--card) 90%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--sand);
    box-shadow: none;
}


.title .brand { color: var(--ink); }

nav a {
    color: var(--ink-soft);
    border-radius: 999px;
    transition: var(--transition);
}

nav a:hover, nav a:focus-visible { color: var(--ink); background: var(--cream-deep); }
/* Onglet de la page courante : style.css lui met un fond --primary-color
   avec du texte blanc, ce qui tombait à 1.90:1 sur l'ambre — et mon thème
   avait aggravé le cas en passant ce texte en ambre, donc invisible.
   Texte foncé sur l'accent : 10.10:1. */
nav a.logo,
nav a.logo:hover {
    background-color: var(--clay);
    color: var(--on-accent);
}

nav a.logo:hover { background-color: var(--clay-deep); }

.menuBurguer span { background: var(--ink); }

footer {
    background: var(--ink);
    color: var(--cream);
    border-top: none;
}

footer p { color: var(--cream); }

/* Anneau de focus visible partout : 3.36:1 sur crème */
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2.5px solid var(--terracotta-ink);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ───────────────────────────────────────────────
   6. BOUTONS
   Le dégradé bleu d'origine devenait, transposé en
   terracotta, insuffisant en contraste avec du texte
   blanc (3.4:1). On passe donc en aplat d'argile.
─────────────────────────────────────────────── */
.btn-primary, .submit-btn, .why-cta-btn {
    background: var(--clay);
    background-image: none;
    color: var(--on-accent);
    border-radius: 999px;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.btn-primary:hover, .submit-btn:hover, .why-cta-btn:hover {
    background: var(--ink);
    color: var(--on-accent);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.btn-outline {
    border: 1.5px solid var(--line);
    color: var(--ink);
    border-radius: 999px;
}

.btn-outline:hover {
    background: var(--card);
    border-color: var(--terracotta);
    color: var(--ink);
}


/* ───────────────────────────────────────────────
   7. CARTES ET BLOCS
─────────────────────────────────────────────── */
/* Toutes les surfaces qui codaient « background: white » en dur.
   Liste établie par relevé exhaustif des feuilles et des <style> inline,
   pas au jugé : c'est ce qui manquait qui rendait la section « À propos »
   blanche avec du texte clair dessus. */
.service-card, .why-card, .experience-card, .competency-card,
.project-card, .menu-card, .tech-card, .info-item, .stat-item,
.contact-container, .about-photo, .legal-toc,
.about-section, .présentation, .restaurant-hero,
.reservation-section, .contact-section, .site-card, .country-item {
    background: var(--card);
    border: 1px solid var(--sand);
    border-radius: var(--r-md);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.service-card:hover, .why-card:hover, .experience-card:hover,
.competency-card:hover, .project-card:hover, .menu-card:hover,
.tech-card:hover {
    border-color: var(--terracotta);
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

.stat-number { color: var(--terracotta-ink); }
.stat-label  { color: var(--ink-soft); }

.service-icon, .why-icon, .competency-icon {
    background: var(--cream-deep);
    color: var(--clay);
    border-radius: var(--r-sm);
}

/* Les trois variantes colorées des icônes « pourquoi » reviennent
   dans la gamme chaude, en gardant trois teintes distinctes. */
.why-icon--blue   { background: rgba(154, 79, 22, 0.12);  color: var(--clay); }
.why-icon--purple { background: rgba(198, 123, 92, 0.16); color: #8C4A2F; }
.why-icon--teal   { background: rgba(92, 107, 52, 0.14);  color: var(--olive); }

.service-arrow, .why-hook strong { color: var(--clay); }
.about-tag, .skill-tag, .chip {
    background: var(--cream-deep);
    border: 1px solid var(--sand);
    color: var(--ink);
    border-radius: 999px;
}

.why-badge {
    background: var(--cream-deep);
    color: var(--clay);
    border: 1px solid var(--sand);
}

.why-list i, .fa-check-circle { color: var(--olive); }

.cta-section, .why-bottom {
    background: var(--ink);
    color: var(--cream);
    border-radius: var(--r-lg);
}

.cta-section h2, .why-bottom-left h3 { color: var(--cream); }
.cta-section p, .why-bottom-left p   { color: var(--on-invert-soft); }

/* Ce bouton repose sur l'ambre VIF, qui ne s'assombrit dans aucun des deux
   thèmes : son texte doit donc rester foncé dans les deux, d'où --on-vivid
   et non --on-accent. Au survol, fond blanc fixe pour la même raison. */
.cta-section .btn-primary, .why-bottom .why-cta-btn {
    background: var(--terracotta-btn);
    color: var(--on-vivid);
}

.cta-section .btn-primary:hover, .why-bottom .why-cta-btn:hover {
    background: #FFFFFF;
    color: var(--on-vivid);
}

/* ───────────────────────────────────────────────
   8. FORMULAIRES
─────────────────────────────────────────────── */
.form-group input, .form-group textarea, .form-group select {
    background: var(--card);
    border: 1.5px solid var(--line);
    color: var(--ink);
    border-radius: var(--r-sm);
}

.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    border-color: var(--clay);
    background: var(--card);
}

.form-group label { color: var(--ink); }
.field-error { color: #B3261E; }

:root[data-theme="dark"] .field-error { color: #F2B8B5; }

/* ───────────────────────────────────────────────
   9. SÉLECTEUR DE LANGUE
   i18n.css codait ses couleurs en dur : on les reprend.
─────────────────────────────────────────────── */
.i18n-btn {
    background: var(--card);
    border: 1.5px solid var(--line);
    color: var(--ink);
    box-shadow: var(--shadow);
}

.i18n-btn:hover { border-color: var(--clay); box-shadow: var(--shadow-lg); }
.i18n-btn .fa-globe { color: var(--clay); }
.i18n-chevron { color: var(--ink-soft); }

.i18n-dropdown {
    background: var(--card);
    border: 1px solid var(--sand);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
}

/* Le menu passe de 8 à 10 langues, soit ~420px, et il s'ouvre vers le
   haut : sur un écran peu haut il sortirait de la fenêtre. On le borne. */
.i18n-dropdown {
    max-height: min(60vh, 420px);
    overflow-y: auto;
}

.i18n-option { color: var(--ink); border-radius: var(--r-sm); }
.i18n-option:hover { background: var(--cream-deep); color: var(--clay); }
.i18n-option.i18n-active { background: var(--cream-deep); color: var(--clay); font-weight: 700; }

/* ───────────────────────────────────────────────
   10. CHATBOT
   27 couleurs en dur dans chatbox.css : toutes reprises.
─────────────────────────────────────────────── */
.chatbox-btn {
    background: var(--clay);
    background-image: none;
    box-shadow: 0 6px 24px rgba(154, 79, 22, 0.35);
}

.chatbox-btn:hover { box-shadow: 0 10px 32px rgba(154, 79, 22, 0.45); }
.chatbox-notif { background: #B3261E; }

.chatbox-panel {
    background: var(--card);
    border: 1px solid var(--sand);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
}

.chat-header {
    background: var(--ink);
    background-image: none;
}

.chat-header h4, .chat-header span { color: var(--cream); }
.chat-avatar { background: var(--on-invert-film); color: var(--cream); }
.chat-close { color: var(--cream); }
.online-dot { background: #7BAE5A; }

.bot .chat-bubble  { background: var(--cream-deep); color: var(--ink); }
.user .chat-bubble { background: var(--clay); background-image: none; color: var(--on-accent); }
.chat-bubble a     { color: var(--clay); }
.user .chat-bubble a { color: var(--on-accent); text-decoration: underline; }
.typing-dots span  { background: var(--ink-soft); }

.chat-messages::-webkit-scrollbar-thumb { background: var(--sand); }

.quick-btn {
    background: var(--cream-deep);
    color: var(--clay);
    border: 1px solid var(--sand);
    border-radius: 999px;
}

.quick-btn:hover { background: var(--clay); border-color: var(--clay); color: var(--on-accent); }

.chat-input-row { border-top: 1px solid var(--sand); background: var(--card); }

.chat-input {
    background: var(--cream);
    border: 1.5px solid var(--line);
    color: var(--ink);
    border-radius: 999px;
}

.chat-input:focus { border-color: var(--clay); background: var(--card); }
.chat-input::placeholder { color: var(--ink-soft); }

.chat-send { background: var(--clay); background-image: none; color: var(--on-accent); }
.chat-send:hover { box-shadow: 0 4px 14px rgba(154, 79, 22, 0.35); }

.chat-rate-warning {
    background: var(--cream-deep);
    border: 1px solid var(--sand);
    color: var(--clay);
}


/* ───────────────────────────────────────────────
   11. PAGES LÉGALES
─────────────────────────────────────────────── */
.legal-header h1 { color: var(--clay); font-family: 'Newsreader', Georgia, serif; }
.legal-block h3  { font-family: 'Newsreader', Georgia, serif; border-bottom-color: var(--sand); }
.legal-block h4  { font-family: 'Newsreader', Georgia, serif; }
.legal-table th  { background: var(--cream-deep); font-family: 'Newsreader', Georgia, serif; }
.legal-table th, .legal-table td { border-color: var(--sand); }
.legal-callout   { background: var(--cream-deep); border-left-color: var(--clay); }
.footer-legal a  { color: var(--cream); }
/* ───────────────────────────────────────────────
   12. PAS D'ACCENT MANUSCRIT ICI
   Caveat a été retiré de la requête de polices : il pesait 70 Ko
   pour zéro usage. Deux raisons de ne pas le réintroduire ici —
   data-i18n-text écrase le contenu de l'élément, donc un <span>
   imbriqué disparaîtrait au changement de langue ; et la page
   preview-cozy.html, qui l'utilise, charge sa propre feuille.
─────────────────────────────────────────────── */

/* ───────────────────────────────────────────────
   13. MOUVEMENT
─────────────────────────────────────────────── */
@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;
    }
    .btn-primary:hover, .submit-btn:hover, .service-card:hover,
    .why-card:hover, .project-card:hover { transform: none; }
}

/* ───────────────────────────────────────────────
   14. SECTION « À PROPOS » — photo
   Trois corrections :
   · sous 900px la grille passe en une colonne, et la photo prenait
     alors toute la largeur : à 800px cela donnait un portrait de
     750x937px. On la borne et on la centre.
   · le recadrage 4/5 était centré ; le visage est légèrement au-dessus
     du milieu, donc on remonte le point d'ancrage.
   · le badge héritait d'un dégradé argile→olive devenu boueux : aplat,
     comme les boutons.
─────────────────────────────────────────────── */
.about-photo-wrap img {
    object-position: 50% 38%;
    border-radius: var(--r-md);
}

.about-photo-badge {
    background: var(--clay);
    background-image: none;
    color: var(--on-accent);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-lg);
}


/* La photo ne doit pas s'étirer quand la grille retombe sur une colonne */
@media (max-width: 900px) {
    .about-photo-wrap {
        max-width: 340px;
        margin-inline: auto;
        width: 100%;
    }
    /* sur petit écran le badge doit rester DANS la photo, sinon il est
       rogné par le bord du viewport */
    .about-photo-badge { right: 8px; bottom: 8px; }
}

/* ───────────────────────────────────────────────
   15. HAUTEUR DES IMAGES — correctif indispensable
   Les attributs width/height ajoutés sur les <img> (contre le
   décalage de mise en page) créent un « indice de présentation »
   height: 2560px. Or, dès que largeur ET hauteur sont définies,
   le navigateur ignore aspect-ratio : la photo de la section
   « À propos » s'étirait en bande verticale et chassait le texte.

   Un indice de présentation a une priorité inférieure à n'importe
   quelle règle d'auteur : cette ligne le neutralise partout, sans
   toucher aux images dont la CSS fixe explicitement une hauteur
   (le carrousel à 420px, par exemple), qui restent prioritaires.
─────────────────────────────────────────────── */
img { height: auto; }

.about-section { align-items: center; }
.about-photo-wrap { min-width: 0; }

/* ───────────────────────────────────────────────
   CÉSURE CORÉENNE

   Par défaut le navigateur traite le coréen comme le chinois
   ou le japonais et coupe entre deux syllabes, au milieu d'un
   mot. Or le coréen sépare ses mots par des espaces : keep-all
   lui rend une césure correcte.

   Réservé à :lang(ko) — appliqué au chinois ou au japonais,
   qui n'ont pas d'espaces, il rendrait les lignes insécables
   et ferait déborder les colonnes étroites.

   i18n.js pose document.documentElement.lang à chaque bascule.
─────────────────────────────────────────────── */
:root:lang(ko) body {
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* ───────────────────────────────────────────────
   LIEN LOCAL DANS « À PROPOS »

   Renvoie vers la page de destination guyanaise. Discret dans la
   colonne de texte, mais visible : c'est un lien contextuel, donc
   le signal interne le plus fort vers cette page.
─────────────────────────────────────────────── */
.about-local-link {
    margin: 4px 0 18px;
    font-weight: 600;
}
.about-local-link a {
    color: var(--clay);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.about-local-link a:hover,
.about-local-link a:focus-visible {
    color: var(--clay-deep);
}