/* =========================================================================
   ARTIS VALORISATION, REFONTE : FAMILLE LES PAGES JURIDIQUES (p-legal.css)
   Pages : cgv.html, mentions-legales.html et confidentialite.html.
   Chargee en dernier, apres socle.css et pages.css (ou scene.css et les
   feuilles d'offre pour les pages a scene). Ce que ces pages seules
   demandent, en sections numerotees, commentaires sans accents. Seule la
   mission de cette famille ecrit ici ; un composant utile a deux
   familles va dans pages.css. Reference : REFONTE-GABARIT.md.
   ------------------------------------------------------------------------- */

/* Le dessin de la famille (30/09/2026) : sur le fond bleu fixe et sous
   l'image de verre, une couverture courte (fil d'Ariane, etiquette, titre,
   chapo, date), puis une seule grande bulle blanche de lecture (.k-lecture
   de pages.css, section 12c : 17 px, 34 em, soit 68 signes environ par
   ligne) et le sommaire en bulle a ancres (.k-sommaire). Aucune autre
   decoupe : le texte juridique est repris en entier, sans reformulation.
   La bulle se lit comme une feuille : la colonne de texte, a la mesure, y
   est centree. Au-dela de 1100 px, le sommaire passe a droite et reste
   visible pendant la lecture ; en deca, il precede la bulle. */
:root{
  --kl-mesure: calc(34 * 17px);   /* 578 px : 34 em du texte de lecture (17 px) */
  --kl-marge: 56px;               /* marge laterale mini de la grande bulle (pages.css, 12a) */
}

/* =========================================================================
   1. LA COUVERTURE REDUITE
   On vient ici pour lire : la couverture des modeles (92 % de la hauteur
   d'ecran au-dela de 1000 px) est ramenee a son texte, pour que la bulle
   de lecture commence des le premier ecran. L'image de verre descend un
   peu sous la couverture, derriere le haut du sommaire et de la bulle
   (toutes deux positionnees, donc peintes par-dessus), pour ne pas etre
   coupee net par une couverture courte ; le masque du socle la fond dans
   le bleu a partir de 55 % de sa hauteur.
   ------------------------------------------------------------------------- */
.kl-couv .k-etiquette{ margin:0 0 16px; }
.kl-couv .k-titre-affiche{ max-width:15em; }
.kl-couv::before, .kl-couv::after{ height:min(max(100%, 560px), 980px); }
@media (min-width: 1000px){
  .kl-couv{ display:block; min-height:0; padding:184px 0 8px; }
  .kl-couv::before, .kl-couv::after{ height:min(max(100%, 680px), 980px); }
}
/* Paysage : une couverture courte place le titre sur le ciel clair de
   l'image (autour de la sphere), et non sur l'horizon sombre comme dans les
   modeles. Azur du titre mesure a 1,5:1 au pire a 1440 et 1024 avec le
   seul voile du socle. Voile marine a 45 % sur les deux tiers gauches, qui
   s'efface vers la droite, comme le voile du portrait (pages.css, 6).
   04/10/2026 : meme dessin, couleur des voiles de l'accueil (--k-voile,
   pages.css section 1) au lieu du marine de la nuit. */
@media (min-aspect-ratio: 11/10){
  .kl-couv::after{
    background:linear-gradient(90deg, rgba(var(--k-voile),.5) 0%, rgba(var(--k-voile),.45) 62%, rgba(var(--k-voile),.12) 88%, rgba(var(--k-voile),0) 100%);
  }
}

/* =========================================================================
   2. LE CORPS : LE SOMMAIRE ET LA BULLE DE LECTURE
   Jusqu'a 1099 px, une colonne : le sommaire, puis la bulle, toute la
   largeur du conteneur ; de 761 a 1099 px, les lignes du sommaire passent
   sur deux colonnes (neuf lignes de 48 px avant le texte, c'etait trop).
   A partir de 1100 px, la grille de la couverture des modeles : la bulle a
   gauche, sous le titre (690 px au moins), le sommaire a droite (280 a
   420 px, 420 comme dans les modeles), colle sous la barre pendant la
   lecture (sticky), a l'aplomb du menu. L'ordre du document ne change pas :
   le sommaire d'abord.
   ------------------------------------------------------------------------- */
.kl-corps{ padding-top:32px; }
.kl-grille{ display:grid; gap:var(--k-ecart); grid-template-columns:minmax(0,1fr); align-items:start; }
@media (min-width: 761px){
  .kl-corps{ padding-top:48px; }
}
@media (min-width: 761px) and (max-width: 1099px){
  .kl-sommaire ol{ display:block; columns:2; column-gap:32px; }
  .kl-sommaire li{ break-inside:avoid; border-top:1px solid var(--k-trait); }
}
@media (min-width: 1100px){
  .kl-grille{
    grid-template-columns:minmax(calc(var(--kl-mesure) + 2 * var(--kl-marge)), 1fr) minmax(280px, 420px);
    column-gap:40px;
  }
  .kl-lecture{ grid-column:1; grid-row:1; }
  .kl-sommaire{
    grid-column:2; grid-row:1;
    position:sticky; top:112px; max-height:calc(100vh - 128px); overflow-y:auto; overscroll-behavior:contain;
  }
}

/* =========================================================================
   3. LA BULLE DE LECTURE
   Le composant de pages.css (12c), tableau compris (il defile dans sa bulle
   sous 540 px). Au-dela de 760 px, la bulle est plus large que la mesure :
   plutot qu'un grand blanc a droite du texte, les marges laterales se
   partagent l'exces et la colonne de 34 em se centre, comme sur une page
   imprimee (56 px au moins, ceux de la grande bulle). Les titres, le
   tableau et les listes suivent la meme colonne. Le dernier paragraphe de
   la politique de confidentialite est separe par un filet, comme la ligne
   fine de la page d'origine.
   ------------------------------------------------------------------------- */
@media (min-width: 761px){
  .kl-lecture{ padding-inline:max(var(--kl-marge), calc((100% - var(--kl-mesure)) / 2)); }
  .kl-lecture > *{ max-width:none; }
}
/* Ancres (#droits, #cookies, sommaire) : pages.css donne 110 px de marge
   aux [id] de la lecture, qui s'ajoutent aux 96 px de scroll-padding de
   html ; le titre tombait a 206 px du haut, 126 px sous la barre. 24 px
   ici : le titre arrive a 120 px, 40 px sous la barre. */
.kl-lecture [id]{ scroll-margin-top:24px; }
.kl-lecture .kl-fin{ margin-top:48px; padding-top:24px; border-top:1px solid var(--k-trait); }
@media (max-width: 760px){
  .kl-lecture .kl-fin{ margin-top:40px; }
}
/* Les noms de cookies (<code>, politique de confidentialite) : en DM Sans,
   comme tout le texte du site (REFONTE-GABARIT.md : DM Sans pour tout le
   texte ; une seule famille depuis le 17/09/2026). pages.css (12c) les
   donne en chasse fixe (ui-monospace, Menlo), seule police du site hors
   DM Sans et Bodoni. La pastille teintee reste et les distingue ; corps
   remonte de .88 a .94 em, la chasse fixe paraissant plus grosse a corps
   egal. */
.kl-lecture code{ font-family:var(--f-police); font-size:.94em; font-variant-numeric:tabular-nums; }

/* =========================================================================
   4. LES LIGNES DE CONTACT (mentions legales)
   « Contact : » et « Telephone : » (p.kl-coord) portent chacune un lien
   seul, hors d'une phrase : l'exception du lien dans le texte ne s'y
   applique pas, et le lien ne faisait que 21 px de haut (WebKit, 393 et
   320). En bloc en ligne, 10 px de plus en haut et en bas : 45,6 px au
   telephone (ligne de 25,6 px), 47,2 px au-dela de 760 px (27,2 px) ;
   les marges negatives rendent ces 20 px, la ligne ne bouge pas. L'ecart
   entre les deux lignes passe de 16 a 20 px : le pas (ligne + ecart)
   egale alors la hauteur de la cible, les deux zones se touchent sans se
   chevaucher. En bloc, l'adresse ne se coupe plus en deux a 320 px : elle
   passe entiere sous « Contact : ». L'anneau de focus suit la cible :
   decale de 3 px (pages.css, 2), il touchait les deux-points de
   « Contact : » ; colle a la cible, il en reste a 2 px.
   ------------------------------------------------------------------------- */
.kl-lecture .kl-coord a{ display:inline-block; padding-block:10px; margin-block:-10px; }
.kl-lecture .kl-coord a:focus-visible{ outline-offset:0; }
.kl-lecture .kl-coord + .kl-coord{ margin-top:20px; }

/* =========================================================================
   5. LE TABLEAU DES DUREES AU TELEPHONE (confidentialite, .kl-tableau-pile)
   Brief du 04/10/2026 (section 16) : des tableaux lisibles sur mobile. Trois
   colonnes de texte ne tiennent pas dans la bulle sous 560 px : avec le
   plancher de 540 px de pages.css (12d), la colonne « Point de depart » ne
   se voyait qu'en faisant defiler le tableau. Chaque ligne devient un bloc :
   le traitement, puis la duree et le point de depart, chacun precede de son
   intitule (data-label). Le code reste un <table>, l'en-tete reste lisible
   par les lecteurs d'ecran.
   ------------------------------------------------------------------------- */
@media (max-width: 560px){
  .kl-tableau-pile .k-tableau-defile{ overflow:visible; background:none; }
  .kl-tableau-pile table{ min-width:0; }
  .kl-tableau-pile thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
  .kl-tableau-pile tbody, .kl-tableau-pile tr, .kl-tableau-pile td{ display:block; }
  .kl-tableau-pile tbody tr{ padding:12px 0; }
  .kl-tableau-pile tbody tr:first-child{ padding-top:0; }
  .kl-tableau-pile tbody tr + tr{ border-top:1px solid var(--k-trait); }
  .kl-tableau-pile tbody tr > *, .kl-tableau-pile tbody tr + tr > *{ border-top:0; padding:0; }
  .kl-tableau-pile td:first-child{ margin-bottom:4px; font-weight:500; }
  .kl-tableau-pile td[data-label]::before{ content:attr(data-label) "\00a0: "; color:var(--k-gris); }
}

/* =========================================================================
   6. IMPRESSION
   Le sommaire ne s'imprime pas (ses liens ne menent nulle part sur papier) ;
   la bulle reprend toute la largeur.
   ------------------------------------------------------------------------- */
@media print{
  .kl-sommaire{ display:none !important; }
  .kl-grille{ display:block; }
  .kl-lecture{ max-width:none; padding:0; }
  .kl-couv::before, .kl-couv::after{ display:none !important; }
}

/* =========================================================================
   7. LE TELEPHONE (audit telephone du 8 octobre, lot 5, 09/10/2026)
   Sous 761 px seulement, rien ne bouge au-dela. Rien n'est masque ni
   replie : l'etiquette de tete, le sommaire et les parties de la politique
   de confidentialite restent ouverts et affiches comme avant (les replis
   proposes par l'audit n'ont pas ete retenus par Raphael).
   - Le fil d'Ariane en 14 px au lieu de 13, interligne de 1,4 : c'etait
     le premier texte de la page et le seul texte courant sous 14 px de son
     haut. Ses liens gardent leur cible de 44 px. La page de contact avait
     le meme reglage. Depuis la seconde passe telephone (09/10/2026,
     delegation de Raphael), elle masque son fil au telephone (p-contact.css,
     section 9d). Celui des pages juridiques reste affiche, en 14 px.
   - Les lignes de coordonnees des mentions legales (p.kl-coord) vont au
     bout de leur bulle. Le socle (socle.css, section 13, point 5) les
     laisse en retour equilibre (pretty, pose par pages.css sur le texte de
     lecture), et Safari raccourcissait leurs lignes : « Siege social » se
     posait sur trois lignes avec 82 et 88 px de vide a droite a 393 px.
   ------------------------------------------------------------------------- */
@media (max-width: 760px){
  .kl-couv .k-fil{ font-size:14px; line-height:1.4; }
  .kl-lecture .kl-coord{ text-wrap:wrap; }
}