/* =========================================================
   LA DA BARON.SCL
   La meme que les coffres Obsidian et que le site : tout en
   blanc, titres en Awesome Serif gras, texte en Inter, le jaune
   des templates pour ce qui doit ressortir, un point bleu pour
   ouvrir une page. Coins nets, filets fins, boutons noirs.
   Cette feuille passe apres les autres : elle ne fait que
   reprendre la main sur l'apparence, jamais sur la mise en page.
   ========================================================= */
:root{
  --jaune:#fff1a6;--jaune-fort:#e9c62f;--bleu:#3b5bdb;--bleu-halo:#dfe5fb;
  --vert:#2f7d4f;--rouge:#d93a30;--orange:#e8801f;--violet:#7d3c98;
  --doux:#f5f5f2;--filet:#e6e6e2;
}
body{background:#fff}
::selection{background:var(--jaune);color:var(--noir)}

/* ---------- les titres ---------- */
.barre .id b,#porte .marque{font-weight:700}
.page h1,.page-doc h1,.doc-tete h1{font-weight:700;letter-spacing:-.02em;font-size:30px;line-height:1.1}
.page h1::before,.page-doc h1::before,.doc-tete h1::before{
  content:"";display:inline-block;width:.32em;height:.32em;margin:0 .5em .14em .1em;border-radius:50%;
  background:var(--bleu);box-shadow:0 0 0 3px var(--bleu-halo);vertical-align:middle}
.fiche-note .h,.m-tete h2,.col-tete .n,.carte .t{font-weight:700}
/* Un intertitre de page : surligne dans le jaune des templates. */
.sect{display:inline-block;font-weight:700;font-size:14px;padding:1px 7px;background:var(--jaune);border-radius:3px}

/* ---------- la colonne de gauche ---------- */
aside#cote{background:#fff}
.nav{border-radius:4px}
.nav > span:first-of-type{font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;font-weight:500}
.nav.on{background:var(--jaune);color:var(--noir);box-shadow:none}
.nav.on .ic{opacity:1}
.nav.on .pastille{box-shadow:0 0 0 1.5px var(--jaune)}
.nav:not(.on):hover{background:var(--doux)}
.titre-cote{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gris2);padding:2px 11px 8px}

/* ---------- boutons, champs, cartes : coins nets ---------- */
.btn,.btn-neuf,#porte button,#porte input{border-radius:4px}
.btn-neuf,.btn.primaire,#porte button{background:var(--noir);color:#fff}
.btn-neuf:hover,.btn.primaire:hover{background:#262626;opacity:1}
.btn.petit{height:28px;padding:0 10px;font-size:12px}
.champ input,.champ select,.champ textarea,.champ-phrase textarea,.coller input{border-radius:4px}
.bloc,.fiche-note,.ressource,.rien-page,.coller,.qualif,.schema,.colonne{border-radius:6px}
.carte{border-radius:5px}
#modale .cadre{border-radius:6px}
.boite-client{border-radius:6px !important}
.jeton{border-radius:4px}
.jeton.on{background:var(--jaune);border-color:var(--jaune-fort);color:var(--noir);font-weight:600}

/* ---------- les notes et les blocs de texte ---------- */
.contenu h1{font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:17px;font-weight:800;text-transform:uppercase;letter-spacing:.01em;margin:34px 0 12px}
.contenu h1::before{content:"";display:inline-block;width:.42em;height:.42em;margin:0 .6em .14em .1em;border-radius:50%;
  background:var(--bleu);box-shadow:0 0 0 3px var(--bleu-halo);vertical-align:middle}
.contenu h2,.lecture .contenu h2{font-family:var(--titre);font-weight:700;width:fit-content;max-width:100%;
  padding:.05em .35em;background:var(--jaune);border-radius:3px;border-top:none;text-align:left;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.contenu h2{margin-top:30px}
.lecture .contenu h2::before{display:none}
.contenu h3{font-family:var(--titre);font-weight:700}
.contenu strong{font-weight:600}
.contenu mark{background:var(--jaune);padding:0 .15em;border-radius:2px}
.contenu blockquote{border-left:3px solid var(--jaune-fort);background:#fffdf0;padding:10px 16px;color:var(--noir)}
.contenu blockquote em:last-child{color:var(--gris)}

/* Les encadres : un cadre net de la couleur de leur sens, un bandeau de titre teinte. */
.cal{border:1.5px solid rgb(var(--c));border-radius:2px;background:#fff;padding:0}
.cal-t{padding:9px 14px;background:rgba(var(--c),.1);border-bottom:1.5px solid rgb(var(--c))}
.cal-c{padding:2px 16px 12px}
.cal-info,.cal-todo,.cal-note,.cal-abstract{--c:59,91,219}
.cal-tip,.cal-hint,.cal-success{--c:47,125,79}
.cal-important{--c:184,137,15}
.cal-warning,.cal-caution{--c:232,128,31}
.cal-danger,.cal-failure{--c:217,58,48}
.cal-question{--c:125,60,152}
.cal-example,.cal-quote{--c:10,10,10}

/* ---------- l'espace des closers ---------- */
.closing .intro{max-width:64ch}
.cl-onglets{display:none;gap:6px;overflow-x:auto;margin:0 0 18px;padding-bottom:4px}
@media(max-width:900px){.cl-onglets{display:flex}}
.cl-onglets .jeton{white-space:nowrap;cursor:pointer;background:#fff}
.cl-texte{border-top:1px solid var(--filet);padding:22px 0 8px}
.cl-texte:first-of-type{border-top:none;padding-top:4px}
.cl-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.cl-texte .cl-tete h2{margin:0 0 6px;font-family:var(--titre);font-weight:700;font-size:21px;padding:.05em .35em;background:var(--jaune);border-radius:3px}
.cl-texte .contenu{max-width:76ch}
.cl-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.cl-lien{border:1px solid var(--filet);border-radius:6px;padding:16px 16px 14px;background:#fff;display:flex;flex-direction:column;gap:10px;min-width:0}
.cl-lien .h{font-family:var(--titre);font-weight:700;font-size:16.5px;line-height:1.25}
.contenu.petit p,.contenu.petit li{font-size:13.5px;line-height:1.6;margin:0 0 6px;color:var(--gris)}
.cl-url{font-family:"SF Mono",Menlo,monospace;font-size:12px;color:var(--bleu);background:var(--doux);border-radius:3px;padding:6px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-url.vide{color:var(--gris2);font-family:inherit;font-style:italic}
.cl-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.champ-phrase input.plein{width:100%;border:1px solid var(--filet);border-radius:4px;padding:10px 12px;font-size:14px;outline:none}
.champ-phrase input.plein:focus{border-color:var(--noir)}
.champ-phrase textarea.cl-zone{font-family:"SF Mono",Menlo,monospace;font-size:13px;line-height:1.6}
.nav{justify-content:flex-start}
.nav .marque{margin-left:auto}
.cl-onglets .jeton.on{background:var(--jaune)}

/* Choisir une offre et une facon de payer : un interrupteur par question. */
.cl-choix{margin:0 0 16px}
.cl-choix-l{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gris2);margin-bottom:8px}
.cl-bascule{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid var(--filet);border-radius:6px;background:var(--doux);max-width:100%}
.cl-bascule button{border:none;background:none;border-radius:4px;padding:8px 16px;font-size:14px;font-weight:600;color:var(--gris);cursor:pointer;transition:background .12s,color .12s}
.cl-bascule button:hover{color:var(--noir);background:#fff}
.cl-bascule button.on{background:var(--noir);color:#fff}
.cl-resume{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:4px 0 18px}
.cl-etiq{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border:1px solid var(--filet);border-radius:4px;background:#fff}
.cl-etiq.jaune{background:var(--jaune);border-color:var(--jaune-fort)}
.cl-compte{font-size:13.5px;color:var(--gris)}
.deux-champs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:600px){.deux-champs{grid-template-columns:1fr}}

/* ---------- l'ecosysteme d'offres, comme un tableau Miro ----------
   Un fond clair a points fins, des cartes blanches qui flottent, le
   prix en gros, des fleches grises et discretes. La carte choisie
   passe en noir et jaune, ses fleches aussi : on voit d'un coup
   d'oeil ou elle mene. */
.planche{border:1px solid var(--filet);border-radius:12px;overflow:auto;max-height:600px;
  background-color:#fbfbf9;background-image:radial-gradient(#dcdcd5 1.1px,transparent 1.2px);background-size:24px 24px;
  box-shadow:inset 0 1px 0 #fff}
.toile{position:relative;min-height:260px}
.fleches{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.fleches path{fill:none;stroke:#b4b4ad;stroke-width:1.6;stroke-linecap:round}
.fleches path.on{stroke:var(--noir);stroke-width:2}
.fleche-texte{position:absolute;transform:translate(-50%,-50%);font-size:11.5px;font-weight:500;color:#55554f;
  padding:4px 10px;background:#fff;border:1px solid var(--filet);border-radius:999px;white-space:nowrap;pointer-events:none;
  box-shadow:0 1px 2px rgba(10,10,10,.05)}
.fleche-texte.on{background:var(--jaune);border-color:var(--jaune-fort);color:var(--noir);font-weight:600}
.offre-carte{position:absolute;background:#fff;border:1px solid #e3e3de;border-radius:12px;padding:16px 18px 15px;
  cursor:pointer;user-select:none;touch-action:none;
  box-shadow:0 1px 2px rgba(10,10,10,.04),0 8px 24px -12px rgba(10,10,10,.18);
  transition:box-shadow .18s,transform .18s,border-color .18s}
.offre-carte:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(10,10,10,.05),0 16px 32px -14px rgba(10,10,10,.28)}
.offre-carte.mobile{cursor:grab}
.offre-carte.tenue{cursor:grabbing;transform:rotate(-1deg) scale(1.02);box-shadow:0 22px 40px -16px rgba(10,10,10,.4);z-index:2;transition:none}
.offre-carte.on{border:1.5px solid var(--noir);box-shadow:0 0 0 4px var(--jaune),0 12px 28px -14px rgba(10,10,10,.3)}
.offre-carte .h{font-family:var(--titre);font-weight:700;font-size:18px;line-height:1.2;letter-spacing:-.01em}
.offre-carte .prix{margin-top:12px;padding-top:11px;border-top:1px solid var(--filet2);
  font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--noir);font-variant-numeric:tabular-nums}
.offre-carte .a{font-size:12.5px;font-weight:500;color:var(--gris);margin-top:3px;line-height:1.45}
.offre-carte .h + .a{margin-top:10px;padding-top:10px;border-top:1px solid var(--filet2)}
.offre-detail{margin-top:26px;border-top:1px solid var(--filet);padding-top:22px}
.offre-detail .cl-tete h2{margin:0 0 6px;font-family:var(--titre);font-weight:700;font-size:24px;padding:.05em .35em;background:var(--jaune);border-radius:3px}
.offre-accroche{font-size:15px;color:var(--gris);margin:4px 0 16px}
.offre-chemins{margin:0 0 18px}
.chemin{display:inline-flex;align-items:center;gap:8px;margin:0 8px 8px 0;padding:7px 12px;border:1px solid var(--filet);border-radius:4px;background:#fff;font-size:13.5px;font-weight:600;cursor:pointer}
.chemin:hover{border-color:var(--noir)}
.chemin span::before{content:"→ ";color:var(--bleu)}
.chemin i{font-style:normal;font-weight:500;font-size:12px;color:var(--gris);background:var(--doux);padding:2px 6px;border-radius:3px}
.chemins-volet{display:flex;flex-direction:column;gap:8px}
.chemin-ligne{display:grid;grid-template-columns:1fr 1.1fr;gap:10px;align-items:center}
.champ-phrase input.plein.petit{padding:7px 10px;font-size:13px}
.rien-page.petit{padding:16px;font-size:13px}
/* Le tableau des offres prend toute la largeur : on doit voir le parcours d'un coup d'oeil. */
.page.closing.large{max-width:none}
.page.closing.large .offre-detail{max-width:940px}
.page.closing.large .intro{max-width:64ch}

/* Les deux bandes du tableau : Entry en haut, Upsell en bas. */
.bande{position:absolute;left:0;right:0;pointer-events:none}
.bande + .bande{border-top:1px dashed #d4d4cc}
.bande-upsell{background:rgba(255,241,166,.18)}
.bande-tete{position:absolute;left:22px;top:50%;transform:translateY(-50%);width:120px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.bande-nom{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:4px 9px;border-radius:4px;background:var(--noir);color:#fff}
.bande-upsell .bande-nom{background:var(--jaune);color:var(--noir);border:1px solid var(--jaune-fort)}
.bande-aide{font-size:12px;line-height:1.4;color:var(--gris)}
.cl-etiq-groupe{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:4px 9px;border-radius:4px;background:var(--noir);color:#fff;margin-bottom:10px}
.cl-etiq-groupe.upsell{background:var(--jaune);color:var(--noir);border:1px solid var(--jaune-fort)}
/* Les offres ou mene l'offre choisie s'allument d'un fin cadre jaune. */
.offre-carte.cible{border-color:var(--jaune-fort);box-shadow:0 0 0 3px rgba(255,241,166,.9),0 8px 24px -12px rgba(10,10,10,.18)}
/* Le detail d'une offre : les tableaux de features prennent toute la largeur, le texte garde une ligne lisible. */
.page.closing.large .offre-detail{max-width:1240px}
.offre-detail .contenu{max-width:none}
.offre-detail .contenu > p,.offre-detail .contenu > ul,.offre-detail .contenu > ol{max-width:76ch}
.offre-detail .contenu table{width:100%;border-collapse:collapse;font-size:13.5px}
.offre-detail .contenu th{text-align:left;vertical-align:bottom;padding:0 14px 10px 0;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris2);font-weight:600;border-bottom:1.5px solid var(--noir)}
.offre-detail .contenu td{vertical-align:top;padding:12px 14px 12px 0;border-bottom:1px solid var(--filet2);line-height:1.5}
.offre-detail .contenu td:first-child{width:38%;font-weight:500;color:var(--noir)}
.offre-detail .contenu td:nth-child(2){white-space:nowrap}
.offre-detail .contenu td:last-child{color:var(--gris)}

/* ---------- les liens de paiement, en trois etapes ----------
   Les memes cartes que le tableau des offres : on choisit l'offre,
   puis en combien de fois, et le lien attend dans un grand cadre. */
.paie-etape{display:flex;align-items:center;gap:10px;margin:26px 0 12px}
.paie-etape:first-child{margin-top:4px}
.paie-num{width:24px;height:24px;border-radius:50%;background:var(--noir);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;flex:none}
.paie-l{font-family:var(--titre);font-weight:700;font-size:18px}
.paie-tuiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;max-width:1000px}
.paie-tuiles.fois{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.paie-tuile{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;padding:16px 18px;background:#fff;border:1px solid #e3e3de;border-radius:12px;cursor:pointer;
  box-shadow:0 1px 2px rgba(10,10,10,.04),0 8px 24px -12px rgba(10,10,10,.18);transition:transform .16s,box-shadow .16s}
.paie-tuile:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(10,10,10,.05),0 16px 32px -14px rgba(10,10,10,.28)}
.paie-tuile .t{font-family:var(--titre);font-weight:700;font-size:16.5px;line-height:1.2;color:var(--noir)}
.paie-tuile .p{font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--noir);font-variant-numeric:tabular-nums}
.paie-tuile .p i{font-style:normal;font-size:12px;font-weight:500;color:var(--gris);letter-spacing:0}
.paie-tuile.on{border:1.5px solid var(--noir);box-shadow:0 0 0 4px var(--jaune),0 12px 28px -14px rgba(10,10,10,.3)}
.paie-resultat{max-width:640px;background:#fff;border:1.5px solid var(--noir);border-radius:14px;padding:22px 24px;
  box-shadow:0 18px 40px -22px rgba(10,10,10,.35)}
.paie-haut{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.paie-offre{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;border-radius:4px;background:var(--jaune);border:1px solid var(--jaune-fort)}
.paie-montant{font-size:34px;font-weight:700;letter-spacing:-.03em;margin-top:12px;font-variant-numeric:tabular-nums}
.paie-montant span{font-size:20px;color:var(--gris);font-weight:600;margin-left:4px}
.paie-detail{font-size:14px;color:var(--gris);margin-top:4px}
.paie-resultat .cl-url{margin-top:18px;font-size:13px;padding:10px 12px}
.paie-boutons{display:flex;gap:10px;margin-top:12px}
.btn.grand{height:46px;padding:0 22px;font-size:15px;font-weight:600;border-radius:8px}
.paie-boutons .btn.primaire{flex:1;justify-content:center}

/* ---------- les ressources, rangees par categorie ---------- */
.cl-categorie{margin:6px 0 34px}
.cl-cat-tete{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.cl-cat-tete h2{margin:0;font-family:var(--titre);font-weight:700;font-size:21px;padding:.05em .35em;background:var(--jaune);border-radius:3px}
.cl-cat-n{font-size:12px;font-weight:700;color:var(--gris);background:var(--doux);border:1px solid var(--filet);border-radius:999px;padding:2px 9px}
.cl-cat-aide{font-size:13.5px;color:var(--gris);margin:6px 0 14px}
.cl-lien{border-radius:12px;border-color:#e3e3de;box-shadow:0 1px 2px rgba(10,10,10,.04),0 8px 24px -12px rgba(10,10,10,.18)}
.cl-vignette{display:block;margin:-16px -16px 4px;border-radius:12px 12px 0 0;overflow:hidden;aspect-ratio:16/9;background:var(--doux)}
.cl-vignette img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.cl-vignette:hover img{transform:scale(1.03)}
.cl-categorie .cl-grille{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));max-width:1240px}
.cl-categorie .cl-lien .h{font-size:15.5px}
/* Les onglets des ressources : une categorie a la fois. */
.cl-filtres{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 18px}
.cl-filtre{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid #e3e3de;border-radius:999px;background:#fff;font-size:14px;font-weight:600;color:var(--gris);cursor:pointer;transition:border-color .15s,color .15s}
.cl-filtre:hover{border-color:var(--noir);color:var(--noir)}
.cl-filtre span{font-size:11.5px;font-weight:700;color:var(--gris);background:var(--doux);border-radius:999px;padding:1px 8px}
.cl-filtre.on{background:var(--noir);border-color:var(--noir);color:#fff}
.cl-filtre.on span{background:var(--jaune);color:var(--noir)}
.cl-categorie .cl-grille{align-items:start}
.offre-carte .prix.long{font-size:16px;line-height:1.3}

/* ---------- les features d'une offre, en cartes ---------- */
.features{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin:14px 0 26px;align-items:start}
.feature{background:#fff;border:1px solid #e3e3de;border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;
  box-shadow:0 1px 2px rgba(10,10,10,.04),0 8px 22px -14px rgba(10,10,10,.18)}
.feature-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.feature-nom{font-family:var(--titre);font-weight:700;font-size:17px;line-height:1.25;color:var(--noir)}
.feature-nb{flex:none;min-width:34px;height:34px;padding:0 9px;border-radius:999px;background:var(--noir);color:#fff;
  font-size:13px;font-weight:700;display:grid;place-items:center;white-space:nowrap}
.feature-detail{font-size:13px;line-height:1.55;color:var(--gris);border-left:2px solid var(--filet);padding-left:10px}
.feature-etiq{display:flex;flex-wrap:wrap;gap:6px}
.feature-etiq span{display:inline-flex;flex-direction:column;gap:1px;padding:6px 10px;border-radius:8px;background:var(--doux);font-size:12.5px;font-weight:600;color:var(--noir);line-height:1.3}
.feature-etiq i{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gris2)}
.feature-regle{position:relative;margin-top:2px;padding:10px 12px 10px 34px;border-radius:8px;background:#fffbe3;border:1px solid #f3e39a;font-size:13.5px;line-height:1.5;color:#3d3a2a}
.feature-regle::before{content:"✓";position:absolute;left:10px;top:10px;width:17px;height:17px;border-radius:50%;background:var(--jaune-fort);color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center;line-height:1}
/* Les cartes s'empilent en colonnes, comme un mur : pas de trou sous une carte courte. */
.features{display:block;columns:3 300px;column-gap:14px}
.feature{break-inside:avoid;margin:0 0 14px;width:100%}

/* Les features en value stack : une ligne par element, les unes sous les autres, sur toute la largeur. */
.features{display:flex;flex-direction:column;gap:0;columns:auto;max-width:1240px;margin:14px 0 28px;
  background:#fff;border:1px solid #e3e3de;border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(10,10,10,.04),0 12px 30px -18px rgba(10,10,10,.2)}
.feature{display:grid;grid-template-columns:64px minmax(0,1.35fr) minmax(0,1fr);gap:20px;align-items:center;
  margin:0;padding:18px 22px;border:none;border-radius:0;box-shadow:none;border-bottom:1px solid var(--filet2);break-inside:auto}
.feature:last-child{border-bottom:none}
.feature:nth-child(even){background:#fcfcfa}
.feature-nb{width:48px;height:48px;border-radius:12px;background:var(--noir);color:#fff;font-size:16px;font-weight:800;display:grid;place-items:center;letter-spacing:-.02em}
.feature-nb.long{width:64px;height:auto;min-height:48px;padding:6px;font-size:11px;line-height:1.25;text-align:center;border-radius:10px}
.feature-corps{display:flex;flex-direction:column;gap:8px;min-width:0}
.feature-nom{font-size:18px}
.feature-regle{margin:0}
@media(max-width:900px){.feature{grid-template-columns:48px minmax(0,1fr);gap:14px}.feature-regle{grid-column:2}.feature-nb{width:40px;height:40px;font-size:14px}}
/* Seulement ce qu'il y a dans l'offre : le nombre, puis l'element. */
.feature{grid-template-columns:64px minmax(0,1fr);padding:16px 22px}
@media(max-width:900px){.feature{grid-template-columns:48px minmax(0,1fr)}}
.contenu u{text-decoration:underline;text-decoration-color:var(--jaune-fort);text-decoration-thickness:2px;text-underline-offset:3px}