/* Feuille de style du site cursita.com : GÉNÉRÉE par frontend/site/synchroniser-design.mjs depuis design/ (tokens.css, base.css,

   composants.css sections 1, 2, 3, 19, 32 et le nom « Cursita »). Ne pas la modifier à la main : changer design/, puis relancer le script. */

/* ============================================================
   Cursita, tokens de design
   Seule source des valeurs : couleurs, polices, tailles, graisses,
   espacements, rayons, ombres, durées. Les noms suivent le rôle.
   Changer une valeur ici la change partout (feuilles, maquettes, SVG).
   Ces valeurs deviendront le thème Tailwind du front.
   ============================================================ */

:root {
  /* ---------- Papier et encre ---------- */
  --color-papier: #F4F2F0;            /* fond de page, chaud et neutre */
  --color-papier-business: #F7F5F3;   /* fond de page de l'espace Business */
  --color-feuille: #FDFDFB;           /* surfaces : bandeau, panneaux, feuilles */
  --color-scene: #ECEAE6;             /* fond des illustrations « à la une » et des états vides */
  --color-scene-plan: var(--color-papier); /* second plan dans une illustration */
  --color-encre: #373B41;             /* texte, journal, navigation */
  --color-encre-douce: #60656C;       /* texte secondaire */
  --color-encre-profonde: #25282D;    /* toast, survol de l'encre */
  --color-sur-encre: #FDFDFB;         /* texte posé sur l'encre */
  --color-sur-surlignage: #25282D;    /* texte posé sur un surligneur */
  --color-filet: #DCDAD7;             /* filets des panneaux et des champs */
  --color-filet-doux: #E9E7E5;        /* séparateurs de lignes */
  --color-filet-fort: #C0BDB9;        /* contours des boutons secondaires */
  --color-survol: #F2F0EC;            /* survol d'une ligne ou d'un bouton discret */
  --color-onglet: #E8E6E2;            /* intercalaires au repos, fonds neutres */
  --color-selection: #E8E9EB;         /* ligne sélectionnée (Business) : un voile d'encre, pas de crème */
  --color-neutre: #DEDAD4;            /* pastille sans couleur (journal, synthèse) */
  /* Boutons des fournisseurs de connexion : blanc franc et filet d'au moins 3:1 sur le fond, comme le demandent leurs chartes (celle de Google :
     #747775 sur blanc) ; en sombre, le fond sombre de Google et son G posé sur un carré blanc. */
  --color-fournisseur-fond: #FFFFFF;
  --color-fournisseur-filet: #747775;
  --color-fournisseur-texte: #1F1F1F;
  --color-fournisseur-logo-fond: #FFFFFF;   /* carré derrière le logo : blanc dans les deux thèmes (le G de Google n'a pas de version pour fond sombre) */
  --color-cadre-appareil: #2A2D33;    /* contour du téléphone dans les aperçus, identique dans les deux thèmes */
  /* Page imprimée (aperçu et export d'un CV) : identique dans les deux thèmes, comme le papier réel */
  --color-impression-papier: #FDFDFB;
  --color-impression-encre: #25282D;
  --color-impression-douce: #585D64;
  --color-impression-filet: #D6D3CF;
  --color-impression-fond: #F0EEEA;   /* colonne latérale d'un gabarit, survol d'un bloc de l'aperçu */
  --color-impression-trait: #FFBD47;  /* repère, dans l'aperçu, de l'élément affiché dans la feuille */
  /* Couleur d'accent du CV exporté, au choix du candidat : le nom, les filets sous les titres de section,
     le fond de la colonne latérale (Moderne). Sur le papier : 6,2:1 au moins, donc valable pour du texte.
     Pas de valeur sombre : l'aperçu reste une feuille claire, comme les autres --color-impression-*. */
  --color-impression-graphite: #373B41;   /* 11,1:1 */
  --color-impression-nuit: #1F3A5F;       /* bleu nuit, 11,3:1 */
  --color-impression-sapin: #1F5C45;      /* vert sapin, 7,7:1 */
  --color-impression-bordeaux: #7B2335;   /* 9,7:1 */
  --color-impression-ambre: #8A5300;      /* ambre foncé, 6,2:1 */
  --impression-teinte-cote: 10%;          /* part de l'accent dans le fond de la colonne latérale */

  /* ---------- Les trois surligneurs ----------
     Trait : surlignage, barres de frise, jauges, illustrations.
     Fond : étiquettes, sélection du sommaire, pastilles d'état.
     Texte : libellés et icônes de la couleur, 5,5:1 au moins sur le papier. */
  --color-accent: #FFBD47;            /* ambre : ce qui compte, action principale, élément actif, expériences */
  --color-accent-fond: #FEECD0;
  --color-accent-texte: #8D5406;
  --color-parcours: #A0E1A1;          /* vert : missions, formations, certifications, preuves */
  --color-parcours-fond: #E2F4E2;
  --color-parcours-texte: #2E663C;
  --color-competences: #82CBD8;       /* bleu-pétrole : compétences et langues */
  --color-competences-fond: #DFF3F6;
  --color-competences-texte: #1A5F6D;

  /* ---------- États : toujours avec une icône et un mot ---------- */
  --color-succes: #2E663C;
  --color-alerte: #8A4B00;
  --color-erreur: #B3261E;

  /* ---------- Outils des maquettes (hors produit) ---------- */
  --outils-h: 40px;           /* hauteur de la barre commune des maquettes */
  --color-outil-fond: #1E201F;
  --color-outil-texte: #EDEDEB;
  --color-outil-discret: #B8BBB8;
  --color-outil-filet: #4A4D4B;

  /* ---------- Icône de l'application ----------
     Identique dans les deux thèmes (l'écran d'accueil du téléphone ne suit pas le thème de l'application) :
     le graphite, le papier et l'ambre du thème clair. Les PNG de design/icone/ sont tirés de ces trois valeurs. */
  --color-icone-fond: #373B41;
  --color-icone-lettre: #FDFDFB;
  --color-icone-surlignage: #FFBD47;

  /* ---------- Typographie ---------- */
  --font-interface: "Schibsted Grotesk", system-ui, sans-serif;   /* interface et titres */
  --font-document: "Source Serif 4", Georgia, serif;              /* contenu des CV et des notes */
  --font-code: ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-2xs: 12px;
  --text-xs: 13px;
  --text-sm: 14px;
  --text-base: 15px;
  --text-md: 16px;
  --text-lg: 17px;
  --text-xl: 18px;
  --text-2xl: 20px;
  --text-3xl: 24px;
  --text-4xl: 26px;
  --text-5xl: 30px;
  --text-6xl: 36px;
  --text-7xl: 44px;

  --weight-regular: 400;
  --weight-book: 450;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-strong: 650;
  --weight-bold: 700;
  --weight-heavy: 750;
  --weight-black: 800;

  --text-marque: 23px;
  --text-titre-business: 28px;

  --leading-titre: 1.04;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-base: 1.45;
  --leading-document: 1.5;
  --tracking-titre: -.025em;
  --tracking-titre-fort: -.035em;
  --tracking-capitales: .06em;

  /* ---------- Espacements (100 = 8 px) ---------- */
  --space-025: 2px;
  --space-050: 4px;
  --space-075: 6px;
  --space-100: 8px;
  --space-125: 10px;
  --space-150: 12px;
  --space-175: 14px;
  --space-200: 16px;
  --space-225: 18px;
  --space-250: 20px;
  --space-275: 22px;
  --space-300: 24px;
  --space-350: 28px;
  --space-400: 32px;
  --space-500: 40px;

  /* ---------- Tailles fixes ---------- */
  --size-cible: 44px;          /* zone tactile minimale */
  --size-cible-fine: 36px;     /* à la souris (pointeur fin), listes denses du profil et du back-office (D107) */
  --size-bouton: 48px;
  --size-icone: 20px;
  --size-icone-sm: 16px;
  --size-avatar: 38px;
  --size-pastille: 10px;
  --size-trait: 1px;           /* épaisseur des filets */

  /* ---------- Rayons ---------- */
  --radius-etiquette: 4px;
  --radius-controle: 6px;
  --radius-element: 8px;
  --radius-panneau: 10px;
  --radius-bandeau: 12px;
  --radius-rond: 999px;
  --radius-trait: 1px;          /* surlignage, jauges */
  --radius-trait-fort: 3px;     /* pastilles de couleur, barres de frise */
  --radius-onglet: var(--radius-bandeau);
  --radius-noter: 14px;
  --radius-telephone: 44px;

  /* ---------- Ombres ---------- */
  --shadow-teinte: 40 42 48;
  --shadow-panneau: 0 1px 2px rgb(var(--shadow-teinte) / .05);
  --shadow-feuille: 0 1px 2px rgb(var(--shadow-teinte) / .05), 0 12px 28px -22px rgb(var(--shadow-teinte) / .30);
  --shadow-flottant: 0 12px 32px -8px rgb(var(--shadow-teinte) / .30), 0 2px 6px rgb(var(--shadow-teinte) / .10);
  --color-voile: rgb(var(--shadow-teinte) / .45);   /* fond derrière une fenêtre de dialogue */

  /* ---------- Surlignage : un rectangle net sous la ligne ---------- */
  --surlignage-haut: .18em;       /* surlignage plein : retrait en haut */
  --surlignage-bas: .02em;
  --surlignage-debord: .12em;     /* débord à gauche et à droite du mot */
  --surlignage-trait: .46em;      /* trait sous la moitié basse d'un mot */
  --surlignage-chiffre: .5em;
  --surlignage-souligne: .28em;   /* trait fin, sous un nom ou en mode sombre */
  --surlignage-sous: -.2em;       /* en sombre, le trait passe sous la ligne */

  /* ---------- Traits fins et focus ---------- */
  --size-trait-fort: 1.5px;
  --size-focus: 2px;
  --size-halo: 5px;
  --size-avatar-sm: 34px;
  --size-icone-etat: 15px;
  --size-point: 9px;

  /* ---------- Mise en page (dimensions propres à un composant) ----------
     Seuils de largeur, écrits dans les @media de composants.css : 600 px et 1024 px. */
  --layout-haut: 60px;
  --layout-haut-large: 64px;
  --layout-onglet: 46px;
  --layout-espace-texte: 220px;
  --layout-menu: 300px;
  --layout-ligne-menu: 56px;
  --layout-pastille-onglet: 54px;
  --layout-noter: 52px;
  --layout-sous-barre: 96px;
  --layout-toast-large: 72px;
  --layout-frise-libelle: 170px;
  --layout-frise-libelle-sm: 112px;
  --layout-etiquette: 34px;
  --layout-jauge: 30px;
  --layout-pastille-icone: 30px;
  --layout-pastille-note: 36px;
  --layout-intercalaire: 38px;
  --layout-vignette: 30px;
  --layout-vignette-colonne: 34px;
  --layout-ligne: 64px;
  --layout-ligne-sm: 60px;
  --layout-entree: 52px;
  --layout-sommaire: 236px;
  --layout-telephone: 410px;
  --layout-telephone-h: 780px;
  --layout-zone-note: 192px;
  --layout-apercu-photo: 64px;
  --layout-recherche-min: 300px;
  --layout-recherche-max: 400px;
  --layout-scene: 128px;
  --layout-scene-sm: 112px;
  --layout-scene-large: 150px;
  --layout-scene-vide: 196px;
  --layout-scene-vide-large: 240px;
  --layout-vide: 760px;
  --layout-sommaire-page: 1180px;
  --layout-sommaire-titre: 240px;
  --layout-carte-ecran: 260px;
  --layout-carte-couleur: 180px;
  --layout-apercu: 380px;
  --layout-profil-volet: 380px;        /* profil : volet de droite (à traiter, détail, propositions) */
  --layout-profil-libelle: 188px;      /* profil : colonne des libellés de la frise */
  --layout-profil-libelle-sm: 146px;
  --layout-profil-annees: 76px;        /* profil : colonne des années d'une compétence */
  --layout-profil-ligne: 36px;         /* profil : ligne de la frise et des compétences, à la souris sur ordinateur */
  --layout-profil-case: 10px;          /* profil : une année dans la bande d'usage d'une compétence */
  --layout-profil-date: 64px;          /* profil : colonne des dates de l'historique */
  --layout-apercu-colonne: 300px;   /* page du CV : volet de l'aperçu imprimé */
  --layout-apercu-mini: 92px;       /* page du CV, mobile : vignette d'une page */
  --layout-options-export: 320px;   /* export : colonne des réglages */
  --layout-page-export: 560px;      /* export : largeur maximale d'une page affichée */
  --apercu-zoom-paliers: 50 75 100 125 150 200;   /* zoom des pages, en % de la taille réelle (A4 à 96 ppp) */
  --layout-zoom-valeur: 52px;       /* zoom des pages : place du pourcentage entre « − » et « + » */
  --layout-libelle-categorie: 150px;
  --layout-a4-l: 794px;             /* page A4 à 96 ppp */
  --layout-a4-h: 1123px;
  --layout-a4-marge: 56px;
  --layout-a4-cote: 236px;          /* colonne latérale du gabarit « Moderne » */
  --layout-a4-marge-serree: 36px;   /* « Tenir sur une page » : marges de la feuille */
  --layout-a4-section-serree: 10px; /* « Tenir sur une page » : espace au-dessus d'un titre de section */
  --layout-a4-bloc-serre: 2px;      /* « Tenir sur une page » : espace entre deux blocs */
  --layout-a4-photo: 88px;          /* photo du profil sur le CV exporté */
  --layout-a4-photo-sm: 64px;       /* photo du profil, gabarit « Compact » */
  --layout-pastille-couleur: 28px;  /* export : disque de couleur dans sa pastille de 44 px */
  --layout-cn-besoin: 1080px;       /* création d'un CV adapté : largeur de l'étape du besoin */
  --layout-cn-resume: 400px;        /* création : colonne du résumé du CV qui se compose */
  --layout-cn-recap: 340px;         /* création : colonne du rappel du besoin, à l'aperçu */
  --layout-cn-texte: 168px;         /* création : hauteur du texte de l'offre collé */
  --layout-cn-dialogue: 480px;      /* création : fenêtre de confirmation */
  --layout-cn-tete: 112px;          /* création : en-tête collé de l'arbre, avant sa mesure (scroll-padding-top) */
  --layout-cn-suggestions: 320px;   /* création : hauteur maximale des suggestions du filtre */
  --layout-cn-suggestions-l: 560px; /* création : largeur des suggestions du filtre, sur ordinateur */
  --layout-cn-comparer: 960px;      /* création : fenêtre « Comparer au départ » */
  --layout-cn-cmp-action: 216px;    /* création : colonne « Annuler ce changement » de la comparaison */
  --layout-notifs: 400px;           /* notifications : largeur du panneau ancré sous la cloche */
  --size-compte: 18px;              /* notifications : pastille du nombre de non lues, sur la cloche */
  --layout-mj: 1040px;              /* mise à jour ciblée : largeur du contenu */
  --layout-mj-cv: 248px;            /* mise à jour ciblée : colonne du CV */
  --layout-mj-choix: 264px;         /* mise à jour ciblée : colonne du choix */
  --layout-mj-groupe: 432px;        /* mise à jour ciblée : choix du groupe, deux cases côte à côte */
  --layout-rg-sommaire: 256px;      /* réglages : le sommaire, assez large pour « Nouveaux CV adaptés » et une adresse sur une ligne */
  --layout-rg-apercu: 300px;        /* réglages : colonne de l'aperçu du CV exporté */
  --layout-rg-feuille: 380px;       /* réglages : hauteur visible de la vignette (haut de la première page) */
  --layout-rg-feuille-mobile: 220px; /* réglages, téléphone : hauteur de la vignette avant réduction */
  --rg-vignette-zoom: 0.5;          /* réglages, téléphone : réduction de la vignette collée en haut (110 px de haut) */
  --layout-rg-vignette-colle: 150px; /* réglages, téléphone : hauteur de la vignette collée, titre compris (marge du défilement) */
  --layout-rg-cote: 46%;            /* réglages : colonne latérale du gabarit Moderne dans la vignette (le téléphone y tient sur une ligne) */
  --rg-feuille-fondu: 78%;          /* réglages : la vignette s'estompe à partir de cette hauteur */
  --layout-rg-colonne: 260px;       /* réglages : largeur minimale d'une colonne de réglages côte à côte */
  --layout-rg-colonne-large: 340px; /* réglages : colonne du compte, qui porte des formulaires */
  --layout-rg-champ: 480px;         /* réglages : largeur maximale d'un champ de texte */
  --layout-rg-code: 176px;          /* réglages : champ du code à 6 chiffres */
  --layout-interrupteur-l: 40px;    /* interrupteur : longueur du rail (la ligne entière est la cible) */
  --layout-interrupteur-h: 24px;    /* interrupteur : hauteur du rail */
  --layout-interrupteur-bouton: 16px; /* interrupteur : le bouton qui glisse */
  --layout-ad-nav: 248px;           /* administration : la navigation des pages, à gauche */
  --layout-ad-cote: 380px;          /* administration : colonne des actions et du journal d'un compte */
  --layout-ad-chiffre: 140px;       /* administration : largeur minimale d'un chiffre du tableau de bord */
  --layout-ad-fait: 120px;          /* administration : largeur minimale d'un fait (crédits, usage, connexion) */
  --layout-ad-tableau: 880px;       /* administration : largeur minimale d'un tableau ; plus étroit, il défile dans son cadre */
  --layout-ad-tableau-court: 620px; /* administration : tableaux de peu de colonnes (file, invitations) */
  --layout-ad-nombre: 96px;         /* administration : champ d'un nombre (réglage, crédits) */
  --layout-ad-select: 360px;        /* administration : liste de choix d'un réglage (modèle) */
  --layout-ad-segments: 360px;      /* administration : segments d'un réglage (quatre choix, « 12 mois », « Jamais ») */
  --layout-ad-segments-2: 220px;    /* administration : segments de deux choix */
  --layout-ad-sommaire: 200px;      /* administration : sommaire des groupes de réglages, à gauche */
  --layout-ad-motif: 64px;          /* administration : hauteur du champ du motif */
  --layout-ad-graphe: 150px;        /* administration : hauteur des barres du coût par jour */
  --layout-ad-liste: 360px;         /* administration : liste des avis, à gauche de l'avis ouvert */
  --layout-ad-volet: 640px;         /* administration : fenêtre du détail d'une analyse */
  --layout-ad-capture-vue-l: 384px; /* administration : capture d'un avis, l'écran de l'appareil réduit pour tenir dans 384… */
  --layout-ad-capture-vue-h: 300px; /* … × 300 px (un ordinateur à 30 %, un téléphone en entier) */
  --layout-av-vignette-l: 112px;    /* donner mon avis : vignette de la capture, au plus aussi large… */
  --layout-av-vignette-h: 120px;    /* … et aussi haute (un écran de téléphone y tient en entier) */
  --layout-av-texte: 120px;         /* donner mon avis : hauteur du champ… */
  --layout-av-texte-court: 88px;    /* … quand la hauteur de l'écran manque */
  --layout-av-ligne: 20px;          /* donner mon avis : ligne réservée (aide du champ, message d'envoi) : rien ne bouge */
  --layout-av-pastille: 64px;       /* donner mon avis : place de la pastille « Capturer cet écran », sous la page */
  --layout-av-grand: 960px;         /* donner mon avis : fenêtre de la capture en grand */
  --layout-cx-feuille: 440px;       /* connexion : largeur du formulaire */
  --layout-cx-scene: 560px;         /* connexion, ordinateur : largeur du dessin de la colonne de droite */
  --layout-cx-icone: 192px;         /* connexion, feuille de l'icône : côté de la grande icône affichée */
  --layout-cx-icone-sm: 96px;       /* connexion, feuille de l'icône : côté d'une icône réduite */
  --layout-cx-icone-xs: 48px;       /* connexion, feuille de l'icône : taille d'un onglet ou d'une barre de tâches */
  --layout-cx-large: 960px;         /* connexion, feuille de l'icône : largeur de la page */
  --layout-vt-page: 1120px;         /* site vitrine (cursita.com) : largeur du contenu */
  --layout-vt-lecture: 68ch;        /* site vitrine : longueur de ligne d'un texte suivi (la politique) */
  --layout-vt-accroche: 22ch;       /* site vitrine : largeur du titre de l'accueil, pour couper la phrase en deux lignes */
  --layout-vt-sommaire: 248px;      /* site vitrine, ordinateur : sommaire collé de la politique */
  --layout-vt-libelle: 168px;       /* site vitrine, ordinateur : colonne des libellés d'une ligne (« Base légale », « Lieu ») */

  /* ---------- Pictogrammes en masque (la couleur vient du composant) ---------- */
  --icone-crayon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3C/svg%3E");
  --icone-coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");

  /* ---------- Illustrations (unités du dessin SVG) ---------- */
  --text-illustration: 9px;
  --text-illustration-fort: 10px;

  /* ---------- Mouvement ---------- */
  --ease-sortie: cubic-bezier(.22, 1, .36, 1);
  --opacite-inactif: .5;            /* un geste désactivé (lecture seule) : atténué, toujours lisible avec son mot */
  --duration-rapide: .15s;
  --duration-base: .2s;
  --duration-entree: .35s;
  --duration-scene: .5s;
  --duration-surlignage: .75s;
  --duration-retour: 1.6s;
  --duration-pulsation: 1.2s;
  --delay-trait-1: .55s;
  --delay-trait-2: .8s;
  --delay-trait-3: 1.05s;
  --delay-trait-4: 1.3s;
  --delay-liens: 1.2s;
  --delay-badge: 1.4s;
  --delay-coche: 1.55s;
}

/* ---------- Mode sombre : graphite chaud, les surligneurs descendent d'un cran ---------- */
[data-theme="sombre"] {
  --color-papier: #121417;
  --color-papier-business: #121417;
  --color-feuille: #1A1D21;
  --color-scene: #202328;
  --color-encre: #E9EBEE;
  --color-encre-douce: #ADB1B8;
  --color-encre-profonde: #F4F2F0;
  --color-sur-encre: #16171B;
  --color-sur-surlignage: #16171B;
  --color-filet: #2E3238;
  --color-filet-doux: #25292E;
  --color-filet-fort: #3E434A;
  --color-survol: #22252A;
  --color-onglet: #262A30;
  --color-selection: #2A2E35;
  --color-neutre: #4A4F57;
  --color-fournisseur-fond: #131314;
  --color-fournisseur-filet: #8E918F;
  --color-fournisseur-texte: #E3E3E3;

  --color-accent: #EDB24D;
  --color-accent-fond: #3A2B12;
  --color-accent-texte: #EABC73;
  --color-parcours: #98D299;
  --color-parcours-fond: #233224;
  --color-parcours-texte: #A5D2A6;
  --color-competences: #7DBDC9;
  --color-competences-fond: #203134;
  --color-competences-texte: #9DCED7;

  --color-succes: #A5D2A6;
  --color-alerte: #E9C27A;
  --color-erreur: #F2A99A;

  --shadow-teinte: 0 0 0;
  --shadow-panneau: 0 1px 2px rgb(var(--shadow-teinte) / .3);
  --shadow-feuille: 0 1px 1px rgb(var(--shadow-teinte) / .3), 0 20px 40px -26px rgb(var(--shadow-teinte) / .7);
  --shadow-flottant: 0 12px 32px -8px rgb(var(--shadow-teinte) / .6);
  color-scheme: dark;
}

/* ---------- Espace Business : plus dense ---------- */
.in-frame { --outils-h: 0px; }

.business {
  --color-papier: var(--color-papier-business);
  --radius-element: 6px;
  --radius-panneau: 8px;
  --text-courant: var(--text-sm);
}
:root { --text-courant: var(--text-base); }

:root { --outils-h: 0px; }

/* ============================================================
   Cursita, base : remise à zéro, typographie, éléments HTML
   Aucune valeur en dur : tout vient de tokens.css.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-papier);
  color: var(--color-encre);
  font-family: var(--font-interface);
  font-size: var(--text-courant);
  line-height: var(--leading-base);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--color-encre); }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }

/* Titres de l'application : grotesque serrée. Le contenu des CV et des notes est en sérif (.doc). */
h1, h2, h3, h4 { font-family: var(--font-interface); }
.doc { font-family: var(--font-document); }

/* Chiffres tabulaires : seulement pour les colonnes de chiffres (ils élargissent aussi la virgule) */
.tab-num { font-variant-numeric: tabular-nums; }

/* Texte réservé aux lecteurs d'écran */
.visually-hidden { position: absolute; width: var(--size-trait); height: var(--size-trait); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Icônes : sprite icones.svg, trait à la couleur du texte */
.icon { width: var(--size-icone); height: var(--size-icone); flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: var(--size-icone-sm); height: var(--size-icone-sm); }

/* Focus visible partout : filet d'encre et halo ambre */
:focus-visible { outline: var(--size-focus) solid var(--color-encre); outline-offset: var(--size-focus); box-shadow: 0 0 0 var(--size-halo) var(--color-accent); border-radius: var(--radius-element); }
/* Focus posé par la page à l'arrivée (titre, lien d'origine) : sans cadre pour qui vient du doigt ou du pointeur */
[data-focus-discret]:focus-visible { outline: none; box-shadow: none; }

/* Lien d'évitement */
.skip { position: absolute; left: var(--space-150); top: calc(-1 * var(--space-500) * 1.5); z-index: 100; background: var(--color-feuille); color: var(--color-encre); padding: var(--space-150) var(--space-200); border-radius: var(--radius-controle); font-weight: var(--weight-semibold); text-decoration: none; }
.skip:focus { top: var(--space-150); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.wordmark { font-family: var(--font-interface); font-weight: var(--weight-black); font-size: var(--text-marque); letter-spacing: var(--tracking-titre-fort); color: var(--color-encre); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--size-cible); }

.wordmark i { font-style: normal; position: relative; }

.wordmark i::after { content: ""; position: absolute; left: 50%; top: .14em; width: .22em; height: .22em; margin-left: -.11em; border-radius: var(--radius-trait); background: var(--color-accent); }

/* ============================================================
   1. Couleur d'une partie du profil
   Chaque élément qui porte une partie reçoit une classe .c-* ;
   ses règles lisent --c (trait), --c-fond et --c-texte.
   ============================================================ */
.c-accent { --c: var(--color-accent); --c-fond: var(--color-accent-fond); --c-texte: var(--color-accent-texte); }
.c-parcours { --c: var(--color-parcours); --c-fond: var(--color-parcours-fond); --c-texte: var(--color-parcours-texte); }
.c-competences { --c: var(--color-competences); --c-fond: var(--color-competences-fond); --c-texte: var(--color-competences-texte); }
.c-neutre { --c: var(--color-neutre); --c-fond: var(--color-survol); --c-texte: var(--color-encre); }

/* ============================================================
   2. Surlignage
   Un rectangle net sous la ligne, jamais seul porteur du sens :
   toujours doublé d'un mot, du gras ou d'un filet foncé.
   .hl : surlignage plein qui passe à l'arrivée (ajouter .is-on), ou fixe (.hl-static).
   .swipe : trait sous la moitié basse d'un mot (titres, élément actif).
   ============================================================ */
.hl { position: relative; z-index: 0; white-space: nowrap; transition: color var(--duration-entree) var(--ease-sortie) var(--duration-base); }
.hl::before {
  content: ""; position: absolute; z-index: -1; inset: var(--surlignage-haut) calc(-1 * var(--surlignage-debord)) var(--surlignage-bas) calc(-1 * var(--surlignage-debord));
  background: var(--c, var(--color-accent)); border-radius: var(--radius-trait);
  clip-path: inset(0 100% 0 0); transition: clip-path var(--duration-surlignage) var(--ease-sortie);
}
.hl.is-on, .hl-static { color: var(--color-sur-surlignage); }
.hl.is-on::before, .hl-static::before { clip-path: inset(0 0 0 0); }

.swipe { position: relative; z-index: 0; }
.swipe::before {
  content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--surlignage-debord)); right: calc(-1 * var(--surlignage-debord)); bottom: var(--surlignage-bas); height: var(--surlignage-trait);
  background: var(--c, var(--color-accent)); border-radius: var(--radius-trait);
}
/* En sombre, un texte clair ne peut pas passer sur le surligneur : le trait descend sous la ligne */
[data-theme="sombre"] .swipe::before { height: var(--surlignage-souligne); bottom: var(--surlignage-sous); }

/* Élément actif : surligné à l'ambre et en gras */
.sig { position: relative; isolation: isolate; font-weight: var(--weight-heavy); }

@media (prefers-reduced-motion: reduce) {
  .hl::before { clip-path: none; opacity: 0; transition: opacity var(--duration-base) !important; }
  .hl.is-on::before, .hl-static::before { opacity: 1; }
}

/* ============================================================
   3. Boutons
   Une seule action principale par écran : ambre, filet ambre foncé.
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-100);
  min-height: var(--size-bouton); padding: 0 var(--space-250);
  border-radius: var(--radius-controle); border: var(--size-trait) solid transparent;
  font-weight: var(--weight-strong); font-size: var(--text-base); text-decoration: none; white-space: nowrap;
  transition: transform var(--duration-rapide) var(--ease-sortie), background-color var(--duration-base), border-color var(--duration-base);
}
.btn:active { transform: translateY(var(--size-trait)); }
.btn-primary { background: var(--color-accent); color: var(--color-sur-surlignage); border-color: var(--color-accent-texte); }
.btn-primary:hover { background: color-mix(in oklab, var(--color-accent), var(--color-accent-texte) 16%); }
[data-theme="sombre"] .btn-primary { border-color: var(--color-accent); }
.btn-line { background: var(--color-feuille); color: var(--color-encre); border-color: var(--color-filet-fort); }
.btn-line:hover { border-color: var(--color-encre); background: var(--color-survol); }
.btn-quiet { background: transparent; color: var(--color-encre); border-color: var(--color-filet-fort); }
.btn-quiet:hover { background: var(--color-survol); border-color: var(--color-encre-douce); }
.btn-sm { min-height: var(--size-cible); padding: 0 var(--space-175); font-size: var(--text-sm); }
.icon-btn { display: inline-grid; place-items: center; width: var(--size-cible); height: var(--size-cible); flex: none; border-radius: var(--radius-rond); border: 0; background: transparent; color: inherit; }
.icon-btn:hover { background: var(--color-survol); }

/* ============================================================
   19. Illustrations (SVG de illustrations/, insérés dans la page)
   Les SVG n'ont aucune couleur en dur : ils utilisent ces classes.
   Animation une seule fois, à l'arrivée (classe .is-playing sur un parent).
   ============================================================ */
.scene { position: relative; background: var(--color-scene); overflow: hidden; }
.art-plan { fill: var(--color-scene-plan); }
.art-paper { fill: var(--color-feuille); stroke: var(--color-filet-fort); stroke-width: 1; }
.art-mono { font: var(--weight-semibold) var(--text-illustration)/1 var(--font-interface); fill: var(--color-encre-douce); letter-spacing: .04em; }
.art-label { font: var(--weight-bold) var(--text-illustration-fort)/1 var(--font-interface); fill: var(--color-encre); }
.art-line { fill: none; stroke: var(--color-encre); stroke-width: 2.2; }
.art-line-soft { fill: none; stroke: var(--color-filet-fort); stroke-width: 2.2; }
.art-hair { fill: none; stroke: var(--color-filet-fort); stroke-width: 1; }
.art-frame { fill: none; stroke: var(--color-filet); stroke-width: 1; }
.art-dash { fill: var(--color-feuille); stroke: var(--color-filet-fort); stroke-width: 1; stroke-dasharray: 4 4; }
.art-connector { fill: none; stroke: var(--color-encre-douce); stroke-width: 1; stroke-dasharray: 2 3; }
.art-ink-line { fill: none; stroke: var(--color-encre); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.art-ink { fill: var(--color-encre); }
.art-on-ink { fill: none; stroke: var(--color-sur-encre); stroke-width: 2; }
.art-check { fill: none; stroke-width: 2.4; stroke-linecap: square; stroke-dasharray: 1; stroke-dashoffset: 0; }
.art-accent { fill: var(--color-accent); }
.art-parcours { fill: var(--color-parcours); }
.art-parcours-filet { fill: var(--color-parcours); stroke: var(--color-parcours-texte); stroke-width: 1; }
.art-competences { fill: var(--color-competences); }
.art-texte-parcours { stroke: var(--color-parcours-texte); }
.art-on-ink.art-check { stroke: var(--color-sur-encre); }
/* Photo de contexte floutée : formes aux couleurs du papier et de l'encre, en attendant une vraie photo */
.photo-fond { fill: var(--color-filet-fort); }
.photo-clair { fill: var(--color-feuille); }
.photo-moyen { fill: var(--color-onglet); }
.photo-sol { fill: var(--color-encre-douce); }
.photo-sombre { fill: var(--color-encre); }
.photo-vegetal { fill: var(--color-parcours-texte); }
.photo-etiquette { fill: var(--color-encre); opacity: .72; }
.photo-etiquette-texte { font: var(--weight-semibold) var(--text-illustration)/1 var(--font-interface); fill: var(--color-sur-encre); letter-spacing: var(--tracking-capitales); }
.art-grow { transform-box: fill-box; transform-origin: left center; }
.art-pop { transform-box: fill-box; transform-origin: center; }
.is-playing .art-in { animation: entree var(--duration-scene) var(--ease-sortie) backwards; }
.is-playing .art-in-2 { animation: entree var(--duration-scene) var(--ease-sortie) var(--duration-rapide) backwards; }
.is-playing .art-grow { animation: pousse var(--duration-scene) var(--ease-sortie) backwards; }
.is-playing .d1 { animation-delay: var(--delay-trait-1); } .is-playing .d2 { animation-delay: var(--delay-trait-2); } .is-playing .d3 { animation-delay: var(--delay-trait-3); } .is-playing .d4 { animation-delay: var(--delay-trait-4); }
.is-playing .art-fade { animation: fondu var(--duration-entree) var(--ease-sortie) var(--delay-liens) backwards; }
.is-playing .art-pop { animation: apparait var(--duration-entree) var(--ease-sortie) var(--delay-badge) backwards; }
.is-playing .art-check { animation: trace var(--duration-entree) var(--ease-sortie) var(--delay-coche) backwards; }
@keyframes entree { from { opacity: 0; transform: translateY(6px); } }
@keyframes pousse { from { transform: scaleX(0); } }
@keyframes fondu { from { opacity: 0; } }
@keyframes apparait { from { transform: scale(0); opacity: 0; } }
@keyframes trace { from { stroke-dashoffset: 1; } }
@media (prefers-reduced-motion: reduce) { .is-playing * { animation: none !important; } }

/* ============================================================
   32. Site vitrine de cursita.com (#343) : l'accueil et la politique de confidentialité
   Hors de l'application : ni haut de page à intercalaires ni barre basse, un bandeau simple (le nom, « Se connecter »)
   et un pied de page (politique, contact, connexion). Clair seulement en vrai, comme le front ; les tokens suivent quand même le sombre.
   Accueil : la phrase de Cursita surlignée, « Se connecter », le dessin du parcours en trois temps et ses trois étapes dessous,
   puis ce que deviennent les données. Politique : un bandeau de titre, l'essentiel en cinq lignes, un sommaire (replié sur
   téléphone, collé à gauche sur ordinateur, la partie lue surlignée et en gras), des parties numérotées courtes.
   .vt-a-completer : repère visible d'une information que Reda doit donner ; jamais une valeur inventée.
   ============================================================ */
.vt { min-height: calc(100vh - var(--outils-h)); min-height: calc(100dvh - var(--outils-h)); display: flex; flex-direction: column; }
.vt > main { flex: 1; }
.vt-cadre { width: 100%; max-width: var(--layout-vt-page); margin: 0 auto; padding-inline: var(--space-200); }
.vt-haut { background: var(--color-feuille); padding-top: env(safe-area-inset-top); }
.vt-haut-dedans { display: flex; align-items: center; justify-content: space-between; gap: var(--space-150); min-height: var(--layout-haut); }
.vt-haut-dedans .btn { flex: none; }
/* Le surlignage d'un mot ou d'un numéro, posé en fond : il suit le texte quand il passe à la ligne */
.vt { --vt-trait: linear-gradient(to top, transparent var(--surlignage-bas), var(--color-accent) var(--surlignage-bas), var(--color-accent) calc(var(--surlignage-bas) + var(--surlignage-trait)), transparent calc(var(--surlignage-bas) + var(--surlignage-trait))); }
/* En sombre, un texte clair ne peut pas passer sur le surligneur : le trait descend sous la ligne, comme .swipe */
[data-theme="sombre"] .vt { --vt-trait: linear-gradient(to top, var(--color-accent) var(--surlignage-souligne), transparent var(--surlignage-souligne)); }

/* Le lien d'un texte suivi : souligné, à l'encre */
.vt-lien { color: var(--color-encre); font-weight: var(--weight-semibold); text-decoration: underline; text-decoration-thickness: var(--size-trait); text-underline-offset: var(--space-050); }
@media (hover: hover) { .vt-lien:hover { text-decoration-color: var(--color-accent-texte); text-decoration-thickness: var(--size-focus); } }

/* Repère d'une information à donner : visible, en pointillé, jamais pris pour une vraie valeur */
.vt-a-completer { padding: var(--space-025) var(--space-100); line-height: var(--leading-document); border: var(--size-trait) dashed var(--color-accent-texte); border-radius: var(--radius-etiquette); background: var(--color-accent-fond); color: var(--color-accent-texte); font-weight: var(--weight-semibold); font-style: normal; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ---------- Accueil ---------- */
.vt-accroche { background: var(--color-feuille); border-bottom: var(--size-trait) solid var(--color-filet); }
.vt-accroche-dedans { display: grid; gap: var(--space-400); padding-top: var(--space-250); padding-bottom: var(--space-400); }
.vt-accroche-dedans > * { min-width: 0; }
.vt-accroche h1 { max-width: var(--layout-vt-accroche); font-size: var(--text-6xl); font-weight: var(--weight-black); line-height: var(--leading-titre); letter-spacing: var(--tracking-titre-fort); text-wrap: balance; }
.vt-chapeau { margin-top: var(--space-175); max-width: 46ch; font-size: var(--text-lg); line-height: var(--leading-document); color: var(--color-encre-douce); text-wrap: pretty; }
.vt-agir { display: grid; gap: var(--space-150); margin-top: var(--space-300); }
.vt-agir .btn { width: 100%; }
.vt-acces { display: flex; align-items: flex-start; gap: var(--space-100); max-width: 46ch; font-size: var(--text-sm); line-height: var(--leading-base); color: var(--color-encre-douce); }
.vt-acces .icon { margin-top: var(--space-025); color: var(--color-encre); }
.vt-acces b { color: var(--color-encre); font-weight: var(--weight-strong); }
.vt-acces a { display: inline-flex; align-items: center; min-height: var(--size-cible); }

/* Le dessin du parcours ; ses trois tiers tombent au-dessus des trois étapes */
.vt-parcours { display: grid; gap: var(--space-250); }
.vt-parcours .scene { aspect-ratio: 360 / 150; border-radius: var(--radius-bandeau); border: var(--size-trait) solid var(--color-filet); }
.vt-parcours .scene svg { display: block; width: 100%; height: 100%; }
.vt-etapes { display: grid; gap: var(--space-200); counter-reset: vt-etape; }
.vt-etape { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-025) var(--space-150); counter-increment: vt-etape; }
/* Le numéro, surligné à l'ambre sous sa moitié basse : le geste de la marque, pas une pastille */
.vt-etape::before { content: counter(vt-etape); grid-row: span 2; justify-self: start; align-self: start; padding: 0 var(--space-050); background: var(--vt-trait); font-size: var(--text-3xl); font-weight: var(--weight-black); line-height: var(--leading-tight); font-variant-numeric: tabular-nums; }
.vt-etape h3 { font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: var(--tracking-titre); line-height: var(--leading-snug); }
.vt-etape p { font-size: var(--text-sm); line-height: var(--leading-base); color: var(--color-encre-douce); text-wrap: pretty; }

/* Ce que deviennent les données : une liste à pictogrammes, sans cartes */
.vt-donnees { display: grid; gap: var(--space-200); padding-top: var(--space-500); padding-bottom: var(--space-500); }
.vt-donnees > * { min-width: 0; }
.vt-donnees h2 { font-size: var(--text-4xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-titre); line-height: var(--leading-tight); text-wrap: balance; }
.vt-donnees h2 + p { margin-top: var(--space-100); color: var(--color-encre-douce); max-width: 40ch; line-height: var(--leading-document); }
.vt-points li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-150); padding: var(--space-175) 0; border-bottom: var(--size-trait) solid var(--color-filet-doux); line-height: var(--leading-base); }
.vt-points li:first-child { padding-top: 0; }
.vt-points li:last-child { border-bottom: 0; padding-bottom: 0; }
.vt-points .vt-picto { display: grid; place-items: center; width: var(--layout-pastille-icone); height: var(--layout-pastille-icone); border-radius: var(--radius-element); background: var(--c-fond); color: var(--c-texte); }
.vt-points b { font-weight: var(--weight-strong); }
.vt-points p { color: var(--color-encre-douce); text-wrap: pretty; }
.vt-points b + p { margin-top: var(--space-025); }
.vt-suite { display: inline-flex; align-items: center; min-height: var(--size-cible); margin-top: var(--space-150); }

/* Pied de page : la politique, le contact, la connexion */
.vt-pied { border-top: var(--size-trait) solid var(--color-filet); background: var(--color-feuille); }
.vt-pied-dedans { display: grid; gap: var(--space-100); padding-top: var(--space-200); padding-bottom: calc(var(--space-300) + env(safe-area-inset-bottom)); font-size: var(--text-sm); }
.vt-pied ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-250); }
.vt-pied a { display: inline-flex; align-items: center; min-height: var(--size-cible); }
.vt-pied a[aria-current="page"] { text-decoration: none; font-weight: var(--weight-heavy); }
.vt-pied small { color: var(--color-encre-douce); font-size: var(--text-xs); }

@media (min-width: 600px) {
  .vt-agir { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-250); }
  .vt-agir .btn { width: auto; }
}
@media (min-width: 1024px) {
  .vt-cadre { padding-inline: var(--space-500); }
  .vt-haut-dedans { min-height: var(--layout-haut-large); }
  .vt-accroche-dedans { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: var(--space-500); padding-top: var(--space-400); padding-bottom: var(--space-500); }
  .vt-accroche h1 { font-size: var(--text-7xl); }
  .vt-agir { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .vt-etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-250); }
  .vt-etape { grid-template-columns: minmax(0, 1fr); }
  .vt-etape::before { grid-row: auto; margin-bottom: var(--space-075); }
  .vt-donnees { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-500); }
  .vt-pied-dedans { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

/* ---------- Politique de confidentialité ---------- */
.vt-titre { background: var(--color-feuille); border-bottom: var(--size-trait) solid var(--color-filet); }
.vt-titre-dedans { padding-top: var(--space-200); padding-bottom: var(--space-350); }
.vt-titre h1 { font-size: var(--text-5xl); font-weight: var(--weight-black); line-height: var(--leading-titre); letter-spacing: var(--tracking-titre-fort); text-wrap: balance; }
.vt-titre p { margin-top: var(--space-150); max-width: var(--layout-vt-lecture); font-size: var(--text-md); line-height: var(--leading-document); color: var(--color-encre-douce); text-wrap: pretty; }
.vt-titre .vt-date { margin-top: var(--space-100); font-size: var(--text-sm); }

.vt-politique { display: grid; gap: var(--space-250); padding-top: var(--space-250); padding-bottom: var(--space-500); }
.vt-politique > * { min-width: 0; }

/* Le sommaire : replié sur téléphone (une ligne de 44 px), collé à gauche sur ordinateur ; la partie lue est surlignée et en gras */
.vt-sommaire { border: var(--size-trait) solid var(--color-filet); border-radius: var(--radius-panneau); background: var(--color-feuille); }
.vt-sommaire summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-100); min-height: var(--size-cible); padding: 0 var(--space-150) 0 var(--space-175); font-weight: var(--weight-bold); cursor: pointer; list-style: none; border-radius: var(--radius-panneau); }
.vt-sommaire summary::-webkit-details-marker { display: none; }
.vt-sommaire summary .icon { transition: transform var(--duration-base) var(--ease-sortie); }
.vt-sommaire[open] summary .icon { transform: rotate(180deg); }
.vt-sommaire ol { display: grid; padding: 0 var(--space-100) var(--space-100); counter-reset: vt-partie; }
.vt-sommaire li { counter-increment: vt-partie; }
.vt-sommaire a { display: grid; grid-template-columns: var(--space-400) minmax(0, 1fr); align-items: baseline; min-height: var(--size-cible); padding: var(--space-125) var(--space-100); border-radius: var(--radius-element); color: var(--color-encre); text-decoration: none; font-size: var(--text-sm); line-height: var(--leading-snug); }
.vt-sommaire a::before { content: counter(vt-partie) "."; color: var(--color-encre-douce); font-variant-numeric: tabular-nums; }
.vt-sommaire a span { justify-self: start; }
.vt-sommaire a[aria-current] { font-weight: var(--weight-heavy); }
.vt-sommaire a[aria-current] span { background: var(--vt-trait); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
@media (hover: hover) { .vt-sommaire a:hover { background: var(--color-survol); } }
/* Le résumé n'est un bouton que sur téléphone : sur ordinateur, ce n'est plus qu'un intitulé */
@media (hover: hover) and (max-width: 1023px) { .vt-sommaire summary:hover { background: var(--color-survol); } }

/* L'essentiel : cinq lignes avant le détail */
.vt-essentiel { padding: var(--space-200) var(--space-200) var(--space-175); border: var(--size-trait) solid var(--color-filet); border-radius: var(--radius-panneau); background: var(--color-feuille); box-shadow: var(--shadow-panneau); }
.vt-essentiel h2 { font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-titre); margin-bottom: var(--space-175); }

/* Le texte : des parties numérotées, des paragraphes courts, des lignes de 68 caractères au plus */
.vt-texte { max-width: var(--layout-vt-lecture); counter-reset: vt-titre; }
.vt-texte > .note-maquette { margin-bottom: var(--space-200); }
.vt-partie { padding-top: var(--space-500); scroll-margin-top: calc(var(--outils-h) + var(--space-200)); }
.vt-partie h2 { counter-increment: vt-titre; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-100); font-size: var(--text-3xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-titre); line-height: var(--leading-tight); text-wrap: balance; }
.vt-partie h2::before { content: counter(vt-titre) "."; color: var(--color-accent-texte); font-variant-numeric: tabular-nums; }
.vt-partie h3 { margin-top: var(--space-300); font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: var(--tracking-titre); }
.vt-partie p, .vt-partie > ul { margin-top: var(--space-150); line-height: var(--leading-document); text-wrap: pretty; }
.vt-partie > ul { display: grid; gap: var(--space-100); }
.vt-partie > ul li { display: grid; grid-template-columns: var(--space-200) minmax(0, 1fr); }
.vt-partie > ul li::before { content: ""; width: var(--space-075); height: var(--space-075); margin-top: calc((1lh - var(--space-075)) / 2); border-radius: var(--radius-trait); background: var(--color-encre); }
.vt-partie b { font-weight: var(--weight-strong); }

/* Une ligne d'un tableau sans tableau : un titre, puis des couples libellé-valeur ; les libellés passent à gauche dès 600 px */
.vt-lignes { margin-top: var(--space-200); border-top: var(--size-trait) solid var(--color-filet); }
.vt-ligne { padding: var(--space-175) 0; border-bottom: var(--size-trait) solid var(--color-filet); }
.vt-ligne h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-050) var(--space-100); margin: 0; font-size: var(--text-md); }
/* Sur téléphone, un couple tient sur une ligne : « Lieu : États-Unis », le libellé en gris */
.vt-ligne dl { display: grid; gap: var(--space-075); margin-top: var(--space-100); font-size: var(--text-sm); line-height: var(--leading-base); }
.vt-ligne dt, .vt-ligne dd { display: inline; }
.vt-ligne dt { color: var(--color-encre-douce); }
.vt-ligne dt::after { content: "\00a0: "; }
.vt-ligne dd { margin: 0; }

.vt-contact { margin-top: var(--space-250); padding: var(--space-175) var(--space-200) var(--space-200); border: var(--size-trait) solid var(--color-filet); border-radius: var(--radius-panneau); background: var(--color-feuille); }
.vt-contact p:first-child { margin-top: 0; }
.vt-retour { display: inline-flex; align-items: center; gap: var(--space-075); min-height: var(--size-cible); margin-top: var(--space-400); }
/* Téléphone : revenir au sommaire à la fin de chaque partie (sur ordinateur, il est collé à gauche) */
.vt-vers-sommaire { display: inline-flex; align-items: center; gap: var(--space-075); min-height: var(--size-cible); margin-top: var(--space-150); }
.vt-sommaire { scroll-margin-top: calc(var(--outils-h) + var(--space-200)); }

@media (min-width: 600px) {
  .vt-ligne dl { grid-template-columns: var(--layout-vt-libelle) minmax(0, 1fr); gap: var(--space-100) var(--space-200); }
  .vt-ligne dl > div { display: contents; }
  .vt-ligne dt::after { content: none; }
}
@media (min-width: 1024px) {
  .vt-titre-dedans { padding-top: var(--space-400); padding-bottom: var(--space-500); }
  .vt-titre h1 { font-size: var(--text-7xl); }
  .vt-politique { grid-template-columns: var(--layout-vt-sommaire) minmax(0, 1fr); gap: var(--space-500); align-items: start; padding-top: var(--space-400); }
  /* Sur ordinateur, le sommaire est toujours ouvert (vitrine.js) et suit la lecture */
  .vt-sommaire { position: sticky; top: calc(var(--outils-h) + var(--space-200)); border: 0; background: transparent; }
  .vt-vers-sommaire { display: none; }
  /* Le résumé ne replie plus rien : hors de la tabulation (vitrine.js) et sans clic */
  .vt-sommaire summary { cursor: default; pointer-events: none; padding-left: var(--space-100); color: var(--color-encre-douce); font-size: var(--text-sm); }
  .vt-sommaire summary .icon { display: none; }
  .vt-sommaire ol { padding: 0; }
  .vt-essentiel { padding: var(--space-250) var(--space-300) var(--space-200); }
}
@media (prefers-reduced-motion: reduce) { .vt-sommaire summary .icon { transition: none; } }