/* ==========================================================================
   theme.css - Canoune, direction « Varangue de nuit »
   Tokens des deux themes. Sortis de index.html le 2026-07-20 pour rendre
   de la marge sur le budget de 120 Ko du HTML.
   Les deux themes declarent STRICTEMENT le meme jeu de tokens.
   ========================================================================== */

    :root[data-theme='nuit'] {
      color-scheme: dark;
      --encre:    #F2E7D5;   /* l'encre devient claire la nuit — texte courant */
      --accent:   #A85A45;   /* brique de tôle, terreuse et calme — titres et
                               graphismes (3,8:1). Volontairement désaturé :
                               le #C4472E d'origine était jugé trop vif. */
      --accent-bouton: #8F4433; /* FOND des boutons : texte clair dessus = 5,6:1 */
      --accent-hover:  #75362A; /* survol d'un aplat d'accent */
      --accent-texte:  #D2A897; /* argile claire, 8,8:1 : SEUL accent
                                   autorisé en texte courant la nuit, car
                                   --accent plafonne à 3,8:1. */
      --ivoire:   #1A0F0A;   /* fond principal, cacao profond */
      --plaque-voile: rgb(26 15 10 / .84); /* plaque hero en verre depoli.
                               Pire cas mesure (photo blanche derriere) :
                               9,7:1 pour le texte courant. */
      --bandeau:  #241609;   /* bandeau de section */
      --coquille: #1F1308;   /* coquille des sections carte / infos */
      --blanc:    #241609;   /* cartes, surfaces remontées */
      --texte2:   #B9A48C;   /* texte secondaire (7,8:1 sur le fond) */
      --creme-fonce: #B9A48C; /* malgré son nom : jamais une bordure, seulement
                                 du texte secondaire sur fond sombre (lexique,
                                 footer, widget). Le passer à #3A2416 rendrait
                                 ces textes illisibles. */
      --sur-accent: #F2E7D5; /* texte posé SUR un aplat d'accent */
      --contre-accent: #DFBCB0; /* teinte claire de l'accent, sections inversées */
      --accent-doux: #F6DCD5; /* survol du bouton clair sur bandeau accent (4,8:1) */
      --inverse-fond: #120A06; /* fond des sections en contraste de rythme */
      --inverse-texte: #F2E7D5;
      --filet-inverse: rgba(242,231,213,.14);
      --filet-inverse-fort: rgba(242,231,213,.42);
      --accent-rvb: 168 90 69; /* composantes de --accent, pour les filets */
      /* Filets et bordures : clairs sur fond sombre, sombres sur fond clair */
      --filet-fort:  rgba(242,231,213,.28);
      --filet:       rgba(242,231,213,.13);
      --filet-doux:  rgba(242,231,213,.08);
      /* Ombres portées : franchement noires la nuit, sinon invisibles */
      --ombre-douce:   0 6px 20px rgba(0,0,0,.45);
      --ombre-moyenne: 0 14px 34px rgba(0,0,0,.55);
      --ombre-forte:   0 20px 60px rgba(0,0,0,.65);
      --voile-lightbox: rgba(10,6,3,.94);
      --voile-creux: rgba(242,231,213,.04);
      /* Alias attendus par le kit de mouvement — ne pas renommer */
      --fond: var(--ivoire);
      --texte: var(--encre);
      --bordure: var(--filet);
      --voile: rgb(26 15 10 / 0.78);
      /* La frise lambrequin : gouttes pointues percées d'un œil (evenodd) */
      --lambrequin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='20' viewBox='0 0 36 20'%3E%3Cpath fill='%23A85A45' fill-rule='evenodd' d='M0 0H36V5C30 7 24 10 18 20C12 10 6 7 0 5ZM20.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z'/%3E%3C/svg%3E");
    }

    /* JOUR par defaut : le selecteur nu sert de repli quand le script
       inline n'a pas pu poser data-theme (JS desactive). Le site s'ouvre
       alors dans la palette VARANGUE d'origine, pas en nuit. */
    :root,
    :root[data-theme='jour'] {
      color-scheme: light;
      --encre:    #26150C;
      --accent:   #A8321E;
      --accent-bouton: #A8321E;
      --accent-hover:  #8C2716;
      --accent-texte:  #A8321E; /* 6,1:1 sur l'ivoire : pas de dérogation utile */
      --ivoire:   #FAF4E8;
      --plaque-voile: rgb(250 244 232 / .84); /* pire cas : 11,1:1 */
      --bandeau:  #F0E5D2;
      --coquille: #FFFBF2;
      --blanc:    #FFFFFF;
      --texte2:   #6B5646;
      --creme-fonce: #CBBBA8;
      --sur-accent: #FFFFFF;
      --contre-accent: #E8B7AB;
      --accent-doux: #F6DCD5;
      --inverse-fond: #26150C;
      --inverse-texte: #FAF4E8;
      --filet-inverse: rgba(250,244,232,.14);
      --filet-inverse-fort: rgba(250,244,232,.40);
      --accent-rvb: 168 50 30;
      --filet-fort:  rgba(38,21,12,.25);
      --filet:       rgba(38,21,12,.12);
      --filet-doux:  rgba(38,21,12,.08);
      --ombre-douce:   0 6px 20px rgba(38,21,12,.09);
      --ombre-moyenne: 0 14px 34px rgba(38,21,12,.15);
      --ombre-forte:   0 20px 55px rgba(38,21,12,.20);
      --voile-lightbox: rgba(38,21,12,.92);
      --voile-creux: rgba(38,21,12,.03);
      --fond: var(--ivoire);
      --texte: var(--encre);
      --bordure: rgba(38,21,12,.10);
      --voile: rgb(250 244 232 / 0.82);
      --lambrequin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='20' viewBox='0 0 36 20'%3E%3Cpath fill='%23A8321E' fill-rule='evenodd' d='M0 0H36V5C30 7 24 10 18 20C12 10 6 7 0 5ZM20.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z'/%3E%3C/svg%3E");
    }

    :root {
      --ff-display: 'Lora', Georgia, serif;
      --ff-body:    'Mulish', system-ui, sans-serif;
      --ease: cubic-bezier(.25,.46,.45,.94);
    }