@charset "UTF-8";
/* =============================================================================
   CROXAL — style.css
   -----------------------------------------------------------------------------
   Feuille de style unique du site. Aucune dépendance : ni police distante, ni
   framework, ni CDN. Tout le langage visuel vient des captures réelles de
   Calqira : fonds très clairs, cartes blanches très arrondies, bordures
   discrètes, ombres légères, titres foncés, textes secondaires doux et une
   couleur d'accent qui dépend du thème.

   SOMMAIRE
     1.  Réinitialisation et bases
     2.  Variables de mise en page (rayons, ombres, rythme)
     3.  Thèmes (8 palettes)
     4.  Structure : conteneur, sections, grilles
     5.  Typographie
     6.  En-tête, navigation, langue, thème
     7.  Boutons, pastilles, étiquettes
     8.  Cartes
     9.  Captures d'écran réelles (cadre + carrousel)
     10. Hero
     11. Formulaire de contact
     12. Pages de documentation (confidentialité)
     13. Pied de page
     14. Animations, accessibilité, impression
     15. Adaptations petites et grandes largeurs
   ========================================================================== */


/* =============================================================================
   1. RÉINITIALISATION ET BASES
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;      /* l'en-tête est collant : on décale les ancres */
}

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 800; letter-spacing: -0.018em; }
p { margin: 0; }

/* Aucune liste du site n'utilise les puces natives : la navigation, le pied de
   page et le sommaire sont mis en forme à la main, et les listes de contenu de
   la politique de confidentialité dessinent leurs propres pastilles
   (voir « .doc-section ul » plus bas). */
ul, ol { list-style: none; margin: 0; padding: 0; }

a { color: var(--primary-strong); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg, picture, video { max-width: 100%; }
img { height: auto; border: 0; }
svg { width: 24px; height: 24px; flex: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--primary-soft); color: var(--text); }

hr { height: 1px; border: 0; background: var(--border); margin: 0; }


/* =============================================================================
   2. VARIABLES DE MISE EN PAGE
   Ces valeurs ne dépendent pas du thème : elles décrivent le rythme du site.
   ========================================================================== */

:root {
  /* rayons — très arrondis, comme les cartes de l'application */
  --r-xs:   8px;
  --r-sm:  12px;
  --r-md:  18px;
  --r-lg:  24px;
  --r-xl:  30px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* ombres — extrêmement légères, jamais de halo marqué */
  --sh-1: 0 1px 2px rgba(18, 22, 34, .04), 0 2px 8px rgba(18, 22, 34, .04);
  --sh-2: 0 2px 6px rgba(18, 22, 34, .05), 0 10px 26px rgba(18, 22, 34, .06);
  --sh-3: 0 6px 16px rgba(18, 22, 34, .07), 0 22px 50px rgba(18, 22, 34, .08);

  /* mise en page */
  --maxw: 1160px;
  --pad-x: clamp(16px, 5vw, 32px);
  --sec-y: clamp(56px, 8vw, 104px);

  /* mouvement */
  --dur: 220ms;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* couleurs des icônes de modules, relevées sur les captures de Calqira.
     Chaque module a une couleur de trait et une pastille pastel. */
  --i-teal:   #0F9D8A;  --i-teal-bg:   #DEF2EE;  /* Classique     */
  --i-blue:   #2F5BE8;  --i-blue-bg:   #E2E8FD;  /* Scientifique  */
  --i-violet: #7C4DE8;  --i-violet-bg: #EBE4FD;  /* Math          */
  --i-red:    #E8524F;  --i-red-bg:    #FBE1E1;  /* Statistiques  */
  --i-green:  #3FA45C;  --i-green-bg:  #E1F0E4;  /* Géométrie     */
  --i-amber:  #E8892B;  --i-amber-bg:  #FCEBD6;  /* TVA / Remise  */
  --i-pink:   #E8437E;  --i-pink-bg:   #FBDFE9;  /* Pourboire     */
  --i-cyan:   #C02BAF;  --i-cyan-bg:   #F7DEF4;  /* Durée         */
  --i-indigo: #D93A73;  --i-indigo-bg: #FBDCE7;  /* Dates         */
  --i-purple: #5B3FD8;  --i-purple-bg: #E7E1FD;  /* Convertisseur */
  --i-star:   #F2B32C;
}


/* =============================================================================
   3. THÈMES
   Les huit thèmes de Calqira, dans l'ordre de l'application.
   Chaque thème ne redéfinit que des variables : aucune règle n'est dupliquée.
   Un neuvième thème s'ajoute en copiant un bloc et en changeant les valeurs
   (voir README.md, « Ajouter un thème »).
   ========================================================================== */

/* ---- Moderne (thème par défaut) ---------------------------------------- */
:root,
[data-theme="modern"] {
  --primary:        #1B6EF3;
  --primary-strong: #1550C4;
  --primary-soft:   #DCE7FD;
  --secondary:      #12B18C;
  --accent:         #12B18C;

  --background:     #F4F5F8;
  --background-alt: #EAECF1;
  --surface:        #FFFFFF;
  --surface-alt:    #F8F9FC;

  --text:           #14161C;
  --text-secondary: #5C6270;
  --border:         #E7E9EF;
  --border-strong:  #D3D7E0;

  --btn-bg:         #1B6EF3;
  --btn-bg-hover:   #1550C4;
  --btn-fg:         #FFFFFF;
}

/* ---- Chat --------------------------------------------------------------- */
[data-theme="chat"] {
  --primary:        #8A6046;
  --primary-strong: #6B4632;
  --primary-soft:   #F6E3CC;
  --secondary:      #C98A3E;
  --accent:         #C98A3E;

  --background:     #FDF2E6;
  --background-alt: #F7E7D5;
  --surface:        #FFFAF3;
  --surface-alt:    #FDF4E9;

  --text:           #4A3728;
  --text-secondary: #766354;
  --border:         #EEDFCB;
  --border-strong:  #E0CBB0;

  --btn-bg:         #6B4632;
  --btn-bg-hover:   #573726;
  --btn-fg:         #FFFFFF;
}

/* ---- Fleur -------------------------------------------------------------- */
[data-theme="flower"] {
  --primary:        #E3568C;
  --primary-strong: #AF3667;
  --primary-soft:   #FBDCE8;
  --secondary:      #C86BA8;
  --accent:         #C86BA8;

  --background:     #FDF0F5;
  --background-alt: #FAE4EE;
  --surface:        #FFF9FC;
  --surface-alt:    #FEF2F7;

  --text:           #40222F;
  --text-secondary: #7B5F6B;
  --border:         #F5DCE7;
  --border-strong:  #EBC4D6;

  --btn-bg:         #AF3667;
  --btn-bg-hover:   #A62F60;
  --btn-fg:         #FFFFFF;
}

/* ---- Cœur --------------------------------------------------------------- */
[data-theme="heart"] {
  --primary:        #E31B5D;
  --primary-strong: #BC1149;
  --primary-soft:   #FBD8E4;
  --secondary:      #F2607F;
  --accent:         #F2607F;

  --background:     #FDE9F0;
  --background-alt: #FADCE6;
  --surface:        #FFF9FB;
  --surface-alt:    #FEF0F4;

  --text:           #3F1D2B;
  --text-secondary: #7E5A69;
  --border:         #F6D7E2;
  --border-strong:  #EDBACC;

  --btn-bg:         #BC1149;
  --btn-bg-hover:   #A80E41;
  --btn-fg:         #FFFFFF;
}

/* ---- Anime -------------------------------------------------------------- */
[data-theme="anime"] {
  --primary:        #F62E8E;
  --primary-strong: #C0176A;
  --primary-soft:   #FCDDEB;
  --secondary:      #B39DE8;
  --accent:         #B39DE8;

  --background:     #FCEBF3;
  --background-alt: #F8DDEA;
  --surface:        #FFFAFC;
  --surface-alt:    #FDF1F6;

  --text:           #3D2438;
  --text-secondary: #755D6E;
  --border:         #F6DAE8;
  --border-strong:  #EDBFD6;

  --btn-bg:         #C0176A;
  --btn-bg-hover:   #B0125F;
  --btn-fg:         #FFFFFF;
}

/* ---- BlockCraft — angles plus francs, esprit bloc ------------------------ */
[data-theme="blockcraft"] {
  --primary:        #57A83E;
  --primary-strong: #3C772A;
  --primary-soft:   #DFEFD6;
  --secondary:      #8B5A2B;
  --accent:         #8B5A2B;

  --background:     #F3F2EA;
  --background-alt: #E9E7DA;
  --surface:        #FFFEF8;
  --surface-alt:    #F7F6EE;

  --text:           #1E2117;
  --text-secondary: #636958;
  --border:         #E2E0D0;
  --border-strong:  #CFCCB8;

  --btn-bg:         #3D7A2B;
  --btn-bg-hover:   #326523;
  --btn-fg:         #FFFFFF;

  --r-xs: 3px; --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 10px; --r-2xl: 12px;
}

/* ---- Build City --------------------------------------------------------- */
[data-theme="buildcity"] {
  --primary:        #1B6EF3;
  --primary-strong: #1550C4;
  --primary-soft:   #DCE7FD;
  --secondary:      #E8821B;
  --accent:         #E8821B;

  --background:     #F3F5F8;
  --background-alt: #E7EBF1;
  --surface:        #FFFFFF;
  --surface-alt:    #F7F9FC;

  --text:           #1B2430;
  --text-secondary: #5B6675;
  --border:         #E3E8EF;
  --border-strong:  #CFD6E0;

  --btn-bg:         #1550C4;
  --btn-bg-hover:   #113FA0;
  --btn-fg:         #FFFFFF;

  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 18px; --r-2xl: 20px;
}

/* ---- Pixel Adventure — le seul thème sombre ------------------------------ */
[data-theme="pixel"] {
  --primary:        #7CC142;
  --primary-strong: #90D455;
  --primary-soft:   #26331A;
  --secondary:      #E8C93A;
  --accent:         #E8C93A;

  --background:     #141A0E;
  --background-alt: #1A2213;
  --surface:        #1F2818;
  --surface-alt:    #232D1B;

  --text:           #ECF2E2;
  --text-secondary: #9DAC8C;
  --border:         #2E3A24;
  --border-strong:  #3C4A2F;

  --btn-bg:         #7CC142;
  --btn-bg-hover:   #90D455;
  --btn-fg:         #14200B;

  --r-xs: 2px; --r-sm: 3px; --r-md: 5px; --r-lg: 7px; --r-xl: 9px; --r-2xl: 11px;

  --sh-1: 0 2px 0 rgba(0, 0, 0, .30);
  --sh-2: 0 3px 0 rgba(0, 0, 0, .34);
  --sh-3: 0 4px 0 rgba(0, 0, 0, .40);
}


/* =============================================================================
   4. STRUCTURE
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section { padding-block: var(--sec-y); }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }
.section--alt { background: var(--background-alt); }
.section--surface { background: var(--surface); }

.section__head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 44px); }
.section__head--center { margin-inline: auto; text-align: center; }

.grid { display: grid; gap: clamp(14px, 2vw, 20px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}

.stack     { display: grid; gap: 16px; }
.stack--sm { gap: 10px; }
.stack--lg { gap: 24px; }


/* =============================================================================
   5. TYPOGRAPHIE
   ========================================================================== */

.h1 { font-size: clamp(32px, 6.2vw, 56px); letter-spacing: -0.03em; }
.h2 { font-size: clamp(25px, 3.6vw, 38px); letter-spacing: -0.024em; }
.h3 { font-size: clamp(19px, 2.1vw, 23px); font-weight: 750; letter-spacing: -0.014em; }
.h4 { font-size: 17px; font-weight: 750; }

.lead {
  font-size: clamp(16.5px, 1.8vw, 19px);
  color: var(--text-secondary);
  line-height: 1.68;
}

.muted { color: var(--text-secondary); }
.small { font-size: 14px; }
.tiny  { font-size: 13px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary-strong);
}
.eyebrow svg { width: 17px; height: 17px; }

.prose p + p { margin-top: 14px; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }


/* =============================================================================
   6. EN-TÊTE
   ========================================================================== */

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--sh-2);
  font-weight: 700;
}
.skip:focus { left: 12px; }

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--background) 88%, transparent);
  border-bottom: 1px solid var(--border);
}
/* Repli pour les navigateurs sans color-mix : fond plein, jamais transparent. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .header { background: var(--background); }
}
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  .header { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 68px;
  padding-block: 10px;
}

/* ---- marque ------------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  text-decoration: none;
  flex: none;
}
.brand:hover { text-decoration: none; }
.brand__mark { width: 36px; height: 36px; border-radius: var(--r-sm); flex: none; }
.brand__text { display: grid; line-height: 1.12; }
.brand__name { font-size: 17.5px; font-weight: 800; letter-spacing: .045em; }
.brand__sub  { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); letter-spacing: .03em; }

/* ---- navigation --------------------------------------------------------- */
.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__link {
  display: block;
  padding: 9px 13px;
  border-radius: var(--r-pill);
  font-size: 14.5px;
  font-weight: 650;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__link:hover { background: var(--surface); color: var(--text); text-decoration: none; }
.nav__link[aria-current="page"] { background: var(--primary-soft); color: var(--primary-strong); }

/* ---- outils de droite --------------------------------------------------- */
.tools { display: flex; align-items: center; gap: 8px; flex: none; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.icon-btn:hover { color: var(--text); border-color: var(--border-strong); }
.icon-btn svg { width: 21px; height: 21px; }
.icon-btn[aria-expanded="true"] {
  background: var(--primary-soft);
  color: var(--primary-strong);
  border-color: var(--primary-soft);
}

.nav-toggle { display: none; }

/* ---- sélecteur de langue ------------------------------------------------ */
.lang { position: relative; }
.lang__panel,
.theme-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 120;
  min-width: 188px;
  padding: 8px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--sh-3);
}
.lang__panel[hidden],
.theme-menu[hidden] { display: none; }

.lang__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  font-weight: 620;
  color: var(--text);
  text-decoration: none;
}
.lang__item:hover { background: var(--surface-alt); text-decoration: none; }
.lang__item[aria-current="true"] { background: var(--primary-soft); color: var(--primary-strong); }
.lang__code {
  min-width: 30px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.lang__item[aria-current="true"] .lang__code { color: var(--primary-strong); }

/* Repli sans JavaScript : le panneau devient une liste toujours visible au
   survol, et le bouton reste un lien vers l'ancre du pied de page. */
.no-js .lang__panel { position: static; box-shadow: none; border: 0; padding: 0; }

/* ---- menu des thèmes ---------------------------------------------------- */
.theme-menu { min-width: 222px; }
.theme-menu__title {
  padding: 6px 11px 8px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.theme-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 11px;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  font-weight: 620;
  text-align: left;
  color: var(--text);
}
.theme-chip:hover { background: var(--surface-alt); }
.theme-chip[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary-strong); }
.theme-chip__dots { display: inline-flex; gap: 3px; flex: none; }
.theme-chip__dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .10);
}
.theme-chip__name { flex: 1 1 auto; min-width: 0; }
.theme-chip__check { width: 18px; height: 18px; opacity: 0; }
.theme-chip[aria-pressed="true"] .theme-chip__check { opacity: 1; }


/* =============================================================================
   7. BOUTONS, PASTILLES, ÉTIQUETTES
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  max-width: 100%;
  padding: 13px 22px;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  font-size: 15.5px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 19px; height: 19px; }

.btn--primary {
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--sh-1);
}
.btn--primary:hover { background: var(--btn-bg-hover); box-shadow: var(--sh-2); }

.btn--ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn--ghost:hover { border-color: var(--primary); color: var(--primary-strong); }

.btn--quiet { background: transparent; color: var(--primary-strong); padding-inline: 6px; }
.btn--quiet:hover { text-decoration: underline; }

.btn--block { width: 100%; }
.btn--sm { padding: 9px 16px; font-size: 14px; }

.btn[aria-disabled="true"],
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13.5px;
  font-weight: 650;
  color: var(--text-secondary);
}
.pill svg { width: 17px; height: 17px; color: var(--primary); }
.pill-row { display: flex; flex-wrap: wrap; gap: 9px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .02em;
}
.badge--live { background: var(--primary-soft); color: var(--primary-strong); }
.badge--soon { background: var(--background-alt); color: var(--text-secondary); }


/* =============================================================================
   8. CARTES
   ========================================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(20px, 2.6vw, 28px);
  box-shadow: var(--sh-1);
}
.card--flat { box-shadow: none; }
.card--pad-lg { padding: clamp(24px, 3.4vw, 40px); }

/* ---- pastille d'icône colorée ------------------------------------------- */
.ibox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  flex: none;
}
.ibox svg { width: 23px; height: 23px; }
.ibox--sm { width: 36px; height: 36px; border-radius: var(--r-sm); }
.ibox--sm svg { width: 19px; height: 19px; }

.ibox--teal   { background: var(--i-teal-bg);   color: var(--i-teal); }
.ibox--blue   { background: var(--i-blue-bg);   color: var(--i-blue); }
.ibox--violet { background: var(--i-violet-bg); color: var(--i-violet); }
.ibox--red    { background: var(--i-red-bg);    color: var(--i-red); }
.ibox--green  { background: var(--i-green-bg);  color: var(--i-green); }
.ibox--amber  { background: var(--i-amber-bg);  color: var(--i-amber); }
.ibox--pink   { background: var(--i-pink-bg);   color: var(--i-pink); }
.ibox--cyan   { background: var(--i-cyan-bg);   color: var(--i-cyan); }
.ibox--indigo { background: var(--i-indigo-bg); color: var(--i-indigo); }
.ibox--purple { background: var(--i-purple-bg); color: var(--i-purple); }
.ibox--brand  { background: var(--primary-soft); color: var(--primary-strong); }

/* ---- carte de module (reprend la mise en page de l'écran « Modules ») ---- */
.module-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 84px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.module-card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--border-strong); }
.module-card__body { flex: 1 1 0; min-width: 0; }
.module-card__head { display: flex; align-items: flex-start; gap: 8px; }
.module-card__title {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 2px;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.28;
}
.module-card__desc {
  margin-top: 2px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.module-card__star {
  width: 30px;
  height: 30px;
  margin: -2px -4px 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--border-strong);
  border-radius: var(--r-pill);
  flex: none;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.module-card__star svg { width: 19px; height: 19px; }
.module-card__star:hover { color: var(--text-secondary); background: var(--surface-alt); }
.module-card__star[aria-pressed="true"] { color: var(--primary); }
.module-card__star[aria-pressed="true"] svg { fill: currentColor; }

/* ---- carte de fonctionnalité -------------------------------------------- */
.feature {
  display: grid;
  gap: 12px;
  padding: clamp(18px, 2.2vw, 24px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.feature__title { font-size: 16.5px; font-weight: 750; }
.feature__desc { font-size: 14.5px; color: var(--text-secondary); line-height: 1.55; }

/* ---- carte de thème (reprend l'écran « Thème » de l'application) --------- */
.theme-card {
  display: block;
  width: 100%;
  padding: 16px 18px;
  text-align: left;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.theme-card:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.theme-card[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--primary); }

.theme-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.theme-card__name { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 750; color: var(--text); }
.theme-card__motif { width: 26px; height: 26px; flex: none; }
.theme-card__check { width: 24px; height: 24px; flex: none; color: var(--primary); display: none; }
.theme-card[aria-pressed="true"] .theme-card__motif { display: none; }
.theme-card[aria-pressed="true"] .theme-card__check { display: block; }

.theme-card__pal { display: flex; gap: 10px; }
.theme-card__pal i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, .07);
  flex: none;
}

/* ---- carte d'application (catalogue) ------------------------------------ */
.app-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px 18px;
  align-items: start;
  padding: clamp(20px, 2.6vw, 26px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.app-card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.app-card--soon { background: var(--surface-alt); box-shadow: none; border-style: dashed; }
.app-card--soon:hover { transform: none; }

.app-card__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--r-md);
  flex: none;
  box-shadow: var(--sh-1);
}
.app-card__icon--empty {
  display: grid;
  place-items: center;
  background: var(--background-alt);
  color: var(--text-secondary);
  box-shadow: none;
}
.app-card__icon--empty svg { width: 26px; height: 26px; }

.app-card__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.app-card__name { font-size: 20px; font-weight: 800; }
.app-card__tagline { margin-top: 2px; font-size: 15px; color: var(--text-secondary); }
.app-card__desc { margin-top: 10px; font-size: 14.5px; color: var(--text-secondary); line-height: 1.6; }
.app-card__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.app-card__links { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13.5px; }

/* ---- encadré « à confirmer » ------------------------------------------- */
.todo {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px dashed var(--border-strong);
  background: var(--surface-alt);
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.todo svg { width: 20px; height: 20px; color: var(--accent); flex: none; margin-top: 1px; }
.todo b { color: var(--text); }

/* ---- note d'information ------------------------------------------------- */
.note {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--primary-soft);
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
}
.note svg { width: 20px; height: 20px; color: var(--primary-strong); flex: none; margin-top: 1px; }


/* =============================================================================
   9. CAPTURES D'ÉCRAN RÉELLES
   Les captures de Calqira sont de vraies images. Elles gardent toujours leur
   ratio d'origine (9:20) : le cadre s'adapte à l'image, jamais l'inverse.
   ========================================================================== */

.shots { position: relative; }

.shots__track {
  display: flex;
  gap: clamp(16px, 2.4vw, 26px);
  padding: 6px var(--pad-x) 18px;
  margin-inline: calc(var(--pad-x) * -1);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad-x);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.shots__track::-webkit-scrollbar { height: 8px; }
.shots__track::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-pill);
}
.shots__track::-webkit-scrollbar-track { background: transparent; }

.shot {
  flex: 0 0 auto;
  width: min(270px, 62vw);
  scroll-snap-align: center;
}

/* cadre de téléphone : une simple bordure, aucune déformation de l'image */
.phone {
  position: relative;
  padding: 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 34px;
  box-shadow: var(--sh-2);
}
.phone::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 4px;
  border-radius: var(--r-pill);
  background: rgba(20, 22, 28, .10);
  pointer-events: none;
  z-index: 1;
}
[data-theme="pixel"] .phone::before { background: rgba(255, 255, 255, .14); }
.phone img {
  display: block;
  width: 100%;
  border-radius: 27px;
  background: var(--surface-alt);

  /* Les captures ne viennent pas toutes du même téléphone : celles du store
     Google Play sont plus larges. Le cadre garde le format 9:20 pour que la
     rangée reste alignée, et « contain » fait tenir l'image dedans SANS jamais
     la déformer ni la recadrer — au pire une fine marge en haut et en bas. */
  aspect-ratio: 9 / 20;
  height: auto;
  object-fit: contain;
}
.phone--plain { padding: 0; border: 0; box-shadow: var(--sh-2); border-radius: 28px; }
.phone--plain::before { display: none; }
.phone--plain img { border-radius: 28px; }

.shot__caption {
  margin-top: 14px;
  text-align: center;
  font-size: 14px;
  font-weight: 650;
  color: var(--text-secondary);
  line-height: 1.4;
}
.shot__caption b { display: block; color: var(--text); font-size: 15px; font-weight: 750; }

/* boutons de défilement — masqués quand le carrousel tient à l'écran */
.shots__nav { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
.shots__nav[hidden] { display: none; }
.shots__btn { width: 42px; height: 42px; }
.shots__btn:disabled { opacity: .38; cursor: default; }

.shots__hint {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
}

/* bannière de l'application (image officielle) */
.app-banner {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
}


/* =============================================================================
   10. HERO
   ========================================================================== */

.hero { padding-block: clamp(40px, 6.5vw, 84px) clamp(40px, 6vw, 76px); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(34px, 5vw, 60px);
  align-items: center;
}
.hero__title { margin-top: 16px; }
.hero__lead { margin-top: 18px; max-width: 56ch; }
.hero__actions { margin-top: 26px; }
.hero__pills { margin-top: 26px; }

.hero__art { display: flex; justify-content: center; gap: clamp(14px, 2vw, 22px); }
.hero__art .phone { width: min(232px, 46vw); }
.hero__art .phone:nth-child(2) { margin-top: clamp(22px, 4vw, 44px); }

.hero__app {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px 10px 10px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-1);
}
.hero__app img { width: 44px; height: 44px; border-radius: var(--r-sm); }
.hero__app-name { font-size: 16px; font-weight: 800; line-height: 1.15; }
.hero__app-meta { font-size: 12.5px; color: var(--text-secondary); }


/* =============================================================================
   11. FORMULAIRE DE CONTACT
   ========================================================================== */

.form { display: grid; gap: 20px; }
.form__row { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }

.field { display: grid; gap: 7px; }
.field__label { font-size: 14.5px; font-weight: 700; }
.field__req { color: var(--primary-strong); }
.field__hint { font-size: 13px; color: var(--text-secondary); }

.input, .select, .textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.5;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-secondary); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.textarea { min-height: 168px; resize: vertical; }

.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6270' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 19px 19px;
}
[data-theme="pixel"] .select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239DAC8C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] { border-color: var(--i-red); }

.field__error {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--i-red);
}
.field__error svg { width: 16px; height: 16px; }

.check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 14.5px;
  line-height: 1.55;
  cursor: pointer;
}
.check input {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--primary);
  cursor: pointer;
  flex: none;
}

/* piège à robots : invisible pour les visiteurs, rempli par les automates */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.alert {
  display: flex;
  gap: 13px;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  font-size: 15px;
  line-height: 1.55;
}
.alert svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.alert b { display: block; margin-bottom: 2px; }
.alert--ok {
  background: var(--i-green-bg);
  color: #1D4A2B;
  border: 1px solid #BEDFC6;
}
.alert--ok svg { color: #2E7D45; }
.alert--err {
  background: var(--i-red-bg);
  color: #7A1F1D;
  border: 1px solid #F1C3C2;
}
.alert--err svg { color: #C0322F; }
[data-theme="pixel"] .alert--ok { background: #1E3320; color: #CDE9D3; border-color: #2F5136; }
[data-theme="pixel"] .alert--err { background: #3A1E1E; color: #F3CFCE; border-color: #5B2E2D; }

.form__aside { display: grid; gap: 14px; align-content: start; }
.contact-line { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.contact-line svg { width: 20px; height: 20px; color: var(--primary); }


/* =============================================================================
   12. PAGES DE DOCUMENTATION
   ========================================================================== */

.doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 44px); }

.doc-toc {
  align-self: start;
  padding: 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
}
.doc-toc__title {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.doc-toc a {
  display: block;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 620;
  color: var(--text-secondary);
  text-decoration: none;
}
.doc-toc a:hover { background: var(--surface-alt); color: var(--text); text-decoration: none; }
.doc-toc a.is-active { background: var(--primary-soft); color: var(--primary-strong); }

.doc-section + .doc-section { margin-top: clamp(28px, 4vw, 40px); }
.doc-section__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: 14px;
  font-weight: 800;
  flex: none;
}
.doc-section__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.doc-section__title { font-size: clamp(19px, 2.2vw, 22px); font-weight: 750; }

.doc-section p { color: var(--text-secondary); line-height: 1.68; }
.doc-section p + p { margin-top: 12px; }
.doc-section strong { color: var(--text); font-weight: 700; }

.doc-section ul { margin-top: 12px; display: grid; gap: 9px; }
.doc-section li {
  position: relative;
  padding-left: 22px;
  color: var(--text-secondary);
  line-height: 1.62;
}
.doc-section li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .68em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
}
.doc-section .todo { margin-top: 14px; }

.page-head { padding-block: clamp(34px, 5vw, 56px) clamp(20px, 3vw, 30px); }
.page-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 18px;
  font-size: 14px;
  color: var(--text-secondary);
}

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; }
.breadcrumb a { color: var(--text-secondary); }
.breadcrumb svg { width: 15px; height: 15px; color: var(--border-strong); }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 650; }


/* =============================================================================
   13. PIED DE PAGE
   ========================================================================== */

.footer {
  margin-top: clamp(40px, 6vw, 80px);
  padding-block: clamp(40px, 5vw, 60px) 28px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.footer__grid {
  display: grid;
  gap: clamp(26px, 4vw, 40px);
  grid-template-columns: minmax(0, 1fr);
}
.footer__title {
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.footer__list { display: grid; gap: 9px; }
.footer__list a { font-size: 14.5px; color: var(--text-secondary); text-decoration: none; }
.footer__list a:hover { color: var(--primary-strong); text-decoration: underline; }
.footer__tagline { margin-top: 14px; max-width: 34ch; font-size: 14.5px; color: var(--text-secondary); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(28px, 4vw, 40px);
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--text-secondary);
}


/* =============================================================================
   14. ANIMATIONS, ACCESSIBILITÉ, IMPRESSION
   ========================================================================== */

/* Apparition douce au défilement. Le style ne s'applique que si JavaScript est
   actif (classe « js »), et un garde-fou retire tout au bout d'1,5 s : le
   contenu ne peut jamais rester invisible. */
html.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
  transition-delay: var(--delay, 0ms);
}
html.js .reveal.is-visible { opacity: 1; transform: none; }
html.reveal-off .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html.js .reveal { opacity: 1; transform: none; }
  .shots__track { scroll-snap-type: none; }
}

@media print {
  .header, .footer, .shots__nav, .theme-menu, .lang__panel, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .module-card, .feature { box-shadow: none; border-color: #ccc; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}


/* =============================================================================
   15. ADAPTATIONS
   ========================================================================== */

/* ---- très petits écrans (320 px) ---------------------------------------- */
@media (max-width: 420px) {
  .brand__sub { display: none; }
  .brand__mark { width: 32px; height: 32px; }
  .brand__name { font-size: 16px; }
  .header__inner { gap: 10px; min-height: 62px; }
  .tools { gap: 6px; }
  .icon-btn { width: 38px; height: 38px; }
  .icon-btn svg { width: 20px; height: 20px; }
  .btn { padding: 12px 18px; font-size: 15px; }
  .shot { width: min(240px, 68vw); }
}

/* ---- navigation repliée sous 900 px ------------------------------------- */
@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute;
    left: var(--pad-x);
    right: var(--pad-x);
    top: calc(100% + 8px);
    z-index: 110;
    margin: 0;
    padding: 10px;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--sh-3);
  }
  .nav[hidden] { display: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__link { padding: 12px 14px; border-radius: var(--r-sm); font-size: 15.5px; }
  .header__inner { position: relative; }
  .no-js .nav { position: static; box-shadow: none; border: 0; padding: 0; margin-top: 10px; }
  .no-js .nav__list { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .no-js .header__inner { flex-wrap: wrap; }
}

/* ---- à partir de 700 px -------------------------------------------------- */
@media (min-width: 700px) {
  .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); }
}

/* ---- à partir de 900 px -------------------------------------------------- */
@media (min-width: 900px) {
  .nav { display: block !important; }         /* le repli mobile ne s'applique plus */
  .split--media { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .split--aside { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
  .hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); }
  .doc { grid-template-columns: 250px minmax(0, 1fr); }
  .doc-toc { position: sticky; top: 92px; max-height: calc(100vh - 120px); overflow-y: auto; }
  .app-card { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .app-card__actions { grid-column: auto; justify-content: flex-end; }
}

/* ---- à partir de 1100 px ------------------------------------------------- */
@media (min-width: 1100px) {
  .shot { width: 258px; }
}


/* =============================================================================
   16. COMPLÉMENTS
   ========================================================================== */

/* Mot mis en valeur dans un titre (« bien plus » du titre d'accueil). */
.accent { color: var(--primary); }

/* Langue en cours dans le pied de page. */
.footer__langs .pill[aria-current="true"] {
  background: var(--primary-soft);
  border-color: var(--primary-soft);
  color: var(--primary-strong);
  font-weight: 750;
}

/* Exemples de saisie intelligente : ils reprennent l'aspect d'un champ de
   l'application, mais ce sont de simples éléments de liste, non saisissables. */
.stack .input { cursor: default; color: var(--text-secondary); }

/* Le bloc « informations techniques » du formulaire. */
.form fieldset { min-width: 0; }
.form legend { display: block; width: 100%; }

/* -----------------------------------------------------------------------------
   Illustrations réelles des thèmes
   -----------------------------------------------------------------------------
   Ce sont les vraies icônes de l'application. Elles remplacent le motif SVG sur
   la carte du thème, et forment une rangée dans la section « un thème ne change
   pas que les couleurs ».
   -------------------------------------------------------------------------- */

img.theme-card__motif { object-fit: contain; }

.theme-art {
  padding: clamp(18px, 2.4vw, 24px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-1);
}
.theme-art__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.theme-art__badge { width: 36px; height: 36px; object-fit: contain; flex: none; }
.theme-art__name  { flex: 1 1 auto; min-width: 0; font-size: 17.5px; font-weight: 750; }

.theme-art__icons {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 1.4vw, 14px);
}
.theme-art__icons li {
  display: grid;
  place-items: center;
  width: clamp(56px, 8vw, 68px);
  height: clamp(56px, 8vw, 68px);
  border-radius: var(--r-md);
  background: var(--surface-alt);
  border: 1px solid var(--border);
}
.theme-art__icon { width: 72%; height: 72%; object-fit: contain; }

/* -----------------------------------------------------------------------------
   Politique de confidentialité : encadré « en bref », sous-titres et tableau
   -----------------------------------------------------------------------------
   Le tableau des autorisations est le seul tableau du site. Sur un téléphone il
   défile horizontalement dans son propre cadre : la page, elle, ne bouge pas.
   -------------------------------------------------------------------------- */

.doc-brief {
  padding: clamp(18px, 2.4vw, 24px);
  margin-bottom: clamp(28px, 4vw, 40px);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-1);
}
.doc-brief__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--primary-strong);
}
.doc-brief__title svg { width: 18px; height: 18px; flex: none; }
.doc-brief p { color: var(--text-secondary); line-height: 1.68; }
.doc-brief strong { color: var(--text); font-weight: 700; }

.doc-section h3 {
  margin-top: clamp(18px, 2.4vw, 24px);
  margin-bottom: 10px;
  font-size: clamp(16px, 1.7vw, 17.5px);
  font-weight: 750;
  color: var(--text);
}

.doc-section code {
  padding: .1em .4em;
  border-radius: var(--r-xs, 6px);
  border: 1px solid var(--border);
  background: var(--surface-alt);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: .88em;
  color: var(--text);
  word-break: break-word;
}

.doc-scroll {
  margin-top: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.doc-table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.doc-table th,
.doc-table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  line-height: 1.55;
}
.doc-table tr:last-child th,
.doc-table tr:last-child td { border-bottom: 0; }
.doc-table thead th {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--surface-alt);
  white-space: nowrap;
}
.doc-table tbody td:first-child { white-space: nowrap; color: var(--text); }
.doc-table tbody td:first-child code + code { margin-top: 5px; display: inline-block; }
.doc-table tbody td:last-child { color: var(--text-secondary); }