/* =====================================================================
   azul — le systeme des PAGES DE CONTENU (guides, comparatifs, journal)
   =====================================================================

   Ce fichier ne cree PAS une direction artistique de plus. Il reprend
   celle de la landing, token pour token : les memes fontes servies
   depuis /assets, le meme bleu Klein, le meme navy de texte, les memes
   pilules. Une page de guide qui ne ressemble pas au site donne
   l'impression d'un blog achete ailleurs, et c'est exactement ce qu'un
   moteur de reponse comme un visiteur retiennent.

   THEME UNIQUE, ET C'EST UN CHOIX. Le site vit dans un seul monde
   (bandeau bleu, corps clair). Poser un mode sombre ici et pas sur la
   landing ferait basculer le visiteur dans un autre site en un clic.
   Toutes les couleurs sont donc peintes explicitement, jamais heritees.

   AUCUN TIRET CADRATIN dans la copie servie. C'est la signature
   d'ecriture machine la plus reconnaissable ; on ecrit avec des points,
   des virgules et des parentheses.

   AUCUNE RESSOURCE EXTERNE. Fontes et images viennent de /assets, comme
   sur le reste du domaine.
   ===================================================================== */

@font-face{font-family:'Tanker';src:url("/assets/tanker-400.woff2") format('woff2');
  font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:'Clash Display';src:url("/assets/clash-display-600.woff2") format('woff2');
  font-weight:600;font-display:swap;font-style:normal}
@font-face{font-family:'Clash Display';src:url("/assets/clash-display-700.woff2") format('woff2');
  font-weight:700;font-display:swap;font-style:normal}
@font-face{font-family:'General Sans';src:local('General Sans'),url("/assets/general-sans-400.woff") format('woff');
  font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:'General Sans';src:local('General Sans'),url("/assets/general-sans-500.woff") format('woff');
  font-weight:500;font-display:swap;font-style:normal}
@font-face{font-family:'General Sans';src:local('General Sans'),url("/assets/general-sans-600.woff") format('woff');
  font-weight:600;font-display:swap;font-style:normal}
@font-face{font-family:'General Sans';src:local('General Sans'),url("/assets/general-sans-700.woff") format('woff');
  font-weight:700;font-display:swap;font-style:normal}
@font-face{font-family:'General Sans';src:local('General Sans'),url("/assets/general-sans-400-italic.woff") format('woff');
  font-weight:400;font-display:swap;font-style:italic}

:root{
  /* le bleu de la marque, repris de la landing */
  --klein:#0A5192;
  --hero-1:#3490DF; --hero-2:#2A7DCD; --hero-3:#1E6FB8;
  --accent:#217AC8;
  --clair:#ACDAF2;
  --tres-clair:#EAF5FF;

  /* le corps de page */
  --fond:#F2F9FF;
  --surface:#FFFFFF;
  --creux:#EDF7FF;
  --encre:#073763;
  --encre-2:#355470;
  --sourd:#5B819F;
  --trait:#D7E8F7;

  /* etats, distincts de l'accent */
  --bon:#1B7A55;
  --attention:#A96A15;

  --ombre:0 1px 2px rgba(7,55,99,.05), 0 10px 30px rgba(7,55,99,.06);
  --rayon:14px;
}

*{box-sizing:border-box}
html{background:var(--klein)}
body{
  margin:0; background:var(--fond); color:var(--encre);
  font-family:'General Sans',system-ui,-apple-system,sans-serif;
  font-size:17.5px; line-height:1.68; -webkit-font-smoothing:antialiased;
}
a{color:var(--klein); text-underline-offset:3px}
a:hover{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:8px}
img{max-width:100%; height:auto; display:block}

.enveloppe{max-width:1180px; margin:0 auto; padding:0 40px}
.lecture{max-width:68ch}

/* ---------- barre de navigation, identique a la landing ---------- */
.barre{
  background:var(--klein); position:relative; z-index:5;
}
.barre .dedans{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 0; max-width:1180px; margin:0 auto; padding-left:40px; padding-right:40px;
}
.barre a{color:#fff; text-decoration:none}
.logo-lien{display:inline-flex; color:#fff; view-transition-name:az-logo}
.liens-barre{display:flex; align-items:center; gap:26px;
  font-weight:500; font-size:15.5px; color:rgba(255,255,255,.92)}
.liens-barre a{color:rgba(255,255,255,.92); white-space:nowrap}
.liens-barre a:hover{color:#fff}
.bouton-barre{
  display:inline-flex; align-items:center; font-family:'Clash Display',sans-serif;
  font-weight:600; font-size:15.5px; color:#fff;
  background:rgba(255,255,255,.14); border:1.5px solid rgba(255,255,255,.4);
  padding:11px 21px; border-radius:999px; white-space:nowrap;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4);
  transition:background .2s, transform .25s cubic-bezier(.2,1,.3,1);
}
.bouton-barre:hover{background:rgba(255,255,255,.24); transform:translateY(-2px)}
.bouton-barre:active{transform:translateY(0) scale(.985)}

/* ---------- le bandeau de titre ---------- */
.bandeau{
  background:
    linear-gradient(178deg,var(--hero-1) 0%,var(--hero-2) 34%,var(--hero-3) 68%,var(--klein) 100%);
  color:#fff; position:relative; overflow:hidden;
  padding:60px 0 66px;
}
.bandeau::after{ /* le grain de la landing : un degrade parfaitement lisse sonne "rendu 3D" */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bandeau .dedans{position:relative; z-index:2; max-width:1180px; margin:0 auto; padding:0 40px}
.fil{
  font-family:'General Sans',sans-serif; font-weight:600; font-size:13.5px;
  letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.82);
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.fil a{color:rgba(255,255,255,.82); text-decoration:none}
.fil a:hover{color:#fff; text-decoration:underline}
h1{
  font-family:'Tanker',sans-serif; font-weight:400; margin:16px 0 0;
  font-size:clamp(34px,5vw,62px); line-height:1.02; letter-spacing:.006em;
  text-transform:uppercase; color:#fff; max-width:19ch; text-wrap:balance;
  text-shadow:3px 3px 0 rgba(40,136,220,.11),6px 6px 0 rgba(35,129,210,.08),
    12px 12px 0 rgba(20,112,190,.05),20px 20px 32px rgba(0,48,90,.26);
}
/* LA REPONSE, TOUT DE SUITE. 44 % des citations des moteurs viennent du
   premier tiers de la page : ce paragraphe est ecrit pour etre extrait tel
   quel, autonome, sans le reste de la page. */
.reponse{
  margin:22px 0 0; max-width:60ch; font-size:clamp(17.5px,1.9vw,21px);
  line-height:1.55; color:rgba(255,255,255,.96); font-weight:500; text-wrap:pretty;
}
.reponse strong{color:#fff; font-weight:700}
.signature{
  margin-top:26px; display:flex; flex-wrap:wrap; gap:8px 22px;
  font-size:14px; color:rgba(255,255,255,.8); font-weight:500;
}

/* ---------- le corps de l'article ---------- */
.corps{padding:58px 0 30px}
section.bloc{padding:26px 0 30px}
h2{
  font-family:'Clash Display',sans-serif; font-weight:700; margin:0 0 16px;
  font-size:clamp(24px,2.9vw,33px); line-height:1.18; letter-spacing:-.012em;
  color:var(--encre); text-wrap:balance; max-width:24ch;
}
h3{
  font-family:'Clash Display',sans-serif; font-weight:600; margin:30px 0 10px;
  font-size:20px; line-height:1.3; color:var(--encre); text-wrap:balance;
}
p{margin:0 0 17px}
p:last-child{margin-bottom:0}
strong{font-weight:700; color:var(--encre)}

/* ---------- listes ---------- */
ul.points{list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:12px}
ul.points li{position:relative; padding-left:24px; color:var(--encre-2)}
ul.points li::before{
  content:""; position:absolute; left:2px; top:.66em; width:7px; height:7px;
  border-radius:2px; background:var(--accent);
}
ol.etapes{list-style:none; counter-reset:e; margin:0 0 18px; padding:0;
  display:flex; flex-direction:column; gap:18px}
ol.etapes li{counter-increment:e; position:relative; padding-left:52px; color:var(--encre-2)}
ol.etapes li::before{
  content:counter(e); position:absolute; left:0; top:-1px;
  width:34px; height:34px; border-radius:50%; background:var(--klein); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Clash Display',sans-serif; font-weight:600; font-size:15px;
}
ol.etapes li strong{display:block; color:var(--encre); margin-bottom:2px}

/* ---------- tableaux : le format le plus cite par les moteurs ---------- */
.tableau{
  overflow-x:auto; background:var(--surface); border:1px solid var(--trait);
  border-radius:var(--rayon); box-shadow:var(--ombre); margin:6px 0 20px;
}
table{width:100%; border-collapse:collapse; font-size:15.5px; min-width:560px}
th,td{padding:14px 18px; text-align:left; vertical-align:top; border-bottom:1px solid var(--trait)}
tr:last-child td{border-bottom:0}
thead th{
  font-family:'Clash Display',sans-serif; font-weight:600; font-size:13.5px;
  color:var(--klein); background:var(--creux); white-space:nowrap;
}
tbody th{font-weight:600; color:var(--encre); white-space:nowrap}
td{color:var(--encre-2)}
td.oui{color:var(--bon); font-weight:600}
td.non{color:var(--sourd)}
table caption{
  caption-side:bottom; padding:13px 18px; text-align:left; font-size:14px;
  color:var(--sourd); line-height:1.55; border-top:1px solid var(--trait);
}

/* ---------- l'encadre de fait, ecrit pour etre cite ---------- */
.fait{
  background:var(--creux); border-left:3px solid var(--klein);
  border-radius:0 var(--rayon) var(--rayon) 0; padding:22px 26px; margin:6px 0 22px;
}
.fait .titre{
  font-family:'Clash Display',sans-serif; font-weight:600; font-size:16.5px;
  color:var(--encre); margin-bottom:8px;
}
.fait p{color:var(--encre-2); font-size:16px; margin-bottom:0}

/* ---------- questions frequentes ---------- */
.questions{display:flex; flex-direction:column; gap:0; margin:6px 0 20px;
  border:1px solid var(--trait); border-radius:var(--rayon);
  background:var(--surface); box-shadow:var(--ombre); overflow:hidden}
details{border-bottom:1px solid var(--trait)}
details:last-child{border-bottom:0}
summary{
  cursor:pointer; list-style:none; padding:18px 22px;
  font-family:'Clash Display',sans-serif; font-weight:600; font-size:17px;
  color:var(--encre); display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
}
/* LE <h3> DANS LE <summary> NE DOIT RIEN CHANGER A L'ECRAN.
   La question est un titre pour une machine (elle entre dans le plan de
   titres, donc dans le decoupage en passages) et reste un bouton pour un
   lecteur. Toutes les proprietes du h3 sont donc ramenees a celles que
   portait le texte nu du summary. */
summary h3{
  margin:0; font:inherit; color:inherit; letter-spacing:inherit;
  text-wrap:inherit; max-width:none;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+"; flex:none; font-family:'General Sans',sans-serif; font-weight:500;
  font-size:21px; line-height:1; color:var(--accent); transition:transform .2s;
}
details[open] summary::after{transform:rotate(45deg)}
details .rep{padding:0 22px 20px; color:var(--encre-2); font-size:16.5px; max-width:66ch}
details .rep p{margin-bottom:12px}

/* ---------- l'appel a l'action de bas de page ---------- */
.fin{
  background:var(--klein); color:#fff; border-radius:20px; padding:40px 44px;
  margin:34px 0 0; display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:26px;
}
.fin h2{color:#fff; margin:0 0 6px; max-width:20ch}
.fin p{color:rgba(255,255,255,.88); margin:0; max-width:44ch; font-size:16.5px}
.cta{
  display:inline-flex; align-items:center; gap:12px; padding:8px 8px 8px 28px;
  border-radius:999px; background:#fff; text-decoration:none; white-space:nowrap;
  box-shadow:0 16px 40px rgba(0,40,80,.28);
  transition:transform .3s cubic-bezier(.2,1,.3,1), box-shadow .3s cubic-bezier(.2,1,.3,1);
}
.cta:hover{transform:translateY(-3px); box-shadow:0 20px 48px rgba(0,40,80,.32)}
.cta:active{transform:translateY(0) scale(.985); transition-duration:.09s}
.cta span{font-family:'Clash Display',sans-serif; font-weight:600; font-size:17px; color:var(--encre)}
.cta .rond{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; background:var(--encre); color:#fff;
  transition:transform .5s cubic-bezier(.2,1,.3,1);
}
.cta:hover .rond{transform:rotate(-45deg)}

/* ---------- la suite de lecture ---------- */
.suite{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:16px; margin-top:14px}
.carte{
  background:var(--surface); border:1px solid var(--trait); border-radius:var(--rayon);
  padding:22px 24px; text-decoration:none; display:flex; flex-direction:column; gap:7px;
  box-shadow:var(--ombre); transition:transform .25s cubic-bezier(.2,1,.3,1), border-color .2s;
}
.carte:hover{transform:translateY(-3px); border-color:var(--clair)}
.carte .quoi{font-family:'Clash Display',sans-serif; font-weight:600; font-size:17px; color:var(--encre)}
.carte .pourquoi{font-size:15px; color:var(--sourd); line-height:1.5}

/* ---------- pied de page ---------- */
footer{background:var(--tres-clair); border-top:1px solid var(--trait); margin-top:66px; padding:46px 0 40px}
.pied{display:flex; flex-wrap:wrap; gap:30px 60px; justify-content:space-between; align-items:flex-start}
.pied .marque{color:var(--encre); display:flex; flex-direction:column; gap:12px; max-width:34ch}
.pied .marque p{font-size:15px; color:var(--encre-2); margin:0}
.colonnes{display:flex; flex-wrap:wrap; gap:30px 56px}
.colonne{display:flex; flex-direction:column; gap:9px}
.colonne .chapeau{
  font-family:'Clash Display',sans-serif; font-weight:600; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--klein); margin-bottom:2px;
}
.colonne a{color:var(--encre-2); text-decoration:none; font-size:15px}
.colonne a:hover{color:var(--klein); text-decoration:underline}
.bas{margin-top:34px; padding-top:20px; border-top:1px solid var(--trait);
  font-size:14px; color:var(--sourd); display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between}

/* le selecteur de langue, meme objet que sur la landing */
.az-langue{display:inline-flex; align-items:center; gap:8px}
.az-langue .globe{
  display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
  border-radius:50%; background:rgba(255,255,255,.14); border:1.5px solid rgba(255,255,255,.4); color:#fff;
}
.az-langue .piste{
  display:inline-flex; align-items:center; gap:2px; padding:3px; border-radius:999px;
  background:rgba(255,255,255,.14); border:1.5px solid rgba(255,255,255,.4);
}
.az-langue .piste a{
  display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:26px;
  padding:0 10px; border-radius:999px; font-family:'General Sans',sans-serif; font-weight:600;
  font-size:12.5px; letter-spacing:.02em; color:rgba(255,255,255,.92); text-decoration:none;
  transition:background .2s,color .2s;
}
.az-langue .piste a[aria-current]{background:#fff; color:var(--encre)}

/* ---------- adaptation telephone, declaree section par section ---------- */
@media (max-width:900px){
  .enveloppe,.barre .dedans,.bandeau .dedans{padding-left:24px; padding-right:24px}
  .liens-barre{gap:16px; font-size:14.5px}
  .barre .az-langue{display:none}   /* meme raison que sur la landing : la nav se comprime */
  .bandeau{padding:44px 0 50px}
  .corps{padding:40px 0 20px}
  .fin{padding:32px 28px; flex-direction:column; align-items:flex-start}
  th,td{padding:12px 14px}
}
@media (max-width:560px){
  body{font-size:16.5px}
  .liens-barre .cacher-tel{display:none}
}

/* ---------- le contenu se pose au chargement, comme sur la landing ----------
   Une seule animation sur toute la page, et elle a une raison : elle
   raccorde ces pages au rythme d'entree du site. Rien d'autre ne bouge. */
@media (prefers-reduced-motion:no-preference){
  @keyframes az-pose{from{opacity:0; transform:translate3d(0,16px,0)} to{opacity:1; transform:none}}
  .bandeau .dedans>*{animation:az-pose .7s cubic-bezier(.22,.61,.36,1) both}
  .bandeau .fil{animation-delay:.02s}
  .bandeau h1{animation-delay:.07s}
  .bandeau .reponse{animation-delay:.13s}
  .bandeau .signature{animation-delay:.19s}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}
@view-transition{navigation:auto}
::view-transition-group(az-logo){animation-duration:.5s; animation-timing-function:cubic-bezier(.22,.61,.36,1)}

/* ---------- la colonne de l'article ----------
   La PROSE se lit a 68 caracteres ; les TABLEAUX et les cartes ont le
   droit d'aller plus large, parce qu'un tableau serre a 68ch devient un
   tableau qui defile lateralement, et un tableau qui defile n'est ni lu
   ni cite. */
.lecture-large{max-width:920px}
.lecture-large>p,.lecture-large>h2,.lecture-large>h3,
.lecture-large>ul.points,.lecture-large>ol.etapes,.lecture-large>.fait{max-width:68ch}