@font-face{
    font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;
    src:url('../libs/fonts/fraunces-normal.woff2') format('woff2');
  }
  /* Fraunces ne sert qu'en romaine (titres du Portfolio) : la variante
     italique et Inter, qui habillaient le document avant qu'il ne passe
     aux polices standard PDF, ont été retirées avec leurs fichiers. */
  /* Roboto : police de l'interface uniquement, dans toutes ses graisses
     (fichiers variables 100 à 900, romain et italique). Le DOCUMENT, lui,
     est réglé sur --doc-sans / --doc-serif et sur les polices de chaque
     modèle : ce que l'aperçu montre est ce que le PDF dessine. Deux
     sous-ensembles Unicode plutôt qu'un fichier unique : latin-ext ne sert
     qu'aux rares caractères comme Ŀ ou Ș et n'est téléchargé que s'il
     apparaît. */
  @font-face{
    font-family:'Roboto';font-style:normal;font-weight:100 900;font-display:swap;
    src:url('../libs/fonts/roboto-latin.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:'Roboto';font-style:normal;font-weight:100 900;font-display:swap;
    src:url('../libs/fonts/roboto-latin-ext.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:'Roboto';font-style:italic;font-weight:100 900;font-display:swap;
    src:url('../libs/fonts/roboto-italic-latin.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;
  }
  /* Roboto Mono : la chasse fixe de la même famille, pour les petits
     libellés (onglets, badges, prix). font-display:optional + preload en
     HTML : la police sert si elle arrive dans les 100ms, sinon le repli
     reste, sans saut de mise en page. */
  @font-face{
    font-family:'Roboto Mono';font-style:normal;font-weight:100 700;font-display:optional;
    src:url('../libs/fonts/roboto-mono-latin.woff2') format('woff2');
  }
  /* Polices des modèles dessinés d'après une maquette (Azur, Sobre, Carnet…).
     Chaque maquette a sa typographie ; sans elle, l'aperçu ne ressemblait
     pas au modèle choisi dans la galerie. Une @font-face ne télécharge rien
     tant qu'aucun texte ne l'emploie : seules les polices du modèle affiché
     sont chargées. Le PDF incorpore les mêmes, lues dans ces règles par
     js/export-pdf-apercu.js (fichiers .woff : pdf-lib ne découpe pas le
     WOFF2). Licences : libs/fonts/cv/LICENCES.txt (OFL 1.1). */
  @font-face{font-family:'Archivo';font-style:normal;font-weight:300;font-display:swap;src:url('../libs/fonts/cv/archivo-300.woff2') format('woff2'),url('../libs/fonts/cv/archivo-300.woff') format('woff');}
  @font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('../libs/fonts/cv/archivo-400.woff2') format('woff2'),url('../libs/fonts/cv/archivo-400.woff') format('woff');}
  @font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('../libs/fonts/cv/archivo-700.woff2') format('woff2'),url('../libs/fonts/cv/archivo-700.woff') format('woff');}
  @font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('../libs/fonts/cv/archivo-800.woff2') format('woff2'),url('../libs/fonts/cv/archivo-800.woff') format('woff');}
  @font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;src:url('../libs/fonts/cv/archivo-900.woff2') format('woff2'),url('../libs/fonts/cv/archivo-900.woff') format('woff');}
  @font-face{font-family:'Courier Prime';font-style:normal;font-weight:400;font-display:swap;src:url('../libs/fonts/cv/courier-prime-400.woff2') format('woff2'),url('../libs/fonts/cv/courier-prime-400.woff') format('woff');}
  @font-face{font-family:'Courier Prime';font-style:italic;font-weight:400;font-display:swap;src:url('../libs/fonts/cv/courier-prime-400-italic.woff2') format('woff2'),url('../libs/fonts/cv/courier-prime-400-italic.woff') format('woff');}
  @font-face{font-family:'Courier Prime';font-style:normal;font-weight:700;font-display:swap;src:url('../libs/fonts/cv/courier-prime-700.woff2') format('woff2'),url('../libs/fonts/cv/courier-prime-700.woff') format('woff');}
  @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../libs/fonts/cv/ibm-plex-sans-400.woff2') format('woff2'),url('../libs/fonts/cv/ibm-plex-sans-400.woff') format('woff');}
  @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../libs/fonts/cv/ibm-plex-sans-500.woff2') format('woff2'),url('../libs/fonts/cv/ibm-plex-sans-500.woff') format('woff');}
  @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../libs/fonts/cv/ibm-plex-sans-600.woff2') format('woff2'),url('../libs/fonts/cv/ibm-plex-sans-600.woff') format('woff');}
  @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../libs/fonts/cv/ibm-plex-sans-700.woff2') format('woff2'),url('../libs/fonts/cv/ibm-plex-sans-700.woff') format('woff');}
  @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../libs/fonts/cv/inter-400.woff2') format('woff2'),url('../libs/fonts/cv/inter-400.woff') format('woff');}
  @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../libs/fonts/cv/inter-500.woff2') format('woff2'),url('../libs/fonts/cv/inter-500.woff') format('woff');}
  @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../libs/fonts/cv/inter-600.woff2') format('woff2'),url('../libs/fonts/cv/inter-600.woff') format('woff');}
  @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../libs/fonts/cv/inter-700.woff2') format('woff2'),url('../libs/fonts/cv/inter-700.woff') format('woff');}
  @font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('../libs/fonts/cv/inter-800.woff2') format('woff2'),url('../libs/fonts/cv/inter-800.woff') format('woff');}
  @font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url('../libs/fonts/cv/lato-400.woff2') format('woff2'),url('../libs/fonts/cv/lato-400.woff') format('woff');}
  @font-face{font-family:'Lato';font-style:italic;font-weight:400;font-display:swap;src:url('../libs/fonts/cv/lato-400-italic.woff2') format('woff2'),url('../libs/fonts/cv/lato-400-italic.woff') format('woff');}
  @font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url('../libs/fonts/cv/lato-700.woff2') format('woff2'),url('../libs/fonts/cv/lato-700.woff') format('woff');}
  @font-face{font-family:'League Spartan';font-style:normal;font-weight:700;font-display:swap;src:url('../libs/fonts/cv/league-spartan-700.woff2') format('woff2'),url('../libs/fonts/cv/league-spartan-700.woff') format('woff');}
  @font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:700;font-display:swap;src:url('../libs/fonts/cv/libre-baskerville-700.woff2') format('woff2'),url('../libs/fonts/cv/libre-baskerville-700.woff') format('woff');}
  @font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('../libs/fonts/cv/montserrat-400.woff2') format('woff2'),url('../libs/fonts/cv/montserrat-400.woff') format('woff');}
  @font-face{font-family:'Montserrat';font-style:italic;font-weight:400;font-display:swap;src:url('../libs/fonts/cv/montserrat-400-italic.woff2') format('woff2'),url('../libs/fonts/cv/montserrat-400-italic.woff') format('woff');}
  @font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('../libs/fonts/cv/montserrat-500.woff2') format('woff2'),url('../libs/fonts/cv/montserrat-500.woff') format('woff');}
  @font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('../libs/fonts/cv/montserrat-600.woff2') format('woff2'),url('../libs/fonts/cv/montserrat-600.woff') format('woff');}
  @font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('../libs/fonts/cv/montserrat-700.woff2') format('woff2'),url('../libs/fonts/cv/montserrat-700.woff') format('woff');}
  @font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../libs/fonts/cv/open-sans-400.woff2') format('woff2'),url('../libs/fonts/cv/open-sans-400.woff') format('woff');}
  @font-face{font-family:'Open Sans';font-style:italic;font-weight:400;font-display:swap;src:url('../libs/fonts/cv/open-sans-400-italic.woff2') format('woff2'),url('../libs/fonts/cv/open-sans-400-italic.woff') format('woff');}
  @font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../libs/fonts/cv/open-sans-700.woff2') format('woff2'),url('../libs/fonts/cv/open-sans-700.woff') format('woff');}
  @font-face{font-family:'Pinyon Script';font-style:normal;font-weight:400;font-display:swap;src:url('../libs/fonts/cv/pinyon-script-400.woff2') format('woff2'),url('../libs/fonts/cv/pinyon-script-400.woff') format('woff');}
  @font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url('../libs/fonts/cv/poppins-300.woff2') format('woff2'),url('../libs/fonts/cv/poppins-300.woff') format('woff');}
  @font-face{font-family:'Poppins';font-style:italic;font-weight:300;font-display:swap;src:url('../libs/fonts/cv/poppins-300-italic.woff2') format('woff2'),url('../libs/fonts/cv/poppins-300-italic.woff') format('woff');}
  @font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../libs/fonts/cv/poppins-400.woff2') format('woff2'),url('../libs/fonts/cv/poppins-400.woff') format('woff');}
  @font-face{font-family:'Poppins';font-style:italic;font-weight:400;font-display:swap;src:url('../libs/fonts/cv/poppins-400-italic.woff2') format('woff2'),url('../libs/fonts/cv/poppins-400-italic.woff') format('woff');}
  @font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('../libs/fonts/cv/poppins-500.woff2') format('woff2'),url('../libs/fonts/cv/poppins-500.woff') format('woff');}
  @font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../libs/fonts/cv/poppins-600.woff2') format('woff2'),url('../libs/fonts/cv/poppins-600.woff') format('woff');}
  @font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../libs/fonts/cv/poppins-700.woff2') format('woff2'),url('../libs/fonts/cv/poppins-700.woff') format('woff');}
  :root{
    --ink:#1C1B18;
    --paper:#E4E7E5;
    --card:#FFFFFF;
    --line:#D6DAD6;
    /* Gris de second rang de l'INTERFACE. Il valait #6E736F, ce qui ne
       donnait que 3,88:1 sur --paper, sous le seuil de 4,5:1. Le document,
       lui, garde #6E736F : voir le verrouillage sur .page-sheet. */
    --muted:#5F6460;
    --accent:#22221F;
    --accent-tan:#C9BFA6;
    /* Palette "chrome" de l'application (boutons, en-tête, tuiles), distincte
       de --accent qui reste la couleur du CV exporté. Bleu marine uni
       (confiance, sérieux corporate) : --grad-1 est la couleur de marque,
       --grad-2 une variante plus claire de la même teinte pour les états
       de survol/accent secondaire. --brand-gradient reste un dégradé
       CSS valide (nécessaire pour les usages en background-image) mais ses
       deux arrêts sont la même couleur : visuellement uni, pas un dégradé. */
    --grad-1:#122A40;
    --grad-2:#1D4265;
    /* Accent doré de la marque, contrepoint chaud du bleu nuit. --gold-ink
       est la seule variante qui atteint 4,5:1 sur fond clair : réservez-la
       au TEXTE, --gold aux aplats, filets et bordures. */
    --brand-ink:#1B3A5C;
    --gold:#D99B4A;
    --gold-ink:#8A5A16;
    --gold-soft:rgba(217,155,74,.14);
    --ui-sans:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;

    /* Typographie du DOCUMENT (CV et lettre), à ne pas confondre avec
       --ui-sans qui habille l'interface. Ces deux piles ne nomment que des
       polices standard PDF : Helvetica et Arial ont les mêmes métriques que
       StandardFonts.Helvetica, Times que StandardFonts.TimesRoman. Le PDF
       n'embarque donc aucune police et sort malgré tout identique à
       l'aperçu. Les avoir remplacées par Inter et Fraunces donnait un écran
       plus élégant que le fichier réellement envoyé au recruteur. */
    --doc-sans:Arial,Helvetica,sans-serif;
    --doc-serif:'Times New Roman',Times,serif;
    --brand-gradient:var(--grad-1);
    --brand-gradient-soft:linear-gradient(rgba(27,58,92,.07), rgba(27,58,92,.07));

    /* Neutres de contenu, communs à l'interface et aux modèles de CV. Ils
       étaient répétés en dur (--body seul apparaissait 12 fois), ce qui rendait
       impossible d'ajuster le gris du texte sans repasser partout.
       ATTENTION : --body, --paper-warm et --empty-hint sont repris à
       l'identique dans DES_COLOR (js/export-pdf-design.js) pour le rendu PDF,
       toute modification de valeur doit être répercutée là-bas. */
    --body:#3a3833;
    --paper-warm:#EFEDE6;
    --line-strong:#8a877d;
    --paper-2:#F3F0E8;
    --line-hover:#c7c2b3;
    --empty-hint:#c4c0b1; --brand-ink:#1B3A5C;

    /* Surface posée SUR --card : la carte d'une expérience, d'un diplôme.
       Elle était écrite en dur (#FCFBF8), donc restée claire en thème
       sombre, avec des libellés clairs par-dessus. */
    --card-2:#FCFBF8;

    /* Texte de second plan : plus discret que --ink, plus lisible que
       --muted. Il bascule avec le thème, contrairement à --body qui est
       un jeton du document. */
    --ink-2:#4A4945;

    /* Déclaré pour que les widgets natifs que l'on ne peint pas soi-même
       suivent le thème : calendrier de <input type="month">, barres de
       défilement, listes déroulantes. Sans lui, le sélecteur de date
       gardait son habillage clair sur un champ sombre. */
    color-scheme:light;

    /* Couleurs d'état. Deux variantes par état : la teinte vive pour les
       aplats, bordures et jauges, et une variante foncée réservée au TEXTE,
       seule cette dernière atteint le ratio de contraste 4.5:1 exigé sur fond
       clair (les teintes vives plafonnent entre 2,7:1 et 4:1, insuffisant).
       Auparavant deux verts distincts coexistaient pour le même sens
       (#2FA96A et #2f9e5c), faute de token. */
    --success:#2FA96A;
    /* Aplat vert qui porte du texte blanc. Fixe dans les deux thèmes :
       c'est le blanc posé dessus qui décide de sa valeur, pas la page. */
    --success-solid:#1E7A45;
    --success-text:#1E7A45;
    --warning:#D98C1F;
    --warning-text:#9A6210;
    --danger:#E24C4C;
    --danger-text:#C0392B;

    /* Échelle typographique de l'interface. Les modèles de CV n'en dépendent
       pas : leurs tailles sont en pt, valeurs typographiques délibérées et
       reprises telles quelles par les générateurs PDF. */
    --fs-2xs:10px;
    --fs-xs:11px;
    --fs-sm:12px;
    --fs-base:13px;
    --fs-md:14px;
    --fs-lg:16px;
    --fs-xl:21px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  .spectrum-bar{
    height:6px;width:100%;
    background:var(--brand-gradient);
  }
  .cv-progress-strip{
    display:flex;align-items:center;gap:10px;
    padding:7px 26px;
    background:var(--card);
    border-bottom:1px solid var(--line);
  }
  /* Bandeau affiché une fois, après import via "Optimiser mon CV" (voir
     startOptimizeCv/applyOptimizedCv dans js/app.js). */
  .cv-review-banner{
    display:flex;align-items:flex-start;gap:12px;
    padding:12px 26px;background:rgba(217,140,31,.1);border-bottom:1px solid rgba(217,140,31,.3);
  }
  .cv-review-banner.hidden{display:none;}
  .cv-review-banner p{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink);flex:1;}
  .cv-review-banner strong{color:var(--gold-ink);}
  .cv-review-banner-close{
    background:none;border:none;cursor:pointer;font-size:18px;line-height:1;
    color:var(--muted);padding:0 2px;flex-shrink:0;
  }
  .cv-review-banner-close:hover{color:var(--ink);}
  .cv-steps{
    list-style:none;margin:0;padding:0;display:flex;align-items:center;
    flex:0 1 auto;min-width:0;
  }
  /* Le trait de liaison entre deux étapes se colore avec l'étape franchie :
     il montre le chemin parcouru, pas seulement l'endroit où l'on est. */
  /* Le remplissage du trait (couleur, image et position de fond) est défini
     plus bas, avec les micro-animations : le raccourci `background` est évité
     ici, il réinitialiserait le dégradé qui sert à animer la progression. */
  .cv-step + .cv-step::before{
    content:'';display:block;width:18px;height:2px;flex-shrink:0;
  }
  .cv-step{display:flex;align-items:center;min-width:0;}
  .cv-step button{
    display:flex;align-items:center;gap:7px;background:none;border:0;padding:3px 2px;
    font:inherit;color:var(--muted);cursor:pointer;white-space:nowrap;
  }
  .cv-step-dot{
    width:19px;height:19px;flex-shrink:0;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-family:'Roboto Mono',monospace;font-size:10px;font-weight:600;
    /* --muted sur --line ne donne que 4,27:1 pour un chiffre de dix
       pixels. --ink-2 monte à 6,4:1 en restant en retrait. */
    background:var(--line);color:var(--ink-2);
    transition:background .25s, color .25s;
  }
  .cv-step-name{font-size:11.5px;font-weight:600;}
  .cv-step.current button{color:var(--ink);}
  .cv-step.current .cv-step-dot{background:var(--brand-gradient);color:#fff;}
  .cv-step.done button{color:var(--success-text);}
  .cv-step.done .cv-step-dot{background:var(--success-solid);color:#fff;font-size:0;}
  /* L'étape franchie affiche une coche à la place de son numéro : le numéro n'a
     plus d'utilité une fois l'étape faite. */
  .cv-step.done .cv-step-dot::after{content:'✓';font-size:11px;line-height:1;}
  .cv-progress-text{
    font-size:12px;font-weight:600;color:var(--muted);
    white-space:nowrap;margin-left:auto;overflow:hidden;text-overflow:ellipsis;
  }
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--ui-sans);
    -webkit-font-smoothing:antialiased;
    /* Le hero de l'accueil déborde volontairement en 100vw pour aller d'un bord
       à l'autre. Or 100vw inclut la barre de défilement : sans ce clip, une
       barre horizontale apparaîtrait sur toute l'application. « clip » plutôt
       que « hidden » pour ne pas créer de conteneur de défilement, qui
       casserait les éléments collants (position:sticky) de l'éditeur. */
    overflow-x:clip;
  }
  .app-shell{
    display:grid;
    grid-template-columns: var(--editor-w, 420px) 6px 1fr;
    min-height:100vh;
    /* Sans cela les lignes de la grille se partagent les 100vh : sur une
       section au contenu court, le bandeau absorbait le surplus et montait à
       249 px pour un contenu de 39 px. Les lignes prennent leur hauteur
       naturelle, et l'éditeur de CV continue de remplir l'écran par ses
       propres hauteurs. */
    align-content:start;
  }
  .resizer{
    position:relative;
    cursor:col-resize;
    background:transparent;
  }
  .resizer::after{
    content:"";position:absolute;top:0;bottom:0;left:2px;width:2px;
    background:var(--line);transition:background .15s ease, width .15s ease;
  }
  .resizer:hover::after,.resizer:focus-visible::after{
    background:var(--grad-1);width:3px;
  }
  body.resizing{cursor:col-resize;user-select:none;}
  body.resizing .resizer::after{background:var(--grad-1);width:3px;}
  /* ---------- HEADER ----------
     Barre collée en haut : le titre, la navigation entre sections et le bouton
     Télécharger restent atteignables sans avoir à remonter un long formulaire.
     Elle fonctionne parce que body utilise overflow-x:clip et non hidden, qui
     créerait un conteneur de défilement et annulerait le position:sticky. */
  .brandbar{
    grid-column:1/-1;
    position:sticky;top:0;z-index:45;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 26px;
    border-bottom:1px solid var(--line);
    background:var(--card);
    background-image:var(--brand-gradient-soft);
    flex-wrap:wrap;
    gap:12px;
  }
  .brandbar h1{
    font-family:var(--ui-sans);
    font-weight:700;
    font-size:19px;
    margin:0;
    letter-spacing:-.01em;
    color:var(--ink);
  }
  .brandbar .tag{
    font-family:'Roboto Mono',monospace;
    font-size:10.5px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .toolbar-right{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
  .mode-toggle{
    display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;
  }
  .mode-toggle button{
    font-family:'Roboto Mono',monospace;font-size:11px;font-weight:500;
    text-transform:uppercase;letter-spacing:.03em;
    padding:8px 14px;border:none;background:var(--card);color:var(--muted);cursor:pointer;
    transition:background .15s ease, color .15s ease;
  }
  .mode-toggle button.active{background:var(--brand-gradient);color:#fff;}
  .lang-toggle{display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;}
  /* Drapeaux dessinés en SVG inline plutôt que tirés de flag-icons via un
     CDN : deux icônes ne justifiaient pas une requête vers un tiers, qui voyait
     l'adresse IP de chaque visiteur alors que le site promet qu'aucune donnée
     ne part ailleurs. */
  .lang-toggle button .flag{display:block;width:20px;height:14px;border-radius:2px;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);}
  .lang-toggle button{
    font-family:'Roboto Mono',monospace;font-size:11px;font-weight:500;
    padding:8px 11px;border:none;background:var(--card);color:var(--muted);cursor:pointer;
    transition:background .15s ease,color .15s ease;display:flex;align-items:center;gap:4px;
  }
  .lang-toggle button.active{background:var(--brand-gradient);color:#fff;}
  .lang-toggle button span{font-size:14px;line-height:1;}
  .sig-mode-toggle{margin-bottom:12px;}
  .sig-mode-toggle button{padding:7px 16px;}
  .sig-canvas{
    width:100%;max-width:360px;height:120px;display:block;
    border:1.5px solid var(--line);border-radius:8px;
    background:#fff;cursor:crosshair;touch-action:none;
  }
  .sig-canvas-actions{margin-top:8px;}
  /* ----- Réglages de couleur, repliés derrière un bouton -----
     Dix-sept harmonies et vingt-quatre pastilles étalées occupaient six
     rangées de la barre d'outils : les réglages de mise en page, qu'on
     change bien plus souvent, se retrouvaient noyés dessous. Tout vit
     maintenant dans un panneau volant ; le bouton montre l'accord en cours,
     seule information utile une fois refermé. */
  .color-picker-group{position:relative;}
  .color-toggle{
    display:flex;align-items:center;gap:7px;
    background:var(--card);border:1px solid var(--line);border-radius:8px;
    padding:4px 9px 4px 5px;cursor:pointer;
    font-family:var(--ui-sans);font-size:11.5px;font-weight:600;color:var(--ink);
    transition:border-color .15s ease;
  }
  .color-toggle:hover,.color-toggle[aria-expanded="true"]{border-color:var(--accent);}
  .color-toggle-chips{display:flex;width:26px;height:18px;border-radius:5px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.12);}
  .color-toggle-chips span{display:block;flex:1 1 0;}
  .color-toggle-chips span:nth-child(2){flex:0 0 7px;}
  .color-panel{
    position:absolute;top:calc(100% + 7px);right:0;z-index:60;
    width:min(86vw,282px);
    background:var(--card);border:1px solid var(--line);border-radius:12px;
    padding:12px;box-shadow:0 10px 30px rgba(0,0,0,.13);
  }
  .color-panel-title{
    margin:0 0 7px;font-family:var(--ui-sans);font-size:10.5px;font-weight:700;
    letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  }
  .color-panel-title+*{margin-bottom:13px;}
  .color-panel-row{display:flex;align-items:center;gap:7px;margin-bottom:11px;}
  .color-panel-row .color-target-select{flex:1 1 auto;}
  /* Dans le panneau, les deux grilles s'étendent sur toute sa largeur : le
     plafond qui les tenait dans la barre n'a plus lieu d'être. */
  .color-panel .theme-row,
  .color-panel .swatches{max-width:none;}

  /* Harmonies : une pastille par accord, montrant ses trois couleurs dans
     l'ordre où elles apparaissent sur le CV (fond de colonne, repères de la
     colonne, titres de la page). */
  /* Rubriques prêtes à l'emploi, sous la liste d'ordre des sections. */
  .preset-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}
  .preset-chip{
    font-family:var(--ui-sans);font-size:11.5px;font-weight:600;
    color:var(--ink);background:var(--card);
    border:1px solid var(--line);border-radius:99px;
    padding:5px 11px;cursor:pointer;
    transition:border-color .15s ease,color .15s ease;
  }
  .preset-chip:hover{border-color:var(--grad-1);color:var(--grad-1);}
  .theme-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
  .theme-chip{
    display:flex;width:26px;height:18px;border-radius:5px;overflow:hidden;
    border:1.5px solid transparent;box-shadow:0 0 0 1px rgba(0,0,0,.12);
    padding:0;cursor:pointer;transition:transform .12s ease;
  }
  .theme-chip span{display:block;flex:1 1 0;}
  /* La bande du milieu porte les repères, toujours clairs : sans ce filet
     elle se confondrait avec le blanc de la page. */
  .theme-chip span:nth-child(2){flex:0 0 7px;}
  .theme-chip:hover{transform:scale(1.12);}
  .theme-chip.active{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);}
  /* La palette est passée de 8 à 24 teintes : sans plafond de largeur, elle
     poussait la liste des zones et la barre d'outils hors de l'écran. */
  .swatches{display:flex;gap:7px;align-items:center;flex-wrap:wrap;}
  .swatches.disabled{opacity:.25;pointer-events:none;}
  .swatch{
    width:19px;height:19px;border-radius:50%;
    border:2px solid transparent;cursor:pointer;
    padding:0;box-shadow:0 0 0 1px rgba(0,0,0,.08);
    transition:transform .12s ease;
  }
  .swatch:hover{transform:scale(1.15);}
  .swatch.active{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);}
  .swatch-custom{
    width:19px;height:19px;border-radius:50%;border:none;
    padding:0;cursor:pointer;background:conic-gradient(from 90deg,#e04c4c,#e0a94c,#c7e04c,#4ce07a,#4cc2e0,#4c5be0,#9a4ce0,#e04ca0,#e04c4c);
    box-shadow:0 0 0 1px rgba(0,0,0,.08);
    position:relative;transition:transform .12s ease;
  }
  .swatch-custom:hover{transform:scale(1.15);}
  .swatch-custom.active{box-shadow:0 0 0 1px var(--ink), 0 0 0 3px #fff inset;}
  .color-target-select{
    font-family:'Roboto Mono',monospace;font-size:10.5px;color:var(--ink);
    border:1px solid var(--line);border-radius:6px;padding:4px 6px;background:var(--card);cursor:pointer;
  }
  .color-reset-btn{
    font-size:13px;line-height:1;border:1px solid var(--line);border-radius:6px;
    background:var(--card);color:var(--muted);cursor:pointer;padding:4px 6px;
  }
  .color-reset-btn:hover{color:var(--ink);border-color:var(--ink);}
  .color-reset-btn.hidden{display:none;}

  /* ---------- Retouche au pinceau (js/cv-paint.js) ---------- */
  .paint-row{display:flex;flex-direction:column;gap:7px;}
  .paint-toggle{
    display:flex;align-items:center;justify-content:center;gap:7px;width:100%;
    font-family:var(--ui-sans);font-size:12.5px;font-weight:600;color:var(--ink);
    background:var(--card);border:1px solid var(--line);border-radius:8px;
    padding:8px 10px;cursor:pointer;transition:border-color .15s ease,background .15s ease;
  }
  .paint-toggle:hover{border-color:var(--accent);}
  .paint-toggle.active{background:var(--grad-1);border-color:var(--grad-1);color:#fff;}
  .paint-hint{margin:0;font-size:11.5px;line-height:1.45;color:var(--muted);}
  .paint-summary-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
  .paint-summary{font-size:11.5px;color:var(--muted);}
  body.cv-paint-mode #designPage,body.cv-paint-mode #designPage *{cursor:crosshair !important;}
  .paint-hover{
    position:fixed;z-index:70;pointer-events:none;display:none;
    outline:2px dashed var(--gold);outline-offset:1px;border-radius:2px;
    background:rgba(217,155,74,.08);
  }
  .paint-done{
    position:fixed;z-index:75;left:50%;bottom:18px;transform:translateX(-50%);
    display:flex;align-items:center;gap:8px;
    font-family:var(--ui-sans);font-size:13px;font-weight:600;color:#fff;
    background:var(--grad-1);border:0;border-radius:99px;padding:11px 18px;cursor:pointer;
    box-shadow:0 8px 24px rgba(0,0,0,.25);
  }
  .paint-pop{
    position:fixed;z-index:80;width:300px;max-height:min(80vh,560px);overflow-y:auto;
    background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;
    padding:12px;box-shadow:0 14px 40px rgba(0,0,0,.22);font-family:var(--ui-sans);
  }
  /* Téléphone : le panneau devient une feuille posée en bas de l'écran, le
     CV reste visible au-dessus pour juger la couleur. */
  .paint-pop.sheet{
    left:0;right:0;bottom:0;top:auto;width:auto;max-height:62vh;
    border-radius:16px 16px 0 0;padding:14px 16px calc(16px + env(safe-area-inset-bottom));
  }
  .paint-pop-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
  .paint-pop-title{margin:0;font-size:13px;font-weight:700;}
  .paint-pop-close{border:0;background:none;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;padding:0 4px;}
  .paint-layers{display:flex;flex-direction:column;gap:3px;margin-bottom:10px;}
  .paint-layer{
    display:flex;align-items:center;gap:9px;width:100%;text-align:left;
    font-family:var(--ui-sans);font-size:12.5px;color:var(--ink);
    background:transparent;border:1px solid transparent;border-radius:8px;padding:6px 8px;cursor:pointer;
  }
  .paint-layer:hover{background:var(--paper);}
  .paint-layer.active{border-color:var(--grad-1);background:var(--paper);font-weight:600;}
  .paint-layer-chip{flex:0 0 auto;width:18px;height:18px;border-radius:5px;box-shadow:0 0 0 1px rgba(0,0,0,.18);}
  .paint-layer-name{flex:1 1 auto;min-width:0;}
  .paint-layer-mod{color:var(--gold);font-size:10px;}
  .paint-swatches{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px;}
  .paint-pop.sheet .paint-swatches .swatch{width:26px;height:26px;}
  .paint-custom{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  /* Sélecteurs doublés : les règles globales des formulaires (label en
     capitales à chasse fixe, champs pleine largeur) passeraient devant. */
  .paint-pop label.paint-native{
    display:flex;align-items:center;gap:6px;margin:0;
    font-family:var(--ui-sans);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;
    color:var(--ink);cursor:pointer;
  }
  .paint-native input{width:30px;height:26px;padding:0;border:1px solid var(--line);border-radius:6px;background:none;cursor:pointer;}
  .paint-pop input.paint-hex{
    width:92px;font-family:'Roboto Mono',monospace;font-size:12px;color:var(--ink);
    background:var(--card);border:1px solid var(--line);border-radius:6px;padding:5px 7px;
  }
  .paint-reset{
    margin-left:auto;font-family:var(--ui-sans);font-size:12px;color:var(--muted);
    background:none;border:1px solid var(--line);border-radius:6px;padding:5px 8px;cursor:pointer;
  }
  .paint-reset:hover{color:var(--ink);border-color:var(--ink);}
  .paint-reset.hidden{display:none;}
  .paint-note{margin:8px 0 0;font-size:11.5px;line-height:1.4;color:var(--muted);}
  .paint-note:empty{display:none;}

  /* ---------- Sélecteur de couleur interactif (glisser / mélanger / valider) ---------- */
  .color-picker-pop{
    position:absolute;z-index:60;top:calc(100% + 10px);left:0;
    width:220px;background:var(--card);border:1px solid var(--line);border-radius:12px;
    box-shadow:0 10px 32px rgba(0,0,0,.18);padding:14px;
    display:flex;flex-direction:column;gap:10px;
  }
  .cp-sv{
    position:relative;width:100%;height:130px;border-radius:8px;overflow:hidden;
    cursor:crosshair;touch-action:none;
    background:linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent);
  }
  .cp-sv-thumb{
    position:absolute;width:14px;height:14px;border-radius:50%;
    border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
    transform:translate(-50%,-50%);pointer-events:none;
  }
  .cp-hue{
    position:relative;width:100%;height:14px;border-radius:7px;cursor:pointer;touch-action:none;
    background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
  }
  .cp-hue-thumb{
    position:absolute;top:50%;width:16px;height:16px;border-radius:50%;
    background:#fff;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
    transform:translate(-50%,-50%);pointer-events:none;
  }
  .cp-row{display:flex;align-items:center;gap:8px;}
  .cp-preview{width:26px;height:26px;border-radius:7px;flex-shrink:0;border:1px solid var(--line);}
  .cp-hex{
    flex:1;font-family:'Roboto Mono',monospace;font-size:12.5px;
    border:1px solid var(--line);border-radius:6px;padding:6px 8px;
    text-transform:uppercase;color:var(--ink);min-width:0;
  }
  .cp-hex:focus{outline:none;border-color:var(--grad-1);box-shadow:0 0 0 3px rgba(27,58,92,.12);}
  .cp-actions{display:flex;gap:8px;justify-content:flex-end;}
  .cp-btn{
    font-family:'Roboto Mono',monospace;font-size:11px;font-weight:500;text-transform:uppercase;
    letter-spacing:.03em;border-radius:6px;padding:7px 12px;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--ink);
  }
  .cp-btn.validate{background:var(--brand-gradient);color:#fff;border-color:transparent;}
  .cp-btn:hover{opacity:.88;}

  /* ---------- Preview toolbar (contextuel, au-dessus de l'aperçu) ---------- */
  .preview-toolbar{
    grid-column:1/-1;
    display:flex;align-items:center;flex-wrap:wrap;gap:18px;
    padding:11px 26px;
    background:var(--card);
    border-bottom:1px solid var(--line);
  }
  .pt-group{display:flex;align-items:center;gap:9px;}
  .pt-label{
    font-family:'Roboto Mono',monospace;font-size:10px;
    text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  }
  .zoom-ctrl{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:7px;overflow:hidden;}
  .zoom-ctrl button{
    width:26px;height:26px;border:none;background:var(--card);color:var(--ink);
    font-size:14px;cursor:pointer;line-height:1;
  }
  .zoom-ctrl button:hover{background:var(--paper);}
  .zoom-ctrl span{
    font-family:'Roboto Mono',monospace;font-size:11px;color:var(--muted);
    padding:0 8px;min-width:42px;text-align:center;
  }
  .view-tabs{display:none;border:1px solid var(--line);border-radius:3px;overflow:hidden;}
  .view-tabs button{
    font-family:'Roboto Mono',monospace;font-size:11px;font-weight:500;
    text-transform:uppercase;letter-spacing:.03em;
    padding:9px 16px;border:none;background:var(--card);color:var(--muted);cursor:pointer;
  }
  .view-tabs button.active{background:var(--brand-gradient);color:#fff;}
  .btn{
    font-family:'Roboto Mono',monospace;
    font-size:11.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
    border-radius:7px;
    padding:10px 16px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;gap:7px;
    border:1px solid var(--line);background:var(--card);color:var(--ink);
    transition:border-color .15s ease, background-color .15s ease, transform .1s ease, box-shadow .15s ease;
  }
  .btn:hover{border-color:var(--brand-ink);color:var(--brand-ink);transform:translateY(-1px);}
  .btn:active{transform:translateY(0);}
  /* Ombre neutre et courte, pas un halo coloré : une ombre teintée qui déborde
     du bouton ne correspond à aucune lumière réelle, et c'est ce qui donne
     l'impression d'une interface fabriquée à la va-vite. */
  .btn.primary{background:var(--brand-gradient);color:#fff;border-color:transparent;box-shadow:0 1px 3px rgba(0,0,0,.18);}
  .btn.primary:hover{opacity:.92;color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.22);}
  /* Effet Von Restorff : moment bref où le CTA "Télécharger" se distingue du
     reste de l'interface, déclenché une fois le CV complet. Un contour franc
     remplace l'ancien halo diffus : il attire l'oeil aussi bien, sans flou. */
  .btn.primary.cta-ready{box-shadow:0 0 0 3px var(--brand-ink), 0 1px 3px rgba(0,0,0,.18);}
  @media (prefers-reduced-motion: no-preference){
    .btn.primary.cta-ready{animation:cvCtaPulse 1.4s ease-in-out 2;}
  
  
  }
  @keyframes cvCtaPulse{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.06);}
  }
  .btn:disabled{opacity:.55;cursor:wait;transform:none;}
  .btn svg{flex-shrink:0;}
  .btn .spinner{
    width:12px;height:12px;border-radius:50%;flex-shrink:0;
    border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
    animation:spin .7s linear infinite;
  }
  .btn:not(.primary) .spinner{border-color:rgba(28,27,24,.2);border-top-color:var(--ink);}
  @keyframes spin{to{transform:rotate(360deg);}}

  /* Focus clavier visible partout (accessibilité) */
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
    outline:2px solid var(--ink);outline-offset:2px;
  }

  .paywall-badge{
    font-family:'Roboto Mono',monospace;font-size:10px;font-weight:600;
    letter-spacing:.04em;color:var(--grad-1);
    padding:4px 9px;border:1px solid rgba(27,58,92,.35);border-radius:20px;
    white-space:nowrap;background:rgba(27,58,92,.06);
  }
  /* Le vert était écrit en dur dans sa variante foncée : illisible en
     thème sombre. Le jeton, lui, bascule. */
  .paywall-badge.unlocked{color:var(--success-text);border-color:var(--success-text);background:rgba(47,169,106,.10);}

  .history-btns{display:flex;gap:4px;}
  .icon-btn{
    width:36px;min-height:36px;padding:0;font-size:16px;line-height:1;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .icon-btn:disabled{opacity:.35;cursor:not-allowed;}

  /* ---------- Menu de choix de téléchargement (PDF, + photo IA) ---------- */
  .dl-dropdown{position:relative;}
  .dl-menu{
    position:absolute;top:calc(100% + 8px);right:0;
    background:var(--card);border:1px solid var(--line);border-radius:10px;
    box-shadow:0 14px 34px rgba(0,0,0,.16);
    min-width:250px;overflow:hidden;z-index:60;
  }
  .dl-menu.hidden{display:none;}
  .dl-menu button{
    display:flex;align-items:center;gap:11px;width:100%;text-align:left;
    padding:10px 13px;border:none;background:none;cursor:pointer;
    font-family:inherit;color:var(--ink);
  }
  .dl-menu button:hover{background:var(--paper);}
  .dl-menu button+button{border-top:1px solid var(--line);}
  .dl-icon{flex-shrink:0;}
  .dl-text{display:flex;flex-direction:column;}
  .dl-text b{font-size:12.5px;font-weight:700;}
  .dl-text span{font-size:11px;color:var(--muted);margin-top:1px;}

  /* Récupération d'un paiement perdu. Discret par construction : c'est une
     issue de secours, elle ne doit pas concurrencer le bouton d'achat ni
     suggérer qu'on peut télécharger sans payer. */
  .dl-recover{border-top:1px solid var(--line);}
  .dl-menu .dl-recover-link{
    display:block;width:100%;padding:9px 13px;
    font-size:10.5px;color:var(--muted);text-align:left;
    text-decoration:underline;text-underline-offset:2px;
  }
  .dl-menu .dl-recover-link:hover{color:var(--ink);}
  .dl-recover-form{padding:2px 13px 12px;}
  .dl-recover-form.hidden{display:none;}
  .dl-recover-form label{
    display:block;font-size:10.5px;color:var(--muted);margin-bottom:5px;line-height:1.4;
  }
  .dl-recover-form input{
    width:100%;padding:7px 9px;margin-bottom:7px;
    border:1px solid var(--line);border-radius:7px;
    background:var(--card-2);color:var(--ink);
    font-family:inherit;font-size:12.5px;
  }
  /* Le bouton du formulaire échappe à la mise en page pleine largeur des
     entrées du menu : c'est une validation, pas un choix de format. */
  .dl-menu .dl-recover-form .btn{
    display:inline-flex;width:auto;justify-content:center;
    padding:7px 14px;font-size:12px;border-radius:7px;
  }
  /* Prix du téléchargement de la lettre, sous ses deux boutons. Discret mais
     lisible : le montant doit être connu avant le clic, jamais après. */
  /* Les trois façons de démarrer une lettre, en tête de section. Elles
     s'empilent sur téléphone plutôt que de se comprimer : trois libellés sur
     une ligne étroite deviendraient illisibles. */
  .letter-starts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
  .letter-starts .btn{flex:1 1 auto;justify-content:center;}
  @media (max-width:560px){
    .letter-starts{flex-direction:column;}
    .letter-starts .btn{width:100%;}
  }

  .letter-offer-status{
    margin:6px 0 0;font-size:11px;line-height:1.45;color:var(--muted);
  }
  .letter-offer-status.ok{color:#1e7a43;}
  .letter-offer-status.warn{color:#8a5a00;}

  /* Assistant de candidature spontanée. Deux colonnes sur écran large, une
     seule sur téléphone : le formulaire est long, il doit rester lisible sans
     zoom sur mobile, d'où le défilement interne plutôt qu'une page qui file. */
  /* Double classe voulue : .modal-box, déclarée plus loin dans ce fichier,
     fixe max-width:380px et son propre padding. À spécificité égale, la
     règle la plus tardive gagne, et la modale restait bloquée à 380 px sur
     ordinateur, ce qui ne se voyait pas sur téléphone (écran plus étroit). */
  .modal-box.spontaneous-box{max-width:960px;width:100%;padding:34px 36px 26px;}
  /* Sur téléphone, l'overlay garde 20 px de marge sur tous les côtés : pour
     cette modale, qui porte neuf champs, on la réduit afin de gagner presque
     toute la largeur de l'écran. */
  #spontaneousModal{padding:20px;}
  @media (max-width:560px){
    #spontaneousModal{padding:6px;}
  }
  /* La boîte se plafonne déjà à la hauteur de l'écran (.modal-box) ; on donne
     ici au corps la plus grande part possible, le titre et les deux boutons
     occupant le reste. Neuf champs demandent de la place : trop serrés, ils se
     lisent comme un formulaire administratif et personne ne les remplit. */
  .spontaneous-box .modal-body{max-height:none;}
  .spont-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px;margin-top:22px;}
  .spont-full{grid-column:1 / -1;}
  .spont-field label{
    display:block;font-size:12.5px;font-weight:600;color:var(--ink);
    margin-bottom:7px;line-height:1.35;
  }
  .spont-req{color:#b3261e;}
  .spont-field input, .spont-field textarea, .spont-field select{
    width:100%;padding:11px 12px;
    border:1px solid var(--line);border-radius:8px;
    background:var(--card-2);color:var(--ink);
    font-family:inherit;font-size:14px;line-height:1.45;
  }
  .spont-field textarea{resize:vertical;min-height:64px;}
  .spont-hint{margin:7px 0 0;font-size:11.5px;line-height:1.5;color:var(--muted);}
  .spontaneous-box .modal-actions{margin-top:24px;}
  @media (max-width:560px){
    .modal-box.spontaneous-box{padding:22px 18px 18px;}
    .spont-grid{grid-template-columns:1fr;gap:18px;margin-top:18px;}
  }

  .letter-price-note{
    margin:8px 0 0;font-size:11.5px;line-height:1.5;color:var(--muted);
  }

  .dl-recover-help{
    margin:8px 0 0;font-size:10px;line-height:1.5;color:var(--muted);
  }


  /* ---------- Certificates / attachments ---------- */
  .cert-item{
    display:flex;align-items:center;gap:10px;
    border:1px solid var(--line);border-radius:8px;
    padding:8px 10px;margin-bottom:8px;background:var(--card-2);
  }
  .cert-thumb{
    width:38px;height:38px;border-radius:5px;flex-shrink:0;
    background:var(--paper);border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;
    font-size:16px;overflow:hidden;
  }
  .cert-thumb img{width:100%;height:100%;object-fit:cover;}
  .cert-info{flex:1;min-width:0;}
  .cert-name{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .cert-meta{font-size:11px;color:var(--muted);}
  .cert-actions{display:flex;gap:2px;flex-shrink:0;}
  .cert-rotate{
    border:1px solid var(--line);background:var(--card);color:var(--ink);
    cursor:pointer;font-size:13px;flex-shrink:0;width:24px;height:24px;border-radius:6px;
    display:flex;align-items:center;justify-content:center;
  }
  .cert-rotate:hover{border-color:var(--ink);}
  .cert-del{
    border:none;background:transparent;color:var(--muted);
    cursor:pointer;font-size:16px;flex-shrink:0;width:24px;height:24px;border-radius:50%;
  }
  .cert-del:hover{color:var(--danger-text);}

  /* ---------- Aperçu réel des diplômes/attestations dans le CV ---------- */
  .certs-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(38mm,1fr));gap:4mm;margin-top:2mm;}
  .certs-preview-item img{
    display:block;width:100%;max-height:55mm;object-fit:contain;
    background:#fff;border:1px solid var(--line);border-radius:2mm;
  }
  .certs-preview-item .cp-pdf{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5mm;
    height:32mm;background:var(--paper);border:1px solid var(--line);border-radius:2mm;
    color:var(--muted);
  }
  .certs-preview-item .cp-name{
    font-size:8pt;color:var(--muted);margin-top:1.5mm;
    text-align:center;word-break:break-word;line-height:1.3;
  }

  /* ---------- EDITOR ---------- */
  .editor{
    padding:26px;
    overflow-y:auto;
    max-height:calc(100vh - 109px);
    border-right:1px solid var(--line);
  }
  .section{
    margin-bottom:24px;
    padding:20px 20px 22px;
    border-radius:14px;
    border:1px solid var(--line);
    background:var(--card);
    box-shadow:0 1px 2px rgba(28,27,24,.03);
    transition:box-shadow .18s ease, border-color .18s ease;
    position:relative;
    overflow:hidden;
  }
  .section::before{
    content:"";position:absolute;top:0;left:0;right:0;height:3px;
    background:var(--brand-gradient);opacity:.85;
  }
  .section:hover{box-shadow:0 4px 18px rgba(27,58,92,.10);border-color:rgba(27,58,92,.28);}
  .section h2{
    font-family:'Roboto Mono',monospace;
    font-size:10.5px;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--brand-ink);
    font-weight:600;
    margin:0 0 14px;
  }
  .collapsible-section > h2{
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    user-select:none;
    border-radius:6px;
  }
  .collapsible-section > h2:focus-visible{outline:2px solid var(--grad-1);outline-offset:3px;}

  /* Poignée de déplacement des sections réordonnables. `order:-1` la place
     avant le titre sans dépendre de l'ordre du DOM, et `margin-right:auto`
     laisse le chevron collé à droite (le h2 est en space-between). */
  .section-drag-handle{
    order:-1;cursor:grab;color:var(--muted);font-size:12px;line-height:1;
    padding:2px 6px 2px 0;letter-spacing:-2px;
    transition:color .15s ease;
  }
  .section-drag-handle:hover{color:var(--grad-1);}
  .section-drag-handle:active{cursor:grabbing;}
  .section-drag-handle:focus-visible{outline:2px solid var(--grad-1);outline-offset:2px;border-radius:3px;}
  .collapsible-section > h2 > .section-drag-handle + *{margin-right:auto;}
  .section.form-section-dragging{opacity:.5;}
  /* Trait d'insertion : indique de quel côté la section viendra se placer. */
  .section.form-section-over-before{box-shadow:0 -3px 0 -1px var(--grad-2);}
  .section.form-section-over-after{box-shadow:0 3px 0 -1px var(--grad-2);}
  .collapsible-section > h2 .section-chevron{
    font-size:9px;color:var(--muted);
    transition:transform .18s ease;
    flex-shrink:0;
  }
  .collapsible-section.collapsed > h2{margin-bottom:0;}
  .collapsible-section.collapsed > h2 .section-chevron{transform:rotate(-90deg);}
  .collapsible-section.collapsed > *:not(h2){
    display:none !important;
  }
  label{
    display:block;
    font-family:'Roboto Mono',monospace;
    font-size:10.5px;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--muted);
    margin:14px 0 6px;
  }
  label.field-icon-label{display:flex;align-items:center;gap:6px;}
  label.field-icon-label svg{flex-shrink:0;color:var(--muted);}
  label:first-child{margin-top:0;}
  input[type=text],input[type=email],input[type=tel],input[type=url],input[type=month],textarea,select{
    width:100%;
    font-family:var(--ui-sans);
    font-size:14px;
    padding:10px 12px;
    border:1.5px solid var(--line);
    border-radius:8px;
    background:var(--paper);
    color:var(--ink);
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  textarea{background:var(--card);}
  input[type=text]:hover,input[type=email]:hover,input[type=tel]:hover,input[type=url]:hover,input[type=month]:hover,textarea:hover,select:hover{
    border-color:var(--line-hover);
  }
  input[type=month]{
    /* Le picker natif du navigateur affiche déjà un calendrier avec
       navigation année/mois : rien à reconstruire ici. Son habillage
       vient du color-scheme de :root, donc il suit le thème. */
    min-width:0;
  }
  input[type=month]:disabled{
    background:var(--paper);color:var(--muted);cursor:not-allowed;
  }
  input:focus,textarea:focus,select:focus{
    outline:none;border-color:var(--grad-1);
    background:var(--card);
    box-shadow:0 0 0 3px rgba(27,58,92,.12);
  }
  textarea{
    resize:none;
    min-height:100px;
    max-height:480px;
    line-height:1.65;
    overflow-y:hidden;
    background:var(--card);
  }
  textarea:not(:focus){background:var(--card);}
  select{
    appearance:none;-webkit-appearance:none;-moz-appearance:none;
    cursor:pointer;padding-right:30px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236E736F' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center;
  }
  .field-error{
    display:none;font-size:11px;color:var(--danger-text);margin-top:4px;
  }
  .field-error.show{display:block;}
  input.invalid{border-color:var(--danger-text);}
  input.invalid:focus{box-shadow:0 0 0 3px rgba(179,51,51,.1);}
  /* min-width:0 sur les colonnes de la grid : sans ça, les enfants (notamment
     input[type=month], dont la largeur intrinsèque du picker natif dépasse
     souvent 1fr) refusent de rétrécir et débordent hors de la tuile. */
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .row2 > div{min-width:0;}
  .current-toggle{
    display:flex;align-items:center;gap:6px;
    margin:7px 0 0;font-size:11.5px;color:var(--muted);
    cursor:pointer;user-select:none;
  }
  .current-toggle input[type=checkbox]{
    width:14px;height:14px;margin:0;cursor:pointer;accent-color:var(--ink);
  }
  .rt-toolbar{display:flex;gap:4px;margin:4px 0;}
  .rt-btn{
    width:26px;height:24px;padding:0;border:1.5px solid var(--line);border-radius:6px;
    background:var(--card);color:var(--ink);font-size:12px;cursor:pointer;line-height:1;
  }
  .rt-btn:hover{border-color:var(--ink);}
  .rt-btn b,.rt-btn i{pointer-events:none;}
  .section-order-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;}
  .section-order-item{
    display:flex;align-items:center;gap:8px;padding:8px 10px;
    border:1.5px solid var(--line);border-radius:8px;background:var(--card);
    cursor:grab;font-size:13px;color:var(--ink);user-select:none;
  }
  .section-order-item:active{cursor:grabbing;}
  .section-order-item.dragging{opacity:.4;}
  .section-order-item.soi-hidden{opacity:.5;border-style:dashed;}
  .soi-handle{color:var(--muted);font-size:14px;line-height:1;}
  .soi-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .soi-actions{display:flex;gap:4px;flex-shrink:0;}
  .soi-btn{
    width:30px;height:30px;padding:0;border:1.5px solid var(--line);border-radius:7px;
    background:var(--card);color:var(--ink);font-size:13px;cursor:pointer;line-height:1;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .soi-btn:hover:not(:disabled){border-color:var(--ink);}
  .soi-btn:disabled{opacity:.35;cursor:not-allowed;}
  .soi-btn.soi-eye.active{border-color:var(--ink);background:var(--paper-2);}
  .icon-picker{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px;}
  .icon-choice{
    width:32px;height:32px;padding:0;border:1.5px solid var(--line);border-radius:8px;
    background:var(--card);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  }
  .icon-choice:hover{border-color:var(--ink);}
  .icon-choice.active{border-color:var(--ink);background:var(--paper-2);}
  /* Barre d'outils en flux normal (pas de positionnement absolu) au-dessus de
     chaque élément de section personnalisée : garantit qu'elle ne chevauche
     jamais le champ "Titre" en dessous, quelle que soit la taille d'écran. */
  .entry-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:0 0 8px;}
  .entry-reorder{display:flex;gap:6px;}
  .entry-toolbar .del{position:static;width:22px;height:22px;flex-shrink:0;}
  .custom-sec-icon{margin-right:4px;}
  .entry{
    border:1.5px solid var(--line);
    border-left:3px solid var(--grad-1);
    border-radius:10px;
    padding:14px;
    margin-bottom:12px;
    position:relative;
    background:var(--card-2);
    transition:border-color .15s ease, box-shadow .15s ease, transform .12s ease;
  }
  .entry:hover{border-color:var(--line-hover);border-left-color:var(--grad-2);box-shadow:0 3px 12px rgba(27,58,92,.10);transform:translateY(-1px);}
  .entry .del{
    position:absolute;top:10px;right:10px;
    width:22px;height:22px;border-radius:50%;
    border:none;background:transparent;color:var(--muted);
    cursor:pointer;font-size:15px;line-height:1;
    transition:background-color .15s ease, color .15s ease;
  }
  .entry .del:hover{color:var(--danger-text);background:rgba(192,57,43,.08);}
  .add-btn{
    width:100%;
    font-family:'Roboto Mono',monospace;
    font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:.03em;
    padding:11px;border-radius:9px;
    border:1.5px dashed var(--brand-ink);
    background:var(--brand-gradient-soft);color:var(--brand-ink);
    cursor:pointer;
    transition:border-color .15s ease, color .15s ease, background-color .15s ease, transform .12s ease;
  }
  .add-btn:hover{border-color:var(--brand-ink);color:var(--brand-ink);background:rgba(46,92,138,.07);transform:translateY(-1px);}
  .tag-input-wrap{
    display:flex;flex-wrap:wrap;gap:6px;
    border:1.5px solid var(--line);border-radius:8px;
    padding:8px;background:var(--card);
  }
  .tag-input-wrap:focus-within{border-color:var(--grad-1);box-shadow:0 0 0 3px rgba(27,58,92,.12);}
  .tag-chip{
    display:flex;align-items:center;gap:6px;
    background:var(--brand-gradient-soft);
    border:1px solid rgba(27,58,92,.25);
    color:var(--ink);
    font-size:12.5px;font-weight:500;
    padding:4px 4px 4px 10px;border-radius:14px;
  }
  .tag-chip button{
    border:none;background:transparent;cursor:pointer;
    color:var(--muted);font-size:13px;line-height:1;
    width:16px;height:16px;
  }
  .tag-input-wrap input{
    border:none;flex:1;min-width:90px;padding:4px;
  }
  /* Éditeur de compétences groupées (feuille de route Test ATS, section 5.11) */
  .skill-groups{display:flex;flex-direction:column;gap:8px;margin-bottom:8px;}
  .skill-groups:empty{margin-bottom:0;}
  .skill-group-label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;margin-bottom:4px;}
  .skill-chips{display:flex;flex-wrap:wrap;gap:6px;}
  .skill-chip{cursor:default;}
  .skill-chip.has-detail{cursor:pointer;border-style:dashed;}
  .skill-chip.skill-chip-matched{background:rgba(43,74,46,.12);border-color:rgba(43,74,46,.4);}
  .skill-detail{
    flex-basis:100%;font-size:12px;color:var(--muted);
    background:var(--paper);border:1px solid var(--line);border-radius:6px;
    padding:6px 10px;margin-top:-2px;
  }
  .skill-detail.hidden{display:none;}
  .skills-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;font-size:11.5px;}
  .skills-count{color:var(--muted);}
  .skills-warning{color:#8a5a1a;}
  .skills-warning.hidden{display:none;}
  .photo-row{display:flex;align-items:center;gap:12px;}
  .photo-row .ph{
    width:44px;height:44px;border-radius:4px;
    background:var(--paper);color:var(--muted);
    border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;
    font-family:'Roboto Mono',monospace;font-size:12px;overflow:hidden;flex-shrink:0;
  }
  .photo-row .ph img{width:100%;height:100%;object-fit:cover;}
  .photo-row .ph.shape-circle{border-radius:50%;}
  .shape-toggle{display:flex;gap:4px;margin-left:auto;flex-shrink:0;}
  .shape-btn{
    width:26px;height:26px;border-radius:6px;border:1px solid var(--line);
    background:var(--card);color:var(--muted);cursor:pointer;font-size:13px;
    display:flex;align-items:center;justify-content:center;line-height:1;
  }
  .shape-btn.active{border-color:var(--grad-1);color:var(--ink);background:var(--brand-gradient-soft);}
  .sb-photo.shape-circle{border-radius:50%;aspect-ratio:1/1;}
  .ai-photo-row{margin-top:8px;}
  .ai-photo-check{
    display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink);
    cursor:pointer;user-select:none;
  }
  .ai-photo-check input{margin:0;flex-shrink:0;}
  .ai-photo-price{color:var(--muted);}
  .ai-photo-regen-btn{
    margin-top:6px;font-size:11.5px;color:var(--muted);
    border:1px solid var(--line);border-radius:6px;
    padding:4px 8px;cursor:pointer;background:var(--card);
  }
  .ai-photo-regen-btn.hidden{display:none;}
  .ai-photo-cost{font-size:11.5px;color:var(--accent);margin-top:4px;font-weight:600;}
  .ai-photo-status{font-size:11.5px;color:var(--muted);margin-top:4px;min-height:14px;}
  .ai-photo-progress{
    height:4px;border-radius:2px;background:var(--line);
    margin-top:7px;overflow:hidden;
    display:none; /* visible uniquement pendant la génération */
  }
  .ai-photo-progress.active{display:block;}
  .ai-photo-progress-bar{
    height:100%;width:0%;border-radius:2px;
    background:var(--brand-gradient);
    transition:width .6s ease;
  }
  .ai-photo-picker{margin-top:10px;}
  .ai-photo-picker.hidden{display:none;}
  .ai-photo-picker-title{font:700 11.5px var(--ui-sans);color:var(--ink);margin:0 0 6px;}
  .ai-photo-picker-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
  .ai-photo-picker-thumb{
    padding:0;border:2px solid var(--line);border-radius:8px;overflow:hidden;
    cursor:zoom-in;background:var(--paper);aspect-ratio:4/5;
    transition:border-color .15s ease;position:relative;
  }
  .ai-photo-picker-thumb:hover,.ai-photo-picker-thumb:focus-visible{border-color:var(--accent);}
  /* pointer-events:none : le clic droit et l'appui long visent le bouton, pas
     l'image. Le navigateur n'a donc pas d'image sous le curseur à proposer
     d'enregistrer, et le garde-fou JS n'a qu'une cible à reconnaître. */
  .ai-photo-picker-thumb img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}
  /* Loupe : dit que la vignette agrandit, et ne choisit pas d'un clic. */
  .ai-photo-picker-zoom{
    position:absolute;right:5px;bottom:5px;width:20px;height:20px;
    display:grid;place-items:center;border-radius:5px;
    background:rgba(0,0,0,.55);color:#fff;font-size:10px;pointer-events:none;
  }

  /* ---------- Images qu'on ne doit pas pouvoir enregistrer ----------
     Photos de profil, propositions de portrait IA, diplômes joints, signature.
     La classe était déjà posée par js/cv-render.js sans jamais rien produire :
     aucune règle ne la visait, et le garde-fou JS ne la lisait pas.

     -webkit-touch-callout est celle qui compte sur téléphone : c'est le menu
     « Enregistrer l'image » de l'appui long, et c'est là que se trouve le
     public. Les autres ferment le glisser-déposer et la sélection.

     Aucune de ces règles n'empêche une capture d'écran : contre elle, seul le
     filigrane protège, et c'est lui qui fait le vrai travail. */
  .protected-img{
    -webkit-touch-callout:none;
    -webkit-user-select:none;user-select:none;
    -webkit-user-drag:none;
  }

  /* ---------- Modale de gestion de la photo ---------- */
  .photo-modal-box{max-width:360px;}
  .photo-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
  .photo-modal-close{
    background:none;border:none;cursor:pointer;font-size:22px;line-height:1;
    color:var(--muted);padding:0 2px;border-radius:4px;
  }
  .photo-modal-close:hover{color:var(--ink);}
  .pm-preview{
    width:110px;height:127px;border-radius:10px;margin:0 auto 16px;
    overflow:hidden;background:var(--paper);
    display:flex;align-items:center;justify-content:center;
    color:var(--muted);font-family:'Roboto Mono',monospace;font-size:10px;
    border:1px solid var(--line);
  }
  .pm-preview img{width:100%;height:100%;object-fit:cover;}
  .pm-preview.shape-circle{border-radius:50%;width:110px;height:110px;}
  .pm-upload-row{display:flex;gap:8px;align-items:center;justify-content:center;margin-bottom:4px;}
  .pm-ai-section{
    margin-top:16px;padding-top:16px;
    border-top:1px solid var(--line);
  }
  .pm-ai-label{font:700 13px var(--ui-sans);color:var(--ink);margin:0 0 5px;}
  .pm-ai-desc{font-size:12.5px;color:var(--muted);line-height:1.55;margin:0 0 8px;}
  .pm-ai-tip{
    display:flex;align-items:flex-start;gap:6px;
    font-size:11.5px;color:var(--muted);line-height:1.5;margin:0 0 12px;
    background:rgba(27,58,92,.07);border-radius:7px;padding:7px 9px;
  }
  .pm-ai-tip svg{flex-shrink:0;margin-top:1px;color:var(--grad-1);}
  .pm-done{width:100%;justify-content:center;margin-top:20px;}
  .pm-preview.has-photo{cursor:zoom-in;}
  /* Lightbox plein écran avec watermark anti-capture */
  .photo-lightbox{
    position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.82);
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;transition:opacity .18s ease;
  }
  .photo-lightbox.open{opacity:1;pointer-events:all;}
  .photo-lightbox-stage{display:flex;flex-direction:column;align-items:center;gap:14px;}
  .photo-lightbox-inner{
    position:relative;max-width:90vw;max-height:90vh;
    display:flex;align-items:center;justify-content:center;
  }
  .photo-lightbox img{
    max-width:90vw;max-height:90vh;object-fit:contain;
    border-radius:8px;display:block;pointer-events:none;
    -webkit-user-drag:none;
  }
  /* La barre de choix prend sa place sous l'image : sans ce plafond réduit,
     l'ensemble dépassait la fenêtre et le bouton sortait de l'écran. */
  .photo-lightbox.has-bar img{max-height:68vh;}
  .photo-lightbox-bar{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
    background:rgba(0,0,0,.45);border-radius:12px;padding:10px 14px;
  }
  .photo-lightbox-bar.hidden{display:none;}
  .photo-lightbox-arrow{
    width:36px;height:36px;flex:none;border-radius:50%;
    border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);
    color:#fff;font-size:22px;line-height:1;cursor:pointer;
  }
  .photo-lightbox-arrow:hover{background:rgba(255,255,255,.2);}
  .photo-lightbox-count{
    font-family:'Roboto Mono',monospace;font-size:12px;color:#fff;
    min-width:44px;text-align:center;
  }
  .photo-lightbox-pick{white-space:nowrap;}
  /* Watermark répété, rotation, semi-transparent */
  .photo-lightbox-wm{
    position:absolute;inset:0;overflow:hidden;pointer-events:none;user-select:none;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(4,1fr);
    border-radius:8px;
  }
  .photo-lightbox-wm span{
    display:flex;align-items:center;justify-content:center;
    font-family:'Roboto Mono',monospace;font-size:14px;font-weight:700;
    color:rgba(255,255,255,.28);letter-spacing:.08em;
    transform:rotate(-30deg);white-space:nowrap;
  }
  .photo-lightbox-close{
    position:absolute;top:-36px;right:0;background:none;border:none;
    color:#fff;font-size:28px;cursor:pointer;line-height:1;opacity:.8;
  }
  .photo-lightbox-close:hover{opacity:1;}
  .file-btn{
    font-size:12px;color:var(--muted);
    border:1px solid var(--line);border-radius:6px;
    padding:7px 10px;cursor:pointer;background:var(--card);
  }
  .file-btn.small{padding:5px 9px;font-size:11px;}
  .hint{font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.5;}

  /* Conseils contextuels "Renforcer mon contenu" (feuille de route Test
     ATS, lot 3) : réutilise la détection de analyzeAts (js/utils.js), mais
     jamais son vocabulaire ATS, voir refreshContentTips() dans js/app.js.
     Masqué/vidé par défaut, rempli et affiché uniquement si un problème est
     détecté sur ce champ précis, et retiré dès qu'il est corrigé. */
  .content-tip{
    display:flex;align-items:flex-start;gap:6px;margin-top:6px;padding:7px 9px;
    background:rgba(27,58,92,.07);border-radius:7px;
    font-size:11.5px;color:var(--ink);line-height:1.5;
  }
  .content-tip.hidden{display:none;}
  .content-tip::before{
    content:'';flex-shrink:0;width:6px;height:6px;border-radius:50%;
    background:var(--grad-1);margin-top:5px;
  }
  .content-tip-ai{
    display:inline-block;margin-top:4px;font-size:11px;font-weight:700;
    color:var(--grad-1);cursor:pointer;background:none;border:none;padding:0;text-decoration:underline;
  }

  .profile-row{margin-top:10px;}
  .profile-row select{width:100%;}
  .profile-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
  .profile-actions .btn{min-height:40px;padding:8px 14px;font-size:12px;}

  .privacy-note{margin-bottom:0;padding-bottom:0;}
  .privacy-box{
    display:flex;gap:11px;align-items:flex-start;
    padding:14px 14px 14px 12px;
    border-left:2px solid var(--ink);
    background:var(--paper);
    border-radius:0 4px 4px 0;
  }
  .privacy-mark{
    flex-shrink:0;width:6px;height:6px;border-radius:50%;
    background:var(--ink);margin-top:5px;
  }
  .privacy-title{
    font-family:'Roboto Mono',monospace;font-size:10.5px;font-weight:600;
    text-transform:uppercase;letter-spacing:.06em;color:var(--ink);margin-bottom:4px;
  }
  /* --body est un jeton du DOCUMENT, repris tel quel par le PDF : il ne
     bascule pas avec le thème, d'où --ink-2. */
  .privacy-text{font-size:11.5px;color:var(--ink-2);line-height:1.55;}

  /* ---------- PREVIEW ---------- */
  .preview-wrap{
    padding:34px;
    display:flex;justify-content:center;align-items:flex-start;
    background-color:#DCE0DD;
    background-image:radial-gradient(circle, rgba(28,27,24,.10) 1px, transparent 1px);
    background-size:16px 16px;
    overflow:auto;
    max-height:calc(100vh - 109px);
  }
  /* Le document est verrouillé sur le gris que le PDF dessine
     (DES_COLOR.muted dans js/export-pdf-design.js). L'interface peut
     assombrir le sien pour la lisibilité à l'écran ; le CV, lui, doit
     rester ce qui sortira du fichier. */
  .page-sheet, .letter-page{--muted:#6E736F;}
  .page-sheet{
    width:210mm;
    min-height:297mm;
    background:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,.08), 0 12px 32px rgba(0,0,0,.12);
    transform-origin:top center;
    transition:transform .15s ease;
    flex-shrink:0;
    position:relative;
    overflow:hidden;
    overflow-wrap:break-word;word-break:break-word;
  }
  .hidden{display:none !important;}

  /* ---------- Filigrane d'aperçu (retiré au téléchargement) ---------- */
  .wm-overlay{
    position:absolute;inset:-25%;
    display:flex;flex-wrap:wrap;align-content:flex-start;
    transform:rotate(-27deg);
    pointer-events:none;z-index:30;
  }
  .wm-overlay span{
    font-family:'Roboto Mono',monospace;font-size:12px;font-weight:600;
    /* Assez visible pour gâcher une capture d'écran revendable, assez discret
       pour que l'utilisateur relise son CV sans gêne : en dessous de ~.10 le
       filigrane disparaît à l'écran et ne dissuade plus rien. */
    color:#000;opacity:.12;white-space:nowrap;
    margin:20px 30px;text-transform:uppercase;letter-spacing:.09em;
  }

  /* ----- Palette de coloration du texte sélectionné dans l'aperçu ----- */
  .sel-palette{
    position:absolute;z-index:70;
    display:flex;align-items:center;gap:5px;
    background:var(--card);border:1px solid var(--line);border-radius:9px;
    padding:6px 7px;box-shadow:0 8px 24px rgba(0,0,0,.18);
  }
  .sel-palette.hidden{display:none;}
  .sel-swatch{
    width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.15);
    cursor:pointer;padding:0;flex-shrink:0;
    transition:transform .12s ease;
  }
  .sel-swatch:hover{transform:scale(1.15);}
  .sel-swatch:focus-visible{outline:2px solid var(--grad-1);outline-offset:2px;}
  .sel-clear{
    border:0;background:none;cursor:pointer;padding:3px 6px;
    font-family:'Roboto Mono',monospace;font-size:10.5px;color:var(--muted);
    border-left:1px solid var(--line);margin-left:3px;
  }
  .sel-clear:hover{color:var(--ink);}

  /* ----- Sélecteur de modèle (bouton de la barre + page de choix) ----- */
  /* Conteneur des réglages : transparent sur grand écran, rangée défilante
     sur téléphone (voir la requête média en bas de fichier). */
  .pt-controls{display:contents;}
  .tpl-picker{position:relative;}
  .tpl-toggle{
    display:flex;align-items:center;gap:7px;
    background:var(--card);border:1px solid var(--line);border-radius:8px;
    padding:4px 9px 4px 5px;cursor:pointer;
    font-family:var(--ui-sans);font-size:11.5px;font-weight:600;color:var(--ink);
    transition:border-color .15s ease;
  }
  .tpl-toggle:hover,.tpl-toggle:focus-visible{border-color:var(--accent);}
  .tpl-toggle-chip{display:block;}
  .tpl-toggle-chip .tpl-thumb-preview{width:16px;height:22px;}
  .tpl-toggle-caret{width:9px;height:6px;color:var(--muted);flex-shrink:0;}
  .tpl-thumb-preview{
    display:block;width:34px;height:46px;border-radius:3px;
    border:1px solid var(--line);overflow:hidden;
  }
  /* Les vignettes sont des SVG (TEMPLATE_THUMBS dans js/app.js), plus des
     empilements de dégradés : ils portent assez de détail pour distinguer les
     modèles entre eux. */
  .tpl-thumb-preview svg{display:block;width:100%;height:100%;}

  /* ----- Page de choix du modèle (#tplChooser) -----
     Les six modèles vivaient dans un menu déroulant de 290px : des vignettes
     de 34x46 et un nom, sans jamais dire à quoi chaque modèle sert. Ils ont
     maintenant une page à eux, ouverte au clic sur le bouton « modèle » et à
     la première entrée dans « Créer mon CV ». La grille garde le contrat des
     autres surfaces plein écran (.modal-overlay) : opacité + pointer-events
     pilotés par .open, focus piégé par openModal(). */
  .tpl-chooser{
    position:fixed;inset:0;z-index:940;
    background:var(--paper);
    overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    opacity:0;pointer-events:none;
    transition:opacity .2s ease;
  }
  .tpl-chooser.open{opacity:1;pointer-events:auto;}
  /* Le fond ne doit pas défiler derrière la page. */
  body.tpl-chooser-open{overflow:hidden;}
  .tpl-chooser-inner{
    max-width:1180px;margin:0 auto;
    padding:34px 28px 40px;
    font-family:var(--ui-sans);
  }
  .tpl-chooser-head{
    display:flex;align-items:flex-start;gap:20px;
    margin-bottom:26px;
  }
  .tpl-chooser-head-text{min-width:0;}
  .tpl-chooser-kicker{
    margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.09em;
    text-transform:uppercase;color:var(--muted);
  }
  .tpl-chooser-title{
    margin:0 0 10px;font-size:26px;line-height:1.25;font-weight:800;color:var(--ink);
  }
  .tpl-chooser-sub{
    margin:0;max-width:64ch;font-size:13.5px;line-height:1.65;color:var(--muted);
  }
  .tpl-chooser-close{
    flex-shrink:0;margin-left:auto;
    width:36px;height:36px;line-height:1;
    background:var(--card);border:1px solid var(--line);border-radius:10px;
    font-size:22px;color:var(--muted);cursor:pointer;
    transition:border-color .15s ease,color .15s ease;
  }
  .tpl-chooser-close:hover{border-color:var(--accent);color:var(--ink);}
  .tpl-chooser-grid{
    display:grid;gap:18px;
    grid-template-columns:repeat(auto-fill,minmax(min(285px,100%),1fr));
    align-items:stretch;
  }
  /* Chaque carte est une colonne : aperçu, texte qui s'étire, bouton collé en
     bas. Sans le 1fr sur .tpl-card-body, les boutons de deux cartes voisines
     ne s'alignent pas dès que l'un des « Quand le choisir » fait une ligne de
     plus que l'autre. */
  .tpl-card{
    display:flex;flex-direction:column;
    background:var(--card);border:1px solid var(--line);border-radius:14px;
    padding:16px 16px 14px;
    transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
  }
  .tpl-card:hover{border-color:var(--line-hover);transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.09);}
  .tpl-card.active{border-color:var(--grad-1);box-shadow:0 0 0 2px rgba(46,92,138,.18);}
  /* La boîte est au rapport d'une feuille A4 ; le vrai CV composé dedans est
     posé à la largeur d'une A4 (793,7px) puis réduit par transform depuis le
     coin haut gauche — voir scaleTemplateMiniatures(). Le débordement est
     coupé : une vignette montre le haut de la page, pas la page entière, comme
     sur les galeries de modèles ailleurs. */
  .tpl-card-preview{
    position:relative;display:block;width:100%;aspect-ratio:210/297;
    margin:0 auto 14px;border:1px solid var(--line);border-radius:6px;
    overflow:hidden;background:#fff;
  }
  .tpl-mini-page{
    position:absolute;top:0;left:0;
    transform-origin:top left;
    /* La feuille réelle porte une ombre et des marges de page : dans une
       vignette elles ne feraient que manger les bords. */
    margin:0;box-shadow:none;border-radius:0;
  }
  /* Carte montrant la maquette : l'image remplit la boîte au rapport A4. */
  .tpl-card-shot{display:block;}
  .tpl-card-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;}
  .tpl-card-legend{
    margin:0 0 8px;font-size:10.5px;line-height:1.45;color:var(--muted);font-style:italic;
  }
  .tpl-card-body{flex:1 1 auto;display:flex;flex-direction:column;}
  .tpl-card-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px;}
  .tpl-card-name{margin:0;font-size:15.5px;font-weight:700;color:var(--ink);}
  .tpl-card-badge{
    font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
    color:#fff;background:var(--grad-1);
    padding:3px 7px;border-radius:99px;
  }
  .tpl-card-tagline{margin:0 0 10px;font-size:12px;color:var(--muted);}
  .tpl-card-why{margin:0 0 12px;font-size:12.5px;line-height:1.6;color:var(--ink);}
  .tpl-card-why-label{
    display:block;margin-bottom:3px;
    font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
    color:var(--muted);
  }
  .tpl-card-examples{
    list-style:none;display:flex;flex-wrap:wrap;gap:5px;
    margin:auto 0 0;padding:0;
  }
  .tpl-card-examples li{
    font-size:11px;color:var(--muted);
    background:var(--paper);border:1px solid var(--line);
    padding:3px 8px;border-radius:99px;
  }
  .tpl-card-pick{width:100%;margin:14px 0 0;justify-content:center;}
  .tpl-chooser-foot{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    flex-wrap:wrap;
    margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
  }
  .tpl-chooser-foot-note{font-size:12.5px;color:var(--muted);}
  .tpl-chooser-foot-note strong{color:var(--ink);}
  .tpl-chooser-foot .btn{margin:0;}

  /* ----- Design page ----- */
  .design-page{
    display:grid;
    grid-template-columns:70mm 1fr;
    /* Toute la page hérite de la police du document, y compris la colonne
       latérale : c'est ce que dessinent les exportateurs PDF. */
    font-family:var(--doc-sans);
    /* Le PDF dessine chaque fonte telle qu'elle est et sans ligatures :
       l'aperçu fait de même, pour qu'un mot ait la même chasse des deux
       côtés (et qu'un « fi » reste lisible par un logiciel de tri). */
    font-synthesis:none;
    font-variant-ligatures:no-common-ligatures;
  }
  /* --sb-ink vaut #fff sur une colonne sombre, l'encre du document sur une
     colonne claire. Il est posé par render() (js/app.js) à partir de la
     luminance de la couleur choisie, et non écrit en dur ici : l'utilisateur
     peut peindre cette colonne de n'importe quelle teinte, y compris un bleu
     pâle, et le texte doit rester lisible sans qu'il ait à y penser. */
  .sidebar{
    background:var(--accent-sidebar, var(--accent));
    color:var(--sb-ink, var(--paper-warm));
    padding:16mm 9mm;
  }
  .sb-block{margin-bottom:8mm;}
  .sb-block h3{
    font-size:10px;text-transform:uppercase;letter-spacing:.12em;
    color:var(--accent-sidebar-tan, var(--accent-tan));margin:0 0 3mm;
    font-weight:600;
  }
  .sb-line{font-size:10.5px;line-height:1.7;color:var(--sb-ink, rgba(239,237,230,.88));opacity:.92;word-break:break-word;display:flex;align-items:flex-start;gap:2mm;}
  .sb-line svg{flex-shrink:0;width:14px;height:14px;margin-top:0.2em;overflow:visible;color:var(--accent-sidebar-tan, var(--accent-tan));}
  .sb-skills-line{font-size:10.5px;line-height:1.8;color:var(--sb-ink, rgba(239,237,230,.88));}
  .sb-lang-row{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;margin-bottom:4mm;color:var(--sb-ink, rgba(239,237,230,.9));}
  .sb-dots{display:flex;gap:2.5px;}
  .sb-dots span{width:5px;height:5px;border-radius:50%;border:1px solid var(--accent-sidebar-tan, var(--accent-tan));}
  .sb-dots span.filled{background:var(--accent-sidebar-tan, var(--accent-tan));}
  /* Niveau de langue en barre (niveauLangueHtml, js/cv-render.js) : même
     teinte que les points pleins, piste de la même couleur à 30 %. */
  .niv-barre{display:inline-block;flex:none;width:20mm;height:1.5mm;border-radius:1mm;overflow:hidden;
    background:color-mix(in srgb, var(--accent-sidebar-tan, var(--accent-tan)) 30%, transparent);}
  .niv-barre i{display:block;height:100%;border-radius:inherit;background:var(--accent-sidebar-tan, var(--accent-tan));}
  .sb-lang-row .niv-etoiles{flex:none;}
  .sb-lang-row .niv-texte{opacity:.85;text-align:right;}
  /* Colonnes claires (Cadre, Carnet, Sobre) : la teinte pâle des repères
     disparaissait sur le fond ; points, étoiles et barre prennent l'encre. */
  .design-page.tpl-cadre .sb-lang-row,
  .design-page.tpl-carnet .sb-lang-row,
  .design-page.tpl-sobre .sb-lang-row{--accent-sidebar-tan:color-mix(in srgb, var(--ink) 80%, transparent);}
  .sb-edu-item{margin-bottom:5mm;}
  .sb-edu-item .t{font-size:10.5px;font-weight:600;color:var(--paper-warm);}
  .sb-edu-item .s{font-size:10px;color:rgba(239,237,230,.75);}
  .sb-edu-item .d{font-size:9px;color:var(--accent-sidebar-tan, var(--accent-tan));margin-top:1mm;}
  .sb-photo{width:100%;aspect-ratio:1/1.15;object-fit:cover;margin-bottom:8mm;border:1px solid rgba(239,237,230,.25);}

  .main{padding:16mm 12mm 16mm 10mm;}
  .cv-name{
    /* Le PDF écrit le nom en corps 25 dans la police du document.
       Fraunces donnait un aperçu plus soigné que le fichier téléchargé. */
    /* Gras : c'est la première chose qu'un recruteur cherche sur la page, et
       les modèles Canadien, Harvard, Institutionnel et ATS le faisaient déjà. */
    font-weight:700;
    font-size:25pt;line-height:1.05;margin:0;color:var(--ink);
  }
  .cv-title{
    font-size:11pt;letter-spacing:.02em;
    color:var(--accent-content, var(--accent));font-weight:600;
    margin:2.5mm 0 7mm;
    /* Écrit, jamais laissé à « normal » : sa valeur change d'une police et
       d'un système à l'autre, et le PDF ne saurait pas laquelle reprendre. */
    line-height:1.15;
  }
  .cv-summary{font-size:10.3pt;line-height:1.62;color:var(--body);margin-bottom:11mm;}
  .m-block{margin-bottom:8mm;}
  /* L'intitulé « Expérience » est seul dans son .m-block, la frise vient
     juste après (voir renderDesignClassic). Sans ceci, l'écart entre
     l'intitulé et le premier poste prenait les 8mm qui séparent deux
     rubriques, en plus de la marge du titre : trois fois l'écart de
     « Formation », dont l'intitulé partage son bloc avec son contenu. */
  .design-page .m-block:has(+ .timeline),
  .design-page .m-block:has(+ .tpl-timeline){margin-bottom:0;}
  /* Un intitulé ne se coupe jamais au milieu d'un mot (la page entière le
     permet, pour les adresses trop longues) : « COMPORTEMENTA / LES » se
     lisait mal, et le PDF, qui garde ses mots entiers, ne le reproduisait
     pas. */
  .design-page h1,.design-page h2,.design-page h3{overflow-wrap:normal;word-break:normal;}
  /* Interligne écrit, comme pour .cv-title : mainSectionTitle (PDF) reprend
     la même valeur. Laissé à « normal », il change d'une police et d'un
     système à l'autre, et le PDF ne saurait pas laquelle reprendre. */
  .m-block h2,.m-block h3{
    font-size:9.5pt;text-transform:uppercase;letter-spacing:.11em;line-height:1.2;
    color:var(--ink);margin:0 0 5mm;font-weight:600;
    padding-bottom:2.5mm;border-bottom:1px solid var(--line);
    display:flex;align-items:baseline;gap:2mm;
  }
  .timeline{position:relative;padding-left:5mm;}
  .timeline::before{
    content:"";position:absolute;left:0;top:2mm;bottom:2mm;width:1px;background:var(--line);
  }
  .xp-item{position:relative;margin-bottom:9mm;padding-left:6mm;}
  .edu-main-item{margin-bottom:6mm;}
  .edu-main-item .em-degree{font-size:10.5pt;font-weight:700;color:var(--ink);}
  .edu-main-item .em-school{font-size:9.8pt;color:var(--muted);margin-top:.8mm;}
  .edu-main-item .em-date{font-size:8.5pt;color:var(--accent-content,var(--accent));margin-top:1mm;}
  .xp-item::before{
    content:"";position:absolute;left:-5.6mm;top:1.6mm;width:2.4mm;height:2.4mm;background:var(--accent-content, var(--accent));
  }
  .xp-head{display:flex;justify-content:space-between;align-items:baseline;gap:6mm;flex-wrap:wrap;}
  .xp-role{font-size:10.8pt;font-weight:600;color:var(--ink);}
  .xp-org{font-size:9.8pt;color:var(--accent-content, var(--accent));font-weight:500;}
  .xp-date{font-size:8.5pt;color:var(--muted);white-space:nowrap;}
  .xp-desc{font-size:9.6pt;line-height:1.58;color:var(--body);margin:2.5mm 0 0;padding-left:4mm;}
  .xp-desc li{margin-bottom:1.2mm;}
  .empty-hint{font-size:9.5pt;color:var(--empty-hint);font-style:italic;}
  .annex-list{list-style:none;margin:0;padding:0;font-size:9.6pt;color:var(--body);}
  .annex-list li{padding-left:4mm;position:relative;margin-bottom:1.2mm;}
  .annex-list li::before{content:"–";position:absolute;left:0;color:var(--accent-content, var(--accent));}
  /* Références sur deux colonnes : une référence tient en trois lignes
     courtes, les empiler gaspillait la moitié de la largeur de la page.
     L'exportateur fait de même (mainDeuxColonnes dans
     js/export-pdf-design.js) : les deux doivent montrer la même page.
     Une référence seule occupe toute la largeur plutôt que de laisser une
     colonne vide à côté d'elle. */
  .refs-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 8mm;align-items:start;}
  .refs-grid:has(> .ref-block:only-child){grid-template-columns:1fr;}
  .ref-block{font-size:9.8pt;color:var(--body);line-height:1.5;}
  .ref-name{font-weight:600;color:var(--ink);}
  .ref-title{color:var(--muted);}
  .ref-contact{font-size:9pt;color:var(--muted);margin-top:0.5mm;}
  .ref-request{font-size:9.8pt;color:var(--muted);font-style:italic;}
  .cv-signature-block{margin-top:10mm;margin-right:-6mm;text-align:right;}
  .cv-signature-name{font-style:italic;font-weight:500;font-size:16pt;color:var(--ink);}
  .cv-signature-caption{font-size:10.5pt;font-weight:600;color:var(--ink);margin-top:1.5mm;}
  .cv-signature-img{max-width:55mm;max-height:22mm;display:inline-block;}

  /* ----- Modèle "Bandeau photo" ----- */
  .design-page.tpl-banner{
    grid-template-columns:76mm 1fr;
  }
  .design-page.tpl-banner .sidebar{
    padding:0;
    display:flex;
    flex-direction:column;
  }
  .tpl-banner-photo-wrap{
    position:relative;width:100%;aspect-ratio:3/3.3;overflow:hidden;flex-shrink:0;
    background:var(--accent-sidebar, var(--accent));
  }
  .tpl-banner-photo{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  }
  .tpl-banner-photo-wrap::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0) 48%, rgba(0,0,0,.78) 100%);
  }
  .tpl-banner-plate{position:absolute;left:8mm;right:8mm;bottom:6mm;z-index:1;}
  .tpl-banner-plate .cv-name{color:#fff;font-size:18pt;}
  .tpl-banner-plate .cv-title{color:var(--accent-sidebar-tan, var(--accent-tan));font-size:9.5pt;margin:1.5mm 0 0;}
  .tpl-sidebar-body{padding:9mm 8mm 12mm;flex:1;}
  .design-page.tpl-banner .main .cv-summary{margin-top:0;}
  .design-page.tpl-banner .m-block h2{border-bottom:none;padding-bottom:0;}
  .sec-icon{
    display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
    width:7mm;height:7mm;border-radius:50%;
    background:var(--accent-content, var(--accent));
  }
  .sec-icon svg{width:3.6mm;height:3.6mm;stroke:#fff;fill:none;}
  .tpl-tags{display:flex;flex-wrap:wrap;gap:2mm;}
  .tpl-tag{
    font-size:9px;padding:1.2mm 3mm;border-radius:20px;
    background:rgba(239,237,230,.16);
    border:1px solid var(--accent-sidebar-tan, var(--accent-tan));
    color:var(--paper-warm);
  }

  /* Contact en pastilles de couleur (modèle "Bandeau photo") */
  .tpl-contact-line{display:flex;align-items:center;gap:3mm;font-size:10px;line-height:1.4;color:rgba(239,237,230,.92);margin-bottom:3.5mm;word-break:break-word;}
  .tpl-contact-badge{
    display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
    width:6.4mm;height:6.4mm;border-radius:50%;
    background:rgba(239,237,230,.14);
    border:1px solid var(--accent-sidebar-tan, var(--accent-tan));
  }
  .tpl-contact-badge svg{width:3.2mm;height:3.2mm;color:var(--accent-sidebar-tan, var(--accent-tan));}

  /* Timeline années à gauche + points reliés (modèle "Bandeau photo") */
  .tpl-timeline-item{
    display:grid;
    grid-template-columns:22mm 4mm 1fr;
    column-gap:2mm;
    margin-bottom:7mm;
    position:relative;
  }
  .tpl-timeline-item:last-child{margin-bottom:0;}
  .tpl-timeline-years{
    font-size:7.5pt;line-height:1.3;color:var(--muted);font-weight:600;
    padding-top:.5mm;text-align:right;white-space:nowrap;
  }
  .tpl-timeline-dot-col{position:relative;display:flex;justify-content:center;}
  .tpl-timeline-dot-col::before{
    content:"";position:absolute;top:3mm;bottom:-7mm;left:50%;width:1px;
    background:var(--line);transform:translateX(-50%);
  }
  .tpl-timeline-item:last-child .tpl-timeline-dot-col::before{display:none;}
  .tpl-timeline-dot{
    width:2.6mm;height:2.6mm;border-radius:50%;
    background:var(--accent-content, var(--accent));
    margin-top:1.2mm;position:relative;z-index:1;
  }
  .tpl-timeline-content{padding-bottom:1mm;}
  .tpl-timeline-content .em-degree{font-size:10.5pt;font-weight:700;color:var(--ink);}
  .tpl-timeline-content .em-school{font-size:9.8pt;color:var(--muted);margin-top:.8mm;}

  /* Compétences comportementales : étoiles ou étiquettes, dans la sidebar (modèle "Bandeau photo") */
  .tpl-skill-row{display:flex;justify-content:space-between;align-items:center;gap:3mm;font-size:10.5px;margin-bottom:4mm;color:var(--sb-ink, rgba(239,237,230,.9));}
  .tpl-skill-name{font-size:10.5px;color:var(--sb-ink, rgba(239,237,230,.9));}
  .tpl-skill-stars{font-size:9.5pt;letter-spacing:.5px;color:rgba(239,237,230,.28);white-space:nowrap;}
  /* Les étoiles vides se tirent de la même encre, très diluée : sur une
     colonne claire, le blanc cassé fixe les effaçait complètement. Sur une
     colonne sombre --sb-ink vaut le blanc cassé, et rien ne change. */
  .tpl-skill-stars{color:color-mix(in srgb, var(--sb-ink, #EFEDE6) 28%, transparent);}
  .tpl-skill-stars span.filled{color:var(--accent-sidebar-tan, var(--accent-tan));}

  /* ----- Modèle "Canadien" ----- */
  .design-page.tpl-canadian{grid-template-columns:62mm 1fr;}
  .design-page.tpl-canadian .sidebar{
    background:#fff;color:var(--ink);
    padding:16mm 8mm 16mm 12mm;
    border-right:1px solid var(--line);
  }
  .tpl-canadian .sb-block h3{
    background:var(--paper-warm);color:#55524A;
    padding:2mm 3mm;margin:0 0 4mm;letter-spacing:.1em;
  }
  .cnd-row{margin-bottom:4mm;}
  .cnd-label{font-size:8pt;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;}
  .cnd-value{font-size:9.8pt;color:var(--ink);word-break:break-word;margin-top:.5mm;}
  .cnd-edu-item{margin-bottom:6mm;}
  .cnd-edu-school{font-size:10pt;font-weight:700;color:var(--ink);}
  .cnd-edu-date{font-size:8.5pt;color:var(--muted);margin-top:.5mm;}
  .cnd-edu-degree{font-size:9.5pt;color:var(--body);margin-top:.8mm;}
  .cnd-skill-list{list-style:none;margin:0;padding:0;font-size:9.8pt;color:var(--body);line-height:1.9;}
  .cnd-name{
    font-weight:800;text-transform:uppercase;
    letter-spacing:.01em;font-size:23pt;
  }
  .cnd-title{color:var(--muted);font-weight:500;}
  .cnd-rule{height:1px;background:var(--line);margin:5mm 0 9mm;}
  .design-page.tpl-canadian .main{padding:16mm 12mm 16mm 10mm;}
  .design-page.tpl-canadian .m-block h2{
    background:var(--paper-warm);color:var(--body);
    padding:2.5mm 3mm;border-bottom:none;
  }
  .cnd-exp-item{padding-left:0;margin-bottom:8mm;}
  .cnd-exp-item::before{content:none;}
  .cnd-exp-list{padding-left:0;}

  /* ----- Modèle "Europass" ----- */
  .design-page.tpl-europass{grid-template-columns:66mm 1fr;}
  .epv-chips{display:flex;flex-wrap:wrap;gap:2mm;}
  .epv-chip{
    font-size:9px;padding:1.2mm 3mm;border-radius:3px;
    background:rgba(239,237,230,.16);
    border:1px solid var(--accent-sidebar-tan, var(--accent-tan));
    color:var(--paper-warm);
  }
  .epv-item{display:grid;grid-template-columns:26mm 1fr;column-gap:3mm;margin-bottom:7mm;}
  /* Sans repli, une période complète ("Janv. 2022 – Présent") dépasse les
     26mm de la colonne et vient chevaucher le texte de l'entrée. */
  .epv-item-date{font-size:8pt;color:var(--muted);padding-top:.4mm;line-height:1.3;overflow-wrap:break-word;}
  .epv-item-title{font-size:10.5pt;font-weight:700;color:var(--ink);}
  .epv-item-sub{font-size:9.8pt;color:var(--accent-content, var(--accent));margin-top:.6mm;}

  /* ----- Modèle "Harvard" (une colonne, style universitaire) ----- */
  .design-page.tpl-harvard{grid-template-columns:1fr;}
  .design-page.tpl-harvard .sidebar{display:none;}
  .design-page.tpl-harvard .main{padding:18mm 22mm;}
  .hvd-name{
    font-family:var(--doc-serif);font-weight:700;
    font-size:20pt;text-align:center;margin:0;color:var(--ink);letter-spacing:.01em;
    /* Valeur appliquée par mainCenteredText dans le PDF. Écrite ici plutôt
       que laissée à « normal », qui varie selon la police et le système. */
    line-height:1.25;
  }
  .hvd-contact{
    font-family:var(--doc-serif);
    font-size:9.5pt;text-align:center;color:var(--body);margin-top:2mm;
  }
  .hvd-rule{height:1.4px;background:var(--ink);margin:5mm 0 8mm;}
  .design-page.tpl-harvard .main, .design-page.tpl-harvard .main *{
    font-family:var(--doc-serif);
  }
  .hvd-summary{font-size:10.3pt;line-height:1.55;color:var(--body);margin-bottom:8mm;}
  .hvd-block{margin-bottom:7mm;}
  .hvd-h2{
    font-size:10.5pt;text-transform:uppercase;letter-spacing:.09em;
    font-weight:700;color:var(--ink);margin:0 0 3.5mm;
    padding-bottom:1.2mm;border-bottom:1.2px solid var(--ink);
  }
  .hvd-entry{margin-bottom:5mm;}
  .hvd-row{display:flex;justify-content:space-between;align-items:baseline;gap:4mm;font-size:10.3pt;}
  .hvd-row-sub{margin-top:.6mm;}
  .hvd-strong{font-weight:700;color:var(--ink);}
  /* Lignes « Compétences : … » : libellé et liste se suivent dans le texte.
     En flex, le libellé se réduisait à une colonne étroite dès que la liste
     était longue, et « Compétences » se coupait en plein mot. */
  .hvd-row.hvd-ligne{display:block;}
  .hvd-italic{font-style:italic;color:var(--body);}
  .hvd-date{font-size:9.5pt;color:var(--body);white-space:nowrap;flex-shrink:0;}
  .hvd-bullets{font-size:9.8pt;line-height:1.5;color:var(--body);margin:1.8mm 0 0;padding-left:5mm;}
  .hvd-bullets li{margin-bottom:1mm;}

  /* ----- Modèle "Institutionnel" (une colonne, Times New Roman, N&B) -----
     Convention des candidatures fonction publique / ONG / agences de
     développement : sobriété, texte justifié, aucune fantaisie graphique. La
     couleur d'accent ne touche que les filets, le texte restant en noir. */
  /* ----- Modèle Azur -----
     Même structure que le Classique (colonne latérale + colonne principale,
     mêmes blocs dans le même ordre) : tout ce qui suit n'est qu'un habillage,
     et c'est ce que l'exportateur PDF redessine (AZUR_LAYOUT + les branches
     'azur' de DesignPdfWriter dans js/export-pdf-design.js). Chaque valeur
     ici a son jumeau là-bas ; changer l'une sans l'autre ferait sortir un
     fichier différent de l'aperçu, ce que le client a payé pour éviter. */
  /* La colonne n'est pas un aplat qui va d'un bord à l'autre : c'est un
     PANNEAU posé sur la page, détaché de ses bords, dont le haut est une
     ARCHE : un demi-cercle complet, les deux coins du haut arrondis au rayon
     de la demi-largeur. Valeurs mesurées sur la maquette
     (assets/templates/azur.webp) : 3,8mm de marge, 72mm de large, arche de
     36mm de rayon, quelques millimètres d'arrondi en bas. C'est cette
     silhouette, plus que la couleur, qui donne au modèle son allure. */
  /* Typographie de la maquette : League Spartan pour le nom et les
     intitulés, Poppins pour tout le reste. */
  .design-page.tpl-azur{grid-template-columns:77mm 1fr;font-family:'Poppins',var(--doc-sans);}
  .design-page.tpl-azur .cv-name,
  .design-page.tpl-azur .m-block h2,
  .design-page.tpl-azur .sb-block h3{font-family:'League Spartan',var(--doc-sans);}
  .design-page.tpl-azur .sidebar{
    margin:5mm 0 5mm 4mm;
    padding:4.25mm 9mm 14mm;
    border-radius:36.5mm 36.5mm 6mm 6mm;
    text-align:center;
  }
  /* Photo ronde cerclée de blanc, centrée dans la colonne. Le cercle est un
     anneau dessiné par la bordure, pas une image : il suit la couleur de la
     colonne quelle qu'elle soit. */
  /* Le disque remplit l'arche, concentrique à elle : 64,5mm (anneau
     compris) dans un panneau de 73mm, soit 4,25mm de bleu tout autour, le
     même écart que le rembourrage du haut. Plus large que la colonne de
     texte, d'où la marge négative qui le recentre sur le panneau. */
  .design-page.tpl-azur .sb-photo{
    display:block;width:64.5mm;height:64.5mm;aspect-ratio:1/1;
    margin:0 0 9mm calc(50% - 32.25mm);border-radius:50%;
    border:2mm solid #fff;
    object-fit:cover;
  }
  .design-page.tpl-azur .sb-photo-wrap{text-align:center;}
  /* Sans photo, l'arche reste vide : le premier titre descend là où la
     colonne a retrouvé toute sa largeur, au lieu de se loger dans le haut
     de la courbe. */
  .design-page.tpl-azur .sidebar:not(:has(.sb-photo)){padding-top:17mm;}
  /* Titres de colonne centrés, en capitales grasses et larges, comme sur la
     maquette ; ce sont les BLOCS qu'un filet court sépare, pas les titres
     qu'il souligne. */
  .design-page.tpl-azur .sb-block h3{
    font-size:16pt;letter-spacing:.08em;font-weight:700;line-height:1.15;
    color:var(--sb-ink, #fff);margin:0 -5mm 3.5mm;
  }
  /* Ci-dessus, -5mm de chaque côté : le titre peut empiéter sur la marge
     intérieure du panneau. « COMPORTEMENTALES » est plus large que la
     colonne de texte ; sans cela il débordait d'un seul côté, à droite, et
     n'était plus centré. */
  .design-page.tpl-azur .sb-block{margin-bottom:6mm;}
  .design-page.tpl-azur .sb-block + .sb-block::before{
    content:'';display:block;width:62%;margin:0 auto 6mm;
    border-top:.35mm solid currentColor;opacity:.85;
  }
  .design-page.tpl-azur .sb-line,
  .design-page.tpl-azur .sb-skills-line,
  .design-page.tpl-azur .sb-lang-row{font-size:8.6pt;line-height:1.65;font-weight:600;}
  /* Le contenu de la colonne reste lisible centré tant qu'il tient sur peu de
     mots ; les lignes de contact gardent leur icône, donc leur alignement à
     gauche à l'intérieur d'un bloc centré. */
  .design-page.tpl-azur .sb-line{justify-content:center;text-align:center;gap:0;}
  .design-page.tpl-azur .sb-line svg{display:none;}
  .design-page.tpl-azur .sb-skills-line,
  .design-page.tpl-azur .sb-lang-row{text-align:center;justify-content:center;}
  /* Centrés, le nom de la langue et ses pastilles se touchaient. */
  .design-page.tpl-azur .sb-lang-row{gap:2mm;}
  /* Savoir-être : même rangée centrée que les langues (libellé et étoiles
     groupés au milieu), dans la même taille et la même graisse. Le PDF lit
     ce centrage sur l'aperçu. */
  .design-page.tpl-azur .tpl-skill-row{justify-content:center;gap:1.5mm;margin-bottom:0;line-height:1.65;}
  .design-page.tpl-azur .tpl-skill-name{font-size:8.6pt;font-weight:600;}
  .design-page.tpl-azur .tpl-skill-stars{font-size:8pt;letter-spacing:0;flex:none;}
  /* Colonne principale : le nom occupe le haut de page, comme sur la
     maquette. 34pt contre 25 au Classique. */
  .design-page.tpl-azur .main{padding:12mm 12mm 16mm 7mm;}
  .design-page.tpl-azur .cv-name{font-size:38pt;font-weight:700;line-height:1.05;letter-spacing:.02em;color:var(--ink);}
  /* Intitulé de poste en capitales maigres, dans l'encre du texte. */
  .design-page.tpl-azur .cv-title{
    font-size:15pt;font-weight:300;letter-spacing:.03em;text-transform:uppercase;
    color:var(--ink);margin-top:1.5mm;
  }
  .design-page.tpl-azur .cv-summary{font-size:8.6pt;font-weight:300;line-height:1.5;color:var(--body);}
  /* Titres de rubrique en grandes capitales grasses, sans soulignement. */
  .design-page.tpl-azur .m-block h2{
    font-size:17.5pt;font-weight:700;letter-spacing:.07em;line-height:1.15;
    border-bottom:0;padding-bottom:0;
  }
  /* Frise continue : un trait dans la teinte du contenu relie les pastilles
     posées devant chaque expérience. */
  .design-page.tpl-azur .timeline{padding-left:0;}
  .design-page.tpl-azur .timeline::before{
    left:1.12mm;top:2.5mm;bottom:2mm;width:.35mm;
    background:var(--accent-content, var(--accent));
  }
  /* « Poste - employeur » sur une ligne, en gras ; les dates dessous, en
     petites capitales. Le conteneur prend le corps du poste pour que la
     ligne n'hérite pas de la hauteur du texte courant. */
  .design-page.tpl-azur .xp-head{display:block;}
  .design-page.tpl-azur .xp-head > div:not([class]){font-size:11pt;line-height:1.3;}
  .design-page.tpl-azur .xp-role,
  .design-page.tpl-azur .xp-org{
    display:inline;font-size:11pt;line-height:1.3;font-weight:600;color:var(--ink);
  }
  .design-page.tpl-azur .xp-org::before{content:'- ';}
  .design-page.tpl-azur .xp-date{
    display:block;margin-top:1mm;font-size:7.8pt;line-height:1.3;
    text-transform:uppercase;letter-spacing:.02em;color:var(--ink);
  }
  .design-page.tpl-azur .xp-desc{list-style:none;padding-left:0;margin-top:1.5mm;font-size:8.8pt;font-weight:300;line-height:1.4;color:var(--body);}
  .design-page.tpl-azur .xp-desc li{margin-bottom:1.6mm;}
  .design-page.tpl-azur .xp-item{position:relative;padding-left:7.5mm;}
  .design-page.tpl-azur .xp-item::before{
    content:'';position:absolute;left:0;top:1.2mm;
    width:2.6mm;height:2.6mm;border-radius:50%;
    background:var(--accent-content, var(--accent));
  }
  /* La formation suit la même frise que les expériences, et le même ordre
     que la maquette : diplôme, dates, puis établissement. */
  .design-page.tpl-azur .edu-main-item{
    position:relative;padding-left:7.5mm;margin-bottom:4mm;
    display:flex;flex-direction:column;
  }
  .design-page.tpl-azur .edu-main-item:last-child{margin-bottom:0;}
  .design-page.tpl-azur .edu-main-item::before{
    content:'';position:absolute;left:0;top:1.2mm;
    width:2.6mm;height:2.6mm;border-radius:50%;
    background:var(--accent-content, var(--accent));
  }
  .design-page.tpl-azur .edu-main-item::after{
    content:'';position:absolute;left:1.12mm;top:1.2mm;bottom:-4mm;width:.35mm;
    background:var(--accent-content, var(--accent));
  }
  .design-page.tpl-azur .edu-main-item:last-child::after{bottom:0;}
  .design-page.tpl-azur .em-degree{font-size:11pt;font-weight:600;line-height:1.3;color:var(--ink);}
  .design-page.tpl-azur .em-date{order:1;margin-top:1mm;font-size:7.8pt;letter-spacing:.02em;color:var(--ink);}
  .design-page.tpl-azur .em-school{order:2;margin-top:1mm;font-size:8.8pt;font-weight:300;color:var(--body);}
  /* ----- Modèle Terre -----
     Papier gris clair, colonne brune détachée du bord gauche, photo ronde,
     aucun repère devant les expériences. Typographie de la maquette :
     League Spartan serrée pour le nom et les intitulés, Lato pour le texte ;
     tout le texte de la colonne principale est brun, jamais noir. */
  .design-page.tpl-terre{
    grid-template-columns:75mm 1fr;background:#F2F2F2;font-family:'Lato',var(--doc-sans);
    --terre-texte:color-mix(in srgb, var(--accent-sidebar, var(--accent)) 45%, #7a7a7a);
    --terre-pale:color-mix(in srgb, var(--accent-sidebar, var(--accent)) 25%, #9a9a9a);
  }
  .design-page.tpl-terre .cv-name,
  .design-page.tpl-terre .m-block h2,
  .design-page.tpl-terre .sb-block h3{font-family:'League Spartan',var(--doc-sans);}
  /* La colonne court du haut au bas de la page : sa seule marge est à
     gauche, 12,4mm de papier relevés sur la maquette. */
  .design-page.tpl-terre .sidebar{
    margin:0 0 0 12.4mm;padding:27.4mm 6mm 14mm 6.2mm;border-radius:0;
  }
  .design-page.tpl-terre .main{padding:24mm 11mm 16mm 13.5mm;background:transparent;color:var(--terre-texte);}
  /* Photo ronde de 45,8mm, sans anneau. */
  .design-page.tpl-terre .sb-photo{
    width:45.8mm;height:45.8mm;aspect-ratio:1/1;object-fit:cover;
    margin:0 auto 14mm;border-radius:50%;border:0;display:block;
  }
  .design-page.tpl-terre .sb-photo-wrap{text-align:center;}
  .design-page.tpl-terre .sb-block{margin-bottom:9mm;}
  .design-page.tpl-terre .sb-block h3{
    font-size:14pt;letter-spacing:-.03em;font-weight:700;line-height:1.1;color:var(--sb-ink, #fff);
    text-transform:uppercase;margin:0 0 4mm;padding-bottom:0;border-bottom:0;
  }
  .design-page.tpl-terre .sb-line{justify-content:flex-start;text-align:left;font-size:8pt;line-height:1.5;gap:3.5mm;margin-bottom:3.5mm;align-items:center;}
  .design-page.tpl-terre .sb-line svg{width:4.2mm;height:4.2mm;margin-top:0;color:var(--sb-ink, #fff);}
  .design-page.tpl-terre .sb-skills-line,
  .design-page.tpl-terre .sb-lang-row{text-align:left;font-size:8pt;line-height:2.1;}
  .design-page.tpl-terre .cv-name{
    font-size:44pt;font-weight:700;line-height:1;letter-spacing:-.06em;
    text-transform:uppercase;color:var(--accent-sidebar, var(--accent));
  }
  .design-page.tpl-terre .cv-title{
    margin-top:2.5mm;font-size:17pt;font-weight:700;letter-spacing:-.03em;text-transform:none;
    color:color-mix(in srgb, var(--accent-sidebar, var(--accent)) 85%, #555);
  }
  .design-page.tpl-terre .cv-summary{color:var(--terre-texte);font-size:9pt;}
  /* Le filet est AU-DESSUS du titre de rubrique, pas dessous, et il traverse
     toute la colonne. */
  .design-page.tpl-terre .m-block h2{
    border-bottom:0;padding:6mm 0 0;margin-top:6mm;position:relative;
    font-size:18pt;font-weight:700;letter-spacing:-.04em;line-height:1.1;
    color:color-mix(in srgb, var(--accent-sidebar, var(--accent)) 90%, #555);
  }
  .design-page.tpl-terre .m-block h2::before{
    content:'';position:absolute;left:0;right:0;top:0;height:.35mm;
    background:var(--terre-pale);
  }
  .design-page.tpl-terre .xp-head{align-items:flex-start;}
  .design-page.tpl-terre .xp-role,
  .design-page.tpl-terre .edu-main-item .em-degree{font-size:11pt;font-weight:700;color:var(--terre-texte);letter-spacing:-.01em;}
  .design-page.tpl-terre .xp-org{font-size:11pt;font-style:italic;color:var(--terre-pale);margin-top:.6mm;}
  .design-page.tpl-terre .xp-date,
  .design-page.tpl-terre .edu-main-item .em-date{
    font-size:7.5pt;font-weight:700;font-style:italic;color:var(--terre-texte);
    text-align:right;max-width:26mm;line-height:1.35;
  }
  /* Maquette : corps de 11pt sur un pas de 6,3mm (24px à l'échelle A4),
     sans blanc de plus entre deux puces : l'interligne suffit à les séparer. */
  .design-page.tpl-terre .xp-desc{font-size:11pt;line-height:1.6;color:var(--terre-texte);margin-top:4mm;}
  .design-page.tpl-terre .xp-desc li{margin-bottom:0;}
  .design-page.tpl-terre .xp-desc li::marker{color:var(--accent-sidebar, var(--accent));}
  /* Formation : le diplôme et ses dates sur une ligne, l'établissement
     dessous — comme les expériences. */
  .design-page.tpl-terre .edu-main-item{
    display:grid;grid-template-columns:1fr auto;column-gap:4mm;align-items:start;margin-bottom:4mm;
  }
  .design-page.tpl-terre .edu-main-item .em-degree{grid-column:1;grid-row:1;}
  .design-page.tpl-terre .edu-main-item .em-date{grid-column:2;grid-row:1 / span 2;margin:0;}
  .design-page.tpl-terre .edu-main-item .em-school{grid-column:1;grid-row:2;font-size:11pt;color:var(--terre-pale);}
  .design-page.tpl-terre .timeline{padding-left:0;}
  .design-page.tpl-terre .timeline::before{display:none;}
  .design-page.tpl-terre .xp-item{padding-left:0;}
  .design-page.tpl-terre .xp-item::before{display:none;}

  /* ----- Modèle Solaire -----
     Colonne vive sur une page bleutée, photo rectangulaire tenue par un
     ruban adhésif, intitulés surlignés, frise à pastilles évidées.
     Typographie de la maquette : une grotesque large (Archivo), très grasse
     pour le nom et les intitulés, maigre et espacée pour le texte. */
  .design-page.tpl-solaire{grid-template-columns:65mm 1fr;background:#ECF2F9;font-family:'Archivo',var(--doc-sans);}
  .design-page.tpl-solaire .sidebar{padding:10.5mm 4.6mm 16mm 5.8mm;}
  .design-page.tpl-solaire .sb-block{padding-left:2.6mm;margin-bottom:10mm;}
  .design-page.tpl-solaire .main{padding:13mm 12mm 16mm 7mm;background:transparent;}
  /* Photo rectangulaire occupant toute la largeur de la colonne, et son
     ruban : un rectangle clair translucide à cheval sur le bord haut. */
  .design-page.tpl-solaire .sb-photo-wrap{position:relative;margin:0 0 14mm;}
  .design-page.tpl-solaire .sb-photo{
    display:block;width:100%;aspect-ratio:1/1.34;object-fit:cover;
    margin:0;border-radius:0;border:0;
  }
  .design-page.tpl-solaire .sb-photo-wrap::after{
    content:'';position:absolute;left:17.7mm;top:-2mm;width:19mm;height:4.2mm;
    background:rgba(246,241,232,.82);z-index:1;
  }
  .design-page.tpl-solaire .cv-name{font-size:40pt;font-weight:800;line-height:1.05;letter-spacing:0;}
  .design-page.tpl-solaire .cv-title{margin-top:1.5mm;font-size:19pt;font-weight:300;letter-spacing:.04em;color:var(--ink);text-transform:none;}
  .design-page.tpl-solaire .cv-summary{font-size:8.5pt;font-weight:300;letter-spacing:.03em;line-height:1.5;}
  /* Intitulés surlignés au feutre : le fond épouse le MOT, pas la colonne,
     donc il s'allonge avec lui. Il couvre le bas des lettres et descend
     sous la ligne de base, comme un trait de surligneur. */
  .design-page.tpl-solaire .sb-block h3,
  .design-page.tpl-solaire .m-block h2{
    display:inline-block;position:relative;z-index:0;
    border-bottom:0;padding:0 4mm 1.2mm 2.2mm;margin-left:-2.2mm;
    font-weight:800;letter-spacing:0;line-height:1.2;text-transform:uppercase;
  }
  /* 12pt : à 13pt, « COMPORTEMENTALES » dépassait la colonne de 2mm. */
  .design-page.tpl-solaire .sb-block h3{font-size:12pt;margin-bottom:4mm;}
  .design-page.tpl-solaire .m-block h2{font-size:16.5pt;margin-bottom:5mm;}
  .design-page.tpl-solaire .sb-block h3::before,
  .design-page.tpl-solaire .m-block h2::before{
    content:'';position:absolute;left:0;right:0;bottom:0;top:45%;z-index:-1;
  }
  /* Dans la colonne, le surlignage est un voile BLANC sur l'ambre ; dans la
     page, c'est l'accent posé sur le papier. Les deux suivent donc la
     couleur choisie par l'utilisateur au lieu d'une teinte figée. */
  .design-page.tpl-solaire .sb-block h3::before{background:#fff;opacity:.6;}
  .design-page.tpl-solaire .m-block h2::before{
    background:var(--accent-sidebar, var(--accent));opacity:.55;
  }
  .design-page.tpl-solaire .sb-block h3{color:var(--sb-ink, var(--ink));}
  .design-page.tpl-solaire .sb-line,
  .design-page.tpl-solaire .sb-skills-line,
  .design-page.tpl-solaire .sb-lang-row{font-size:7.6pt;line-height:1.45;letter-spacing:.1em;}
  /* Frise : années sur deux lignes à droite de leur colonne, filet et
     anneaux dans la teinte de la colonne. */
  .design-page.tpl-solaire .tpl-timeline-item{grid-template-columns:26mm 4mm 1fr;column-gap:2.5mm;margin-bottom:8mm;}
  .design-page.tpl-solaire .tpl-timeline-dot-col::before{
    background:var(--accent-sidebar, var(--accent));width:.45mm;bottom:-8mm;
  }
  .design-page.tpl-solaire .tpl-timeline-dot{
    background:#ECF2F9;border:.45mm solid var(--accent-sidebar, var(--accent));
    width:3mm;height:3mm;margin-top:1.4mm;
  }
  .design-page.tpl-solaire .tpl-timeline-years{font-size:10pt;font-weight:400;line-height:1.3;color:var(--ink);white-space:normal;padding-top:.3mm;}
  .design-page.tpl-solaire .tpl-timeline-years span{display:block;}
  .design-page.tpl-solaire .xp-role,
  .design-page.tpl-solaire .tpl-timeline-content .em-degree{font-size:11pt;font-weight:700;letter-spacing:.06em;color:var(--ink);}
  .design-page.tpl-solaire .xp-org,
  .design-page.tpl-solaire .tpl-timeline-content .em-school{font-size:8pt;font-weight:300;letter-spacing:.05em;color:var(--muted);margin-top:1.4mm;}
  .design-page.tpl-solaire .xp-desc{
    list-style:none;padding-left:0;margin-top:.8mm;
    font-size:8pt;font-weight:300;letter-spacing:.05em;line-height:1.3;color:var(--body);
  }

  /* ----- Modèle Carbone -----
     Feuille en carte aux coins arrondis, nom dans un bandeau gris clair.
     La colonne est claire, et le sombre y dessine deux formes : en haut, un
     écusson dont le bas est un demi-disque autour de la photo ; plus bas, à
     partir de la deuxième rubrique, un pan aux coins supérieurs arrondis qui
     descend jusqu'au bas de la page. Typographie de la maquette : Poppins.
     L'arrondi de la feuille est posé sur la PAGE : le PDF ne le reprend pas,
     une page PDF est rectangulaire et la colonne démarre à 10,5mm du bord. */
  .design-page.tpl-carbone{
    grid-template-columns:79.5mm 1fr;background:#FFFFFF;
    border-radius:4mm;overflow:hidden;font-family:'Poppins',var(--doc-sans);
    --carbone-clair:#EFEFEF;
  }
  .design-page.tpl-carbone .sidebar{
    margin:0 0 0 10.5mm;padding:0 9mm;border-radius:0;
    background:var(--carbone-clair);display:flex;flex-direction:column;
  }
  /* Écusson : un rectangle dont le bas est un demi-disque de la largeur de
     la colonne, centré sur la photo (9,5mm = rayon 34,5 − rayon photo 25). */
  .design-page.tpl-carbone .sb-photo-wrap{
    background:var(--accent-sidebar, var(--accent));
    margin:0 -9mm;padding:11mm 9mm 9.5mm;text-align:center;
    border-radius:0 0 999px 999px;
  }
  .design-page.tpl-carbone .sb-photo{
    display:block;width:50mm;height:50mm;aspect-ratio:1/1;object-fit:cover;
    margin:0 auto;border-radius:50%;border:1.4mm solid #fff;
  }
  /* Première rubrique (contact) : sur le clair, encre du document. */
  .design-page.tpl-carbone .sb-photo-wrap + .sb-block,
  .design-page.tpl-carbone .sidebar > .sb-block:first-child{
    color:var(--ink);margin:0;padding:9mm 0 9mm;
  }
  .design-page.tpl-carbone .sidebar > .sb-block:first-child{padding-top:14mm;}
  .design-page.tpl-carbone .sb-photo-wrap + .sb-block h3,
  .design-page.tpl-carbone .sidebar > .sb-block:first-child h3,
  .design-page.tpl-carbone .sb-photo-wrap + .sb-block .sb-line,
  .design-page.tpl-carbone .sidebar > .sb-block:first-child .sb-line{color:var(--ink);}
  /* Les rubriques suivantes forment le pan sombre : aplats jointifs, coins
     arrondis en tête du premier, le dernier s'étire jusqu'au bas. */
  .design-page.tpl-carbone .sb-block + .sb-block{
    background:var(--accent-sidebar, var(--accent));color:var(--sb-ink, #fff);
    margin:0 -9mm;padding:0 9mm 7mm;
  }
  .design-page.tpl-carbone .sb-photo-wrap + .sb-block + .sb-block,
  .design-page.tpl-carbone .sidebar > .sb-block:first-child + .sb-block{
    border-radius:9mm 9mm 0 0;padding-top:10mm;
  }
  .design-page.tpl-carbone .sb-block:last-child{flex:1 1 auto;padding-bottom:14mm;}
  .design-page.tpl-carbone .sb-block h3{
    font-size:9.5pt;font-weight:600;letter-spacing:0;text-transform:uppercase;margin:0 0 4mm;
  }
  .design-page.tpl-carbone .sb-line{font-size:7.6pt;line-height:1.4;margin-bottom:3.6mm;align-items:center;gap:3.5mm;}
  .design-page.tpl-carbone .sb-skills-line,
  .design-page.tpl-carbone .sb-lang-row{font-size:7.6pt;line-height:1.8;}
  /* Le nom occupe un bandeau clair en tête de la colonne principale. */
  .design-page.tpl-carbone .main{padding:0 12mm 16mm 9mm;}
  .design-page.tpl-carbone .cv-name,
  .design-page.tpl-carbone .cv-title{
    background:var(--carbone-clair);margin:0 -12mm 0 -9mm;padding:0 12mm 0 11mm;
  }
  .design-page.tpl-carbone .cv-name{padding-top:14mm;font-size:36pt;font-weight:700;line-height:1.1;letter-spacing:0;color:var(--ink);}
  .design-page.tpl-carbone .cv-title{
    /* Chevauche le nom de 0,3mm : pas de filet clair entre les deux aplats. */
    margin-top:-.3mm;padding-top:1.3mm;padding-bottom:8mm;font-size:11pt;font-weight:600;letter-spacing:.02em;
    text-transform:none;color:var(--ink);
  }
  .design-page.tpl-carbone .m-block:first-of-type,
  .design-page.tpl-carbone .cv-summary{margin-top:6mm;}
  .design-page.tpl-carbone .m-block h2{
    border-bottom:.35mm solid #6B6B6B;padding-bottom:1.2mm;margin-bottom:3mm;
    text-transform:none;letter-spacing:0;font-size:15.5pt;font-weight:400;line-height:1.2;color:var(--ink);
  }
  /* « About Me » : petit intitulé gras, sans filet, collé à son texte. */
  .design-page.tpl-carbone .m-block:has(> .cv-summary) h2{
    font-size:9.5pt;font-weight:600;border-bottom:0;padding-bottom:0;margin-bottom:1.5mm;
  }
  .design-page.tpl-carbone .cv-summary{margin-top:0;font-size:7.6pt;font-weight:300;line-height:1.55;text-align:justify;}
  .design-page.tpl-carbone .xp-role,
  .design-page.tpl-carbone .edu-main-item .em-school{font-size:9.5pt;font-weight:600;color:var(--ink);}
  .design-page.tpl-carbone .xp-org,
  .design-page.tpl-carbone .edu-main-item .em-degree{font-size:7.8pt;font-weight:700;letter-spacing:.02em;color:var(--ink);}
  .design-page.tpl-carbone .xp-date,
  .design-page.tpl-carbone .edu-main-item .em-date{font-size:8.6pt;font-weight:400;color:var(--ink);}
  .design-page.tpl-carbone .xp-desc{font-size:7.6pt;font-weight:300;line-height:1.55;color:var(--body);margin-top:.8mm;}
  .design-page.tpl-carbone .xp-item{margin-bottom:6mm;}
  /* Pictogrammes de contact en glyphes pleins, dans l'encre du bloc. */
  .design-page.tpl-carbone .sb-line svg{width:4mm;height:4mm;flex:0 0 auto;color:currentColor;margin-top:0;}
  /* Listes à puces de la colonne (bloc « Expertise » de la maquette). */
  .design-page.tpl-carbone .sb-puces{
    list-style:none;margin:0;padding:0;font-size:7.6pt;font-weight:500;line-height:1.95;
    color:var(--sb-ink, rgba(239,237,230,.9));
  }
  .design-page.tpl-carbone .sb-puces li{padding-left:4mm;position:relative;}
  .design-page.tpl-carbone .sb-puces li::before{
    content:'';position:absolute;left:0;top:1.8mm;
    width:1.2mm;height:1.2mm;border-radius:50%;background:currentColor;
  }
  .design-page.tpl-carbone .sb-puces li span{opacity:.7;}
  /* Formation : l'école et les dates sur une ligne, le diplôme en gras
     dessous — l'ordre de la maquette, obtenu en réordonnant les trois
     éléments plutôt qu'en changeant le balisage. */
  .design-page.tpl-carbone .edu-main-item{
    display:grid;grid-template-columns:1fr auto;column-gap:4mm;align-items:baseline;margin-bottom:3mm;
  }
  .design-page.tpl-carbone .edu-main-item .em-school{order:1;grid-column:1;margin-top:0;font-weight:400;}
  .design-page.tpl-carbone .edu-main-item .em-date{order:2;grid-column:2;margin-top:0;white-space:nowrap;}
  .design-page.tpl-carbone .edu-main-item .em-degree{order:3;grid-column:1 / -1;margin-top:.6mm;}
  .design-page.tpl-carbone .timeline{padding-left:0;}
  .design-page.tpl-carbone .timeline::before{display:none;}
  .design-page.tpl-carbone .xp-item{padding-left:0;}
  .design-page.tpl-carbone .xp-item::before{display:none;}

  /* ----- Modèle Cadre -----
     Aucun aplat : une colonne claire séparée par un filet, des titres
     soulignés. C'est le modèle qui s'imprime le mieux en noir et blanc.
     Jumeau de DESIGN_VARIANTS.cadre ; la colonne claire reprend les règles
     du Canadien (texte en encre au lieu de blanc cassé). */
  .design-page.tpl-cadre .sidebar,
  .design-page.tpl-entete .sidebar,
  .design-page.tpl-prairie .sidebar,
  .design-page.tpl-sobre .sidebar,
  /* Carnet aussi : sa colonne est le papier crème lui-même. Sans cette
     ligne, l'encre suivait la couleur (sombre) de la zone et les noms des
     savoir-être s'écrivaient en blanc sur le crème — invisibles. */
  .design-page.tpl-carnet .sidebar{--sb-ink:var(--ink);}

  /* Typographie de la maquette : Inter, très grasse pour le nom et les
     rubriques, qui sont soulignées d'un filet gris ; texte courant petit et
     justifié. */
  .design-page.tpl-cadre{grid-template-columns:72mm 1fr;background:#F7F7F5;font-family:'Inter',var(--doc-sans);}
  .design-page.tpl-cadre .sidebar{
    background:transparent;color:var(--ink);
    padding:17mm 5mm 16mm 12mm;
  }
  .design-page.tpl-cadre .main{padding:16mm 12mm 16mm 4.5mm;}
  .design-page.tpl-cadre .sb-photo{
    display:block;width:100%;aspect-ratio:1/1.16;object-fit:cover;
    margin:0 0 6mm;border-radius:0;border:0;
  }
  /* Le texte de la colonne est justifié : c'est ce qui donne au modèle son
     air de document administratif. */
  .design-page.tpl-cadre .sb-line,
  .design-page.tpl-cadre .sb-skills-line{text-align:justify;}
  .design-page.tpl-cadre .sb-line{font-size:7.4pt;line-height:1.4;margin-bottom:2.2mm;align-items:center;gap:2.5mm;}
  .design-page.tpl-cadre .sb-line svg{width:3.4mm;height:3.4mm;margin-top:0;color:var(--ink);}
  .design-page.tpl-cadre .sb-skills-line,
  .design-page.tpl-cadre .sb-lang-row{font-size:7.4pt;line-height:1.45;color:var(--ink);}
  /* « dates | employeur » en gris au-dessus du poste. Le div sans classe qui
     enveloppe poste et employeur est effacé par display:contents, ce qui
     rend les trois éléments frères : sans cela, aucun ordre ne pourrait les
     réarranger. row-gap:0 : la maquette ne sépare la ligne des dates du
     poste que d'un filet d'air. */
  .design-page.tpl-cadre .xp-head{
    display:grid;grid-template-columns:auto 1fr;column-gap:2mm;row-gap:0;align-items:baseline;
  }
  .design-page.tpl-cadre .xp-head > div:not([class]){display:contents;}
  .design-page.tpl-cadre .xp-date{order:1;grid-column:1;font-size:7.4pt;font-weight:400;color:var(--ink);}
  .design-page.tpl-cadre .xp-org{
    order:2;grid-column:2;color:var(--ink);font-weight:400;font-size:7.4pt;
  }
  .design-page.tpl-cadre .xp-org::before{content:'|  ';}
  .design-page.tpl-cadre .xp-role{order:3;grid-column:1 / -1;margin-top:.4mm;font-size:9.6pt;font-weight:700;color:var(--ink);}
  .design-page.tpl-cadre .xp-desc{font-size:7.4pt;line-height:1.35;color:var(--ink);margin-top:1.4mm;text-align:justify;}
  .design-page.tpl-cadre .xp-item{margin-bottom:5mm;}
  .design-page.tpl-cadre .sb-block h3{
    font-size:13.5pt;letter-spacing:0;font-weight:800;line-height:1.15;text-transform:uppercase;
    color:var(--ink);margin:0 0 3mm;padding-bottom:1.6mm;
    border-bottom:.35mm solid #9A9A9A;
  }
  .design-page.tpl-cadre .sb-block{margin-bottom:8mm;}
  .design-page.tpl-cadre .sb-line{color:var(--ink);}
  /* Nom en grandes capitales très grasses ; l'intitulé est pris entre deux
     filets, comme sur la maquette. */
  .design-page.tpl-cadre .cv-name{
    font-size:37pt;font-weight:800;line-height:1.05;text-transform:uppercase;letter-spacing:0;color:var(--ink);
    padding-bottom:2.2mm;border-bottom:.35mm solid #9A9A9A;
  }
  .design-page.tpl-cadre .cv-title{
    font-size:11.5pt;font-weight:400;letter-spacing:.02em;color:var(--ink);text-transform:none;
    margin-top:0;padding:2.6mm 0 3mm;border-bottom:.35mm solid #9A9A9A;
  }
  .design-page.tpl-cadre .m-block h2{
    border-bottom:.35mm solid #9A9A9A;padding-bottom:1.6mm;margin-bottom:3mm;
    font-size:15.5pt;font-weight:800;letter-spacing:.02em;line-height:1.15;color:var(--ink);
  }
  .design-page.tpl-cadre .cv-summary{font-size:7.4pt;line-height:1.35;text-align:justify;color:var(--ink);}
  .design-page.tpl-cadre .edu-main-item .em-degree{font-size:9.6pt;font-weight:700;color:var(--ink);}
  .design-page.tpl-cadre .edu-main-item .em-school,
  .design-page.tpl-cadre .edu-main-item .em-date{font-size:7.4pt;color:var(--ink);}
  .design-page.tpl-cadre .timeline{padding-left:0;}
  .design-page.tpl-cadre .timeline::before{display:none;}
  .design-page.tpl-cadre .xp-item{padding-left:0;}
  .design-page.tpl-cadre .xp-item::before{display:none;}

  /* ----- Modèles à bandeau : En-tête et Prairie -----
     Le bandeau est peint dans le FOND de la page, pas inséré dans le flux :
     la structure du CV (colonne + colonne) est la même partout, et aucun
     élément ne vient s'intercaler dans le DOM. Les deux colonnes descendent
     simplement de la hauteur du bandeau. C'est aussi ce que fait
     l'exportateur (topBand dans DESIGN_VARIANTS) : un rectangle peint sur la
     première page, et des marges hautes qui l'englobent.
     Ces deux modèles ont une colonne CLAIRE : une colonne de couleur pleine
     hauteur recouvrirait le bandeau sur sa largeur. */
  .design-page.tpl-prairie{grid-template-columns:73.5mm 1fr;font-family:'Poppins',var(--doc-sans);}
  .design-page.tpl-entete{grid-template-columns:76mm 1fr;font-family:'Montserrat',var(--doc-sans);}
  /* Le bandeau n'est plus un fond de page de hauteur fixe (47mm) : il est
     accroché sous l'intitulé (.cv-title::after, plus bas) et s'arrête 8mm
     après lui, comme sur la maquette. À 47mm fixes, un nom tenant sur une
     ligne remontait le résumé DANS le bandeau ; un nom sur trois lignes
     débordait dessous. isolation : le bandeau (z-index:-1) se peint sur le
     fond de la page et sous les cartes de la colonne. */
  .design-page.tpl-entete{background:var(--page-bg, #FFFFFF);isolation:isolate;}
  .design-page.tpl-prairie{background:#FFFFFF;}
  /* Panneau pâle posé sur le bandeau : la teinte est celle de la colonne
     délavée d'un quart, pour qu'elle suive la couleur choisie au lieu d'un
     bleu figé. */
  /* La colonne n'est pas un panneau mais une PILE de cartes pâles séparées
     d'un filet de blanc : la photo et le contact sur la première, puis une
     carte par rubrique. La teinte est celle de la colonne délavée, pour
     qu'elle suive la couleur choisie au lieu d'un bleu figé. */
  .design-page.tpl-entete .sidebar{
    color:var(--ink);background:transparent;
    margin:9.8mm 0 12mm 8.3mm;padding:0;
    --entete-carte:color-mix(in srgb, var(--accent-sidebar, var(--accent)) 30%, #fff);
  }
  .design-page.tpl-entete .sb-photo-wrap,
  .design-page.tpl-entete .sb-block{background:var(--entete-carte);padding:0 6mm 6mm 4.1mm;margin:0;}
  .design-page.tpl-entete .sb-block{margin-top:2.4mm;padding-top:5mm;}
  .design-page.tpl-entete .sb-photo-wrap{padding-top:9mm;padding-bottom:9mm;}
  .design-page.tpl-entete .sb-photo-wrap + .sb-block{margin-top:0;padding-top:0;}
  .design-page.tpl-entete .sb-block:last-child{padding-bottom:12mm;}
  /* Prairie : colonne claire, photo ronde posée en haut, qui déborde sur le
     bandeau de la colonne voisine. */
  /* La colonne est positionnée SANS z-index : elle ne forme pas de plan à
     part, si bien que la photo (plan 3) passe au-dessus de la colonne
     principale (plan 2) et de son bandeau. */
  .design-page.tpl-prairie .sidebar{
    background:#F7F7F5;color:var(--ink);
    padding:74mm 8mm 16mm 10mm;
    position:relative;
  }
  /* Disque hors du flux, à cheval sur la bande — voir Sobre, même montage. */
  .design-page.tpl-prairie .sb-photo-wrap{
    position:absolute;left:10.5mm;top:16.5mm;width:49.9mm;height:49.9mm;
    margin:0;z-index:3;
  }
  .design-page.tpl-prairie .sb-photo{
    width:100%;height:100%;object-fit:cover;margin:0;
    border-radius:50%;border:2mm solid #fff;
  }
  /* La bande porte le nom et part de DERRIÈRE la photo : son bord gauche
     (42,5mm) tombe à l'intérieur du disque sur toute sa hauteur, si bien
     que la bande semble sortir du cercle, comme sur la maquette. */
  .design-page.tpl-prairie .main{
    padding:26.6mm 14mm 16mm 14mm;background:transparent;position:relative;z-index:2;
  }
  .design-page.tpl-prairie .cv-name,
  .design-page.tpl-prairie .cv-title{
    background:var(--accent-sidebar, var(--accent));
    color:var(--sb-ink, #fff);margin:0 -14mm 0 -45mm;padding:0 14mm 0 45mm;
  }
  .design-page.tpl-prairie .cv-name{
    color:var(--sb-ink-titre, #fff);
    padding-top:5.5mm;font-size:33pt;font-weight:700;line-height:1.1;
    letter-spacing:.02em;text-transform:uppercase;
  }
  /* Nom long (classeNomLong dans js/cv-render.js) : deux lignes au plus,
     pour que le bandeau s'arrête avant le texte de la colonne (74mm). */
  .design-page.tpl-prairie .cv-name.nom-long{font-size:24pt;}
  .design-page.tpl-prairie .cv-name.nom-tres-long{font-size:19pt;}
  .design-page.tpl-prairie .cv-title{
    /* Chevauche le nom de 0,3mm : deux aplats bord à bord laissaient
       passer un filet clair entre eux à certains zooms. */
    margin-top:-.3mm;padding-top:.9mm;padding-bottom:6.2mm;
    font-size:13.5pt;font-weight:500;line-height:1.2;letter-spacing:.05em;
    text-transform:uppercase;
    /* Atténué, et non blanc : la teinte de la bande poussée vers l'encre que
       le contraste automatique a retenue pour elle. Sur la bande verte de la
       maquette cela donne le vert sombre relevé (#3D634D) ; sur une bande
       foncée, un gris clair — dans les deux cas, lisible. */
    color:#3D634D;
    color:color-mix(in srgb, var(--accent-sidebar, var(--accent)) 45%, var(--sb-ink, var(--ink)));
  }
  /* Le contenu reprend après le bandeau. */
  .design-page.tpl-prairie .m-block:first-of-type,
  .design-page.tpl-prairie .cv-summary{margin-top:9mm;}
  /* Le filet s'arrête sous le bandeau plutôt que de le barrer. */
  .design-page.tpl-entete .main{padding:12.4mm 9.5mm 16mm 8mm;background:transparent;}
  /* Le nom tombe DANS le bandeau, aligné sur la photo : c'est ce que montre
     la maquette, et l'exportateur fait de même (mainPadTop de 14mm, sous un
     bandeau de 47mm). */
  /* Nom en capitales de la teinte du contenu, intitulé en petites
     capitales espacées : l'en-tête de la maquette. */
  .design-page.tpl-entete .cv-name{
    font-size:29pt;font-weight:600;line-height:1.03;letter-spacing:.05em;text-transform:uppercase;
    color:var(--accent-content, var(--accent));min-height:0;
  }
  .design-page.tpl-entete .cv-title{
    margin-top:2.6mm;font-size:10.5pt;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
    color:var(--accent-content, var(--accent));
    margin-bottom:17mm;position:relative;
  }
  .design-page.tpl-entete .cv-title::after{
    content:'';position:absolute;z-index:-1;
    left:-120mm;right:-20mm;top:-80mm;bottom:-8mm;
    background:var(--accent-sidebar, var(--accent));
  }
  .design-page.tpl-entete .cv-summary{font-size:9.2pt;line-height:1.6;letter-spacing:.02em;color:var(--ink);}
  .design-page.tpl-entete .xp-role{text-transform:uppercase;font-size:10pt;font-weight:700;color:var(--accent-content, var(--accent));}
  .design-page.tpl-entete .xp-date{font-size:10pt;font-weight:700;font-style:normal;color:var(--accent-content, var(--accent));}
  .design-page.tpl-entete .xp-item{margin-bottom:5.5mm;}
  .design-page.tpl-entete .xp-org{font-size:10.5pt;font-style:italic;color:var(--accent-content, var(--accent));}
  .design-page.tpl-entete .xp-desc{font-size:9.2pt;line-height:1.6;letter-spacing:.02em;color:var(--ink);list-style:none;padding-left:0;margin-top:1.8mm;}
  .design-page.tpl-entete .xp-desc li{margin-bottom:0;}
  .design-page.tpl-entete .edu-main-item .em-degree{font-size:8pt;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--accent-content, var(--accent));}
  .design-page.tpl-entete .edu-main-item .em-school{font-size:8pt;font-style:italic;color:var(--ink);}
  .design-page.tpl-entete .edu-main-item .em-date{font-size:8pt;font-weight:600;color:var(--ink);}
  /* Portrait rectangulaire, dans la première carte. */
  .design-page.tpl-entete .sb-photo{
    display:block;width:45.8mm;height:50.3mm;object-fit:cover;
    margin:0 0 0 4.9mm;border-radius:0;border:0;
  }
  .design-page.tpl-entete .sb-line,
  .design-page.tpl-entete .sb-skills-line,
  .design-page.tpl-entete .sb-lang-row{font-size:7.8pt;line-height:1.5;letter-spacing:.03em;}
  .design-page.tpl-entete .sb-line{margin-bottom:3.4mm;align-items:center;gap:4mm;}
  .design-page.tpl-entete .sb-line svg{width:3.6mm;height:3.6mm;margin-top:0;color:var(--accent-content, var(--accent));}
  /* Intitulés de colonne sans filet : gras et teintés sous En-tête, maigres
     et gris sous Prairie, comme leurs maquettes. */
  /* Intitulés en étiquettes : capitales espacées sur un pavé blanc dans la
     colonne, sur un pavé de la teinte du bandeau dans la page. */
  .design-page.tpl-entete .sb-block h3,
  .design-page.tpl-entete .m-block h2{
    display:inline-block;font-size:12.5pt;font-weight:600;line-height:1.2;text-transform:uppercase;
    color:var(--accent-content, var(--accent));
    padding:1.2mm 2.4mm 1.6mm 1.9mm;margin:0 0 4mm -1.9mm;border-bottom:0;
  }
  /* .12em (et non .15em) : « COMPORTEMENTALES » sortait de sa carte de 1mm. */
  .design-page.tpl-entete .sb-block h3{background:#fff;letter-spacing:.12em;}
  .design-page.tpl-prairie .sb-block h3{
    font-size:11pt;letter-spacing:.03em;font-weight:400;color:#606462;text-transform:uppercase;
    margin:0 0 4.5mm;
  }
  .design-page.tpl-prairie .sb-block{margin-bottom:11mm;}
  .design-page.tpl-prairie .sb-line{font-size:8pt;line-height:1.4;margin-bottom:4mm;align-items:center;gap:3mm;}
  .design-page.tpl-prairie .sb-line svg{width:4mm;height:4mm;margin-top:0;}
  .design-page.tpl-prairie .sb-skills-line,
  .design-page.tpl-prairie .sb-lang-row{font-size:8.5pt;line-height:1.75;letter-spacing:.03em;}
  .design-page.tpl-prairie .cv-summary{font-size:9pt;line-height:1.5;}
  .design-page.tpl-prairie .xp-role,
  .design-page.tpl-prairie .edu-main-item .em-degree{font-size:9.5pt;font-weight:600;color:#3F3F3F;}
  .design-page.tpl-prairie .xp-org{font-size:9.5pt;font-style:italic;color:#6B7A70;}
  .design-page.tpl-prairie .edu-main-item .em-school{font-size:9.5pt;color:#3F3F3F;}
  .design-page.tpl-prairie .xp-date,
  .design-page.tpl-prairie .edu-main-item .em-date{font-size:7pt;font-style:italic;color:#3F3F3F;text-align:right;max-width:24mm;}
  .design-page.tpl-prairie .xp-desc{font-size:9.5pt;line-height:1.45;letter-spacing:.02em;color:#3F3F3F;margin-top:4mm;}
  .design-page.tpl-prairie .edu-main-item{
    display:grid;grid-template-columns:1fr auto;column-gap:4mm;align-items:start;margin-bottom:4mm;
  }
  .design-page.tpl-prairie .edu-main-item .em-degree{grid-column:1;grid-row:1;}
  /* La date occupe les deux rangées : quand elle passe sur deux lignes,
     l'établissement reste collé au diplôme au lieu de descendre sous elle. */
  .design-page.tpl-prairie .edu-main-item .em-date{grid-column:2;grid-row:1 / span 2;margin:0;}
  .design-page.tpl-prairie .edu-main-item .em-school{grid-column:1;grid-row:2;}
  .design-page.tpl-entete .sb-line,
  .design-page.tpl-prairie .sb-line{color:var(--ink);}
  .design-page.tpl-entete .sb-line svg,
  .design-page.tpl-prairie .sb-line svg{color:var(--accent-sidebar-tan, var(--accent));}
  .design-page.tpl-entete .sb-skills-line, .design-page.tpl-entete .sb-lang-row,
  .design-page.tpl-prairie .sb-skills-line, .design-page.tpl-prairie .sb-lang-row{color:var(--ink);}
  .design-page.tpl-entete .m-block h2{
    letter-spacing:.12em;margin-left:-1.5mm;padding-left:1.5mm;
    background:color-mix(in srgb, var(--accent-sidebar, var(--accent)) 70%, #fff);
  }
  .design-page.tpl-prairie .m-block h2{
    border-bottom:0;padding-bottom:0;margin-bottom:4.5mm;
    font-size:15pt;font-weight:400;letter-spacing:.02em;line-height:1.2;color:#606462;text-transform:uppercase;
  }
  .design-page.tpl-entete .timeline, .design-page.tpl-prairie .timeline{padding-left:0;}
  .design-page.tpl-entete .timeline::before, .design-page.tpl-prairie .timeline::before{display:none;}
  .design-page.tpl-entete .xp-item, .design-page.tpl-prairie .xp-item{padding-left:0;}
  .design-page.tpl-entete .xp-item::before, .design-page.tpl-prairie .xp-item::before{display:none;}

  /* ----- Modèle Carnet -----
     Une page de carnet à spirale : papier crème pointillé, reliure noire le
     long du bord gauche, tranche kraft à droite et en bas. Le nom est écrit
     à la plume, la page se lit en deux colonnes — le parcours à gauche, les
     compétences à droite sous une photo penchée, tenue par un trombone.
     Intitulés dans des pastilles cernées, postes et diplômes surlignés.
     Le décor appartient à la PAGE (fonds), jamais au texte : il ne bouge pas
     quand le contenu s'allonge. Le surlignage, lui, est un fond posé sur le
     texte lui-même et suit le mot. */
  .design-page.tpl-carnet{
    grid-template-columns:1fr 66mm;position:relative;
    background-color:#F2EEE7;
    background-image:
      /* tranche kraft du carnet, à droite puis en bas */
      linear-gradient(to left, #CDB696 0 3.2mm, transparent 3.2mm),
      linear-gradient(to top, #CDB696 0 3.2mm, transparent 3.2mm),
      /* reliure : une spire tous les 6,4mm */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 26'%3E%3Cellipse cx='33' cy='14' rx='3.2' ry='2.4' fill='%2335302A'/%3E%3Cpath d='M0 8.5C12 3 27 4 33.5 12.5' fill='none' stroke='%23161412' stroke-width='3.6' stroke-linecap='round'/%3E%3Cpath d='M0 13.5C10 9.5 23 10 31 14.5' fill='none' stroke='%23565048' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"),
      /* pointillés du papier */
      radial-gradient(circle, rgba(60,55,45,.2) .3mm, transparent .32mm);
    background-size:100% 100%, 100% 100%, 11mm 6.4mm, 5mm 5mm;
    background-position:0 0, 0 0, 0 3mm, 0 0;
    background-repeat:no-repeat, no-repeat, repeat-y, repeat;
  }
  .design-page.tpl-carnet .main{grid-column:1;grid-row:1;padding:17mm 5mm 16mm 32mm;background:transparent;}
  .design-page.tpl-carnet .sidebar{
    grid-column:2;grid-row:1;background:transparent;color:var(--ink);
    padding:13mm 11mm 16mm 3mm;text-align:center;
  }
  /* Pictogrammes des intitulés : le balisage est écrit par
     renderDesignClassic pour tous les modèles qui en héritent, et la
     maquette n'en porte pas dans ses pastilles. */
  .carnet-ico{display:none;}
  /* Photo penchée, trombone sur son coin haut droit. */
  .design-page.tpl-carnet .sb-photo-wrap{margin:0 0 9mm;}
  .design-page.tpl-carnet .sb-photo{
    display:block;width:48mm;height:56mm;object-fit:cover;margin:0 auto;
    border-radius:0;border:0;transform:rotate(3.5deg);
  }
  .design-page.tpl-carnet::after{
    content:'';position:absolute;top:7mm;right:10mm;
    width:10mm;height:24mm;z-index:3;
    background-repeat:no-repeat;background-size:contain;background-position:top center;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 104'%3E%3Cpath d='M22 6c8 0 14 5 14 13v62c0 11-8 19-19 19S-2 92-2 81V22' fill='none' stroke='%238C8578' stroke-width='6' stroke-linecap='round' transform='translate(5 0)'/%3E%3Cpath d='M22 20v58c0 6-4 10-9 10s-9-4-9-10V30' fill='none' stroke='%23B9B2A2' stroke-width='6' stroke-linecap='round' transform='translate(5 0)'/%3E%3C/svg%3E");
    pointer-events:none;
  }
  /* Nom à la plume, intitulé de poste dans une pastille. */
  .design-page.tpl-carnet .cv-name{
    font-family:'Pinyon Script',var(--doc-serif);font-size:38pt;font-weight:400;line-height:1.2;
    letter-spacing:0;text-transform:none;color:#161412;
  }
  .design-page.tpl-carnet .cv-title{
    display:inline-block;margin-top:2mm;padding:1.6mm 9mm;
    border:.35mm solid #161412;border-radius:99px;
    font-size:7.4pt;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#161412;
  }
  .design-page.tpl-carnet .cv-summary{font-size:8pt;line-height:1.45;text-align:justify;color:#161412;margin-top:4mm;}
  /* Pastilles cernées, larges et centrées sur leur texte. */
  .design-page.tpl-carnet .m-block h2,
  .design-page.tpl-carnet .sb-block h3{
    display:block;box-sizing:border-box;text-align:center;
    font-size:7.4pt;font-weight:600;letter-spacing:.02em;line-height:1.2;text-transform:uppercase;color:#161412;
    padding:2.1mm 3mm;border:.35mm solid #161412;border-radius:99px;margin:0 0 4mm;
  }
  .design-page.tpl-carnet .m-block h2{width:62mm;margin-top:3mm;}
  .design-page.tpl-carnet .m-block h2::before{content:none;}
  .design-page.tpl-carnet .m-block:has(> .cv-summary) h2{display:none;}
  .design-page.tpl-carnet .sb-block h3{width:42mm;margin-left:auto;margin-right:auto;}
  .design-page.tpl-carnet .sb-block{margin-bottom:6mm;}
  /* Postes et diplômes : capitales grasses en italique, surlignées. */
  .design-page.tpl-carnet .xp-head{display:block;}
  .design-page.tpl-carnet .xp-role,
  .design-page.tpl-carnet .em-degree{
    display:inline;background:#F2EE4E;padding:.2mm 1mm;line-height:1.5;
    font-size:7pt;font-weight:700;font-style:italic;text-transform:uppercase;color:#161412;
    -webkit-box-decoration-break:clone;box-decoration-break:clone;
  }
  .design-page.tpl-carnet .xp-org,
  .design-page.tpl-carnet .em-school{display:block;margin-top:1.8mm;font-size:7.6pt;font-weight:400;font-style:normal;color:#161412;}
  .design-page.tpl-carnet .xp-date,
  .design-page.tpl-carnet .em-date{display:block;font-size:7.6pt;font-weight:400;font-style:normal;color:#161412;text-align:left;}
  .design-page.tpl-carnet .xp-desc{font-size:7.2pt;font-weight:700;font-style:italic;line-height:1.3;color:#161412;margin-top:1.6mm;}
  .design-page.tpl-carnet .xp-item,
  .design-page.tpl-carnet .edu-main-item{margin-bottom:4mm;}
  /* Colonne de droite : chaque élément surligné, centré. */
  .design-page.tpl-carnet .sb-puces{list-style:none;margin:0;padding:0;}
  .design-page.tpl-carnet .sb-puces li{
    display:table;margin:0 auto 2.2mm;padding:.3mm 1mm;background:#F2EE4E;
    font-size:7pt;font-weight:700;font-style:italic;text-transform:uppercase;line-height:1.35;color:#161412;
  }
  .design-page.tpl-carnet .sb-puces li span{font-weight:400;text-transform:none;}
  /* Coordonnées : pictogramme blanc sur un disque noir, qu'un ::before
     peint SOUS l'icône (z-index négatif dans le contexte de la ligne). */
  .design-page.tpl-carnet .sb-line{
    position:relative;z-index:0;color:#161412;text-align:left;justify-content:flex-start;
    font-size:7.4pt;line-height:1.35;align-items:center;gap:3mm;margin-bottom:2.6mm;
  }
  .design-page.tpl-carnet .sb-line svg{width:5.2mm;height:5.2mm;padding:1.1mm;box-sizing:border-box;margin-top:0;color:#fff;flex:0 0 auto;}
  .design-page.tpl-carnet .sb-line::before{
    content:'';position:absolute;left:0;top:50%;width:5.2mm;height:5.2mm;margin-top:-2.6mm;
    border-radius:50%;background:#161412;z-index:-1;
  }
  .design-page.tpl-carnet .sb-line.empty-hint::before{content:none;}
  .design-page.tpl-carnet .sb-skills-line,
  .design-page.tpl-carnet .sb-lang-row{color:#161412;font-size:7.4pt;}
  .design-page.tpl-carnet .timeline{padding-left:0;}
  .design-page.tpl-carnet .timeline::before{display:none;}
  .design-page.tpl-carnet .xp-item{padding-left:0;}
  .design-page.tpl-carnet .xp-item::before{display:none;}

  /* ----- Modèle Affiche -----
     Aucune colonne latérale : la page est un bloc unique où les rubriques se
     posent sur deux colonnes. C'est le seul modèle du site dont la structure
     diffère vraiment des autres — ailleurs, c'est toujours « colonne de
     gauche + colonne principale ». Ici le regard part du MÉTIER, écrit en
     très grand, et le nom vient après. */
  /* Typographie de la maquette : une linéale noire très grasse pour les
     titres (Archivo), une machine à écrire pour le texte (Courier Prime),
     une linéale simple pour les intitulés d'entrée. */
  .design-page.tpl-affiche{grid-template-columns:1fr;background:#F8EADA;font-family:'Courier Prime','Courier New',monospace;}
  .design-page.tpl-affiche .sidebar{display:none;}
  .design-page.tpl-affiche .main{padding:16mm 16mm 14mm;background:transparent;}
  /* Le métier sur deux lignes : la première pleine, la seconde en contour. */
  .design-page.tpl-affiche .aff-display{
    font-family:'Archivo',var(--doc-sans);font-size:40pt;line-height:1.02;font-weight:900;letter-spacing:-.01em;
    text-align:center;text-transform:uppercase;color:var(--ink);
    margin:0 0 7mm;
  }
  .design-page.tpl-affiche .aff-display span{display:block;}
  .design-page.tpl-affiche .aff-contour{color:transparent;-webkit-text-stroke:.45mm var(--ink);}
  /* La silhouette occupe une GOUTTIÈRE qui lui est réservée : une colonne
     vide au centre, large de 40mm, entre le résumé et le nom — puis entre
     Formation et Contact plus bas. Elle peut donc déborder vers le bas sans
     jamais heurter un mot, quelle que soit la longueur des textes.
     C'est ce qui permet de tenir une maquette où le sujet est posé par-dessus
     la page : le texte ne coule pas AUTOUR de l'image (aucun navigateur ne
     sait le faire proprement sur deux colonnes), il coule À CÔTÉ, dans deux
     colonnes qui l'ignorent. */
  .design-page.tpl-affiche .aff-top{
    display:grid;grid-template-columns:1fr 40mm 1fr;gap:0 6mm;align-items:center;
    margin-bottom:7mm;
  }
  .design-page.tpl-affiche .aff-top-mid{position:relative;z-index:2;}
  .design-page.tpl-affiche .aff-summary{font-size:10.5pt;line-height:1.4;color:var(--ink);}
  /* Le débordement vers le bas se fait par une marge basse négative : la
     suite de la page remonte derrière la silhouette au lieu d'être repoussée.
     object-fit:contain et le fond transparent préservent un PNG détouré ; une
     photo rectangulaire ordinaire reste simplement cadrée dans la même boîte. */
  .design-page.tpl-affiche .aff-photo{
    display:block;width:40mm;height:62mm;object-fit:contain;object-position:bottom center;
    margin-bottom:-20mm;background:transparent;border-radius:0;
  }
  .design-page.tpl-affiche .aff-top-right{text-align:center;}
  .design-page.tpl-affiche .aff-name{font-size:18pt;font-weight:400;color:var(--ink);}
  .design-page.tpl-affiche .aff-fleche{font-size:16pt;line-height:1.1;margin-top:1mm;color:var(--ink);}
  /* Pastille : son contour entoure le texte, donc elle s'adapte à une adresse
     de n'importe quelle longueur. */
  .design-page.tpl-affiche .aff-pill{
    display:inline-block;margin-top:1.5mm;padding:1.4mm 4mm;
    background:var(--ink);border-radius:99px;
    font-size:8.5pt;color:#F8EADA;overflow-wrap:anywhere;
  }
  .design-page.tpl-affiche .aff-rule{height:.4mm;background:var(--ink);opacity:.75;margin:5mm 0;}
  /* Même gouttière centrale que l'en-tête : c'est dans cette colonne vide que
     descend la silhouette. */
  .design-page.tpl-affiche .aff-two{display:grid;grid-template-columns:1fr 40mm 1fr;gap:0 6mm;}
  .design-page.tpl-affiche .aff-two>.aff-block:nth-child(2){grid-column:3;}
  .design-page.tpl-affiche .aff-two-exp{grid-template-columns:1fr 1fr;gap:0 9mm;}
  .design-page.tpl-affiche .aff-two-exp>div:nth-child(2){grid-column:auto;}
  .design-page.tpl-affiche .aff-two-exp>div+div{border-left:.3mm solid rgba(28,27,24,.25);padding-left:7mm;}
  .design-page.tpl-affiche .aff-block h2,
  .design-page.tpl-affiche .aff-center-title{
    font-family:'Archivo',var(--doc-sans);font-size:20pt;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;
    line-height:1.1;color:var(--ink);margin:0 0 5mm;border:0;padding:0;
  }
  .design-page.tpl-affiche .aff-center-title{text-align:center;margin:0 0 5mm;}
  /* Les langues sont rangées DANS le bloc Contact : sans cet écart, leur
     intitulé collait à la dernière ligne de coordonnées. */
  .design-page.tpl-affiche .aff-block .aff-block{margin-top:6mm;}
  .design-page.tpl-affiche .aff-entry{margin-bottom:5mm;}
  .design-page.tpl-affiche .aff-entry-title{font-family:var(--doc-sans);font-size:11pt;font-weight:400;letter-spacing:-.01em;color:var(--ink);}
  .design-page.tpl-affiche .aff-entry-sub{font-size:9pt;color:var(--ink);margin-top:.4mm;}
  .design-page.tpl-affiche .aff-entry-date{font-size:9pt;color:var(--ink);margin-top:0;}
  /* Puces en flèches, comme sur la maquette. */
  .design-page.tpl-affiche .aff-bullets{list-style:none;margin:3mm 0 0;padding:0;}
  .design-page.tpl-affiche .aff-bullets li{font-size:9pt;line-height:1.4;color:var(--ink);margin-bottom:.6mm;}
  .design-page.tpl-affiche .aff-bullets li::before{content:'→  ';}
  .design-page.tpl-affiche .aff-contact{font-size:9.5pt;line-height:1.5;color:var(--ink);}
  .design-page.tpl-affiche .aff-lang{font-size:9.5pt;color:var(--ink);margin-top:1mm;}
  .design-page.tpl-affiche .aff-lang span{color:var(--muted);}
  /* Langues en points, étoiles ou barre : la rangée prend l'encre de la page
     (sinon elle héritait du blanc des colonnes sombres et le nom disparaissait). */
  .design-page.tpl-affiche .sb-lang-row{font-size:9.5pt;color:var(--ink);margin-top:1mm;--accent-sidebar-tan:var(--ink);}
  .design-page.tpl-affiche .sb-lang-row .tpl-skill-stars{font-size:9.5pt;color:color-mix(in srgb, var(--ink) 25%, transparent);}
  .design-page.tpl-affiche .aff-tags{
    display:flex;flex-wrap:wrap;gap:2.5mm;justify-content:center;margin-top:8mm;
  }
  .design-page.tpl-affiche .aff-tags span{
    font-size:11pt;padding:1.2mm 4mm;border-radius:99px;
    background:var(--ink);color:#F8EADA;
  }

  /* ----- Modèle Cartes -----
     Chaque rubrique est posée sur sa propre carte blanche, sur un papier
     teinté, l'intitulé dans une pastille de couleur. Un en-tête pleine
     largeur, puis deux colonnes inégales. Jumeau de CARTES_LAYOUT et de
     buildDesignCartesPdfDoc dans js/export-pdf-design.js. */
  .design-page.tpl-cartes{
    grid-template-columns:1fr;
    background:linear-gradient(160deg,#F3F5F7 0%,#E3E5F5 60%,#CFD1EE 100%);
  }
  .design-page.tpl-cartes .sidebar{display:none;}
  .design-page.tpl-cartes .main{padding:10mm 10mm 12mm;background:transparent;}
  /* Cartes posées sur le papier : coins arrondis et ombre douce, comme sur
     la maquette (le PDF dessine l'ombre, voir apercuRasteriserOmbre). */
  .design-page.tpl-cartes .crt-card{
    background:#FFFDF8;border-radius:4.5mm;padding:6mm 6mm 5mm;margin-bottom:5mm;
    box-shadow:0 1.2mm 4mm rgba(40,45,80,.16);
  }
  .design-page.tpl-cartes .crt-head{
    display:flex;align-items:center;gap:6mm;padding:5mm 6mm;
  }
  .design-page.tpl-cartes .crt-photo{
    display:block;width:32mm;height:30mm;object-fit:cover;border-radius:4mm;
  }
  .design-page.tpl-cartes .crt-name{
    margin:0;font-size:24pt;font-weight:800;color:var(--ink);line-height:1.1;
  }
  /* Pastille : son contour suit le texte, donc un intitulé de poste long ne
     la fait pas déborder. */
  .design-page.tpl-cartes .crt-role-pill{
    display:inline-block;margin-top:2.5mm;padding:1.6mm 5mm;border-radius:99px;
    background:var(--accent-sidebar, var(--accent));color:#22301E;
    font-size:10.5pt;font-weight:700;
  }
  .design-page.tpl-cartes .crt-contact{margin-top:3mm;font-size:9pt;color:var(--muted);}
  .design-page.tpl-cartes .crt-grid{display:grid;grid-template-columns:1fr 52mm;gap:5mm;align-items:start;}
  .design-page.tpl-cartes .crt-pill{
    display:inline-block;margin:0 0 4mm;padding:1.6mm 4.5mm;border-radius:99px;
    background:var(--accent-content, var(--accent));color:#fff;
    font-size:9.5pt;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
    border:0;
  }
  .design-page.tpl-cartes .crt-pill::before{content:none;}
  /* Cartes d'appoint : fond de couleur, pastille blanche à texte coloré. */
  .design-page.tpl-cartes .crt-card-fill{padding:5mm;}
  .design-page.tpl-cartes .crt-card-a{background:var(--accent-sidebar, var(--accent));}
  .design-page.tpl-cartes .crt-card-b{background:var(--accent-content, var(--accent));}
  /* Carte verte : pastille sombre ; carte orange : pastille blanche au texte
     orange, et ses éléments en pastilles cernées de blanc. */
  .design-page.tpl-cartes .crt-card-fill .crt-pill{background:#fff;color:var(--ink);}
  .design-page.tpl-cartes .crt-card-a .crt-pill{background:#2C3A28;color:#fff;}
  .design-page.tpl-cartes .crt-card-b .crt-pill{background:#fff;color:var(--accent-content, var(--accent));}
  .design-page.tpl-cartes .crt-card-b .crt-tags span{background:transparent;border:.35mm solid rgba(255,255,255,.9);color:#fff;}
  /* Carte étroite : pastille plus petite, pour que « comportementales »
     tienne sur sa ligne au lieu d'être coupé en deux. */
  .design-page.tpl-cartes .crt-col-side .crt-pill{font-size:8pt;padding:1.6mm 3mm;}
  .design-page.tpl-cartes .crt-tags{display:flex;flex-direction:column;gap:2mm;}
  .design-page.tpl-cartes .crt-tags span{
    background:#fff;border-radius:99px;padding:1.2mm 3.5mm;
    font-size:8pt;font-weight:700;color:var(--ink);text-align:center;
  }
  .design-page.tpl-cartes .crt-col-side .crt-card{text-align:center;}
  .design-page.tpl-cartes .crt-summary{font-size:9.5pt;line-height:1.6;color:var(--ink);}
  .design-page.tpl-cartes .crt-entry{margin-bottom:4.5mm;}
  .design-page.tpl-cartes .crt-entry:last-child{margin-bottom:0;}
  .design-page.tpl-cartes .crt-entry-head{display:flex;align-items:baseline;gap:2mm;flex-wrap:wrap;}
  .design-page.tpl-cartes .crt-dot{
    width:2.4mm;height:2.4mm;border-radius:50%;flex-shrink:0;
    background:var(--accent-content, var(--accent));
  }
  .design-page.tpl-cartes .crt-entry-title{font-size:10.5pt;font-weight:700;color:var(--ink);}
  .design-page.tpl-cartes .crt-entry-date{margin-left:auto;font-size:8.5pt;color:var(--muted);white-space:nowrap;}
  .design-page.tpl-cartes .crt-entry-org{
    font-size:9pt;font-weight:600;margin:.8mm 0 0 4.4mm;
    color:var(--accent-sidebar, var(--accent));
  }
  .design-page.tpl-cartes .crt-bullets{margin:1.8mm 0 0 4.4mm;padding-left:4mm;}
  .design-page.tpl-cartes .crt-bullets li{font-size:9pt;line-height:1.5;color:var(--ink);margin-bottom:1mm;}
  .design-page.tpl-cartes .crt-bullets li::marker{color:var(--accent-content, var(--accent));}

  /* ----- Modèle Académique -----
     Colonne pâle sur papier ivoire. Le texte de la colonne n'est plus écrit
     en blanc : --sb-ink suit la clarté du fond (voir encreSurFond dans
     js/app.js), ce qui rend ce modèle possible. Jumeau de
     DESIGN_VARIANTS.academique. */
  .design-page.tpl-academique{
    grid-template-columns:79.8mm 1fr;font-family:'IBM Plex Sans',var(--doc-sans);
    /* Le fond est dessiné pour une page entière : il s'étire à sa taille.
       Son rapport (0,698) diffère de 1,3 % de celui de l'A4 ; l'écart ne se
       voit pas, et « cover » couperait le feuillage. Par-dessus, un aplat de
       la teinte de la colonne efface le pavé « Disponibilités » de la
       maquette : le CV n'a pas cette rubrique, et le texte qui tombait
       dessus s'écrivait bleu sur bleu. */
    background:
      linear-gradient(#CEE5FF, #CEE5FF) no-repeat 0 150.5mm / 79.6mm 33mm,
      url('../assets/templates/academique-fond.webp') no-repeat top left / 100% 297mm,
      #FEFFFA linear-gradient(#CEE5FF, #CEE5FF) no-repeat 0 0 / 79.6mm 100%;
  }
  /* Le fond est calé sur UNE page A4 (297mm), et non sur toute la hauteur
     du CV : étiré sur un CV de deux pages, le pavé « Disponibilités » glissait
     hors de l'aplat qui le cache et apparaissait au milieu de la colonne, et
     le PDF reposait le feuillage en tête de chaque page. Au-delà de la
     première page, la colonne continue dans sa teinte pâle (dernier calque). */
  /* Les deux colonnes sont transparentes : la couleur vient du fond. Le
     rembourrage haut de la colonne la fait démarrer SOUS le feuillage. */
  .design-page.tpl-academique .sidebar{
    background:transparent;padding:112mm 10mm 16mm 12mm;position:relative;
  }
  /* 26mm en tête : le nom se pose sous le feuillage, comme sur la maquette,
     au lieu de s'écrire dans les feuilles. */
  .design-page.tpl-academique .main{padding:29mm 12mm 16mm 14.3mm;background:transparent;}
  /* La photo se loge exactement dans le cadre blanc du fond. */
  .design-page.tpl-academique .sb-photo-wrap{
    position:absolute;left:16mm;top:33mm;width:49mm;height:60mm;margin:0;
  }
  .design-page.tpl-academique .sb-photo{
    width:100%;height:100%;object-fit:cover;
    margin:0;border-radius:0;border:0;
  }
  .design-page.tpl-academique .sidebar > .sb-block:first-of-type{min-height:38.6mm;}
  /* Nom en capitales à empattements, dans la teinte du contenu ; intitulé
     de poste maigre et grand. La maquette compose tout l'en-tête en bleu. */
  .design-page.tpl-academique .cv-name{
    font-family:'Libre Baskerville',var(--doc-serif);font-size:21pt;font-weight:700;letter-spacing:.06em;line-height:1.2;
    text-transform:uppercase;color:var(--accent-content, var(--accent));
  }
  .design-page.tpl-academique .cv-title{margin-top:1mm;font-size:17pt;font-weight:400;letter-spacing:.03em;text-transform:none;color:var(--accent-content, var(--accent));}
  .design-page.tpl-academique .cv-summary{margin-top:7mm;font-size:8.8pt;line-height:1.55;letter-spacing:.03em;color:#253541;}
  /* Les intitulés suivent un deux-points, comme sur la maquette. */
  .design-page.tpl-academique .m-block h2::after,
  .design-page.tpl-academique .sb-block h3::after{content:' :';}
  .design-page.tpl-academique .m-block h2,
  .design-page.tpl-academique .sb-block h3{
    text-transform:none;border-bottom:0;padding-bottom:0;margin-bottom:4mm;
    font-size:14pt;font-weight:600;letter-spacing:.03em;line-height:1.2;color:var(--accent-content, var(--accent));
  }
  /* Chaque rubrique est tenue par un filet vertical à sa gauche, qui court
     de l'intitulé à la fin du contenu. Pour l'expérience, l'intitulé et la
     frise sont deux blocs frères : le filet passe de l'un à l'autre. */
  .design-page.tpl-academique .m-block,
  .design-page.tpl-academique .m-block + .timeline,
  .design-page.tpl-academique .sb-block{
    border-left:.8mm solid var(--accent-content, var(--accent));padding-left:3.7mm;
  }
  .design-page.tpl-academique .m-block{margin-top:7mm;}
  .design-page.tpl-academique .m-block:has(+ .timeline){margin-bottom:0;padding-bottom:0;}
  .design-page.tpl-academique .m-block:has(+ .timeline) h2{margin-bottom:0;padding-bottom:4mm;}
  .design-page.tpl-academique .m-block + .timeline{margin-top:0;}
  .design-page.tpl-academique .sb-block{padding-left:5.2mm;margin-left:1.5mm;margin-bottom:9mm;}
  .design-page.tpl-academique .xp-role,
  .design-page.tpl-academique .edu-main-item .em-degree{font-size:10.5pt;font-weight:600;color:var(--accent-content, var(--accent));}
  .design-page.tpl-academique .xp-date,
  .design-page.tpl-academique .edu-main-item .em-date{font-size:9.5pt;font-weight:600;color:var(--accent-content, var(--accent));}
  .design-page.tpl-academique .xp-org,
  .design-page.tpl-academique .edu-main-item .em-school{font-size:7.8pt;color:#253541;}
  .design-page.tpl-academique .xp-desc{font-size:8.8pt;line-height:1.5;color:#253541;}
  .design-page.tpl-academique .sb-line,
  .design-page.tpl-academique .sb-skills-line,
  .design-page.tpl-academique .sb-lang-row{font-size:9.5pt;line-height:1.4;color:#3E5D9A;}
  .design-page.tpl-academique .sb-line{margin-bottom:3mm;align-items:center;gap:3.5mm;}
  .design-page.tpl-academique .sb-line svg{width:4.2mm;height:4.2mm;margin-top:0;color:#3E5D9A;}
  .design-page.tpl-academique .timeline{padding-left:0;}
  .design-page.tpl-academique .timeline::before{display:none;}
  .design-page.tpl-academique .xp-item{padding-left:0;}
  .design-page.tpl-academique .xp-item::before{display:none;}

  /* ----- Modèle Sobre -----
     Page entièrement teintée, colonne sans aplat : c'est le papier qui fait
     la séparation. Intitulés en capitales très espacées, sans filet — la
     respiration fait tout le travail. Jumeau de DESIGN_VARIANTS.sobre. */
  /* Typographie de la maquette : Poppins pour le nom, les intitulés et la
     colonne, Open Sans pour le corps des expériences. */
  .design-page.tpl-sobre{grid-template-columns:77.3mm 1fr;background:#FFFFFF;font-family:'Poppins',var(--doc-sans);}
  .design-page.tpl-sobre .sob-timeline,
  .design-page.tpl-sobre .sob-contact,
  .design-page.tpl-sobre .cv-summary{font-family:'Open Sans',var(--doc-sans);}
  /* La colonne passe SOUS le bandeau ; le disque, lui, passe au-dessus des
     deux. La colonne est positionnée sans z-index : elle ne forme pas de
     plan à part, et le disque (plan 3) passe ainsi au-dessus de la colonne
     principale (plan 2) qui porte le bandeau. */
  .design-page.tpl-sobre .sidebar{
    background:#E8E8E6;color:var(--ink);
    padding:72mm 9mm 16mm 10mm;position:relative;
  }
  .design-page.tpl-sobre .main{padding:20.3mm 14mm 16mm 7.2mm;background:transparent;position:relative;z-index:2;}
  /* Disque posé à cheval sur le bandeau : hors du flux, sinon il repousserait
     le texte de la colonne de toute sa hauteur. Le rembourrage haut de la
     colonne lui réserve sa place. */
  .design-page.tpl-sobre .sb-photo-wrap{
    position:absolute;left:12.8mm;top:12mm;width:53.6mm;height:53.6mm;
    margin:0;z-index:3;
  }
  .design-page.tpl-sobre .sb-photo{
    width:100%;height:100%;object-fit:cover;margin:0;
    border-radius:50%;border:2mm solid #fff;
  }
  /* Bandeau : il part de DERRIÈRE le disque — son bord gauche (45mm) tombe
     dans le cercle sur toute sa hauteur, le bandeau semble en sortir — et
     file jusqu'au bord droit. */
  .design-page.tpl-sobre .cv-name,
  .design-page.tpl-sobre .cv-title{
    background:var(--accent-sidebar, var(--accent));color:var(--sb-ink, #fff);
    margin:0 -14mm 0 -39.5mm;padding:0 14mm 0 39.5mm;
  }
  .design-page.tpl-sobre .cv-name{
    color:var(--sb-ink-titre, #fff);
    padding-top:10mm;font-size:30pt;font-weight:700;line-height:1.1;
    letter-spacing:.07em;text-transform:uppercase;
  }
  /* Nom long : deux lignes au plus, le bandeau s'arrête ainsi avant le texte
     de la colonne (72mm). Voir classeNomLong dans js/cv-render.js. */
  .design-page.tpl-sobre .cv-name.nom-long{font-size:22pt;}
  .design-page.tpl-sobre .cv-name.nom-tres-long{font-size:18pt;}
  /* Chevauche le nom de 0,3mm : deux aplats bord à bord laissaient passer
     un filet clair entre eux à certains zooms. */
  .design-page.tpl-sobre .cv-title{
    margin-top:-.3mm;padding-top:1.8mm;padding-bottom:9.5mm;
    font-size:15pt;font-weight:400;line-height:1.2;letter-spacing:.24em;
    text-transform:none;
  }
  .design-page.tpl-sobre .m-block:first-of-type,
  .design-page.tpl-sobre .cv-summary{margin-top:9mm;}
  .design-page.tpl-sobre .sb-block h3,
  .design-page.tpl-sobre .m-block h2{
    font-size:13pt;letter-spacing:.08em;font-weight:600;color:var(--ink);line-height:1.2;
    border-bottom:0;padding-bottom:0;margin-bottom:3.5mm;
    display:flex;align-items:center;gap:3mm;
  }
  /* Le filet occupe la place qui reste après le mot : il s'allonge ou se
     raccourcit avec l'intitulé, sans jamais le chevaucher. */
  .design-page.tpl-sobre .sb-block h3::after,
  .design-page.tpl-sobre .m-block h2::after{
    content:'';flex:1 1 auto;height:.35mm;background:var(--line);
  }
  /* ----- Contenu propre au rendu Sobre (js/cv-render.js) ----- */
  /* 6,5mm entre les rubriques de la colonne (9mm auparavant) : avec 9mm, le
     CV d'exemple débordait de 2cm et le PDF sortait sur deux pages, la
     seconde ne portant que les centres d'intérêt. */
  .design-page.tpl-sobre .sb-block{margin-bottom:6.5mm;}
  .design-page.tpl-sobre .sob-about{
    font-size:8.6pt;line-height:1.75;color:var(--body);text-align:justify;
  }
  .design-page.tpl-sobre .sob-edu{margin-bottom:5mm;}
  .design-page.tpl-sobre .sob-edu-degree{font-size:7.6pt;font-weight:600;color:var(--ink);}
  .design-page.tpl-sobre .sob-edu-school{font-size:7.8pt;color:var(--body);margin-top:.6mm;}
  .design-page.tpl-sobre .sob-edu-date{font-size:7.8pt;color:var(--body);margin-top:.2mm;}
  .design-page.tpl-sobre .sob-skill-line{font-size:8.6pt;line-height:1.75;color:var(--body);}
  /* Barre de niveau : la jauge occupe la place qui reste après le libellé,
     comme le filet des intitulés. */
  .design-page.tpl-sobre .sob-bar-row{
    display:flex;align-items:center;gap:3mm;font-size:9pt;color:var(--body);margin-bottom:2.8mm;
  }
  .design-page.tpl-sobre .sob-bar{
    flex:1 1 auto;min-width:14mm;height:1.6mm;background:#D2D2CF;position:relative;
  }
  .design-page.tpl-sobre .sob-bar i{
    display:block;height:100%;background:var(--ink);
  }
  .design-page.tpl-sobre .sob-list{
    list-style:none;margin:0;padding:0;font-size:8.8pt;line-height:1.9;color:var(--body);
  }
  .design-page.tpl-sobre .sob-list li{padding-left:4mm;position:relative;}
  .design-page.tpl-sobre .sob-list li::before{
    content:'';position:absolute;left:0;top:2mm;
    width:1.6mm;height:1.6mm;border-radius:50%;background:var(--ink);
  }
  .design-page.tpl-sobre .sob-list li span{color:var(--muted);}
  /* Coordonnées en pastilles, sur deux colonnes : relevé à 84,4mm et
     141,8mm, soit deux colonnes égales séparées de 4mm. */
  .design-page.tpl-sobre .sob-contact{
    display:grid;grid-template-columns:1fr 1fr;gap:4mm;margin:9mm 0 10mm;
  }
  .design-page.tpl-sobre .sob-contact-item{
    display:flex;align-items:center;gap:3mm;font-size:8pt;color:var(--body);
    word-break:break-word;
  }
  .design-page.tpl-sobre .sob-contact-badge{
    flex:0 0 auto;width:4.5mm;height:4.5mm;border-radius:1mm;
    background:var(--accent-sidebar, var(--accent));
    display:flex;align-items:center;justify-content:center;
  }
  .design-page.tpl-sobre .sob-contact-badge svg{width:2.6mm;height:2.6mm;color:var(--sb-ink, #fff);}
  /* Expériences : filet vertical et anneau devant chaque entrée. */
  .design-page.tpl-sobre .sob-timeline{position:relative;padding-left:7mm;}
  .design-page.tpl-sobre .sob-timeline::before{
    content:'';position:absolute;left:1.5mm;top:2mm;bottom:2mm;width:.3mm;background:var(--line);
  }
  .design-page.tpl-sobre .sob-xp{position:relative;margin-bottom:7mm;}
  .design-page.tpl-sobre .sob-xp::before{
    content:'';position:absolute;left:-6.3mm;top:1.2mm;
    width:2.4mm;height:2.4mm;border-radius:50%;
    background:#fff;border:.4mm solid var(--ink);
  }
  .design-page.tpl-sobre .sob-xp-head{
    display:flex;justify-content:space-between;align-items:baseline;gap:6mm;
  }
  .design-page.tpl-sobre .sob-xp-role{font-size:8.8pt;font-weight:700;color:var(--ink);}
  .design-page.tpl-sobre .sob-xp-date{font-size:8pt;font-style:italic;color:var(--ink);white-space:nowrap;}
  .design-page.tpl-sobre .sob-xp-org{font-size:7.6pt;letter-spacing:.03em;color:var(--body);margin-top:.8mm;}
  .design-page.tpl-sobre .sob-xp-desc{
    font-size:7.3pt;line-height:1.8;color:var(--body);margin:1.5mm 0 0;padding-left:4mm;text-align:justify;
  }
  .design-page.tpl-sobre .sob-xp-desc li{margin-bottom:1mm;}
  .design-page.tpl-sobre .m-block h2::before{content:none;}
  .design-page.tpl-sobre .sb-line{color:var(--ink);}
  .design-page.tpl-sobre .sb-skills-line,
  .design-page.tpl-sobre .sb-lang-row{color:var(--ink);}
  .design-page.tpl-sobre .timeline{padding-left:0;}
  .design-page.tpl-sobre .timeline::before{display:none;}
  .design-page.tpl-sobre .xp-item{padding-left:0;}
  .design-page.tpl-sobre .xp-item::before{display:none;}

  /* ----- Modèle Diagonale -----
     Feuille en carte aux coins arrondis. Colonne bleue qui fonce vers le bas,
     traversée de deux pans en diagonale (un coin sombre en haut, un reflet en
     bas) ; photo ronde cerclée ; filets pointillés entre les rubriques.
     Typographie de la maquette : League Spartan pour le nom et les
     intitulés de la page, Montserrat pour tout le reste. Les voiles sont
     translucides et la base suit la couleur choisie. */
  .design-page.tpl-diagonale{
    grid-template-columns:74.4mm 1fr;font-family:'Montserrat',var(--doc-sans);
    border-radius:4mm;overflow:hidden;
  }
  .design-page.tpl-diagonale .cv-name,
  .design-page.tpl-diagonale .m-block h2{font-family:'League Spartan',var(--doc-sans);}
  .design-page.tpl-diagonale .sidebar{
    padding:12.8mm 8mm 16mm 12mm;
    background-image:
      linear-gradient(155deg, rgba(0,12,60,.55) 0 13%, transparent 13.1%),
      linear-gradient(28deg, transparent 0 10%, rgba(255,255,255,.08) 10.1% 23%, transparent 23.1%),
      linear-gradient(180deg, transparent 0, rgba(0,0,0,.62) 100%);
  }
  .design-page.tpl-diagonale .main{padding:22mm 12mm 16mm 14mm;}
  .design-page.tpl-diagonale .sb-photo{
    display:block;width:44mm;height:44mm;aspect-ratio:1/1;object-fit:cover;
    margin:0 0 10mm 4mm;border-radius:50%;border:1mm solid rgba(255,255,255,.85);
  }
  .design-page.tpl-diagonale .sb-photo-wrap{text-align:left;}
  .design-page.tpl-diagonale .sb-block{margin-bottom:6mm;}
  /* Filet pointillé blanc entre les rubriques de la colonne. */
  .design-page.tpl-diagonale .sb-block + .sb-block{padding-top:6mm;border-top:.45mm dotted rgba(255,255,255,.75);}
  .design-page.tpl-diagonale .sb-block h3{
    font-size:12.5pt;font-weight:700;letter-spacing:0;line-height:1.15;text-transform:uppercase;
    color:var(--sb-ink, #fff);margin:0 0 3.5mm;
  }
  .design-page.tpl-diagonale .sb-line,
  .design-page.tpl-diagonale .sb-skills-line,
  .design-page.tpl-diagonale .sb-lang-row{font-size:7.8pt;font-weight:600;line-height:1.55;}
  .design-page.tpl-diagonale .sb-line{margin-bottom:3.4mm;align-items:center;gap:3.5mm;}
  .design-page.tpl-diagonale .sb-line svg{width:4mm;height:4mm;margin-top:0;color:var(--sb-ink, #fff);}
  .design-page.tpl-diagonale .cv-name{font-size:34pt;font-weight:700;line-height:1.05;letter-spacing:.01em;color:#2B2B2B;}
  .design-page.tpl-diagonale .cv-title{
    margin-top:2mm;font-size:12pt;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#3A3A3A;
  }
  .design-page.tpl-diagonale .cv-summary{margin-top:3mm;font-size:8.4pt;line-height:1.5;color:#6A6A6A;}
  /* Filet pointillé AU-DESSUS de chaque rubrique, sur toute la largeur. */
  .design-page.tpl-diagonale .m-block{padding-top:7mm;margin-top:7mm;border-top:.45mm dotted #4A4A4A;}
  .design-page.tpl-diagonale .m-block h2{
    border-bottom:0;padding-bottom:0;margin-bottom:4mm;
    font-size:15pt;font-weight:700;letter-spacing:.02em;line-height:1.15;color:#2B2B2B;
  }
  /* « Poste | employeur » sur une ligne, les dates dessous, comme sur la
     maquette. */
  .design-page.tpl-diagonale .xp-head{display:block;}
  .design-page.tpl-diagonale .xp-role,
  .design-page.tpl-diagonale .xp-org{display:inline;font-size:9.6pt;font-weight:600;line-height:1.35;color:#2B2B2B;}
  .design-page.tpl-diagonale .xp-org::before{content:' | ';}
  .design-page.tpl-diagonale .xp-date{display:block;margin-top:.4mm;font-size:9.6pt;font-weight:500;color:#2B2B2B;}
  .design-page.tpl-diagonale .xp-desc{margin-top:1.4mm;font-size:7.8pt;line-height:1.5;color:#6A6A6A;}
  .design-page.tpl-diagonale .xp-item{margin-bottom:6mm;}
  .design-page.tpl-diagonale .edu-main-item .em-degree{font-size:9.6pt;font-weight:600;color:#2B2B2B;}
  .design-page.tpl-diagonale .edu-main-item .em-school,
  .design-page.tpl-diagonale .edu-main-item .em-date{font-size:7.8pt;font-style:italic;color:#4A4A4A;}
  .design-page.tpl-diagonale .timeline{padding-left:0;}
  .design-page.tpl-diagonale .timeline::before{display:none;}
  .design-page.tpl-diagonale .xp-item{padding-left:0;}
  .design-page.tpl-diagonale .xp-item::before{display:none;}

  /* ----- Modèle Badge -----
     Carte d'identification de couleur en tête, tenue par un trombone, avec
     son QR code ; puis deux colonnes : le parcours à gauche, et à droite une
     note sur papier quadrillé scotchée, les logiciels, les langues, les
     loisirs. Étiquettes rectangulaires pleines, puces en flèches.
     Typographie de la maquette : une grotesque serrée (Inter, approche
     négative) ; papier blanc légèrement voilé sur les bords. */
  .design-page.tpl-badge{
    grid-template-columns:1fr;position:relative;font-family:'Inter',var(--doc-sans);letter-spacing:-.015em;
    background:radial-gradient(130% 100% at 35% 25%, #FBFBFA 0%, #F1F1EF 60%, #E6E6E3 100%);
  }
  .design-page.tpl-badge .sidebar{display:none;}
  .design-page.tpl-badge .main{padding:14mm 12mm 12mm;background:transparent;}
  /* Trombone : ornement de page, comme sur le Carnet — il ne dépend d'aucun
     texte, donc il ne bouge pas quand le CV s'allonge. */
  .design-page.tpl-badge::after{
    content:'';position:absolute;top:-3mm;left:17mm;width:10mm;height:24mm;
    background-repeat:no-repeat;background-size:contain;background-position:top center;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 104'%3E%3Cpath d='M27 6c8 0 14 5 14 13v62c0 11-8 19-19 19S3 92 3 81V22' fill='none' stroke='%232F7A45' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M27 20v58c0 6-4 10-9 10s-9-4-9-10V30' fill='none' stroke='%2362A874' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
    pointer-events:none;z-index:2;
  }
  /* Le haut et le corps partagent les mêmes deux colonnes : la carte et le
     parcours à gauche, « À propos » et la note à droite. */
  .design-page.tpl-badge .bdg-top,
  .design-page.tpl-badge .bdg-body{display:grid;grid-template-columns:1fr 60mm;gap:9mm;}
  .design-page.tpl-badge .bdg-top{margin-bottom:9mm;align-items:start;}
  /* La carte : photo à gauche, nom en haut, coordonnées au milieu, QR code
     à droite, adresse sous la photo et libellé sous le QR. */
  .design-page.tpl-badge .bdg-card{
    display:grid;grid-template-columns:32mm 1fr 20mm;grid-template-rows:auto 1fr auto;
    column-gap:5mm;row-gap:2mm;padding:6mm 6mm 5mm;border-radius:3mm;
    background:var(--accent-sidebar, var(--accent));color:var(--sb-ink, #fff);
    box-shadow:0 1mm 3mm rgba(20,30,70,.25);
  }
  .design-page.tpl-badge .bdg-photo-wrap{grid-column:1;grid-row:1 / 3;}
  .design-page.tpl-badge .bdg-photo{
    display:block;width:32mm;height:38mm;object-fit:cover;border-radius:1.5mm;
  }
  .design-page.tpl-badge .bdg-ident{grid-column:2 / 4;grid-row:1;}
  .design-page.tpl-badge .bdg-name{margin:0;font-size:24pt;font-weight:800;line-height:1.05;letter-spacing:-.035em;color:inherit;}
  .design-page.tpl-badge .bdg-role{font-size:8pt;font-weight:600;margin-top:1.5mm;letter-spacing:-.01em;}
  .design-page.tpl-badge .bdg-contact{grid-column:2;grid-row:2;align-self:center;font-size:7.4pt;line-height:1.4;word-break:break-word;}
  .design-page.tpl-badge .bdg-qr{grid-column:3;grid-row:2 / 4;align-self:end;text-align:center;}
  .design-page.tpl-badge .bdg-qr-cadre{
    width:20mm;height:20mm;box-sizing:border-box;padding:.8mm;
    border:.5mm solid #fff;border-radius:1mm;background:#fff;
  }
  .design-page.tpl-badge .bdg-qr-code{display:block;width:100%;height:100%;}
  .design-page.tpl-badge .bdg-qr-libelle{margin-top:1.5mm;font-size:11pt;font-weight:800;letter-spacing:-.03em;}
  .design-page.tpl-badge .bdg-lieu{grid-column:1 / 3;grid-row:3;align-self:end;font-size:7.4pt;}
  /* Sans QR code ni photo, les coordonnées prennent la place libre. */
  .design-page.tpl-badge .bdg-card-sans-qr .bdg-contact{grid-column:2 / 4;}
  .design-page.tpl-badge .bdg-card-sans-photo .bdg-ident,
  .design-page.tpl-badge .bdg-card-sans-photo .bdg-contact{grid-column-start:1;}
  /* Étiquette rectangulaire pleine : sa largeur suit son libellé, donc un
     intitulé long ne la fait pas déborder. */
  .design-page.tpl-badge .bdg-label{
    display:inline-block;margin:0 0 4mm;padding:.9mm 2.4mm 1.2mm;
    background:var(--accent-content, var(--accent));color:#fff;
    font-size:13pt;font-weight:600;letter-spacing:-.03em;line-height:1.15;text-transform:none;border:0;
  }
  .design-page.tpl-badge .bdg-label::before{content:none;}
  .design-page.tpl-badge .bdg-summary{font-size:8.4pt;line-height:1.3;color:var(--ink);}
  .design-page.tpl-badge .bdg-block{margin-bottom:8mm;}
  .design-page.tpl-badge .bdg-entry{margin-bottom:5mm;}
  .design-page.tpl-badge .bdg-entry-head{display:flex;align-items:baseline;gap:3mm;flex-wrap:wrap;}
  .design-page.tpl-badge .bdg-entry-title{font-size:12.5pt;font-weight:500;letter-spacing:-.03em;color:var(--ink);}
  .design-page.tpl-badge .bdg-entry-meta{margin-left:auto;font-size:7.8pt;color:var(--ink);}
  /* Puces en flèches, comme sur la maquette. */
  .design-page.tpl-badge .bdg-arrows{list-style:none;margin:1.5mm 0 0;padding:0;}
  .design-page.tpl-badge .bdg-arrows li{
    position:relative;padding-left:4mm;font-size:8.3pt;line-height:1.2;
    color:var(--ink);margin-bottom:.2mm;
  }
  .design-page.tpl-badge .bdg-arrows li::before{
    content:'→';position:absolute;left:0;color:var(--ink);
  }
  .design-page.tpl-badge .bdg-arrows-tight li{font-size:8pt;margin-bottom:.2mm;}
  .design-page.tpl-badge .bdg-deux-col{columns:2;column-gap:5mm;}
  .design-page.tpl-badge .bdg-deux-col li{break-inside:avoid;}
  /* Compétences et qualités côte à côte, au bas du parcours. */
  .design-page.tpl-badge .bdg-duo{display:grid;grid-template-columns:1fr 1fr;gap:0 8mm;}
  .design-page.tpl-badge .bdg-inline{font-size:8.2pt;line-height:1.45;color:var(--ink);}
  .design-page.tpl-badge .bdg-sep{color:var(--ink);}
  /* La note : le papier quadrillé scotché de la maquette, étiré sur son
     contenu ; le ruban et le bord déchiré occupent le haut, d'où le
     rembourrage. Texte à l'encre bleue de la page. */
  .design-page.tpl-badge .bdg-note{
    margin:0 0 8mm;padding:15mm 6mm 9mm 8mm;min-height:62mm;box-sizing:border-box;
    background:url('../assets/templates/badge-note.webp') no-repeat center / 100% 100%;
    color:var(--accent-content, var(--accent));
  }
  .design-page.tpl-badge .bdg-note-titre{
    margin:0 0 5mm;font-size:15pt;font-weight:600;line-height:1.05;letter-spacing:-.035em;
    color:inherit;border:0;padding:0;text-transform:none;
  }
  .design-page.tpl-badge .bdg-note-titre::before{content:none;}
  .design-page.tpl-badge .bdg-note-liste{list-style:none;margin:0;padding:0;}
  .design-page.tpl-badge .bdg-note-liste li{font-size:11.5pt;font-weight:400;line-height:1.1;letter-spacing:-.03em;margin-bottom:3mm;}

  .design-page.tpl-institutional{grid-template-columns:1fr;}
  .design-page.tpl-institutional .sidebar{display:none;}
  .design-page.tpl-institutional .main{padding:13mm 19mm 11mm;}
  .design-page.tpl-institutional .main,
  .design-page.tpl-institutional .main *{
    font-family:var(--doc-serif);
  }
  .inst-header{display:flex;align-items:center;gap:7mm;padding-bottom:3mm;}
  .inst-photo{width:26mm;flex:0 0 26mm;}
  .inst-photo img{width:100%;aspect-ratio:1/1.15;object-fit:cover;display:block;}
  .inst-photo img.shape-circle{border-radius:50%;aspect-ratio:1/1;}
  .inst-identity{flex:1 1 auto;}
  /* Interlignes repris de mainInstHeader (js/export-pdf-design.js) : 1,2 sur
     le nom et le titre, 1,35 sur les lignes de contact. */
  .inst-name{font-size:17pt;font-weight:700;margin:0 0 2mm;color:var(--ink);line-height:1.2;}
  .inst-title{font-size:14pt;font-weight:700;margin:0 0 3mm;color:var(--ink);line-height:1.2;}
  .inst-contact{font-size:11pt;margin:0 0 1mm;color:var(--ink);line-height:1.35;}
  .inst-contact strong{font-weight:700;}
  .inst-header-rule{border-bottom:2px solid var(--accent-content, var(--ink));margin-bottom:2mm;}
  .inst-section{margin-top:4mm;}
  .inst-h2{
    font-size:14pt;font-weight:700;text-transform:uppercase;
    border-bottom:1px solid var(--accent-content, var(--ink));
    padding-bottom:1mm;margin:0 0 2.5mm;color:var(--ink);
  }
  .inst-paragraph{text-align:justify;margin:0;font-size:12pt;line-height:1.35;color:var(--ink);}
  .inst-list{margin:0;padding-left:6mm;list-style:none;font-size:12pt;line-height:1.35;color:var(--ink);}
  .inst-list li{text-align:justify;margin-bottom:1.4mm;position:relative;}
  .inst-list li::before{content:"\2022";position:absolute;left:-4mm;}
  .inst-entry{margin-bottom:3mm;}
  .inst-entry-head{display:flex;justify-content:space-between;align-items:baseline;gap:6mm;margin-bottom:.8mm;}
  .inst-entry-role{font-weight:700;font-size:12pt;color:var(--ink);}
  .inst-entry-date{font-style:italic;font-size:11pt;color:var(--muted);white-space:nowrap;}
  .inst-entry-sub{font-style:italic;font-size:11pt;color:var(--muted);margin-bottom:1.4mm;}
  .inst-refs{display:flex;gap:8mm;}
  .inst-refs-col{flex:1 1 50%;}
  .inst-ref{margin-bottom:3mm;}
  .inst-ref-name{font-weight:700;font-size:12pt;margin-bottom:1mm;color:var(--ink);}
  .inst-ref-line{font-size:11pt;margin-bottom:1mm;color:var(--ink);}

  .ats-signature-img{max-width:50mm;max-height:20mm;display:block;margin-left:auto;}
  .ats-signature{text-align:right;}
  .ats-signature-caption{font-weight:700;margin-top:1mm;}

  /* ----- ATS page ----- */
  .ats-page{
    padding:18mm 20mm;
    font-family:var(--doc-sans);
    color:#111;
    font-size:10.5pt;
    line-height:1.5;
  }
  /* Interlignes serrés sur les titres. Sans eux, ils héritent du 1,5 de
     .ats-page, prévu pour des paragraphes : le nom en corps 20 réservait
     30 points pour des lettres qui en occupent 20. Mêmes valeurs que le PDF
     (buildAtsPdfDoc), pour que les deux tiennent sur la même hauteur. */
  .ats-name{font-size:20pt;font-weight:700;margin:0;letter-spacing:.01em;line-height:1.15;}
  .ats-title{font-size:11pt;margin:1.5mm 0 2mm;color:#333;font-weight:400;line-height:1.3;}
  /* Marge haute déclarée à zéro : sans elle, le navigateur applique 1em et
     l'aperçu s'écarte du PDF, qui ne connaît que les valeurs écrites ici. */
  .ats-contact-line{font-size:9.5pt;color:#222;margin:0 0 1mm;line-height:1.35;}
  .ats-contact-sep{color:#aaa;margin:0 2.5mm;}
  .ats-rule{border:none;border-top:2px solid #111;margin:0 0 5mm;}
  .ats-section{margin-bottom:5.5mm;}
  .ats-section h3{
    font-size:9.5pt;font-weight:700;text-transform:uppercase;letter-spacing:.08em;line-height:1.2;
    margin:0 0 2mm;border-bottom:1px solid #ccc;padding-bottom:1mm;
  }
  .ats-exp{margin-bottom:4.5mm;}
  .ats-exp-row{display:flex;justify-content:space-between;align-items:baseline;font-size:10.5pt;}
  .ats-exp-left b{font-weight:700;}
  .ats-exp-left .ats-exp-org{color:#444;font-weight:400;}
  .ats-exp-date{font-size:9.5pt;color:#444;white-space:nowrap;flex-shrink:0;margin-left:4mm;}
  .ats-exp ul{margin:1.5mm 0 0;padding-left:5mm;font-size:10pt;}
  .ats-exp ul li{margin-bottom:.8mm;}
  .ats-edu-item{font-size:10.3pt;margin-bottom:2.5mm;display:flex;justify-content:space-between;align-items:baseline;gap:4mm;}
  .ats-edu-left b{font-weight:700;}
  .ats-edu-left .ats-edu-school{color:#444;}
  .ats-edu-date{font-size:9.5pt;color:#444;white-space:nowrap;flex-shrink:0;}
  .ats-plain{font-size:10pt;color:#222;}
  .ats-annex-list{margin:0;padding-left:5mm;font-size:10pt;}
  .ats-annex-list li{margin-bottom:1mm;}
  .ats-signature{margin:8mm 0 0;font-size:10.3pt;}

  .site-footer{
    display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;justify-content:center;
    padding:16px 20px;font-size:12px;color:var(--muted);
    border-top:1px solid var(--line);background:var(--card);
  }
  .site-footer a{color:var(--muted);text-decoration:underline;}
  .site-footer a:hover{color:var(--ink);}

  /* Bouton de support WhatsApp. L'icône est le tracé Line Awesome (Icons8,
     MIT) déjà utilisé par le portfolio, posé en SVG inline pour la même
     raison : aucune requête vers un tiers, aucun visiteur signalé à un
     domaine externe, et le glyphe hérite de la couleur du bouton. */
  .wa-support{
    display:inline-flex;align-items:center;gap:7px;
    padding:7px 14px;border-radius:999px;
    background:#25d366;border:1px solid #1faa53;
    color:#fff;font-size:12px;font-weight:600;line-height:1;
    text-decoration:none;white-space:nowrap;
  }
  .wa-support:hover{background:#1ebe5a;}
  .wa-support svg{width:17px;height:17px;flex-shrink:0;}
  /* Le pied de page souligne et grise tous ses liens : le bouton s'y soustrait. */
  .site-footer .wa-support,
  .site-footer .wa-support:hover{color:#fff;text-decoration:none;}
  .contact-box .wa-support{margin-top:10px;}
  /* Sur téléphone, le bouton devient une cible tactile confortable. */
  @media (max-width:600px){ .wa-support{padding:11px 18px;font-size:13px;} }

  @media print{
    *{
      -webkit-print-color-adjust:exact !important;
      print-color-adjust:exact !important;
      color-adjust:exact !important;
    }
    html,body{background:var(--card);margin:0;height:auto;}
    .brandbar,.editor,.preview-toolbar,.spectrum-bar,.site-footer{display:none !important;}
    .preview-wrap{padding:0;background:var(--card);max-height:none;overflow:visible;display:block;}
    .app-shell{display:block;}
    .page-sheet{
      box-shadow:none;
      width:210mm;
      height:297mm;
      min-height:0;
      overflow:hidden;
      page-break-after:avoid;
      break-after:avoid;
    }
    .xp-item,.entry,.sb-block,.ats-exp,.ats-section{page-break-inside:avoid;break-inside:avoid;}
    @page{size:A4;margin:0;}
  
  
  }
  /* ---------- Responsive: tablette ---------- */
  @media (max-width: 1024px){
    .app-shell{grid-template-columns:var(--editor-w, 380px) 6px 1fr;}
  
  
  }

  /* ---------- Responsive: tablette portrait / grand mobile ---------- */
  @media (max-width: 900px){
    /* minmax(0,1fr) et non 1fr : une piste 1fr ne descend jamais sous le
       contenu minimal de ses items. La rangée de réglages de l'aperçu
       (.pt-controls) élargissait alors la grille, et avec elle toute la page
       (466px pour un écran de 360px) : la page de choix des modèles, en
       position:fixed, s'ouvrait décalée hors de l'écran. */
    .app-shell{grid-template-columns:minmax(0,1fr);}
    .resizer{display:none;}
    .editor{border-right:none;border-bottom:1px solid var(--line);max-height:none;}
    .preview-wrap{max-height:none;}
    .page-sheet{width:210mm;flex-shrink:0;transform-origin:top left;}
    .preview-wrap{justify-content:flex-start;overflow-x:hidden;-webkit-overflow-scrolling:touch;}
    .view-tabs{display:flex;order:-1;flex-basis:100%;}
    /* La barre reste collée sous l'en-tête pendant qu'on descend le
       formulaire : les onglets Éditer/Aperçu doivent rester atteignables sans
       remonter tout le formulaire pour jeter un œil au CV. --brandbar-h est
       mesurée en JS (initStickyToolbarOffset) parce que la hauteur de
       l'en-tête change avec la largeur de l'écran. z-index sous celui de
       .brandbar (45), pour passer dessous et non par-dessus. */
    .preview-toolbar{
      position:sticky;top:var(--brandbar-h, 0px);z-index:44;
      box-shadow:0 4px 12px -8px rgba(0,0,0,.45);
    }
    .editor.view-hidden,.preview-wrap.view-hidden{display:none;}
    .pt-group.zoom-group{margin-left:auto;}
    /* Onglet Éditer actif : la barre ne garde que les onglets. Ses réglages
       n'agissent que sur l'aperçu, ils réapparaissent avec lui (voir
       setMobileView() dans js/app.js). */
    .preview-toolbar.pt-editing{padding-bottom:0;}
    .preview-toolbar.pt-editing .pt-group{display:none;}
  
  
  }

  /* ---------- Responsive: mobile (Android / iPhone) ---------- */
  @media (max-width: 600px){
    .brandbar{padding:12px 14px;}
    .brandbar h1{font-size:17px;}
    .brandbar .tag{display:none;}
    .toolbar-right{width:100%;justify-content:center;gap:8px;flex-wrap:nowrap;}
    .paywall-badge{display:none;}
    /* Annuler/Rétablir tiennent sur la même ligne que Télécharger : en
       width:100%, ce dernier passait seul sur sa ligne et reléguait les deux
       petites icônes à une bande entière au-dessus du formulaire. */
    .dl-dropdown{flex:1;min-width:0;}
    .dl-dropdown>#dlToggle{width:100%;justify-content:center;}
    .dl-menu{left:0;right:0;width:100%;}
    .btn{padding:10px 12px;font-size:12px;min-height:40px;}
    #copyBtn{display:none;}
    .editor{padding:18px 16px;}
    .section{padding:16px 14px 18px;border-radius:12px;}
    .row2{grid-template-columns:1fr;gap:0;}
    .preview-wrap{padding:14px 8px;}
    .preview-toolbar{padding:10px 14px;gap:10px;}
    .pt-label{display:none;}
    /* Le menu des modèles est ancré à gauche de la barre et passe sur deux
       rangées : sur un écran étroit, cinq vignettes en ligne déborderaient. */
    /* Largeur imposée, sinon le conteneur en flex-wrap se réduirait à une seule
       colonne et le menu ferait toute la hauteur de l'écran. */
    .tpl-chooser-inner{padding:24px 16px 32px;}
    .tpl-chooser-head{position:relative;display:block;}
    .tpl-chooser-head-text{padding-right:46px;}
    .tpl-chooser-close{position:absolute;top:0;right:0;margin:0;}
    .tpl-chooser-title{font-size:21px;}
    /* ----- Regagner la moitié haute de l'écran -----
       Sur un téléphone de 812px, il fallait passer 407px de réglages avant
       d'apercevoir la première ligne du CV : la moitié de l'écran. L'en-tête
       en prenait 208 (quatre rangées empilées) et la barre d'outils 153
       (trois rangées). Ce qui suit ne retire aucune commande : il les remet
       sur une ligne et leur rend leur juste place. */

    /* L'en-tête : le nom du site et le bouton de thème partagent une rangée,
       la navigation en occupe une seule et défile si elle déborde. */
    .brandbar{padding:8px 12px;gap:8px;}
    .brand .tag{display:none;}
    .brand-text{line-height:1.15;}
    .app-nav{
      flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
      scrollbar-width:none;
    }
    .app-nav::-webkit-scrollbar{display:none;}
    .app-nav button{white-space:nowrap;}

    /* La barre d'outils : les intitulés disparaissent, les commandes se
       lisent d'elles-mêmes (nom du modèle, Moderne/ATS, drapeaux, pastille de
       couleur) et chacune garde son aria-label pour les lecteurs d'écran. */
    .preview-toolbar{padding:8px 12px;gap:8px 10px;}
    .preview-toolbar .pt-label{display:none;}
    .preview-toolbar .pt-group{gap:6px;flex:0 0 auto;}
    /* Une seule rangée pour les trois réglages, qui défile si elle déborde
       plutôt que de s'empiler sur deux lignes. */
    .pt-controls{
      display:flex;flex:1 1 100%;min-width:0;gap:8px;align-items:center;
      flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
      scrollbar-width:none;
    }
    .pt-controls::-webkit-scrollbar{display:none;}
    /* L'en-tête : le nom du site et le bouton de thème sur la même rangée. */
    .brandbar .brand{flex:0 1 auto;min-width:0;order:1;}
    .brandbar .theme-switch{margin-left:auto;flex:0 0 auto;order:2;}
    .brandbar .app-nav{flex:1 1 100%;min-width:0;order:3;padding:2px;}
    .brandbar .app-nav button{padding-top:7px;padding-bottom:7px;}
    .brandbar #toolbarRight{flex:1 1 100%;min-width:0;order:4;}
    /* Le bouton de téléchargement occupe la rangée, sans la faire déborder. */
    .brandbar #toolbarRight .btn{min-width:0;}

    .tpl-chooser-grid{grid-template-columns:minmax(0,1fr);gap:14px;}
    .color-panel{
      position:fixed;top:auto;right:10px;left:10px;bottom:10px;
      width:auto;max-height:70vh;overflow-y:auto;
      box-shadow:0 -6px 28px rgba(0,0,0,.28);
    }
    .tpl-card{flex-direction:column;}
    .tpl-chooser-foot{flex-direction:column;align-items:stretch;}
    .tpl-chooser-foot .btn{width:100%;justify-content:center;}
    .view-tabs button{flex:1;text-align:center;}
    .cv-progress-strip{padding:7px 14px;}
    /* Sur mobile, le texte de droite passerait sous les étapes et doublerait la
       hauteur du bandeau : les étapes suffisent, elles disent la même chose. */
    .cv-progress-text{display:none;}
    .cv-steps{width:100%;justify-content:space-between;}
    .cv-step + .cv-step::before{width:12px;}
    .cv-step-name{font-size:10.5px;}
  
  
  }

  /* ---------- Responsive: très petits écrans ---------- */
  @media (max-width: 380px){
    .brandbar h1{font-size:15px;}
    .btn{padding:9px 10px;font-size:11px;gap:5px;}
    .toolbar-right{gap:6px;}
    .paywall-badge{display:none;}
  
  
  }


  /* ---------- Modale de confirmation personnalisée ---------- */
  .modal-overlay{
    position:fixed;inset:0;
    background:rgba(28,27,24,.52);
    z-index:900;
    display:flex;align-items:center;justify-content:center;
    padding:20px;
    opacity:0;pointer-events:none;
    transition:opacity .18s ease;
  }
  .modal-overlay.open{opacity:1;pointer-events:auto;}
  .modal-box{
    background:var(--card);
    border-radius:16px;
    box-shadow:0 24px 64px rgba(0,0,0,.20), 0 2px 8px rgba(0,0,0,.08);
    padding:28px 28px 22px;
    max-width:380px;width:100%;
    /* La modale ne dépassait jamais de l'écran tant qu'elle ne portait que
       deux phrases et deux boutons. Le choix du portrait pro y ajoute quatre
       vignettes en 4/5 sur deux rangées : le contenu passait sous le bord
       bas de la fenêtre, et l'overlay étant en position:fixed et centré, il
       n'y avait plus aucun moyen d'atteindre ni les deux dernières
       propositions ni le bouton « Terminé ». La boîte se plafonne donc à la
       hauteur visible et défile en elle-même.

       dvh plutôt que vh : sur mobile, vh compte la barre d'adresse du
       navigateur comme si elle était rétractée, ce qui redonnerait une boîte
       trop haute. La déclaration en vh reste juste avant, pour les
       navigateurs qui ignorent dvh. */
    max-height:calc(100vh - 40px);
    max-height:calc(100dvh - 40px);
    overflow-y:auto;
    /* Arrivé en bout de course, le geste ne se propage pas à la page du
       dessous, qui défilerait sous la modale. */
    overscroll-behavior:contain;
    transform:translateY(10px);
    transition:transform .2s ease;
  }
  .modal-overlay.open .modal-box{transform:translateY(0);}
  .modal-title{
    font-family:var(--ui-sans);font-size:15px;font-weight:700;
    color:var(--ink);margin:0 0 8px;line-height:1.4;
  }
  .modal-body{
    font-family:var(--ui-sans);font-size:13px;
    color:var(--muted);margin:0 0 22px;line-height:1.65;
  }
  .modal-body p{margin:0 0 10px;}
  .modal-body p:last-child{margin-bottom:0;}
  .modal-body ul{margin:0 0 10px;padding-left:18px;}
  .modal-body li{margin-bottom:4px;}
  .modal-body strong{color:var(--ink);}
  .modal-input{
    width:100%;box-sizing:border-box;font-family:var(--ui-sans);font-size:13px;
    padding:10px 12px;border:1.5px solid var(--line);border-radius:9px;
    margin:0 0 18px;color:var(--ink);background:var(--card);
  }
  .modal-input:focus{outline:none;border-color:var(--ink);}
  .modal-actions{display:flex;gap:8px;justify-content:flex-end;}
  .modal-actions .btn{min-height:unset;padding:9px 18px;font-size:11px;}

  /* ---------- Notifications toast (remplace alert() pour les erreurs récupérables) ---------- */
  .toast-stack{
    position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
    z-index:1000;display:flex;flex-direction:column;gap:8px;
    width:100%;max-width:420px;padding:0 16px;
    pointer-events:none;
  }
  .toast{
    background:var(--card);color:var(--ink);
    border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
    padding:12px 16px;font-family:var(--ui-sans);font-size:12.5px;line-height:1.5;
    display:flex;align-items:flex-start;gap:10px;
    border-left:4px solid var(--muted);
    opacity:0;transform:translateY(8px);
    transition:opacity .18s ease, transform .18s ease;
    pointer-events:auto;
  }
  .toast.show{opacity:1;transform:translateY(0);}
  .toast.error{border-left-color:var(--danger);}
  .toast.success{border-left-color:var(--success);}
  .toast-msg{flex:1;}
  .toast-close{
    background:none;border:none;cursor:pointer;color:var(--muted);
    font-size:15px;line-height:1;padding:0 0 0 6px;
  }

  /* ---------- Cibles tactiles agrandies partout (placé en dernier dans la
     cascade exprès, pour prévaloir sur toute règle de composant définie plus
     haut, ex: .modal-actions .btn). Combine (pointer:coarse) et
     (max-width:600px) : les vrais téléphones matchent les deux, mais certains
     outils d'aperçu/émulation ne simulent que la largeur sans le pointeur
     tactile. ---------- */
  @media (pointer: coarse), (max-width: 600px){
    input[type=text],input[type=email],input[type=tel],input[type=url],textarea,select,.btn,.add-btn,.file-btn,.mode-toggle button{
      min-height:40px;
    }
    .collapsible-section > h2{
      min-height:40px;margin:-4px -4px 10px;padding:12px 4px;
    }
    .collapsible-section.collapsed > h2{margin-bottom:-4px;}
    /* 16px minimum : en dessous, Safari iOS zoome de force sur le champ au focus. */
    input[type=text],input[type=email],input[type=tel],input[type=url],input[type=month],textarea,select{
      font-size:16px;
    }
    .swatch{width:26px;height:26px;}
    .swatch-custom{width:26px;height:26px;}
    .modal-actions .btn{min-height:40px;padding:9px 18px;}
    .soi-btn,.icon-choice,.icon-btn{min-width:38px;min-height:38px;}
    .shape-btn{width:34px;height:34px;}
    .photo-modal-close{width:32px;height:32px;}
    .photo-lightbox-close{width:36px;height:36px;}
    .zoom-ctrl button{min-width:34px;min-height:34px;}
    .view-tabs button{min-height:40px;}
    .entry .del{width:30px;height:30px;}
    .entry-toolbar .del{width:34px;height:34px;}
    .rt-btn{min-width:32px;min-height:32px;}
    .tpl-toggle{min-height:38px;}
    .custom-section-block > .del{width:30px;height:30px;}
    .tag-chip{padding:6px 6px 6px 12px;}
    .tag-chip button{width:22px;height:22px;font-size:15px;}
    .current-toggle{min-height:34px;padding:6px 0;font-size:13px;}
    .current-toggle input[type=checkbox]{width:18px;height:18px;}
  
  
  }

  /* ---------- Navigation entre sections applicatives (Mon CV / Test ATS / Lettre) ---------- */
  .app-nav{display:flex;gap:4px;border:1px solid var(--line);border-radius:9px;padding:3px;background:var(--card);}
  .app-nav button{
    font-family:'Roboto Mono',monospace;font-size:11.5px;font-weight:500;
    border:none;background:transparent;color:var(--muted);
    padding:8px 14px;border-radius:6px;cursor:pointer;transition:background .15s ease,color .15s ease;
  }
  .app-nav button:hover{color:var(--ink);}
  .app-nav button.active{background:var(--brand-gradient);color:#fff;}

  /* #cvSection doit rester "transparent" pour la grille de .app-shell : ses
     enfants (preview-toolbar/editor/resizer/preview-wrap) restent des items
     directs de la grille, exactement comme avant l'introduction des sections
     applicatives. */
  #cvSection{display:contents;}
  /* Les sections non-CV (Accueil, Test ATS, Lettre) occupent toute la largeur
     de la grille et sont centrées en colonne de lecture. */
  .app-feature-section{grid-column:1/-1;padding:28px 26px 60px;max-width:900px;margin:0 auto;width:100%;}

  /* Le Test ATS charge sa feuille de style à la demande (ensureAts, js/app.js),
     mais setSection le démasque sans l'attendre. Le temps de l'aller-retour
     réseau, tout son contenu s'affichait en balisage nu : le <details>
     « Comparer avec une offre » en triangle natif, la liste « Ce qui est
     contrôlé » en énumération brute. Un clignotement bref, mais visible.
     La section n'a donc aucun affichage tant que css/ats.css n'a pas rendu
     la règle ci-dessous : cette feuille, chargée après celle-ci, la révèle.
     Masquer une section non courante reste l'affaire de .hidden, qui porte
     !important et l'emporte dans tous les cas. */
  #atsSection{display:none;}
  #homeSection{max-width:1040px;}
  .ats-alt{margin:0;text-align:center;font-size:12.5px;color:var(--muted);}
  .link-btn{
    background:none;border:0;padding:0;font:inherit;color:var(--grad-1);
    text-decoration:underline;cursor:pointer;
  }
  @keyframes atsScanBeam{
    0%{transform:translateY(-26px);} 50%{transform:translateY(126px);} 100%{transform:translateY(-26px);}
  }

  /* ---------- Lettre de motivation ---------- */
  .letter-wrap{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap;}
  .letter-editor{flex:1 1 380px;min-width:320px;display:flex;flex-direction:column;gap:16px;}
  .letter-editor textarea{min-height:70px;}
  #letterBody{min-height:280px;}
  .letter-preview-wrap{flex:1 1 420px;min-width:320px;position:sticky;top:20px;}
  /* ---------- Chargement de la lettre IA ---------- */
  .lt-gen{margin-top:12px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card);}
  .lt-gen[hidden]{display:none;}
  .lt-gen-head{display:flex;align-items:center;gap:10px;}
  .lt-gen-head b{flex:1;font:700 14px var(--ui-sans);color:var(--ink);}
  .lt-gen-pen{width:22px;height:22px;color:var(--gold);flex:none;}
  .lt-gen-pct{font:700 13px var(--ui-sans);color:var(--muted);font-variant-numeric:tabular-nums;}
  .lt-gen-bar{height:6px;border-radius:3px;background:var(--line);margin:10px 0 12px;overflow:hidden;}
  .lt-gen-bar i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--gold),#F2B866);transition:width .4s ease;}
  .lt-gen-steps{list-style:none;margin:0;padding:0;display:grid;gap:7px;}
  .lt-gen-steps li{position:relative;padding-left:26px;font-size:13px;color:var(--muted);transition:color .3s;}
  .lt-gen-steps li::before{
    content:'';position:absolute;left:0;top:50%;width:16px;height:16px;margin-top:-8px;box-sizing:border-box;
    border-radius:50%;border:2px solid var(--line);
  }
  .lt-gen-steps li.en-cours{color:var(--ink);font-weight:600;}
  .lt-gen-steps li.en-cours::before{border-color:var(--gold);border-right-color:transparent;}
  .lt-gen-steps li.fait{color:var(--ink);}
  .lt-gen-steps li.fait::before{border-color:var(--gold);background:var(--gold);}
  .lt-gen-steps li.fait::after{
    content:'';position:absolute;left:5px;top:50%;width:4px;height:8px;margin-top:-6px;
    border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
  }
  .lt-gen.fini .lt-gen-pen{color:#2E9E6A;}
  /* Pendant la rédaction, la feuille d'aperçu montre des lignes qui
     s'écrivent : on voit où la lettre va arriver. */
  .letter-page.lt-ecrit{position:relative;overflow:hidden;}
  .letter-page.lt-ecrit::after{
    content:'';position:absolute;inset:0;
    background:
      linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%) 0 0/250% 100% no-repeat,
      repeating-linear-gradient(to bottom,transparent 0 22px,#E9E6DE 22px 32px) 20mm 60mm/calc(100% - 40mm) calc(100% - 100mm) no-repeat,
      rgba(255,255,255,.92);
  }
  @media (prefers-reduced-motion: no-preference){
    .lt-gen-steps li.en-cours::before{animation:ltTourne .8s linear infinite;}
    .letter-page.lt-ecrit::after{animation:ltReflet 1.6s ease-in-out infinite;}
    .lt-gen-pen{animation:ltPlume 1.4s ease-in-out infinite;}
    .lt-gen.fini .lt-gen-pen{animation:none;}
  }
  @keyframes ltTourne{to{transform:rotate(360deg);}}
  @keyframes ltReflet{from{background-position:120% 0,20mm 60mm,0 0;}to{background-position:-120% 0,20mm 60mm,0 0;}}
  @keyframes ltPlume{0%,100%{transform:translate(0,0) rotate(0);}50%{transform:translate(2px,-2px) rotate(-8deg);}}

  .letter-page{
    background:#fff;border:1px solid var(--line);border-radius:2px;box-shadow:0 8px 24px rgba(0,0,0,.06);
    width:210mm;max-width:100%;min-height:297mm;box-sizing:border-box;padding:22mm 20mm;
    font-family:'Times New Roman',Times,serif;color:#1a1a1a;font-size:14px;line-height:1.6;
    /* Times New Roman : la police attendue d'une lettre administrative, et
       celle que produisent le PDF (TimesRoman) et le Word. L'aperçu doit
       montrer la même chose que le fichier téléchargé. */
    text-align:justify;
  }
  .letter-header{display:flex;justify-content:space-between;gap:16px;margin-bottom:28px;flex-wrap:wrap;}
  .letter-sender-name{font-weight:700;margin-bottom:2px;}
  .letter-recipient{text-align:right;color:#333;}
  /* « À » qui ouvre le bloc destinataire, usage béninois. Plus gros que le
     reste : dans une lettre manuscrite il sert de repère visuel entre les
     deux colonnes. */
  .letter-a{font-size:1.5em;font-weight:700;color:var(--ink);margin-bottom:4px;}
  .letter-date{text-align:right;color:#333;margin-bottom:22px;}
  /* Nom du candidat qui clôt la lettre : souligné, en bas à droite. */
  .letter-signature{
    margin-top:26px;text-align:right;font-weight:700;
    text-decoration:underline;text-underline-offset:3px;
  }
  .letter-objet{margin-bottom:18px;}
  .letter-salutation{margin-bottom:14px;}
  .letter-body p{margin:0 0 12px;text-align:justify;}
  .letter-placeholder{color:var(--muted);font-style:italic;}
  .letter-dl-btns{display:flex;gap:10px;flex-wrap:wrap;}

  /* ---------- Page d'accueil (#homeSection) ----------
     Contenu marketing et informatif affiché avant l'éditeur : c'est aussi le
     contenu réellement indexé par les moteurs de recherche sur l'URL racine. */
  .home-hero{
    text-align:center;position:relative;isolation:isolate;
    padding:74px 4px 68px;margin-bottom:8px;
  }
  /* La photo couvre tout le hero et va d'un bord à l'autre de la fenêtre : elle
     déborde donc du conteneur de lecture (max-width 1040px) via left:50% et
     100vw. Le voile sombre par-dessus (::after) garantit le contraste du texte
     quelle que soit la photo affichée : sans lui, la lisibilité dépendrait du
     hasard de l'image en cours. */
  .home-hero-media{
    position:absolute;top:-28px;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
    z-index:-1;overflow:hidden;background:#1B1A22;
  }
  .home-hero-media::after{
    content:'';position:absolute;inset:0;
    background:
      linear-gradient(to bottom,rgba(22,20,28,.42) 0%,rgba(22,20,28,.62) 48%,rgba(22,20,28,.74) 100%),
      radial-gradient(120% 90% at 50% 62%,rgba(22,20,28,.45) 0%,transparent 70%);
  }
  /* Une seule photo visible à la fois : les quatre sont superposées et se
     succèdent en fondu enchaîné. Côte à côte, elles donneraient un collage,
     jamais une photographie. */
  .home-hero-media img{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center 32%;display:block;
    opacity:0;animation:homeHeroFade 24s infinite;
  }
  /* La première photo est visible dès la première image rendue. Avec
     l'animation commune, elle partait d'opacity:0 et n'atteignait 1 qu'à 4 %
     de 24 s, soit 960 ms : le LCP ne pouvait pas descendre sous cette barre,
     même réseau parfait. Elle a donc ses propres étapes, où le fondu d'entrée
     est reporté à la toute fin du cycle (96 à 100 %) et se termine pile au
     rebouclage. Durée du fondu et rythme inchangés, boucle toujours continue,
     mais plus rien à attendre au premier affichage. */
  .home-hero-media img:nth-child(1){animation-name:homeHeroFadeFirst;}
  @keyframes homeHeroFadeFirst{
    0%{opacity:1;} 21%{opacity:1;} 25%{opacity:0;} 96%{opacity:0;} 100%{opacity:1;}
  }
  .home-hero-media img:nth-child(2){animation-delay:6s;}
  .home-hero-media img:nth-child(3){animation-delay:12s;}
  .home-hero-media img:nth-child(4){animation-delay:18s;}
  /* 24 s au total, soit 6 s par photo (25%), dont environ 1 s de fondu. */
  @keyframes homeHeroFade{
    0%{opacity:0;} 4%{opacity:1;} 21%{opacity:1;} 25%{opacity:0;} 100%{opacity:0;}
  }
  /* Sans mouvement : on fige la première photo plutôt que de la faire clignoter. */
  @media (prefers-reduced-motion: reduce){
    .home-hero-media img{animation:none;}
    .home-hero-media img:nth-child(1){opacity:1;}
  
  
  }
  /* Tout le texte du hero est posé sur la photo : il passe donc en clair, avec une
     ombre portée douce. Le voile seul ne suffit pas quand une photo présente une
     zone très lumineuse juste derrière une ligne de texte. */
  /* Étiquette opaque, posée sur la photo. Le verre dépoli laissait la photo
     transparaître derrière le texte : la lisibilité dépendait alors de ce
     qu'il y avait dessous, et l'effet ne correspond à aucun objet réel. */
  .home-eyebrow{
    display:inline-block;margin:0 0 14px;padding:5px 12px;border-radius:99px;
    background:#1c1b18;border:1px solid #1c1b18;
    font-family:'Roboto Mono',monospace;font-size:10.5px;text-transform:uppercase;
    letter-spacing:.07em;color:#fff;
  }
  .home-title{
    font-family:var(--ui-sans);font-weight:800;font-size:38px;line-height:1.15;
    letter-spacing:-.02em;margin:0 auto 16px;max-width:16em;color:#fff;
    text-shadow:0 2px 18px rgba(12,10,18,.55);
  }
  .home-sub{
    margin:0 auto 26px;max-width:44em;font-size:14px;line-height:1.7;
    color:rgba(255,255,255,.9);text-shadow:0 1px 12px rgba(12,10,18,.5);
  }
  .home-cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:0 auto;}
  /* Largeur commune (calée sur le texte le plus long, "Tester mon CV (ATS)")
     pour que la paire reste visuellement équilibrée et clairement centrée,
     plutôt que deux boutons de largeurs différentes l'un à côté de l'autre. */
  .home-cta{padding:13px 26px;font-size:13px;min-width:15em;text-align:center;}
  /* Bouton secondaire opaque. Il était en verre dépoli pour ne pas disparaître
     dans les zones claires de la photo ; un fond blanc plein règle le même
     problème plus franchement, et se lit quelle que soit l'image derrière. */
  .home-cta:not(.primary){
    background:#fff;border-color:#fff;color:#1c1b18;
  }
  .home-cta:not(.primary):hover{background:#f0efea;border-color:#f0efea;color:#1c1b18;}
  .home-reassure{
    list-style:none;margin:26px 0 0;padding:0;
    display:flex;gap:10px 26px;justify-content:center;flex-wrap:wrap;
    font-size:12.5px;color:rgba(255,255,255,.92);text-shadow:0 1px 10px rgba(12,10,18,.5);
  }
  .home-reassure li{display:flex;align-items:center;gap:7px;}
  .home-check{
    width:15px;height:15px;flex-shrink:0;border-radius:50%;background:rgba(255,255,255,.92);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232FA96A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:center;background-size:11px 11px;
  }

  .home-block{margin-top:54px;}
  .home-block-title{
    font-family:var(--ui-sans);font-weight:700;font-size:21px;letter-spacing:-.01em;
    margin:0 0 20px;color:var(--ink);
  }

  /* Bloc « Vous avez déjà un CV ? » : porte d'entrée du test ATS, posée avant
     le parcours de création pour lui donner la priorité visuelle. */
  .home-ats-callout{
    background:var(--brand-gradient-soft);border:1px solid var(--line);
    border-radius:14px;padding:28px 26px;text-align:center;
  }
  .home-ats-callout .home-block-title{margin-bottom:10px;}
  .home-ats-callout-text{
    margin:0 auto 18px;max-width:34em;font-size:13px;line-height:1.7;color:var(--ink);
  }
  /* .btn est en display:flex (bloc), donc insensible au text-align:center du
     parent : on centre le bouton lui-même. */
  .home-ats-callout .home-cta{margin:0 auto;}
  .home-ats-callout-note{margin:10px 0 0;font-size:11.5px;color:var(--muted);}

  /* Note sous les 3 étapes : la conformité ATS est un acquis, plus une étape. */
  .home-steps-note{margin:14px 0 0;font-size:12px;color:var(--muted);text-align:center;}

  /* Étapes */
  .home-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;}
  .home-steps li{
    display:grid;grid-template-columns:34px 1fr;column-gap:14px;row-gap:4px;align-items:start;
    background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;
  }
  .home-step-num{
    grid-row:1/3;width:34px;height:34px;border-radius:50%;
    background:var(--brand-gradient);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--ui-sans);font-weight:700;font-size:14px;
  }
  .home-step-name{font-size:14px;font-weight:700;color:var(--ink);}
  .home-step-desc{font-size:13px;line-height:1.6;color:var(--muted);}

  /* Cartes fonctionnalités */
  .home-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:14px;}
  .home-feature{
    background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;
    display:flex;flex-direction:column;
  }
  .home-feature h4{font-family:var(--ui-sans);font-size:15px;font-weight:700;margin:0 0 9px;color:var(--ink);}
  .home-feature p{margin:0 0 16px;font-size:13px;line-height:1.65;color:var(--muted);flex:1;}
  .home-link-btn{
    align-self:flex-start;border:1px solid var(--line);background:var(--card);color:var(--ink);
    border-radius:8px;padding:8px 14px;cursor:pointer;
    font-family:'Roboto Mono',monospace;font-size:11.5px;font-weight:500;
    transition:background .15s ease,border-color .15s ease;
  }
  .home-link-btn:hover{background:var(--paper);border-color:var(--muted);}

  /* Confidentialité */
  .home-privacy{
    background:var(--brand-gradient-soft);border:1px solid var(--line);
    border-radius:14px;padding:24px 26px;
  }
  .home-privacy p{margin:0 0 12px;font-size:13px;line-height:1.7;color:var(--ink);}
  .home-privacy p:last-child{margin-bottom:0;}
  /* Ce lien n'avait aucune règle et gardait le bleu par défaut du
     navigateur (#0000EE), illisible dès que le fond s'assombrit. */
  .home-privacy a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:2px;}
  .home-privacy a:hover{color:var(--ink);}

  /* Avis utilisateurs */
  .home-reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;}
  .home-review{
    margin:0;background:var(--card);border:1px solid var(--line);border-radius:12px;
    padding:20px;display:flex;flex-direction:column;
  }
  .home-review blockquote{
    margin:0 0 16px;font-size:13px;line-height:1.7;color:var(--ink);flex:1;
    quotes:'\00ab\00a0' '\00a0\00bb';
  }
  .home-review blockquote::before{content:open-quote;}
  .home-review blockquote::after{content:close-quote;}
  .home-review figcaption{display:flex;flex-direction:column;gap:2px;}
  .home-review-name{font-size:12.5px;font-weight:700;color:var(--ink);}
  .home-review-role{font-size:11.5px;color:var(--muted);}

  /* FAQ */
  .home-faq{display:flex;flex-direction:column;gap:10px;}
  .home-faq details{background:var(--card);border:1px solid var(--line);border-radius:10px;}
  .home-faq summary{
    cursor:pointer;padding:14px 18px;font-size:13px;font-weight:600;color:var(--ink);
    list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  }
  .home-faq summary::-webkit-details-marker{display:none;}
  .home-faq summary::after{
    content:'+';font-family:'Roboto Mono',monospace;font-size:17px;color:var(--muted);
    flex-shrink:0;line-height:1;
  }
  .home-faq details[open] summary::after{content:'\2212';}
  .home-faq p{margin:0;padding:0 18px 16px;font-size:13px;line-height:1.7;color:var(--muted);}

  /* CTA final */
  .home-final-cta{
    margin-top:54px;text-align:center;
    background:var(--card);border:1px solid var(--line);border-radius:14px;padding:34px 26px;
  }
  .home-final-cta h3{font-family:var(--ui-sans);font-size:21px;font-weight:700;margin:0 0 8px;}
  .home-final-cta p{margin:0 0 20px;font-size:13px;color:var(--muted);}
  .home-final-cta .home-cta{margin:0 auto;}

  /* ---------- Lien d'évitement (accessibilité clavier) ---------- */
  .skip-link{
    position:absolute;left:-9999px;top:0;z-index:200;
    background:var(--brand-gradient);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;
    font-family:'Roboto Mono',monospace;font-size:12px;text-decoration:none;
  }
  .skip-link:focus{left:0;}

  /* ---------- Note Moderne / ATS dans le menu de téléchargement ---------- */
  .dl-menu-note{
    margin:0;padding:10px 13px;border-bottom:1px solid var(--line);background:var(--paper);
    font-size:11px;line-height:1.5;color:var(--muted);
  }
  .dl-menu-note-warn{background:rgba(217,140,31,.10);color:#8a5a11;}

  /* ---------- Exemples de rédaction insérables ---------- */
  .examples{margin-top:10px;}
  .examples > summary{
    cursor:pointer;font-size:11.5px;color:var(--muted);
    font-family:'Roboto Mono',monospace;list-style:none;
  }
  .examples > summary::-webkit-details-marker{display:none;}
  .examples > summary::before{content:'+ ';}
  .examples[open] > summary::before{content:'\2212 ';}
  .examples > summary:hover{color:var(--ink);}
  .examples-hint{margin:8px 0 8px;font-size:11px;line-height:1.5;color:var(--muted);}
  .examples-list{display:flex;flex-direction:column;gap:6px;}
  .example-chip{
    text-align:left;border:1px dashed var(--line);background:var(--card);color:var(--ink);
    border-radius:8px;padding:8px 11px;cursor:pointer;
    font-family:inherit;font-size:12px;line-height:1.5;
    transition:border-color .15s ease,background .15s ease;
  }
  .example-chip:hover{border-color:var(--muted);background:var(--paper);}

  /* ---------- Micro-animations ----------
     Trois retours d'information, pas de la décoration : chacun répond à un
     changement d'état que l'interface opérait jusqu'ici d'un seul coup, sans
     que l'œil sache ce qui avait bougé. Toutes sont conditionnées à
     body.anim-ready (armé après le premier rendu, voir js/app.js) pour
     qu'aucune ne se déclenche au chargement, et neutralisées plus bas sous
     prefers-reduced-motion. */

  /* 1. Bascule de modèle : l'aperçu est reconstruit d'un bloc, le fondu dit
        qu'il s'agit du même CV dans une autre mise en page. */
  @keyframes tplSwapFade{from{opacity:.4;}to{opacity:1;}}
  @media (prefers-reduced-motion: no-preference){
    body.anim-ready .design-page.tpl-swap{animation:tplSwapFade .18s ease-out;}
  
  
  }

  /* 2. Champ validé : la coche est un background-image, son tracé n'est donc
        pas animable, elle apparaît en fondu grossissant, ce qui suffit à
        attirer l'œil sur le champ qui vient d'être accepté. */
  @keyframes fieldOkPop{
    0%{background-size:2px 2px;}
    55%{background-size:16px 16px;}
    100%{background-size:13px 13px;}
  }
  @media (prefers-reduced-motion: no-preference){
    body.anim-ready input.field-ok{animation:fieldOkPop .34s cubic-bezier(.4,0,.2,1);}
  
  
  }

  /* 3. Étape franchie : le trait de liaison se remplit de gauche à droite au
        lieu de changer de couleur instantanément. Le dégradé à arrêt net fait
        deux fois la largeur du trait ; en glissant, sa moitié verte le
        recouvre progressivement. */
  .cv-step + .cv-step::before{
    background:linear-gradient(to right, var(--success) 0 50%, var(--line) 50% 100%);
    background-size:200% 100%;
    background-position:100% 0;
  }
  .cv-step.done + .cv-step::before{background-position:0 0;}
  @media (prefers-reduced-motion: no-preference){
    body.anim-ready .cv-step + .cv-step::before{transition:background-position .42s cubic-bezier(.4,0,.2,1);}
    body.anim-ready .cv-step .cv-step-dot{transition:background-color .25s ease,border-color .25s ease;}
  
  
  }

  /* ---------- Champ valide : coche verte discrète pendant la saisie ---------- */
  input.field-ok{
    border-color:rgba(47,169,106,.55);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232FA96A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 10px center;background-size:13px 13px;
    padding-right:30px;
  }

  @media (max-width: 900px){
    .app-feature-section{padding:20px 16px 50px;}
    .home-title{font-size:29px;}
    /* La photo reste pleine largeur : seul le rembourrage se resserre. */
    .home-hero{padding:56px 2px 52px;}
    .home-hero-media{top:-20px;}
    .home-block,.home-final-cta{margin-top:40px;}
    .letter-wrap{flex-direction:column;}
    .letter-preview-wrap{position:static;width:100%;}
    .letter-page{width:100%;min-height:auto;padding:24px 20px;}
  
  
  }
  @media (max-width: 600px){
    .app-nav{width:100%;justify-content:space-between;}
    .app-nav button{flex:1;padding:8px 4px;font-size:10px;text-align:center;}
    /* Sous 600px les 4 onglets ne tiennent qu'avec des libellés courts. */
    .nav-long{display:none;}
    /* « bientôt » passe sous le libellé : à 10px il n'y a plus la place à côté. */
    .app-nav button .nav-soon{display:block;width:-moz-fit-content;width:fit-content;
      margin:2px auto 0;font-size:8px;}
    .home-title{font-size:25px;}
    .home-hero{padding:44px 2px 44px;}
    .home-cta-row .home-cta{width:100%;}
    .home-reassure{flex-direction:column;align-items:center;text-align:center;}
    .home-privacy{padding:18px 16px;}
    .home-final-cta{padding:26px 18px;}
  
  
  }

  /* ---------- Accueil : icônes des quatre outils ---------- */
  /* Les tracés sont écrits en dur dans index.html plutôt que tirés de
     js/portfolio-icons.js : l'accueil s'affiche avant ce module, qui n'est
     chargé que si l'on entre dans la section Portfolio. Quatre icônes en
     dur coûtent moins qu'une dépendance de chargement sur la page d'entrée. */
  .home-feature-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
    margin-bottom:14px;flex:none;}
  .home-feature-ic svg{width:21px;height:21px;fill:currentColor;}
  .home-feature-ic.ic-cv{color:#1B3A5C;background:rgba(27,58,92,.1);}
  .home-feature-ic.ic-ats{color:#2a97a2;background:rgba(56,189,200,.14);}
  .home-feature-ic.ic-ltr{color:#2f8f65;background:rgba(69,192,138,.14);}
  .home-feature-ic.ic-pf{color:#d05b2c;background:rgba(242,120,75,.14);}
  .home-feature h4{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  /* Gris et non l'orange du Portfolio : « Bientôt » annonce, il ne vend pas.
     Blanc sur #5F6460 donne 6,03:1, au-dessus du seuil à neuf pixels. */
  .home-soon-tag{font-family:'Roboto Mono',monospace;font-size:9px;font-weight:500;
    letter-spacing:.08em;text-transform:uppercase;color:#fff;background:#5F6460;
    border-radius:4px;padding:3px 6px;}
  /* Onglet fermé : il garde sa couleur de texte, seuls le curseur et l'absence
     de survol changent. Le grisage aurait fait tomber le contraste à 3,6:1,
     et l'étiquette dit déjà pourquoi le bouton ne répond pas. */
  .app-nav button:disabled{cursor:default;}
  .app-nav button:disabled:hover{color:var(--muted);}
  .nav-soon{display:inline-block;margin-left:6px;padding:2px 5px;
    border-radius:4px;font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;
    color:#fff;background:#5F6460;vertical-align:middle;}
  .home-link-btn:disabled{cursor:default;color:var(--muted);}
  .home-link-btn:disabled:hover{background:var(--card);border-color:var(--line);}

  /* ---------- Marque ---------- */
  /* Un monogramme dessiné plutôt qu un titre en gras : le C et le V partagent
     une colonne montante, et le filet doré leur sert de ligne de base, écho du
     trait qui souligne les titres de section d un CV. */
  .brand{display:flex;align-items:center;gap:11px;}
  .brand-mark{flex:none;width:34px;height:34px;}
  .brand-mark svg{display:block;width:34px;height:34px;}
  .brand-text{display:block;min-width:0;}
  @media (max-width: 600px){
    .brand-mark,.brand-mark svg{width:28px;height:28px;}
  
  
  }

  /* ---------- Accents dorés ---------- */
  /* Le bleu nuit seul restait proche du bleu d'accent que produisent les
     générateurs d'interface. Le doré est ce qui rend la palette identifiable :
     il ne sert donc pas de décor mais de ponctuation, sur quelques repères
     précis. --gold n'a que 2,2:1 sur fond clair, il ne porte jamais de texte ;
     c'est --gold-ink (4,7:1) qui s'en charge. */

  /* Filet sous les titres de section, écho du trait du logo. */
  /* Filet en bloc plutôt qu'en position absolue : il suit ainsi
     l'alignement du titre, à gauche dans les sections courantes et centré
     dans l'encart ATS. */
  .home-block-title::after{content:'';display:block;width:38px;height:2px;
    border-radius:1px;background:var(--gold);margin:12px 0 0;}
  .home-ats-callout .home-block-title::after{margin-inline:auto;}

  /* Pastille d'accroche du bandeau : texte bleu nuit sur or plein. Le fond
     translucide laissait la photo transparaître sous le texte, ce qui rendait
     sa lisibilité dépendante de l'image placée derrière. */
  .home-eyebrow{border-color:var(--gold);background:var(--gold);color:#12203a;}

  /* Numéros d'étape : bleu nuit cerclé d'or, plutôt qu'un simple rond plein. */
  .home-step-num{box-shadow:0 0 0 2px var(--gold-soft);}

  /* Le badge de prix passe du bleu au doré : c'est l'information commerciale,
     elle gagne à ne pas se confondre avec la couleur de navigation. */
  .paywall-badge{color:var(--gold-ink);border-color:rgba(217,155,74,.5);
    background:var(--gold-soft);}

  /* Survol du bouton principal : le doré signale l'action, le bleu la porte. */
  .btn.primary:hover{background:var(--grad-2);box-shadow:0 0 0 2px var(--gold-soft);}

  /* Onglet actif du menu : filet doré sous l'étiquette. */
  .app-nav button.active{position:relative;}
  .app-nav button.active::after{content:'';position:absolute;left:14px;right:14px;bottom:3px;
    height:2px;border-radius:1px;background:var(--gold);}

  @media (prefers-reduced-motion: reduce){
    .btn.primary:hover{box-shadow:none;}
  
  
  }

  /* ---------- Thème sombre ---------- */
  /*
   * Le thème ne redéfinit que les JETONS, jamais des règles une par une : la
   * feuille est assez tokenisée pour que basculer une dizaine de variables
   * suffise. Trois états, comme partout ailleurs : data-theme="dark" et
   * data-theme="light" pour un choix explicite, et rien du tout pour suivre le
   * système via prefers-color-scheme.
   *
   * La règle qui compte : UN CV EST UN DOCUMENT IMPRIMÉ. La feuille A4 et la
   * lettre restent sur fond blanc avec leur encre sombre quel que soit le
   * thème, sinon l'aperçu ne correspondrait plus à ce qui sort en PDF, et
   * l'utilisateur validerait un document qu'il n'a jamais vu tel qu'il est.
   * Les jetons du document leur sont donc rendus, plus bas.
   */
  :root[data-theme="dark"]{
    --ink:#ECEAE5;
    --paper:#14181D;
    --card:#1B2027;
    --line:#2A313A;
    --muted:#98A2AD;
    --paper-2:#222932;
    --line-hover:#3A424D;
    --line-strong:#5A646F;
    /* Le bleu nuit de la marque disparaîtrait sur un fond sombre : les boutons
       et l'en-tête prennent la variante claire, qui garde la même teinte. */
    --grad-1:#2E5C8A;
    --grad-2:#4A80B5;
    --brand-gradient:var(--grad-1);
    --brand-gradient-soft:linear-gradient(rgba(74,128,181,.16), rgba(74,128,181,.16));
    /* Sur fond sombre, c'est le doré clair qui porte le texte. */
    --brand-ink:#8FC0EE;
    --gold-ink:#E8B876;
    --gold-soft:rgba(217,155,74,.2);

    --card-2:#222932;
    --ink-2:#C3C8CE;
    color-scheme:dark;
    /* Les variantes TEXTE des couleurs d'état sont foncées pour tenir sur
       fond clair. Sur fond sombre il faut l'inverse, sinon le vert de
       « Téléchargement gratuit » descend à 1,7:1. */
    --success-text:#5FD39B;
    --warning-text:#E8B876;
    --danger-text:#F0897E;
  }

  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ink:#ECEAE5;
      --paper:#14181D;
      --card:#1B2027;
      --line:#2A313A;
      --muted:#98A2AD;
      --paper-2:#222932;
      --line-hover:#3A424D;
      --line-strong:#5A646F;
      --grad-1:#2E5C8A;
      --grad-2:#4A80B5;
      --brand-gradient:var(--grad-1);
      --brand-gradient-soft:linear-gradient(rgba(74,128,181,.16), rgba(74,128,181,.16));
      --brand-ink:#8FC0EE;
      --gold-ink:#E8B876;
      --gold-soft:rgba(217,155,74,.2);

    --card-2:#222932;
    --ink-2:#C3C8CE;
    color-scheme:dark;
    /* Les variantes TEXTE des couleurs d'état sont foncées pour tenir sur
       fond clair. Sur fond sombre il faut l'inverse, sinon le vert de
       « Téléchargement gratuit » descend à 1,7:1. */
    --success-text:#5FD39B;
    --warning-text:#E8B876;
    --danger-text:#F0897E;
    }
  
  
  }

  /* Le document reprend ses valeurs claires, dans les deux façons d'être en
     sombre (choix explicite ou réglage système). */
  :root[data-theme="dark"] .page-sheet,
  :root[data-theme="dark"] .letter-page{
    --ink:#1C1B18; --body:#3a3833; --muted:#6E736F; --card:#FFFFFF;
    --line:#D6DAD6; --line-hover:#c7c2b3; --line-strong:#8a877d;
    --paper:#E4E7E5; --paper-2:#F3F0E8; --paper-warm:#EFEDE6; --empty-hint:#c4c0b1; --brand-ink:#1B3A5C;
    color:#1C1B18;
    color-scheme:light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .page-sheet,
    :root:not([data-theme="light"]) .letter-page{
      --ink:#1C1B18; --body:#3a3833; --muted:#6E736F; --card:#FFFFFF;
      --line:#D6DAD6; --line-hover:#c7c2b3; --line-strong:#8a877d;
      --paper:#E4E7E5; --paper-2:#F3F0E8; --paper-warm:#EFEDE6; --empty-hint:#c4c0b1; --brand-ink:#1B3A5C;
      color:#1C1B18;
      color-scheme:light;
    }
  
  
  }

  /* ---------- Interrupteur de thème ---------- */
  /* Un vrai interrupteur, pas un bouton qui change d'icône : la position du
     curseur dit l'état en cours sans avoir à interpréter un pictogramme. Les
     deux icônes restent visibles, celle du mode actif s'allume. */
  .theme-switch{
    position:relative;display:inline-flex;align-items:center;gap:0;
    width:56px;height:28px;flex:none;padding:0;cursor:pointer;
    background:var(--paper-2);border:1px solid var(--line);border-radius:99px;
    transition:background .18s ease,border-color .18s ease;
  }
  .theme-switch:hover{border-color:var(--line-hover);}
  .theme-switch:focus-visible{outline:2px solid var(--grad-1);outline-offset:2px;}
  .theme-switch .ts-knob{
    position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;
    background:#F4F1EA;box-shadow:0 1px 3px rgba(0,0,0,.35);
    transition:transform .2s ease;
  }
  .theme-switch .ts-ico{
    position:relative;z-index:1;display:grid;place-items:center;width:28px;height:26px;
    color:var(--muted);transition:color .18s ease;
  }
  .theme-switch .ts-ico svg{width:14px;height:14px;fill:currentColor;display:block;}
  .theme-switch[aria-pressed="false"] .ts-sun{color:var(--gold-ink);}
  .theme-switch[aria-pressed="true"] .ts-moon{color:#CFE0F0;}
  .theme-switch[aria-pressed="true"] .ts-knob{transform:translateX(28px);}
  .theme-switch[aria-pressed="true"]{background:#0E1620;border-color:#2A3844;}

  @media (prefers-reduced-motion: reduce){
    .theme-switch,.theme-switch .ts-knob,.theme-switch .ts-ico{transition:none;}
  
  
  }

  /* Sur les écrans étroits la barre de marque est déjà dense : l'interrupteur
     rejoint la rangée de navigation plutôt que de pousser le titre. */
  @media (max-width: 600px){
    .theme-switch{width:50px;height:26px;}
    .theme-switch .ts-knob{width:20px;height:20px;}
    .theme-switch[aria-pressed="true"] .ts-knob{transform:translateX(24px);}
    .theme-switch .ts-ico{width:25px;}
  
  
  }

  /* ---------- Mise en scène de l'aperçu ---------- */
  /* Fond de feuille de note : un papier réglé sur lequel la page du CV est
     posée. Les rayures sont tracées en dégradé répété plutôt qu'en image, ce
     qui ne coûte aucune requête et reste net à tous les zooms.

     L'interligne est donné en millimètres, comme le reste de l'aperçu : les
     rayures gardent ainsi le même écart apparent quand on zoome la page,
     puisque le zoom agit sur la feuille et non sur le plan qui la porte. */
  .preview-wrap{
    position:relative;
    background-color:#EFEADF;
    background-image:
      /* filet vertical de marge, à gauche, comme sur un cahier */
      linear-gradient(90deg, transparent 0 17mm, rgba(196,102,92,.30) 17mm 17.4mm, transparent 17.4mm),
      /* rayures horizontales */
      repeating-linear-gradient(180deg, transparent 0 7.6mm, rgba(70,96,130,.16) 7.6mm 8mm),
      /* légère salissure de papier, plus marquée sur les bords */
      radial-gradient(130% 90% at 50% 0%, rgba(255,255,255,.5), transparent 65%);
    background-attachment:local, local, scroll;
  }

  /* En thème sombre le papier devient une ardoise : mêmes rayures, tracées
     en clair sur fond foncé, pour que le repère reste lisible sans éblouir. */
  :root[data-theme="dark"] .preview-wrap{
    background-color:#14171C;
    background-image:
      linear-gradient(90deg, transparent 0 17mm, rgba(217,155,74,.22) 17mm 17.4mm, transparent 17.4mm),
      repeating-linear-gradient(180deg, transparent 0 7.6mm, rgba(160,190,225,.09) 7.6mm 8mm),
      radial-gradient(130% 90% at 50% 0%, rgba(255,255,255,.045), transparent 65%);
    background-attachment:local, local, scroll;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .preview-wrap{
      background-color:#14171C;
      background-image:
        linear-gradient(90deg, transparent 0 17mm, rgba(217,155,74,.22) 17mm 17.4mm, transparent 17.4mm),
        repeating-linear-gradient(180deg, transparent 0 7.6mm, rgba(160,190,225,.09) 7.6mm 8mm),
        radial-gradient(130% 90% at 50% 0%, rgba(255,255,255,.045), transparent 65%);
      background-attachment:local, local, scroll;
    }
  }

  /* Ombre en trois plans : un contact net au ras de la feuille, une ombre
     portée large et diffuse, et un filet clair sur l'arête haute. Une seule
     ombre donnait un rectangle collé au fond. */
  .page-sheet{
    box-shadow:
      0 1px 2px rgba(28,27,24,.10),
      0 2px 6px rgba(28,27,24,.07),
      0 24px 48px -18px rgba(28,27,24,.30);
  }
  :root[data-theme="dark"] .page-sheet{
    box-shadow:
      0 1px 2px rgba(0,0,0,.5),
      0 2px 8px rgba(0,0,0,.35),
      0 28px 56px -18px rgba(0,0,0,.7);
  }

  /* Barre flottante : le zoom commande l'aperçu, il se pose donc dessus plutôt
     que d'être rangé au milieu des réglages du CV, à l'autre bout de l'écran.
     Elle est en sticky et non en fixed pour rester dans le flux de défilement
     de l'aperçu et ne pas déborder sur l'éditeur. */
  /* Fixée plutôt que dans le flux : dans un conteneur en flex-row qui défile,
     un élément collant se placerait à côté de la feuille et non au-dessus, et
     passer le conteneur en colonne déformait la feuille. La barre est donc
     calée sur la colonne de droite de la grille, dont la largeur est déjà
     connue par --editor-w. */
  .preview-dock{
    position:fixed;z-index:20;
    left:calc(var(--editor-w, 420px) + 6px);right:0;
    bottom:calc(20px + var(--preview-dock-lift, 0px));
    transition:bottom .12s linear;
    width:fit-content;margin:0 auto;
    display:inline-flex;align-items:center;gap:2px;
    padding:4px;
    border-radius:99px;
    /* Barre opaque : translucide, elle laissait le CV défiler derrière ses
       propres commandes, ce qui brouillait leur lecture au pire moment. */
    background:var(--card);
    border:1px solid var(--line);
    box-shadow:0 6px 18px rgba(28,27,24,.16);
  }
  :root[data-theme="dark"] .preview-dock{
    background:rgba(27,32,39,.86);
    border-color:rgba(255,255,255,.12);
    box-shadow:0 6px 20px rgba(0,0,0,.5);
  }
  .pd-btn,.pd-level{
    border:0;background:transparent;color:var(--ink);cursor:pointer;
    font:inherit;border-radius:99px;line-height:1;
  }
  .pd-btn{width:28px;height:28px;font-size:15px;}
  .pd-btn:hover{background:rgba(28,27,24,.08);}
  :root[data-theme="dark"] .pd-btn:hover{background:rgba(255,255,255,.1);}
  .pd-level{
    font-family:'Roboto Mono',monospace;font-size:11.5px;color:var(--muted);
    min-width:52px;height:28px;padding:0 6px;
  }
  .pd-level:hover{background:rgba(28,27,24,.08);color:var(--ink);}
  :root[data-theme="dark"] .pd-level:hover{background:rgba(255,255,255,.1);}
  .preview-dock :focus-visible{outline:2px solid var(--grad-1);outline-offset:1px;}


  @media (max-width: 900px){
    /* Éditeur et aperçu empilés : la barre reprend toute la largeur et se
       cale en bas, là où le pouce arrive. */
    .preview-dock{left:0;bottom:calc(12px + var(--preview-dock-lift, 0px));}
  
  }