/* ============================================================
   LANDING HEBDOMADAIRE
   Chargé par cette-semaine.html : hero, barre de choix,
   blocs d'achat, écrans de fin, tunnel de commande.
   ============================================================ */

/* ============================================================
   LANDING HEBDOMADAIRE – /cette-semaine
   ============================================================ */

/* ---------- Hero du départ ---------- */
.depart-hero{padding-top:clamp(34px,3.6vw,52px);padding-bottom:clamp(40px,4.6vw,64px)}
.depart-tete{max-width:44em}

/* diptyque : une destination par panneau, gravure en filigrane */
.diptyque{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,38px);margin-top:clamp(30px,3.6vw,48px)}
.volet{position:relative;display:block;overflow:hidden;border:1px solid var(--ligne);background:var(--ivoire-2);padding:clamp(20px,2.4vw,32px);transition:border-color .35s}
.volet:hover{border-color:var(--kaki)}
.volet .fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 32%;opacity:.22;z-index:0;pointer-events:none}
.volet .dedans{position:relative;z-index:1;display:flex;flex-direction:column;height:100%}
.volet .plat{width:100%;margin:clamp(4px,1vw,12px) 0 clamp(14px,1.8vw,22px)}
.volet-tete{display:flex;align-items:baseline;gap:12px}
.volet-tete .n{font-size:clamp(26px,2.4vw,34px);line-height:1;color:var(--or)}
.volet-tete .p{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--kaki)}
.volet h2{font-size:clamp(30px,3.4vw,48px);line-height:1.02;margin-top:4px}
.volet .accroche{font-style:italic;color:var(--kaki);font-size:clamp(17px,1.5vw,21px);line-height:1.3;margin-top:8px}
.volet .aller{margin-top:auto;padding-top:clamp(14px,1.8vw,22px);display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid var(--ligne);font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--vert)}
.volet .aller .fl{color:var(--or);font-size:15px;transition:transform .35s}
.volet:hover .aller .fl{transform:translateX(6px)}
.volet[data-etat="complet"] .plat{filter:saturate(.4);opacity:.6}
.volet[data-etat="complet"] h2{color:rgba(33,48,31,.5)}
.volet[data-etat="complet"] .aller{color:var(--sepia)}
.diptyque-x{display:none}
@media(max-width:760px){
  .diptyque{grid-template-columns:1fr;gap:16px}
}
.depart-quand{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.depart-titre{margin-top:16px;font-size:clamp(33px,4.1vw,60px);line-height:1.06;letter-spacing:-.012em;max-width:16em}
.depart-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));margin-top:clamp(30px,3.4vw,42px);border-top:1px solid var(--ligne)}
.depart-meta div{padding:20px 26px 20px 0;border-bottom:1px solid var(--ligne-f)}
.depart-meta dt{min-height:2.5em}
.depart-meta dt{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--kaki)}
.depart-meta dd{margin-top:8px;font-size:21px;line-height:1.4}
.depart-meta .alerte{color:var(--sepia)}

/* ---------- Barre de choix collante ---------- */
.choix{background:var(--vert);color:var(--ivoire);max-height:0;overflow:hidden;transition:max-height .26s cubic-bezier(.22,.61,.36,1)}
.choix.on{max-height:140px}
.choix-in{max-width:var(--max);margin:0 auto;padding:0 var(--gouttiere);display:flex;align-items:stretch;gap:0}
.choix-nav{display:flex;flex:0 1 auto;min-width:0}
.choix-nav a{display:flex;align-items:center;gap:11px;white-space:nowrap;padding:18px 24px 18px 0;transition:opacity .3s}
.choix-nav a:hover{opacity:.72}
.choix .nom{font-size:22px;line-height:1}
.choix .prix{font-family:var(--sans);font-size:11.5px;letter-spacing:.05em;color:var(--sable)}
.choix .jauge{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--or);border:1px solid rgba(184,148,83,.5);padding:4px 8px}
.choix a[data-etat="complet"]{opacity:.42}
.choix a[data-etat="complet"] .jauge{color:var(--sable);border-color:rgba(216,200,174,.4)}
.panier{display:flex;align-items:center;gap:clamp(14px,2vw,26px);margin-left:auto;padding-left:clamp(16px,2.4vw,30px);border-left:1px solid rgba(239,232,219,.2)}
.panier-vide{font-family:var(--sans);font-size:11.5px;letter-spacing:.05em;color:var(--sable);padding:18px 0}
.panier-detail{padding:14px 0;text-align:right}
.panier-detail .ligne{font-family:var(--sans);font-size:11px;letter-spacing:.05em;color:var(--sable);line-height:1.5;white-space:nowrap}
.panier-detail .total{font-size:26px;line-height:1.15;margin-top:2px}
.panier .btn{flex:0 0 auto}
@media(max-width:760px){
  /* le panier passe en bas de l'écran : c'est la zone du pouce, et l'en-tête
     est trop loin une fois qu'on est descendu dans la page */
  .choix{position:fixed;left:0;right:0;bottom:0;z-index:55;max-height:none;transform:translateY(101%);transition:transform .32s cubic-bezier(.22,.61,.36,1)}
  .choix.on{transform:none;max-height:none}
  .choix-in{padding:0 var(--gouttiere)}
  .choix-in{flex-wrap:wrap}
  .choix-nav{flex:1 1 100%;gap:20px}
  .choix-nav a{padding:12px 0}
  .choix .nom{font-size:18px}
  .choix .prix{display:none}
  .choix .jauge{font-size:9px;padding:3px 6px;letter-spacing:.12em}
  .panier{flex:1 1 100%;margin-left:0;padding-left:0;padding-bottom:12px;border-left:none;border-top:1px solid rgba(239,232,219,.2);padding-top:10px}
  .panier-detail{padding:0;text-align:left}
  .panier-detail .total{font-size:21px}
  .panier .btn{margin-left:auto}
}

/* ---------- Bloc d'une Escale ---------- */
.escale{position:relative;padding:clamp(60px,7vw,104px) 0}
/* Colonnes égales : ces blocs alternent gauche/droite, une asymétrie ferait
   varier la taille du packshot d'une Escale à l'autre. */
.escale-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,74px);align-items:center}
.escale-num{display:flex;align-items:baseline;gap:15px;margin-bottom:20px}
.escale-num .chiffre{font-size:clamp(40px,4.4vw,62px);line-height:.86;color:var(--or)}
.escale-num .lieu{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--kaki)}
.escale h2{font-size:clamp(42px,5.4vw,76px)}
.escale .titre-edito{font-size:clamp(21px,2.1vw,27px);margin-top:10px}
.escale .compo-courte{margin-top:26px;font-size:20px;line-height:1.6;color:rgba(33,48,31,.86);max-width:32em}
/* Ce lien porte les allergènes : il ne peut pas être plus discret
   qu'une mention secondaire. Traité comme une action à part entière. */
.lien-allerg{display:inline-flex;align-items:center;gap:12px;margin-top:22px;
  font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--vert);background:none;border:1px solid var(--ligne);padding:14px 20px;cursor:pointer;
  transition:background .3s,color .3s,border-color .3s}
.lien-allerg:hover{background:var(--vert);border-color:var(--vert);color:var(--ivoire)}
.lien-allerg .fl{color:var(--couleur,var(--or));font-size:14px;transition:transform .3s,color .3s}
.lien-allerg:hover .fl{transform:translateX(4px);color:var(--or)}

/* ---------- Achat ---------- */
.achat{margin-top:clamp(30px,3.4vw,42px);border-top:1px solid var(--ligne);padding-top:26px}
.formats{display:flex;flex-wrap:wrap;gap:14px}
.format{flex:1 1 190px;border:1px solid var(--ligne);padding:18px 20px;display:flex;align-items:center;gap:16px;background:var(--ivoire)}
.sur-ivoire2 .format{background:var(--ivoire)}
.format .quoi{flex:1 1 auto}
.format .nom{font-size:21px;line-height:1.2}
.format .prix{font-family:var(--sans);font-size:11.5px;letter-spacing:.06em;color:var(--kaki);margin-top:4px}
.pas{display:flex;align-items:center;border:1px solid var(--ligne);flex:0 0 auto}
.pas button{width:38px;height:38px;background:none;border:none;cursor:pointer;font-family:var(--sans);font-size:16px;color:var(--vert);line-height:1}
.pas button:hover{background:var(--ivoire-2)}
.pas span{min-width:30px;text-align:center;font-family:var(--sans);font-size:14px}
.bouchee{margin-top:24px;display:flex;gap:16px;align-items:center;max-width:38em;border:1px solid var(--ligne);padding:14px;background:var(--ivoire)}
.bouchee img{flex:0 0 auto;width:84px;height:auto}
.bouchee p{font-family:var(--sans);font-size:12.5px;line-height:1.62;color:var(--kaki)}
.bouchee strong{font-weight:500;color:var(--vert)}
.reste{margin-top:14px;font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--sepia)}
.pas button:disabled{opacity:.3;cursor:not-allowed}
.pas button:disabled:hover{background:none}
.format.pris{border-color:var(--vert)}
.escale .btn{margin-top:28px}

/* ---------- Escale complète ---------- */
.escale.complet .escale-visuel{position:relative}
.escale.complet .escale-visuel img{filter:saturate(.42) contrast(.95);opacity:.7}
.sceau{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;border:1px solid var(--vert);background:var(--ivoire);padding:15px 26px;font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;white-space:nowrap}
.escale.complet h2,.escale.complet .titre-edito,.escale.complet .compo-courte{color:rgba(33,48,31,.5)}
.escale.complet .escale-num .chiffre{color:rgba(184,148,83,.5)}
.repart{margin-top:clamp(26px,3vw,38px);border-top:1px solid var(--ligne);padding-top:24px}
.repart p{font-size:21px;line-height:1.5}

/* ---------- Écran de fin (états C et D) ---------- */
.fin{padding:clamp(80px,11vw,168px) 0 clamp(70px,9vw,128px)}
.fin-titre{font-size:clamp(52px,9vw,124px);line-height:.98;letter-spacing:-.02em}
.fin .lede{margin-top:clamp(26px,3vw,38px);max-width:27em}
.fin-pourquoi{margin-top:clamp(34px,4vw,52px);border-left:1px solid var(--sepia);padding-left:clamp(20px,3vw,32px);max-width:34em}
.suivant{margin-top:clamp(52px,6vw,86px);border-top:1px solid var(--ligne);padding-top:clamp(30px,3.6vw,46px);display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);gap:clamp(24px,4vw,60px)}
.suivant .destin{font-size:clamp(32px,4.2vw,58px);line-height:1.06;margin-top:14px}
.suivant .destin .x{color:var(--or);font-style:italic;padding:0 .1em}
.suivant .destin .mystere{color:var(--sepia)}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
@media(max-width:900px){.suivant{grid-template-columns:1fr}}

/* ---------- Comment ça marche ---------- */
.marche{background:var(--vert);color:var(--ivoire)}
.marche .eyebrow{color:var(--or)}
.etapes{list-style:none;counter-reset:e;margin-top:clamp(34px,4vw,52px);display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid rgba(239,232,219,.22)}
.etapes li{counter-increment:e;padding:clamp(22px,2.4vw,32px) clamp(16px,2vw,28px) clamp(26px,3vw,38px) 0;border-right:1px solid rgba(239,232,219,.14)}
.etapes li:last-child{border-right:none;padding-right:0}
.etapes li::before{content:counter(e,decimal-leading-zero);display:block;font-size:clamp(46px,5.2vw,74px);line-height:.9;color:var(--or);margin-bottom:clamp(14px,1.6vw,22px)}
.etapes p{font-size:clamp(17px,1.35vw,19.5px);line-height:1.46;color:rgba(239,232,219,.9)}
@media(max-width:960px){
  .etapes{grid-template-columns:1fr 1fr}
  .etapes li{border-right:none;border-bottom:1px solid rgba(239,232,219,.14);padding-right:clamp(16px,2vw,28px)}
  .etapes li:nth-child(odd){border-right:1px solid rgba(239,232,219,.14)}
}
@media(max-width:560px){
  .etapes{grid-template-columns:1fr}
  .etapes li,.etapes li:nth-child(odd){border-right:none}
  .etapes li{display:flex;align-items:baseline;gap:20px;padding:20px 0}
  .etapes li::before{margin-bottom:0;font-size:40px;flex:0 0 auto;min-width:58px}
}

/* ---------- Sélecteur d'état (maquette seulement) ---------- */
@media(max-width:620px){.etats{left:8px;bottom:8px}.etats button{font-size:10px;padding:7px 10px}}

/* alternance du côté de la photographie, pour éviter deux blocs identiques */
.escale.inverse .escale-visuel{order:-1}

@media(max-width:1000px){
  .escale-grid{grid-template-columns:1fr}
  .escale-visuel{order:-1}
}


/* ---------- Bloc bouchée découverte ---------- */
.decouverte-grid{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,.5fr);gap:clamp(26px,3.4vw,50px);align-items:center}
.decouverte-grid img{width:100%}
@media(max-width:900px){.decouverte-grid{grid-template-columns:1fr}}
.echange{list-style:none;margin-top:30px;border-top:1px solid var(--ligne)}
.echange li{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:15px 0;border-bottom:1px solid var(--ligne-f);font-size:19px}
.echange .fl{color:var(--or);font-style:italic}


/* ---------- Deux bouchées face à face ---------- */
.paire{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.8vw,24px);align-items:end}
.paire figure{text-align:center}
.paire img{width:100%}
.paire figcaption{margin-top:14px;font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--kaki)}

/* ============================================================
   TUNNEL DE COMMANDE
   Il prend l'écran sans quitter la page : le panier ne peut pas se perdre.
   ============================================================ */
.tunnel{position:fixed;inset:0;z-index:80;background:var(--ivoire);display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.tunnel.ouvert{opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){.tunnel{transition:none}}
body.tunnel-ouvert{overflow:hidden}

.tunnel-tete{flex:0 0 auto;border-bottom:1px solid var(--ligne);background:var(--ivoire)}
.tunnel-tete .dedans{max-width:var(--max);margin:0 auto;padding:18px var(--gouttiere);display:flex;align-items:center;gap:24px}
.tunnel-tete .marque{width:clamp(120px,12vw,164px);color:var(--vert)}
.tunnel-tete .marque svg{width:100%;height:auto;display:block}

.jalons{display:flex;gap:0;margin-left:auto;list-style:none;flex-wrap:wrap}
.jalons li{display:flex;align-items:center;gap:9px;padding:0 0 0 clamp(12px,2vw,26px);
  font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(33,48,31,.34)}
.jalons li .n{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border:1px solid var(--ligne);font-size:10px;letter-spacing:0}
.jalons li[data-etat="courant"]{color:var(--vert)}
.jalons li[data-etat="courant"] .n{background:var(--vert);color:var(--ivoire);border-color:var(--vert)}
.jalons li[data-etat="fait"]{color:var(--kaki)}
.jalons li[data-etat="fait"] .n{border-color:var(--kaki);color:var(--kaki)}
@media(max-width:760px){
  .jalons li span:not(.n){display:none}
  .jalons li{padding-left:9px}
  .jalons{flex-wrap:nowrap}
  .tunnel-tete .dedans{gap:14px}
}

.tunnel-corps{flex:1 1 auto;overflow-y:auto}
.tunnel-corps .dedans{max-width:var(--max);margin:0 auto;padding:clamp(34px,5vw,72px) var(--gouttiere) clamp(60px,8vw,110px)}
.tunnel-grille{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,5vw,76px);align-items:start}
@media(max-width:900px){.tunnel-grille{grid-template-columns:1fr;gap:34px}}

.etape-titre{font-size:clamp(30px,3.6vw,50px);line-height:1.06;margin-top:12px}
.etape-note{margin-top:18px;max-width:34em}

/* récapitulatif */
.recap{border-top:1px solid var(--ligne);margin-top:clamp(26px,3vw,38px)}
.recap-ligne{display:grid;grid-template-columns:1fr auto auto;gap:clamp(14px,2.4vw,30px);align-items:center;
  padding:18px 0;border-bottom:1px solid var(--ligne-f)}
.recap-ligne .quoi .nom{font-size:21px;line-height:1.2}
.recap-ligne .quoi .det{font-family:var(--sans);font-size:11.5px;letter-spacing:.04em;color:var(--kaki);margin-top:5px}
.recap-ligne .prix{font-size:20px;min-width:74px;text-align:right}
.recap-offert{padding:16px 0;border-bottom:1px solid var(--ligne-f);display:flex;align-items:center;gap:14px}
.recap-offert img{width:52px;height:auto;flex:0 0 auto}
.recap-offert p{font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--kaki)}
.recap-total{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:24px 0 0}
.recap-total .lbl{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--kaki)}
.recap-total .val{font-size:clamp(30px,3.4vw,44px);line-height:1}

/* encadré latéral */
.aparte{border:1px solid var(--ligne);padding:clamp(22px,2.6vw,32px);background:var(--ivoire-2)}
.aparte h3{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--kaki)}
.aparte dl{margin-top:18px}
.aparte dt{font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--kaki);margin-top:16px}
.aparte dt:first-child{margin-top:0}
.aparte dd{font-size:19px;line-height:1.4;margin-top:5px}
.aparte .fin{margin-top:22px;padding-top:18px;border-top:1px solid var(--ligne);font-family:var(--sans);font-size:11.5px;line-height:1.6;color:var(--kaki)}

/* formulaire */
.champs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px);margin-top:clamp(26px,3vw,36px)}
.champ{display:flex;flex-direction:column;gap:8px}
.champ.large{grid-column:1/-1}
.champ label{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--kaki)}
.champ input{font-family:var(--serif);font-size:20px;color:var(--vert);background:var(--ivoire);
  border:1px solid var(--ligne);padding:13px 15px;width:100%}
.champ input:focus{outline:none;border-color:var(--kaki)}
.champ input[aria-invalid="true"]{border-color:var(--sepia)}
.champ .aide{font-family:var(--sans);font-size:11px;line-height:1.5;color:var(--kaki)}
.champ .erreur{font-family:var(--sans);font-size:11px;color:var(--sepia)}
@media(max-width:620px){.champs{grid-template-columns:1fr}}

.accord{display:flex;gap:14px;align-items:flex-start;margin-top:clamp(24px,3vw,32px);
  border:1px solid var(--ligne);padding:18px}
.accord input{flex:0 0 auto;width:18px;height:18px;margin-top:2px;accent-color:var(--vert)}
.accord p{font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--kaki)}
.accord a{border-bottom:1px dotted var(--kaki)}

.actions-etape{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:clamp(30px,3.6vw,44px)}
.retour{background:none;border:none;cursor:pointer;font-family:var(--sans);font-size:11.5px;letter-spacing:.06em;
  color:var(--kaki);border-bottom:1px dotted var(--kaki);padding:0 0 2px}
.retour:hover{color:var(--vert);border-color:var(--vert)}

/* redirection paiement */
.redirection{text-align:center;padding:clamp(50px,8vw,110px) 0}
.redirection .jauge{width:120px;height:1px;background:var(--ligne);margin:34px auto 0;position:relative;overflow:hidden}
.redirection .jauge::after{content:'';position:absolute;inset:0;background:var(--or);transform:translateX(-100%);animation:glisse 1.1s cubic-bezier(.4,0,.2,1) infinite}
@keyframes glisse{to{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.redirection .jauge::after{animation:none;transform:none}}

/* confirmation */
.numero{border:1px solid var(--vert);padding:clamp(24px,3vw,34px);text-align:center;margin-top:clamp(26px,3vw,36px)}
.numero .lbl{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--kaki)}
.numero .val{font-size:clamp(40px,5.4vw,68px);line-height:1;margin-top:12px;letter-spacing:.02em}
.numero .sous{font-family:var(--sans);font-size:11.5px;line-height:1.6;color:var(--kaki);margin-top:14px}
.suite{list-style:none;margin-top:clamp(28px,3.4vw,40px);border-top:1px solid var(--ligne)}
.suite li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--ligne-f)}
.suite .p{font-size:19px;color:var(--or)}
.suite p{font-size:19px;line-height:1.5}



/* la phrase qui interdit toute lecture commerciale de la bouchée */
.regle-decouverte{font-family:var(--serif);font-size:clamp(21px,2.2vw,29px);line-height:1.3;
  color:var(--vert);margin-top:26px}
.regle-decouverte em{font-style:italic;color:var(--kaki)}

/* Préouverture : le parcours doit être essayable sans qu'on puisse
   croire avoir commandé. L'avertissement se voit, il ne se devine pas. */
.avant-ouverture{border:1px solid var(--sepia);padding:15px 18px;margin-top:30px;
  font-family:var(--sans);font-size:12.5px;line-height:1.65;color:var(--sepia);
  max-width:34em;margin-left:auto;margin-right:auto;text-align:left}
.avant-ouverture b{color:var(--sepia)}

/* Explique un bouton devenu inactif, plutôt que de laisser deviner.
   Le bloc passe en colonnes : la note se place SOUS le compteur,
   sur toute la largeur, sans étirer la ligne. */
/* Le bloc passe en grille : le libellé et le compteur tiennent une
   ligne quoi qu'il arrive, la note occupe la ligne suivante. En flex,
   un libellé long poussait le compteur en dessous. */
.format{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
.format .quoi{min-width:0}
.format-note{grid-column:1/-1;margin-top:12px;padding-top:11px;border-top:1px solid var(--ligne);
  font-family:var(--sans);font-size:11.5px;line-height:1.55;color:var(--sepia)}
