/* Styles propres a confidentialite.html.
   Sorti du <style> interne pour que la version anglaise partage
   exactement la meme feuille : un correctif ne se fait qu'une fois.
   Charge APRES jade.css, comme l'etait le bloc interne, donc
   l'ordre de cascade est inchange. */
/* ---------- page Politique de confidentialité ---------- */
.header{background:var(--navy);color:#fff}
.header .logo{color:#fff}
.header .nav a{color:#fff}
/* Cette page est la seule a barre sombre, donc la seule ou ses liens
   passent en blanc. Mais deux panneaux blancs vivent a l'interieur de
   .nav : le sous-menu du bureau et le menu du telephone. Ils heritaient du
   blanc et s'effacaient sur leur propre fond. jade.css les met bien en
   marine, seulement « .header .nav a » (0,2,1) devance « .panel a »
   (0,1,1) et « .submenu a ». On retablit donc les couleurs d'origine, y
   compris le gris des intertitres du menu du telephone.
   Au bureau le defaut ne se voyait qu'en haut de page, puisque
   .header.scrolled repasse tout en marine. Au telephone, non : le menu
   s'ouvrait vide et la page devenait un cul-de-sac. */
.header .nav .submenu a,
.header .nav .panel a{color:var(--navy)}
.header .nav .panel .grp,
.header .nav .panel a.grp{color:#5E6A6E}
.header.scrolled{background:#fff;color:var(--navy)}
.header.scrolled .logo,.header.scrolled .nav a{color:var(--navy)}

.page-hero{background:var(--navy);color:#fff;padding-block:clamp(54px,7vw,88px)}
.page-hero .eyebrow{color:var(--lemon);opacity:1}
.page-hero h1{font-size:var(--t2);font-weight:900;color:#fff;max-width:18ch}
.page-hero .maj{margin-top:18px;font-size:15px;color:rgba(255,255,255,.82)}

/* le document */
.doc{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.doc nav{position:sticky;top:100px;font-size:14.5px}
.doc nav h2{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--text);margin:0 0 12px}
.doc nav ol{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:s}
.doc nav a{text-decoration:none;color:var(--navy);font-weight:600;display:block;padding-block:3px}
.doc nav a:hover{color:var(--teal-txt);text-decoration:underline}
/* Chaque chapitre est une <section>, et la feuille commune donne a toute
   <section> un rembourrage vertical de 64 a 110 px : prevu pour les bandes
   pleine largeur d'une page, pas pour dix chapitres empiles dans un article.
   Entre deux titres il y avait 162 px de vide au telephone et 255 px sur
   grand ecran. C'est la marge qui separe les chapitres, rien d'autre. */
.doc article > section{padding-block:0}
/* Ces deux liens sont seuls dans leur puce, donc ce sont des cibles a part
   entiere : 21 px de haut, sous les 24 que demande WCAG 2.2. Les liens de
   telephone des autres pages sont au milieu d'une phrase et en sont exemptes. */
.doc #joindre li a{display:inline-block;padding-block:3px}
.doc article > section + section{margin-top:clamp(40px,4.4vw,60px)}
.doc h2{font-size:clamp(23px,2.4vw,30px);font-weight:800;margin:0 0 12px}
.doc h3{font-size:17px;font-weight:700;margin:22px 0 6px}
.doc p,.doc li{color:var(--text);max-width:68ch}
.doc p + p{margin-top:12px}
.doc ul{margin:10px 0 0;padding-left:20px;display:grid;gap:8px}
.doc .intro{font-size:18px;color:var(--navy);max-width:60ch}

/* ce que Jade doit encore fournir : impossible à manquer */
.a-remplir{border:2px dashed var(--magenta);background:#FFF4FA;border-radius:var(--r-m);
  padding:18px 20px;margin-top:14px;max-width:68ch}
.a-remplir .etiq{display:inline-block;background:var(--magenta);color:#fff;font-size:11.5px;
  font-weight:700;letter-spacing:1.4px;text-transform:uppercase;padding:5px 11px;border-radius:var(--r-pill)}
.a-remplir p{margin-top:10px;color:var(--navy)}
.a-remplir ul{color:var(--navy)}

@media (max-width:900px){
  .doc{grid-template-columns:1fr}
  .doc nav{position:static;border-bottom:2px solid var(--line);padding-bottom:22px}
  .doc nav ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px}
}
@media (max-width:640px){
  /* Deux boutons empiles de largeurs differentes, ca se voit tout de suite.
     Chaque groupe devient une colonne a la largeur du plus large, et toutes
     les rangees prennent la hauteur de la plus haute : meme reglage que
     l'en-tete de l'accueil, applique partout. */
  .ctas,.hero-ctas,.page-hero.studio .ctas,.service .ctas,.bande-fin .ctas{
    display:grid;grid-template-columns:minmax(0,max-content);grid-auto-rows:1fr;
    gap:12px;justify-content:start}
  .ctas .btn,.hero-ctas .btn,.page-hero.studio .ctas .btn,
  .service .ctas .btn,.bande-fin .ctas .btn{width:100%;justify-content:center}

  .doc nav ol{grid-template-columns:1fr}
}

/* Cibles tactiles au doigt, suite : meme principe que dans jade.css.
   Calque invisible quand le voisinage le permet, rembourrage reel sinon. */
@media (pointer:coarse){
  .doc nav a{padding-block:11px}
  section ul li a{padding-block:12px}
}