/*
 | Charte du site technour.fr.
 |
 | Sortie de la page pour que les pages suivantes la partagent. Dupliquer
 | 144 regles dans chaque page garantit qu elles divergeront : une couleur
 | corrigee ici, oubliee la, et la charte ne veut plus rien dire.
 |
 | Marine #092236 et turquoise #48BFB9 sont les couleurs officielles de
 | Technour. Le marine structure, le turquoise recompense : les intervertir
 | fait disparaitre l accent.
 */

:root{--navy:#092236;--navy2:#0d3050;--teal:#48BFB9;--teal-d:#178a83;--teal-dd:#0f6f69 /* 6,00:1 sur blanc. Seule nuance de turquoise utilisable en texte : --teal tombe a 2,23:1 et --teal-d a 4,20:1, sous le minimum de 4,5:1 */;
    --paper:#fff;--ecru:#F7F5EE;--soft:#f4f6f6;--soft2:#eef2f2;--ink:#0c1f2e;--mut:#5c6f7a;--line:#e6e9e8;--line2:#dde2e1;}
  *{box-sizing:border-box}html{scroll-behavior:smooth}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}.wrap{max-width:1180px;margin:0 auto;padding:0 30px}
  .mono{font-family:"IBM Plex Mono",monospace}
  .eyebrow{font-family:"IBM Plex Mono";text-transform:uppercase;letter-spacing:.22em;font-size:.68rem;color:var(--teal-dd);font-weight:500}
  /*
  | Les blocs ne sont masques QUE si le script a pris la main.
  |
  | La classe .anime est posee sur <html> par site.js des son execution.
  | Sans elle, tout est visible : un script bloque, absent ou en erreur
  | laisse donc une page lisible au lieu d une page blanche.
  |
  | C est exactement ce qui s est produit le 2026-10-07 : la politique de
  | securite bloquait le script en ligne, et la page s affichait vide
  | tout en repondant HTTP 200.
  */
  .anime .rv{opacity:0;transform:translateY(22px);transition:.7s cubic-bezier(.2,.7,.2,1)}
  .anime .rv.in{opacity:1;transform:none}
  .anime .rv.d1{transition-delay:.07s}.anime .rv.d2{transition-delay:.14s}.anime .rv.d3{transition-delay:.21s}
  @media(prefers-reduced-motion:reduce){.anime .rv{opacity:1;transform:none;transition:none}}
  /* nav */
  nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  nav .row{display:flex;align-items:center;justify-content:space-between;height:72px}
  nav img{height:26px}nav .lk{display:flex;gap:32px;align-items:center}
  nav .lk a.n{color:var(--mut);font-size:.93rem;font-weight:500}nav .lk a.n:hover{color:var(--navy)}
  .btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.94rem;padding:11px 20px;border-radius:9px;transition:.16s;border:0;cursor:pointer}
  .btn.p{background:var(--navy);color:#fff}.btn.p:hover{background:var(--navy2)}
  .btn.t{background:var(--teal);color:#04231f}.btn.t:hover{background:var(--teal-d);color:#fff}
  .btn.g{background:transparent;color:var(--navy);border:1px solid var(--line2)}.btn.g:hover{border-color:var(--navy)}
  .btn svg{transition:transform .2s}.btn:hover svg{transform:translateX(3px)}
  /* hero */
  .hero{padding:76px 0 40px;background:radial-gradient(900px 460px at 78% 0,rgba(72,191,185,.10),transparent 60%)}
  .hero h1{font-family:"Plus Jakarta Sans";font-weight:800;font-size:clamp(2.5rem,5.2vw,4rem);line-height:1.05;letter-spacing:-.025em;margin:.35em 0 .3em;max-width:20ch;text-wrap:balance}
  .hero h1 em{font-style:normal;color:var(--teal-dd)}
  .hero .lead{font-size:1.22rem;color:var(--mut);max-width:56ch;margin:0 0 30px}
  .hero .cta{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
  .hero .cta .note{color:var(--mut);font-size:.86rem;margin-left:6px}
  /* app mockup */
  .shot{margin-top:56px;border-radius:16px 16px 0 0;background:#fff;border:1px solid var(--line2);border-bottom:0;box-shadow:0 -1px 0 var(--line2),0 40px 80px -30px rgba(9,34,54,.4);overflow:hidden}
  .shot .bar{height:44px;background:#f4f6f7;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 16px}
  .shot .bar i{width:11px;height:11px;border-radius:50%;background:#dde3e6}
  .shot .bar i:nth-child(1){background:#f3b0a6}.shot .bar i:nth-child(2){background:#f5d79e}.shot .bar i:nth-child(3){background:#b9e4c4}
  .shot .bar .url{margin-left:14px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:5px 14px;font-size:.72rem;color:var(--mut);font-family:"IBM Plex Mono"}
  .app{display:grid;grid-template-columns:210px 1fr;min-height:440px}
  .side{background:var(--navy);color:#c3d2da;padding:18px 14px}
  .side .lg{display:flex;align-items:center;gap:8px;font-weight:700;color:#fff;font-size:1.05rem;padding:6px 8px 16px}
  .side .lg .b{width:16px;height:16px;border-radius:5px;background:var(--teal)}
  .side .it{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:.86rem;margin:2px 0}
  .side .it.on{background:rgba(72,191,185,.16);color:#fff;font-weight:600}
  .side .it .d{width:15px;height:15px;border-radius:4px;border:1.6px solid currentColor;opacity:.75}
  .main{padding:20px 22px;background:#fbfcfc}
  .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
  .top h4{font-size:1.15rem;margin:0;color:var(--navy);font-weight:700}
  .top .rt{display:flex;gap:10px;align-items:center}
  .top .sr{width:150px;height:30px;border:1px solid var(--line);border-radius:7px;background:#fff}
  .top .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--teal-d));color:#fff;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700}
  .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
  .kc{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
  .kc .l{font-size:.68rem;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
  .kc .v{font-size:1.5rem;font-weight:800;color:var(--navy);line-height:1.1;margin-top:4px}
  .kc .t{font-size:.68rem;color:var(--teal-dd);font-weight:600}
  .panels{display:grid;grid-template-columns:1.3fr 1fr;gap:14px}
  .pnl{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px}
  .pnl .h{font-size:.8rem;color:var(--navy);font-weight:700;margin-bottom:12px;display:flex;justify-content:space-between}
  .pnl .h span{color:var(--mut);font-weight:500;font-size:.72rem}
  .chart{display:flex;align-items:flex-end;gap:8px;height:120px}
  .chart /* Les barres du graphique. Nom distinct de .bar, la barre d adresse de
   la fenetre simulee : les deux partageaient la classe, et le padding
   horizontal de la seconde imposait 32 px de largeur minimale a chaque
   barre, ce qui tronquait le graphique sur telephone. */
.barre{flex:1;min-width:0;background:linear-gradient(var(--teal),#a7e3dd);border-radius:5px 5px 0 0;position:relative}
  .chart .barre.hi{background:linear-gradient(var(--teal-d),var(--teal))}
  .rows .r{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--soft2)}
  .rows .r:last-child{border-bottom:0}
  .rows .a{width:26px;height:26px;border-radius:50%;font-size:.62rem;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .rows .nm{flex:1}.rows .nm .n1{height:7px;width:68%;background:#e2e7e9;border-radius:4px}.rows .nm .n2{height:5px;width:44%;background:#eef2f3;border-radius:3px;margin-top:5px}
  .st{font-size:.62rem;font-weight:700;padding:3px 9px;border-radius:999px}
  .st.ok{background:rgba(72,191,185,.18);color:var(--teal-dd)}.st.w{background:#fdf1dd;color:#8a5d10}.st.n{background:#eef2f3;color:#546770}
  /* proof band */
  .proof{border-top:1px solid var(--line2);background:var(--navy);color:#fff}
  .proof .wrap{display:grid;grid-template-columns:repeat(4,auto) 1fr;gap:34px;align-items:center;padding:30px 30px}
  .proof .s b{font-family:"Plus Jakarta Sans";font-weight:800;font-size:1.7rem;display:block;line-height:1}
  .proof .s span{color:#9fb4bf;font-size:.78rem;font-family:"IBM Plex Mono"}
  .proof .logos{display:flex;gap:22px;justify-content:flex-end;flex-wrap:wrap;opacity:.85}
  .proof .logos .lo{color:#cdd9df;font-weight:700;font-size:.9rem;letter-spacing:.02em}
  /* sections */
  section{padding:92px 0}
  h2{font-family:"Plus Jakarta Sans";font-weight:800;font-size:clamp(1.9rem,3.7vw,2.7rem);letter-spacing:-.02em;color:var(--navy);line-height:1.08;margin:.3em 0 .4em;text-wrap:balance}
  h2 em{font-style:normal;color:var(--teal-dd)}
  .sub{color:var(--mut);font-size:1.12rem;max-width:56ch}
  /* pyramide feature */
  .feat{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center;margin-top:42px}
  .feat .txt .tag{display:inline-block;font-family:"IBM Plex Mono";font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;color:var(--teal-dd);background:rgba(72,191,185,.12);padding:5px 11px;border-radius:6px}
  .feat h3{font-family:"Plus Jakarta Sans";font-weight:800;font-size:2rem;color:var(--navy);margin:14px 0 8px}
  .feat ul{list-style:none;padding:0;margin:18px 0 22px;display:flex;flex-direction:column;gap:11px}
  .feat li{display:flex;gap:11px;font-size:1rem}
  .feat li svg{flex:0 0 auto;margin-top:3px}
  .feat .sig{display:flex;gap:26px;margin:18px 0 22px}
  .feat .sig div b{font-weight:800;font-size:1.5rem;color:var(--navy);display:block;line-height:1}
  .feat .sig div span{font-size:.78rem;color:var(--mut)}
  /* pipeline mock */
  .kanban{background:#fff;border:1px solid var(--line2);border-radius:14px;box-shadow:0 30px 60px -34px rgba(9,34,54,.34);padding:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
  .kcol .kh{font-size:.66rem;font-family:"IBM Plex Mono";text-transform:uppercase;letter-spacing:.08em;color:var(--mut);display:flex;justify-content:space-between;margin-bottom:9px}
  .kcol .kh b{color:var(--teal-dd)}
  .kcard{background:#fbfcfc;border:1px solid var(--line);border-radius:9px;padding:10px;margin-bottom:9px}
  .kcard .cr{display:flex;align-items:center;gap:7px;margin-bottom:7px}
  .kcard .a{width:22px;height:22px;border-radius:50%;color:#fff;font-size:.58rem;font-weight:700;display:flex;align-items:center;justify-content:center}
  .kcard .l1{height:6px;width:60%;background:#e2e7e9;border-radius:3px}
  .kcard .l2{height:5px;width:80%;background:#eef2f3;border-radius:3px;margin-top:6px}
  .kcard .pl{height:6px;width:34px;border-radius:3px;margin-top:8px}
  /* portfolio */
  #portfolio{background:var(--ecru)}
/* Bande claire, pour rompre la suite de sections blanches sur les
   pages de fond. Remplace la classe .sov, qui y avait ete posee par
   erreur : .sov est une grille a quatre colonnes, et une section qui
   devient grille relegue tout son contenu dans un quart de largeur. */
.ecru{background:var(--ecru)}
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px}
  .pc{background:#fff;border:1px solid var(--line);border-radius:15px;padding:26px;transition:.18s}
  .pc:hover{transform:translateY(-4px);box-shadow:0 20px 40px -22px rgba(9,34,54,.28)}
  .pc .mk{width:46px;height:46px;border-radius:11px;background:var(--soft2);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
  .pc .tag{font-family:"IBM Plex Mono";font-size:.62rem;text-transform:uppercase;letter-spacing:.14em;color:var(--mut)}
  .pc .tag.s{color:var(--teal-dd)}
  .pc h4{font-weight:700;font-size:1.2rem;color:var(--navy);margin:8px 0 6px}
  .pc p{color:var(--mut);font-size:.95rem;margin:0}
  /* sovereignty */
  .sov{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:42px}
  .sc{border:1px solid var(--line);border-radius:14px;padding:24px 22px;background:#fff}
  .sc .ic{width:44px;height:44px;border-radius:11px;background:var(--soft);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
  .sc h4{font-weight:700;color:var(--navy);margin:0 0 .3em;font-size:1.05rem}
  .sc p{color:var(--mut);font-size:.9rem;margin:0}
  /* faq */
  .faq{max-width:820px;margin:36px auto 0}
  details{border-bottom:1px solid var(--line2);padding:18px 4px}
  summary{list-style:none;cursor:pointer;font-weight:700;color:var(--navy);font-size:1.08rem;display:flex;justify-content:space-between;align-items:center}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+";color:var(--teal-dd);font-weight:700;font-size:1.4rem}
  details[open] summary::after{content:"−"}
  details p{color:var(--mut);margin:12px 0 2px;font-size:.98rem}
  /* contact */
  .contact{background:linear-gradient(120deg,var(--navy),var(--navy2));border-radius:22px;padding:60px 52px;color:#fff;position:relative;overflow:hidden;margin-top:10px}
  .contact::before{content:"";position:absolute;right:-70px;top:-70px;width:360px;height:360px;background:radial-gradient(circle,rgba(72,191,185,.22),transparent 62%)}
  .contact h2{color:#fff;max-width:20ch}.contact p{color:#aec3cd;max-width:52ch;font-size:1.08rem}
  .contact .cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:24px;position:relative}
  footer{background:#061726;color:#8fa6b2;padding:44px 0 52px;font-size:.9rem;margin-top:0}
  footer .row{display:flex;flex-wrap:wrap;gap:22px;justify-content:space-between;align-items:center}
  footer img{height:24px}footer a:hover{color:var(--teal)}.fnav{display:flex;gap:22px;flex-wrap:wrap}
  @media(max-width:900px){.app{grid-template-columns:1fr}.side{display:none}.kpis,.panels,.feat,.grid3,.sov,.proof .wrap,.kanban{grid-template-columns:1fr}.proof .logos{justify-content:flex-start}section{padding:60px 0}}

/*
| Lien d'evitement.
|
| Hors de l'ecran tant qu'il n'a pas le focus : il ne sert qu'a qui
| navigue au clavier, et lui epargne de traverser toute la navigation
| avant d'atteindre le contenu. Deplace et non masque : un element en
| display:none n'est pas atteignable au clavier, ce qui le rendrait
| inutile.
*/
.evitement{position:absolute;left:-9999px;top:0;z-index:100;background:var(--navy);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;font-weight:600}
.evitement:focus{left:0}

/*
| Libelle de la maquette produit.
|
| Reprend l apparence d un h4 sans en etre un : cette maquette illustre
| le produit, elle ne structure pas la page. Un lecteur d ecran
| l annoncait comme une section juste apres le titre principal, et le
| plan de la page devenait faux.
*/
.app .top .faux-titre{font-size:.95rem;font-weight:600;color:var(--ink)}

/* ------------------------------------------------------------------
   Telephones.

   Deux defauts mesures sur iPhone 13 (390 px de large) :

   1. la maquette de l application etait tronquee a droite. Son
      contenu reclamait 546 px dans un cadre de 328, et le parent
      masquait le depassement : rien ne debordait de la page, mais
      les cartes etaient coupees en deux. Un element de grille ou de
      flex ne descend pas sous la largeur de son contenu tant qu on
      ne l y autorise pas, d ou les min-width a zero ;

   2. le bouton de la barre touchait le logo a zero pixel, et son
      libelle passait sur deux lignes, remplissant toute la hauteur.
   ------------------------------------------------------------------ */
@media(max-width:900px){
  .app,.main,.top,.rt,.kpis,.kc,.panels,.pnl,.kanban,.kcol{min-width:0}
  .top{flex-wrap:wrap;gap:10px}
  .sr{width:100%;max-width:150px;min-width:0}
  .v{font-size:1.35rem}
  .l{letter-spacing:.03em}
}

@media(max-width:560px){
  nav img{height:22px}
  nav .row{gap:14px}
  nav .lk .btn{white-space:nowrap;font-size:.84rem;padding:9px 14px}
}

/* Le lien de la page ou l on se trouve. Discret, mais present : sans
   lui, rien dans la barre ne dit ou on est. */
nav .lk a.n.actuelle{color:var(--navy);font-weight:600}
nav .lk a.n.actuelle::after{
  content:"";display:block;height:2px;margin-top:4px;border-radius:2px;
  background:var(--teal);
}

/* Les liens dans le texte courant.

   La regle de base, a{color:inherit;text-decoration:none}, convient a la
   barre de navigation et aux boutons, mais rendait les liens de contenu
   indiscernables du texte : meme couleur, aucun soulignement. Seuls les
   liens sans classe sont vises, les boutons en portent une. */
p > a:not([class]),
li > a:not([class]),
dd > a:not([class]){
  color:var(--teal-dd);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
p > a:not([class]):hover,
li > a:not([class]):hover,
dd > a:not([class]):hover{color:var(--navy)}

/* Navigation sur telephone.

   Les liens de pages etaient simplement masques sous 900 px : depuis une
   page produit, on ne pouvait atteindre une autre page qu en descendant
   jusqu au pied de page. Ils passent desormais sur une deuxieme ligne.

   Aucun script : un menu deroulant qui ne s ouvre pas laisse un site sans
   navigation, et ce site a deja paye ce genre de dependance. */
nav .pages{display:flex;gap:30px;align-items:center}

@media(max-width:900px){
  nav .row{height:auto;flex-wrap:wrap;padding:12px 30px;row-gap:10px}  /* .row est aussi le .wrap : une marge nulle collerait la barre au bord */
  nav .lk{display:contents}
  nav .pages{
    order:3;width:100%;gap:18px;
    overflow-x:auto;scrollbar-width:none;
    padding-bottom:2px;
    /* Les quatre intitules ne tiennent pas dans 330 px. Le fondu a
       droite dit qu il reste quelque chose a faire glisser, ce qu une
       coupure nette ne dit pas. */
    -webkit-mask-image:linear-gradient(to right,#000 86%,transparent);
    mask-image:linear-gradient(to right,#000 86%,transparent);
  }
  nav .pages::-webkit-scrollbar{display:none}
  nav .pages a.n{white-space:nowrap;font-size:.9rem}
  nav .lk > .btn.p{order:2}
}

/* ==================================================================
   Les guides.

   Un article long se lit dans une colonne etroite : au-dela d environ
   75 caracteres par ligne, l oeil perd le debut de la ligne suivante.
   Le reste du site est en 1180 px, la zone de texte descend a 760.
   ================================================================== */

.chapo{padding:56px 0 34px;background:linear-gradient(180deg,rgba(72,191,185,.07),transparent)}
.chapo .wrap{max-width:860px}

.fil{font-size:.82rem;color:var(--mut);margin-bottom:22px;display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.fil a{color:var(--mut)}
.fil a:hover{color:var(--teal-dd)}
.fil span[aria-hidden]{opacity:.45}

.chapo h1{
  font-size:clamp(1.95rem,4.1vw,2.9rem);font-weight:800;letter-spacing:-.025em;
  line-height:1.1;margin:.18em 0 .5em;color:var(--ink);max-width:19ch
}
.chapo .sub{font-size:1.14rem;color:var(--mut);line-height:1.65;max-width:62ch;margin:0}
.chapo .meta{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.76rem;
  color:var(--mut);margin:26px 0 0;letter-spacing:.02em
}

.texte{padding:10px 0 72px}
.texte .wrap{max-width:820px}
.texte p{color:var(--ink);line-height:1.78;margin:0 0 1.25em;font-size:1.045rem}
.texte h2{
  font-size:clamp(1.3rem,2.4vw,1.62rem);font-weight:800;letter-spacing:-.015em;
  color:var(--ink);margin:2.3em 0 .65em;line-height:1.25
}
.texte h3{
  font-size:1.085rem;font-weight:700;color:var(--ink);
  margin:1.9em 0 .5em;line-height:1.35
}
.texte ul{margin:0 0 1.5em;padding-left:1.15em}
.texte li{color:var(--ink);line-height:1.74;margin-bottom:.7em;font-size:1.045rem}
.texte li::marker{color:var(--teal-dd)}
.texte strong{font-weight:700;color:var(--ink)}

/* Un titre de section gagne un filet discret : il donne le rythme sans
   ajouter de trait plein en travers de la page. */
.texte h2::before{
  content:"";display:block;width:34px;height:2px;border-radius:2px;
  background:var(--teal);margin-bottom:.75em
}

@media(max-width:700px){
  .chapo{padding:34px 0 26px}
  .chapo h1{max-width:none}
  .texte p,.texte li{font-size:1.01rem}
}

/* La liste des guides. Des cartes cliquables en entier : un lien qui ne
   couvre que son intitule rate la moitie des clics sur telephone. */
.liste-guides{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:10px}

.carte-guide{
  display:flex;flex-direction:column;gap:11px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:26px 26px 24px;transition:.18s;
}
.carte-guide:hover{
  border-color:rgba(72,191,185,.55);
  box-shadow:0 22px 44px -30px rgba(9,34,54,.3);
  transform:translateY(-2px);
}
.carte-guide h2{
  font-size:1.16rem;font-weight:700;letter-spacing:-.012em;line-height:1.3;
  color:var(--ink);margin:0
}
.carte-guide h2::before{display:none}
.carte-guide p{color:var(--mut);line-height:1.62;font-size:.95rem;margin:0}
.carte-guide .aller{
  margin-top:auto;padding-top:8px;color:var(--teal-dd);
  font-weight:600;font-size:.9rem
}
.carte-guide:hover .aller{color:var(--navy)}
.carte-guide .tag,
.carte-guide .tag.s{
  align-self:flex-start;display:inline-block;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.63rem;
  text-transform:uppercase;letter-spacing:.15em;
  color:var(--teal-dd);background:rgba(72,191,185,.12);
  padding:5px 10px;border-radius:6px
}

@media(max-width:820px){
  .liste-guides{grid-template-columns:1fr}
}

/* Les cartes de guide posees dans une grille de l accueil. */
.grid3 > .carte-guide h3{
  font-size:1.1rem;font-weight:700;line-height:1.32;color:var(--ink);margin:0
}

/* ==================================================================
   La page des questions.
   ================================================================== */

/* Un sommaire d ancres : vingt-huit questions sans table des matieres
   obligent a tout parcourir pour en trouver une. */
.sommaire{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.sommaire a{
  font-size:.86rem;color:var(--teal-dd);background:rgba(72,191,185,.1);
  border:1px solid rgba(72,191,185,.22);border-radius:999px;padding:7px 15px;
  transition:.16s
}
.sommaire a:hover{background:rgba(72,191,185,.2);color:var(--navy)}

.questions .wrap{max-width:860px}
.questions h2{
  font-size:1.18rem;font-weight:800;color:var(--ink);
  margin:2.6em 0 .2em;scroll-margin-top:110px
}
.questions h2:first-child{margin-top:1em}
.questions details{border-bottom:1px solid var(--line);padding:19px 2px}
.questions summary{
  list-style:none;cursor:pointer;font-weight:650;color:var(--ink);
  font-size:1.03rem;line-height:1.4;display:flex;gap:18px;
  justify-content:space-between;align-items:baseline
}
.questions summary::-webkit-details-marker{display:none}
.questions summary::after{
  content:"+";color:var(--teal-dd);font-weight:700;font-size:1.35rem;
  line-height:1;flex:0 0 auto
}
.questions details[open] summary::after{content:"\2212"}
.questions details[open] summary{color:var(--teal-dd)}
.questions details p{
  color:var(--ink);margin:13px 0 3px;font-size:1rem;line-height:1.72;
  max-width:68ch
}