/* ============ les polices ============
   Elles ont DÉMÉNAGÉ dans `public/entete.css`, et c'est la fusion qui
   l'exige : les pages venues du guide ne chargent pas cette feuille-ci.
   Elles déclaraient donc « Plus Jakarta Sans » sans que personne ne la
   serve, et rendaient dans la police du système. Voir le commentaire
   là-bas. */

:root{
  --primary:#2563EB; --primary-d:#1D4ED8; --primary-wash:#EFF4FE;
  --orange:#F97316; --teal:#0D9488; --gold:#D97706; --rouge:#DC2626;
  --ink:#0F172A; --text2:#475569; --text3:#94A3B8;
  --paper:#FFFFFF; --bg:#F8FAFF; --bg2:#F1F5FC; --border:#E2E8F5;
  --r6:6px; --r10:10px; --r16:16px; --r24:24px;
  /* Une seule pile à chasse fixe, et un seul endroit où la changer. Il y en
     avait quatre — dont `.mono` défini DEUX fois, à onze cents lignes
     d'écart, avec deux listes différentes. */
  --mono:ui-monospace,SFMono-Regular,Menlo,"Liberation Mono",monospace;
  --ombre:0 1px 2px rgba(15,23,42,.05), 0 10px 24px -14px rgba(15,23,42,.2);
  /* Une seule famille pour toute l'interface. Les titres se distinguent par
     la graisse et l'approche, pas par un second caractère. */
  --display:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --corps:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--corps);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,.display{font-family:var(--display);letter-spacing:-.02em;text-wrap:balance;margin:0}
h1{font-size:clamp(1.8rem,4.5vw,2.6rem);font-weight:800;line-height:1.05}
h2{font-size:1.3rem;font-weight:700}
h3{font-size:1rem;font-weight:700}
p{margin:0 0 .9em}
a{color:var(--primary-d);text-underline-offset:3px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.8rem}

.contenu{max-width:1100px;margin:0 auto;padding:0 20px 80px}
.etroit{max-width:440px;margin:0 auto;padding:48px 20px}
.pile{display:flex;flex-direction:column;gap:18px}
.rangee{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.grille{display:grid;gap:16px}
/* Un enfant de grille ne descend pas sous sa largeur minimale de contenu,
   sauf si on le lui dit. Sans cette ligne, un tableau large à l'intérieur
   d'une carte pousse la colonne — donc la carte, donc la page — au lieu de
   défiler dans son propre cadre : c'est ce qui faisait glisser « Les
   offres » et « Journal » de deux cents pixels sur un téléphone. */
.grille > *{min-width:0}
.g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}

/* barre */
.barre{background:var(--paper);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:30}
.barre-in{max-width:1100px;margin:0 auto;padding:10px 20px;display:flex;gap:18px;align-items:center}
.marque{margin-right:auto;display:flex;align-items:center;text-decoration:none}
/* Le logo officiel est presque carré : à 30 px de haut il ne pesait plus
   rien dans la barre. On ne touche pas au fichier, on lui donne sa place. */
.logo{height:34px;width:auto;display:block}
.logo-texte{font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:-.03em;color:var(--ink)}

/* Le menu : déplié en barre sur grand écran, replié derrière un bouton
   au-dessous de 900 px. Un <details> plutôt qu'un script, pour qu'il
   s'ouvre même si le JavaScript ne charge pas. */
.menu{position:relative}
.menu > summary{display:none}
.menu > nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.menu nav .sep{width:1px;height:18px;background:var(--border);flex:0 0 auto}
.menu nav form{display:inline-flex;margin:0}
.compteur{color:var(--orange)}

/* `:not(.bouton)` : sans lui, cette règle est plus spécifique que `.bouton`
   et repeint le texte du bouton « Créer un compte » en gris. */
.menu nav a:not(.bouton){color:var(--text2);text-decoration:none;font-size:.9rem;font-weight:600;white-space:nowrap}
.menu nav a:not(.bouton):hover,
.menu nav a:not(.bouton)[aria-current]{color:var(--primary-d)}
.menu nav a.bouton{color:#fff;text-decoration:none}
.menu nav a.bouton.fant{color:var(--ink)}

/* Un groupe de liens dans la barre : l'administration compte cinq
   destinations, elles tiennent sous un seul intitulé qui se déplie. Sur
   téléphone le groupe s'efface et ses liens rejoignent la liste du menu :
   deux volets emboîtés dans un panneau de 250 px, personne n'en veut. */
.deroulant{position:relative}
.deroulant > summary{
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;list-style:none;
  color:var(--text2);font-size:.9rem;font-weight:600;white-space:nowrap;
}
.deroulant > summary::-webkit-details-marker{display:none}
.deroulant > summary:hover,
.deroulant > summary[aria-current]{color:var(--primary-d)}
.deroulant > summary svg{width:15px;height:15px;stroke-width:2;transition:transform .15s}
.deroulant[open] > summary svg{transform:rotate(180deg)}
.deroulant > .volet{
  display:flex;flex-direction:column;gap:1px;
  position:absolute;right:0;top:calc(100% + 12px);min-width:210px;
  background:var(--paper);border:1px solid var(--border);border-radius:var(--r16);
  padding:7px;box-shadow:0 20px 44px -20px rgba(15,23,42,.4);z-index:40;
}
.deroulant > .volet a{padding:9px 11px;border-radius:var(--r10)}
.deroulant > .volet a:hover,
.deroulant > .volet a[aria-current]{background:var(--bg2)}

/* Chrome récent masque le contenu d'un <details> replié avec
   `content-visibility`, que `display` ne peut pas contredire. Sur grand
   écran, où le volet doit rester ouvert en permanence, il faut donc le
   dire à ce pseudo-élément aussi. Les navigateurs qui l'ignorent
   n'appliquent pas la règle, et `display:flex` suffit chez eux. */
@media(min-width:901px){
  .menu::details-content{content-visibility:visible;block-size:auto;overflow:visible}
}

@media(max-width:900px){
  .menu > summary{
    display:grid;place-items:center;width:44px;height:44px;margin-right:-6px;
    border-radius:var(--r10);color:var(--ink);cursor:pointer;list-style:none;
  }
  .menu > summary::-webkit-details-marker{display:none}
  .menu > summary:hover{background:var(--bg2)}
  .menu > summary svg{width:24px;height:24px;stroke-width:1.9}
  .menu > summary .fermer{display:none}
  .menu[open] > summary .ouvrir{display:none}
  .menu[open] > summary .fermer{display:block}

  .menu > nav{display:none}
  .menu[open] > nav{
    display:flex;flex-direction:column;align-items:stretch;gap:1px;
    position:absolute;right:0;top:calc(100% + 9px);width:max(240px,64vw);max-width:300px;
    background:var(--paper);border:1px solid var(--border);border-radius:var(--r16);
    padding:8px;box-shadow:0 20px 44px -20px rgba(15,23,42,.4);z-index:40;
  }
  .menu[open] > nav a:not(.bouton){padding:11px 12px;border-radius:var(--r10);font-size:.95rem}
  .menu[open] > nav a:not(.bouton):hover,
  .menu[open] > nav a:not(.bouton)[aria-current]{background:var(--bg2)}
  .menu[open] > nav .sep{width:auto;height:1px;margin:6px 6px}
  /* Dans le panneau du téléphone, le groupe ne se déplie plus : ses liens
     rejoignent la liste, sous un simple intitulé. Le rendre cliquable
     obligerait à deux gestes pour atteindre un lien, dans un panneau qui
     tient déjà tout entier à l'écran — et le supprimer laisserait une
     liste de quatorze liens où plus rien ne se repère.
     `::details-content` est le pseudo-élément par lequel Chrome masque un
     <details> replié ; sans lui, le volet reste invisible quoi qu'on écrive
     sur ses enfants. */
  /* Ces quatre règles ne valent QUE dans le menu de la barre, et le dire
     est le correctif : écrites sur `.deroulant` seul, elles aplatissaient
     n'importe quel déroulant de n'importe quel écran. Le bouton
     « + Nouveau » du tableau de bord s'ouvrait donc tout seul sur un
     téléphone, cinq liens dépliés en pleine page sous un bouton qui
     n'avait jamais été cliqué. */
  .menu .deroulant > summary{
    display:block;pointer-events:none;cursor:default;
    font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
    color:var(--text3);padding:12px 12px 5px;
  }
  .menu .deroulant > summary svg{display:none}
  .menu .deroulant::details-content{content-visibility:visible;block-size:auto}
  .menu .deroulant > .volet{
    position:static;display:flex;flex-direction:column;gap:1px;
    min-width:0;padding:0;background:none;border:0;box-shadow:none;
  }
  /* Un filet à CHAQUE changement de nature, dans les deux sens : un groupe
     qui suit un lien, et un lien qui suit un groupe. Sans le second,
     « Entrée » se lisait comme la dernière entrée d'« Audience » — alors
     que c'est justement le lien qu'on a sorti des groupes exprès. */
  .menu .deroulant + .deroulant > summary,
  .menu a + .deroulant > summary{border-top:1px solid var(--border);margin-top:6px}
  .menu[open] > nav .deroulant + a:not(.bouton){
    border-top:1px solid var(--border);margin-top:6px;padding-top:14px;
  }
  .menu[open] > nav form{display:block;margin:4px 4px 0}
  .menu[open] > nav .bouton{width:100%;justify-content:center;margin:4px 0 0}
}

/* blocs */
.carte{background:var(--paper);border:1px solid var(--border);border-radius:var(--r16);padding:20px;box-shadow:var(--ombre)}
.carte.plate{box-shadow:none}
.entete{padding:34px 0 22px}
.entete p{color:var(--text2);max-width:60ch;margin:.5em 0 0}
/* Un entête centré. Le paragraphe porte une largeur de lecture (60ch) :
   sans marges automatiques, son TEXTE se centre dans une boîte étroite
   qui reste, elle, collée à gauche. Le titre paraissait alors au milieu
   et son sous-titre décalé — deux alignements pour un même bloc. */
.entete.centre{text-align:center}
.entete.centre p{margin-inline:auto}
.stat{background:var(--paper);border:1px solid var(--border);border-radius:var(--r10);padding:14px 16px}
.stat b{display:block;font-family:var(--display);font-size:1.55rem;font-weight:800;line-height:1}
.stat span{display:block;font-size:.8rem;color:var(--text3);margin-top:5px}
.stat.p b{color:var(--primary)} .stat.v b{color:var(--teal)} .stat.o b{color:var(--orange)}

/* Un indicateur que l'offre ne donne pas : présent, mais visiblement fermé.
   Le retirer ferait croire qu'il n'existe pas ; le montrer grisé dit à la
   fois ce qui manque et ce qu'il faut pour l'avoir. */
.stat.verrou{border-style:dashed;background:transparent}
.stat.verrou b{color:var(--text3);font-size:1.15rem}
.stat.verrou span{color:var(--text3)}

/* La liste des lignes d'une offre : cochées, ou barrées avec leur prix
   d'entrée. Deux colonnes côte à côte sur grand écran, empilées sinon. */
.liste-offre{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.liste-offre li{display:grid;grid-template-columns:18px 1fr;gap:9px;align-items:start;font-size:.88rem}
.liste-offre .oui{color:var(--teal);font-weight:800}
.liste-offre .non{color:var(--text3);font-weight:800}
.liste-offre .hors{color:var(--text3)}
.liste-offre .aide{margin:2px 0 0;font-size:.78rem;line-height:1.45}
.liste-offre .etiquette{
  display:inline-block;background:var(--bg2);border:1px solid var(--border);border-radius:999px;
  padding:1px 8px;font-size:.68rem;font-weight:700;color:var(--text3);margin-left:6px;box-shadow:none;
}

/* formulaires */
label{display:block;font-size:.82rem;font-weight:600;color:var(--text2);margin-bottom:5px}
/**
 * On liste ce qui GARDE son apparence native, pas ce qui la perd.
 *
 * La règle énumérait `text`, `email`, `password`, `url`, `date` — et
 * laissait dehors `number`, `tel` et `search`, qui s'affichaient donc en
 * champ nu du système au milieu de champs dessinés : le port SMTP, le
 * téléphone du profil, la recherche du blog. Le défaut revient à chaque
 * nouveau type de champ ; en prenant le problème par l'autre bout, il ne
 * revient plus.
 */
input:where(:not([type=hidden],[type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=range],[type=file],[type=color])),
select,textarea{
  width:100%;padding:10px 13px;border:1px solid var(--border);border-radius:var(--r10);
  background:var(--paper);color:var(--ink);font:inherit;font-size:.95rem;
}
/* `search` arrive avec sa propre boîte sur WebKit : elle ignore le
   remplissage et coupe le texte. On la neutralise, en gardant la croix
   d'effacement, qui elle sert. */
/* Un champ dix fois plus large que ce qu'on y tape se lit comme une erreur
   de mise en page. La largeur DIT ce qu'on attend. */
input[type=tel]{max-width:24ch}
input[type=search]{appearance:none;-webkit-appearance:none}
input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary);outline-offset:-1px;border-color:transparent}
input[type=file]{font-size:.9rem}
input[type=range]{width:100%;accent-color:var(--primary)}
.champ{margin-bottom:14px}
.aide{font-size:.8rem;color:var(--text3);margin:5px 0 0}
/* Une ligne de lecture, et pas la largeur de l'écran.
   Sur un grand écran, ces paragraphes d'explication couraient jusqu'à 166
   caractères par ligne : l'œil perd le début de la ligne suivante bien
   avant, et la dernière ligne ne portait souvent qu'un mot. 75 caractères
   est la limite admise ; dans une carte étroite la règle ne change rien.
   Le texte centré garde son centre : la boîte est centrée avec lui. */
p.aide{max-width:75ch}
/* Le texte courant de l'espace de travail suit la même règle : un
   paragraphe d'explication dans une carte, ou dans un bandeau de message,
   se lit mal au-delà de 75 caractères par ligne. Les listes en sont
   exclues à dessein — plusieurs d'entre elles sont des rangées, pas de la
   prose, et une largeur maximale les écraserait. */
.carte > p, .msg > p, .contenu > p, .aide > p{max-width:75ch}
p.aide[style*="text-align:center"]{margin-left:auto;margin-right:auto}

/* Un lien SEUL sur sa ligne est une commande, pas un mot dans une phrase.
   « Mot de passe oublié ? » mesurait 16 px de haut, juste sous un bouton
   de 56 : au pouce, on vise l'un et on touche l'autre. Les liens pris dans
   une phrase — « Pas encore de compte ? En créer un » — gardent leur
   hauteur : les agrandir casserait la ligne de texte, et la norme les
   dispense pour cette raison même. */
@media (max-width:620px){
  main p > a:only-child, main .etroit p > a:only-child{
    display:inline-block;padding:11px 8px;margin:-9px -8px;
  }
}

.bouton{display:inline-flex;align-items:center;gap:7px;background:var(--primary);color:#fff;border:0;
  border-radius:var(--r10);padding:11px 18px;font:inherit;font-weight:700;font-size:.92rem;cursor:pointer;text-decoration:none}
.bouton:hover{background:var(--primary-d)}
.bouton:disabled{opacity:.55;cursor:default}
.bouton.fant{background:var(--paper);color:var(--ink);border:1px solid var(--border)}
.bouton.fant:hover{border-color:var(--primary);color:var(--primary-d);background:var(--paper)}
.bouton.danger{background:var(--rouge)}
.bouton.petit{padding:7px 12px;font-size:.85rem}

/* ---- le retour en arrière ----
   Un vrai bouton, et non un lien souligné : c'est le geste le plus
   fréquent de tout l'espace de travail, et il tombait au même rang
   visuel qu'un mot cliquable au milieu d'une phrase. La flèche vit dans
   une pastille : elle donne la direction avant qu'on ait lu le mot, et
   elle recule d'un cheveu au survol. */
.retour{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 7px;
  background:var(--paper);border:1px solid var(--border);border-radius:99px;
  color:var(--ink);font-size:.86rem;font-weight:600;text-decoration:none;
  box-shadow:var(--ombre);cursor:pointer;
  transition:border-color .14s,color .14s,transform .14s}
.retour i{width:24px;height:24px;flex:0 0 auto;border-radius:50%;background:var(--bg2);
  display:grid;place-items:center;font-style:normal;font-size:.9rem;line-height:1;
  transition:background .14s,color .14s}
.retour:hover{border-color:var(--primary);color:var(--primary-d);transform:translateX(-2px)}
.retour:hover i{background:var(--primary);color:#fff}
.retour:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.fil{margin:0 0 16px}

/* messages */
.msg{border-radius:var(--r10);padding:13px 16px;font-size:.92rem;margin-bottom:16px;border:1px solid}
.msg.err{background:#FEF2F2;border-color:#FCA5A5;color:#991B1B}
.msg.ok{background:#ECFDF5;border-color:#6EE7B7;color:#065F46}
.msg.info{background:var(--primary-wash);border-color:#BFDBFE;color:var(--primary-d)}
/* Les deux portes vers un décor. Une carte entièrement cliquable : le
   bouton à l'intérieur est un repère visuel, pas une seconde cible. */
.chemin-carte{
  display:flex;flex-direction:column;gap:9px;padding:20px;
  border:1.5px solid var(--border);border-radius:var(--r16);background:var(--paper);
  color:inherit;text-decoration:none;box-shadow:var(--ombre);
}
.chemin-carte:hover{border-color:var(--primary)}
.chemin-carte:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.chemin-ico{
  width:42px;height:42px;border-radius:var(--r10);background:var(--primary-wash);
  color:var(--primary);display:grid;place-items:center;
}
.chemin-ico svg{width:20px;height:20px}
.chemin-carte h2{font-size:1.05rem}
.chemin-carte p{font-size:.86rem;color:var(--text2);margin:0}
.chemin-carte ul{margin:0;padding-left:18px;font-size:.84rem;color:var(--text2);line-height:1.7}
.chemin-carte ul li::marker{color:var(--primary)}
.chemin-coupe{
  font-size:.78rem;color:var(--rouge);border-top:1px dashed var(--border);
  padding-top:10px;margin-top:auto;
}

/* Ni une erreur ni une information : ce que ça va coûter. L'ambre est la
   seule teinte qui fasse s'arrêter sans faire croire à une panne. */
.msg.attention{background:#FFFBEB;border-color:#FCD34D;color:#92400E}
.msg ul{margin:.4em 0 0;padding-left:1.1em}

.pastille{display:inline-block;font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:999px;letter-spacing:.02em}
.pastille.publie{background:#ECFDF5;color:#047857}
.pastille.en_relecture{background:#FFF7ED;color:#C2410C}
.pastille.brouillon{background:var(--bg2);color:var(--text2)}
.pastille.refuse{background:#FEF2F2;color:#B91C1C}
.pastille.corrections{background:#FEFCE8;color:#A16207}
.pastille.expire,.pastille.archive{background:var(--bg2);color:var(--text3)}

table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:10px 12px;border-top:1px solid var(--border)}
thead th{border-top:0;background:var(--bg2);font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;color:var(--text3);font-weight:700}
.tableau{overflow-x:auto;min-width:0;border:1px solid var(--border);border-radius:var(--r10);background:var(--paper)}

/* studio */
.studio{display:grid;gap:22px;grid-template-columns:minmax(0,1fr) 330px;align-items:start}
@media(max-width:860px){.studio{grid-template-columns:1fr}}
.toile-boite{background:var(--paper);border:1px solid var(--border);border-radius:var(--r16);padding:16px;display:grid;place-items:center;box-shadow:var(--ombre)}
#toile{max-width:100%;height:auto;border-radius:var(--r10);touch-action:none;cursor:grab;background:var(--bg2)}
#toile:active{cursor:grabbing}

.vignette{display:block;background:var(--paper);border:1px solid var(--border);border-radius:var(--r16);overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--ombre)}
/* `height:auto` n'est pas décoratif : sans lui, l'attribut `height` de la
   balise fixe une hauteur DÉFINIE, et `aspect-ratio` est alors ignoré —
   la règle ne s'applique que si l'une des deux dimensions reste libre.
   Une carte avec image gardait donc les proportions du fichier, à côté
   d'une carte sans image qui, elle, respectait le rapport. La grille était
   de travers pour une raison qu'on ne voit pas en lisant la feuille. */
.vignette img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;background:var(--bg2)}
.vignette .bas{padding:12px 14px}
.vignette b{display:block;font-family:var(--display);font-size:.95rem;font-weight:700}
.vignette span{display:block;font-size:.82rem;color:var(--text3);margin-top:2px}

/* ============ le tableau de bord ============ */

.titre-bloc{font-family:var(--display);font-size:.78rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text3);margin:0 0 10px}

/* Ce qui attend une décision, en haut : on ouvre un tableau de bord pour
   savoir quoi faire, pas pour admirer des totaux. */
.files{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-bottom:24px}
.file{display:flex;align-items:center;gap:13px;background:var(--paper);border:1px solid var(--border);
  border-radius:var(--r10);padding:14px 16px;text-decoration:none;color:inherit;box-shadow:var(--ombre)}
.file:hover{border-color:var(--primary)}
.file b{font-family:var(--display);font-size:1.7rem;font-weight:800;line-height:1;color:var(--primary)}
.file span{font-size:.84rem;color:var(--text2);line-height:1.35}
.file.urgent{border-color:#FDBA74;background:#FFF7ED}
.file.urgent b{color:var(--orange)}

.kpis{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
.stat .delta{display:inline-block;margin-top:8px;font-size:.72rem;font-weight:700;
  border-radius:999px;padding:2px 8px}
.delta.haut{color:#047857;background:#ECFDF5}
.delta.bas{color:#B91C1C;background:#FEF2F2}
.delta.plat{color:var(--text3);background:var(--bg2)}

/* Une marche : un intitulé, un chiffre, une barre, un taux de passage.
   Sert à l'entonnoir comme à la répartition des offres. */
.marche{margin-bottom:14px}
.marche:last-child{margin-bottom:0}
.marche .haut{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:.88rem}
.marche .haut b{font-family:var(--display);font-weight:800}
.marche .haut .aide{display:inline;margin-left:6px}
.marche .rail{height:9px;background:var(--bg2);border-radius:999px;overflow:hidden;margin-top:5px}
.marche .rail i{display:block;height:100%;background:var(--primary);border-radius:999px}
.marche .taux{display:block;font-size:.75rem;color:var(--text3);margin-top:4px}

/* ---- l'atelier d'apparence ----
   Les réglages à gauche, l'aperçu à droite et COLLÉ : on règle en regardant,
   sinon on règle à l'aveugle et on enregistre pour voir. */
/* L'atelier d'un décor : réglages à gauche, aperçu collé à droite. */
.reglages{display:grid;gap:0 18px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.reglage{margin-bottom:12px}
.reglage label{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.reglage output{font-family:var(--mono);font-size:.78rem;
  font-weight:700;color:var(--primary-d);background:var(--primary-wash);
  border-radius:999px;padding:1px 8px;font-variant-numeric:tabular-nums}
.reglage input[type=range]{margin-top:2px}
.apercu-boite{position:sticky;top:78px;background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r16);padding:14px;display:grid;place-items:center;gap:8px}
.apercu-boite canvas{border-radius:var(--r10);background:var(--paper);max-width:100%;height:auto;
  box-shadow:0 14px 30px -18px rgba(15,23,42,.5)}
.apercu-boite .aide{margin:0;text-align:center}

/* ---- l'atelier d'un décor : deux colonnes, l'aperçu collé ---- */
.sd{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:24px;align-items:start}
.sd-gauche{min-width:0}

/* Les étapes. Trois onglets numérotés, larges assez pour le pouce. */
.sd-etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.sd-etape{display:flex;align-items:center;gap:10px;text-align:left;
  padding:11px 13px;border:1px solid var(--border);border-radius:var(--r10);
  background:var(--paper);cursor:pointer;font:inherit;color:var(--text2);
  transition:border-color .15s,background .15s,color .15s}
.sd-etape:hover{border-color:var(--primary);color:var(--ink)}
.sd-etape:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.sd-num{flex:none;width:24px;height:24px;border-radius:999px;background:var(--bg2);
  color:var(--text2);display:grid;place-items:center;font-size:.8rem;font-weight:700}
.sd-nom{display:flex;flex-direction:column;line-height:1.25;font-weight:600;font-size:.9rem;min-width:0}
.sd-nom small{font-weight:400;font-size:.75rem;color:var(--text3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-etape.actif{border-color:var(--primary);background:var(--primary-wash);color:var(--ink)}
.sd-etape.actif .sd-num{background:var(--primary);color:#fff}
/* Une étape fermée doit SE VOIR fermée : inerte sans le dire, on clique
   trois fois avant de comprendre qu'il manque quelque chose ailleurs. */
.sd-etape:disabled{opacity:.5;cursor:not-allowed;border-style:dashed}
.sd-etape:disabled:hover{border-color:var(--border);color:var(--text2)}
.sd-verrou-note{margin:-8px 0 16px;color:var(--text2)}

.sd-panneau{margin:0}
/* Les groupes de réglages : un cadre léger, pour savoir où l'un finit. */
.sd-groupe{border:0;border-top:1px solid var(--border);margin:0;padding:14px 0 2px}
.sd-groupe:first-of-type{border-top:0;padding-top:10px}
.sd-groupe legend{padding:0;font-size:.78rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text3);margin-bottom:10px}
.sd-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 18px}
.sd-suite{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.sd-suite:has(> :only-child){justify-content:flex-end}

/* L'aperçu, le bouton et la relecture : les trois choses dont on a besoin
   à tout instant. Collés, donc jamais à chercher. */
.sd-apercu{position:sticky;top:78px;display:grid;gap:12px}
.sd-carte-apercu{padding:14px}
.sd-carte-apercu .apercu-boite{position:static;margin-bottom:12px}
.sd-enregistrer,.sd-connexion{width:100%;justify-content:center}
.sd-note{margin:8px 0 0;text-align:center}
/* ---- la santé du décor, dite pendant qu'on règle ---- */
.sd-sante{padding:14px 16px}
.sd-sante-liste{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.sd-ct{display:flex;gap:8px;padding:8px 11px;border-radius:9px;font-size:.8rem;line-height:1.4}
.sd-ct::before{flex:none;font-weight:700}
.sd-ct.ok{background:#ECFDF5;color:#047857}
.sd-ct.ok::before{content:"✓"}
.sd-ct.alerte{background:#FFF7ED;color:#C2410C}
.sd-ct.alerte::before{content:"!"}
.sd-ct.echec{background:#FEF2F2;color:#B91C1C}
.sd-ct.echec::before{content:"✗"}
/* Avant le premier aperçu : on annonce ce qui SERA vérifié, sans prétendre
   que ce l'est déjà. */
.sd-ct.attente{background:var(--bg2);color:var(--text3)}
.sd-ct.attente::before{content:"·"}

.sd-relecture{padding:0}
.sd-relecture > summary{cursor:pointer;padding:12px 16px;font-weight:600;font-size:.9rem;
  list-style:none;display:flex;align-items:center;gap:8px}
.sd-relecture > summary::-webkit-details-marker{display:none}
.sd-relecture > summary::before{content:"›";display:inline-block;color:var(--text3);
  transition:transform .15s}
.sd-relecture[open] > summary::before{transform:rotate(90deg)}
.sd-relecture ul{margin:0;padding:0 16px 14px 2.1em;color:var(--text2);font-size:.86rem}
.sd-relecture li{margin-bottom:4px}

@media(max-width:1040px){
  /* Une colonne, et l'aperçu passe DEVANT les réglages : il faut le voir
     en tournant les curseurs, pas après avoir fait défiler la page.
     `display:contents` dissout la colonne de droite pour que ses trois
     cartes deviennent des éléments de la grille : sans cela, la liste de
     relecture resterait collée sous l'aperçu, entre lui et les étapes. */
  /* `minmax(0,1fr)` et non `1fr` : une piste `1fr` ne descend pas sous
     le contenu le plus large qu'elle porte, et le Studio débordait donc
     de la page sur un écran de 320 px. La forme longue autorise la
     colonne à se resserrer, et c'est le contenu qui s'adapte. */
  .sd{grid-template-columns:minmax(0,1fr)}
  .sd-apercu{display:contents}
  .sd-carte-apercu{order:-1;position:sticky;top:70px;z-index:5;
    display:grid;grid-template-columns:auto minmax(180px,1fr);
    gap:14px;align-items:center}
  .sd-carte-apercu .apercu-boite{margin:0}
  .sd-carte-apercu canvas{max-height:24vh}
  .sd-relecture{order:99}
}
@media(max-width:620px){
  .sd-etapes{grid-template-columns:1fr}
  .sd-nom small{white-space:normal}
  .sd-suite{gap:8px}
  .sd-suite .bouton{flex:1 1 auto;justify-content:center}
  /* Le bandeau collant se resserre : au-delà d'un cinquième de l'écran, il
     ne montre plus l'aperçu, il cache les réglages qu'on est en train de
     tourner. La vignette rétrécit, le bouton garde sa place. */
  .sd-carte-apercu{padding:10px;gap:10px;grid-template-columns:auto minmax(140px,1fr)}
  .sd-carte-apercu .apercu-boite{padding:6px}
  .sd-carte-apercu canvas{max-height:18vh;max-width:34vw}
  .sd-carte-apercu .apercu-boite .aide{display:none}
  .sd-note{display:none}
}
@media(prefers-reduced-motion:reduce){
  .sd-etape,.sd-relecture > summary::before{transition:none}
}

/* La création de compte est repliée : la page sert d'abord à consulter la
   liste. Le formulaire se déplie quand on en a besoin, et reste ouvert si
   la saisie a été refusée. */
.creer{padding:0;margin-bottom:18px}
.creer > summary{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;cursor:pointer;list-style:none}
.creer > summary::-webkit-details-marker{display:none}
.creer > summary:hover{background:var(--bg2)}
.creer > summary .aide{margin:0}
.creer[open] > summary{border-bottom:1px solid var(--border);background:var(--bg2)}
.formulaire-compte{display:grid;gap:0 16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));padding:18px}

/* La recherche du catalogue : collée à droite quand il reste de la place,
   sur toute la largeur quand la ligne d'onglets a déjà pris la sienne. */
/* La largeur d'une recherche est celle de son INVITE : « Nom, adresse ou
   structure » ne tient pas dans la boîte taillée pour « Chercher un
   titre… », et une invite coupée n'apprend plus rien. */
.chercher{gap:6px;margin-left:auto;flex-wrap:nowrap;--recherche:190px}
/* Un déroulant de filtre prend la largeur de ses libellés, pas celle qui
   reste : étiré sur toute la ligne, « Actives » flottait au milieu d'un
   champ vide de six cents pixels et se lisait comme un champ à remplir. */
.chercher select{width:auto;min-width:150px;flex:none}
.chercher input[type=text],.chercher input[type=search]{width:var(--recherche)}
@media(max-width:640px){
  /* La rangée se replie : deux déroulants de filtre et un bouton ne
     tiennent pas sur 390 px, et `nowrap` les poussait dehors — le journal
     débordait de 246 px, bouton « Filtrer » compris. */
  .chercher{margin-left:0;width:100%;flex-wrap:wrap}
  .chercher select{flex:1 1 150px;min-width:0;width:auto}
  /* `min-width:0` et pas seulement `flex:1` : un `<input>` refuse par
     défaut de descendre sous la largeur de ses vingt caractères, si bien
     que sur un écran de 320 px le bouton « Chercher » sortait de la page
     — et avec lui, toute la page se mettait à défiler de travers. */
  .chercher input[type=text],.chercher input[type=search]{width:auto;flex:1;min-width:0}
}

.bloc-comptes{margin-top:22px}
.bloc-comptes:first-of-type{margin-top:14px}
.titre-liste{font-size:1.02rem;margin:0 0 2px}
.titre-liste + .aide{margin:0 0 10px}
/* La recherche des clients est un titre de section, pas un filtre en bout de
   rangée : elle se place à gauche, sous le titre. */
.chercher-comptes{margin:0 0 10px;margin-left:0;--recherche:270px}
.liste-comptes{list-style:none;padding:0;margin:0}
.liste-comptes li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:9px 0;border-top:1px solid var(--border)}
.liste-comptes li:first-child{border-top:0}
.liste-comptes li > span:first-child{margin-right:auto;min-width:0}
.liste-comptes b{display:block;font-size:.9rem}
.liste-comptes .aide{margin:0;word-break:break-all}
.pastille.formule{background:var(--primary-wash);color:var(--primary-d)}
th.chiffre,td.chiffre{text-align:right}

.histo{display:flex;gap:3px;align-items:flex-end;height:90px;margin-top:12px}
.histo div{flex:1;background:var(--primary);border-radius:3px 3px 0 0;min-height:2px}

footer{border-top:1px solid var(--border);margin-top:50px;padding:22px 0;color:var(--text3);font-size:.85rem}
.pied{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:0}
.pied .logo{height:26px;width:auto;opacity:.85}
/* Le logo du pied court est un retour à l'accueil : 26 px de haut, c'est
   la hauteur de l'image, pas une cible qu'un pouce trouve. */
.pied > a{display:inline-flex;align-items:center;padding:6px 0}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--r6)}
[hidden]{display:none!important}

/* ============ vitrine ============ */

.annonce{background:var(--primary-d);color:#fff;text-align:center;font-size:.83rem;font-weight:600;padding:8px 16px}
.annonce b{background:rgba(255,255,255,.2);border-radius:999px;padding:2px 9px;margin-right:6px}

.heros{position:relative;overflow:hidden}
.heros::before{
  content:"";position:absolute;top:-220px;left:50%;transform:translateX(-50%);
  width:900px;height:520px;border-radius:50%;pointer-events:none;opacity:.07;filter:blur(70px);
  background:radial-gradient(circle,var(--primary) 0%,transparent 70%);
}
/* Le padding horizontal est REPRIS de `.contenu` : une valeur raccourcie
   `padding: 52px 0 64px` l'écrase, et le titre du hero venait alors coller
   au bord de l'écran sur un téléphone. */
.heros-in{position:relative;display:grid;gap:44px;grid-template-columns:1.1fr .9fr;align-items:center;padding:52px 20px 64px}
@media(max-width:900px){.heros-in{grid-template-columns:1fr;gap:32px;padding:34px 20px 44px}}
.etiquette{
  display:inline-flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--border);
  border-radius:999px;padding:6px 13px;font-size:.76rem;font-weight:600;color:var(--text2);box-shadow:var(--ombre);
}
.etiquette b{background:var(--primary);color:#fff;border-radius:999px;padding:2px 8px;font-size:.66rem;letter-spacing:.04em}
.heros h1{font-size:clamp(2.2rem,6vw,3.9rem);line-height:1.02;letter-spacing:-.038em;margin:20px 0 0}
.heros h1 em{font-style:normal;color:var(--primary)}
.heros .accroche{font-size:1.05rem;color:var(--text2);max-width:52ch;margin:18px 0 0;line-height:1.65}
.heros .accroche strong{color:var(--ink)}
.gages{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;padding:0;margin:26px 0 0;font-size:.83rem;font-weight:600;color:var(--text2)}
.gages li::before{content:"✓";color:var(--teal);font-weight:800;margin-right:6px}

/* Le téléphone du hero.
   Il ne contient plus une fausse conversation dessinée en HTML mais une
   capture réelle du Studio en 390 px : la vitrine montre le produit, pas
   une idée du produit. L'image est figée à ses dimensions pour que rien
   ne saute pendant le chargement. */
.hero-tel{position:relative}
.tel{background:#0F172A;border-radius:36px;padding:9px;position:relative;
  box-shadow:0 30px 62px -26px rgba(15,23,42,.55);max-width:286px;margin-left:auto}
@media(max-width:900px){.tel{margin:0 auto}}
.tel-ecran{position:relative;border-radius:28px;overflow:hidden;background:#0B1220;display:block}
.tel-ecran img{width:100%;height:auto;display:block}
.tel-encoche{position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:38%;height:19px;background:#0F172A;border-radius:0 0 13px 13px}
.pastille-flot{position:absolute;background:var(--paper);border:1px solid var(--border);border-radius:var(--r10);
  padding:7px 11px;box-shadow:var(--ombre);font-size:.72rem;font-weight:700}
.pastille-flot b{display:block;font-size:.95rem;color:var(--teal)}

/* Sur un écran étroit, ces pastilles se posaient en travers de l'écran du
   téléphone et cachaient ce qu'elles sont censées appuyer. Elles descendent
   sous lui, côte à côte : ce sont les deux chiffres qui portent l'argument,
   ils restent lisibles au lieu de gêner. */
@media(max-width:640px){
  .hero-tel{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
  .hero-tel .tel{flex:0 0 100%}
  .pastille-flot{position:static!important;inset:auto!important;text-align:center;padding:9px 14px}
}

.bande{background:var(--paper);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:26px 0}
.bande .grille{text-align:center}
.bande b{display:block;font-family:var(--display);font-size:1.85rem;font-weight:800;letter-spacing:-.03em;color:var(--primary)}
.bande span{display:block;font-size:.82rem;color:var(--text3);margin-top:4px}

section.bloc{padding:64px 0}
.tete{max-width:62ch;margin-bottom:30px}
.tete.centre{margin-left:auto;margin-right:auto;text-align:center}
.tete .sur{font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--primary);margin-bottom:9px}
.tete h2{font-size:clamp(1.55rem,3.6vw,2.3rem);line-height:1.1;letter-spacing:-.028em}
.tete h2 em{font-style:normal;color:var(--primary)}
.tete p{color:var(--text2);margin:.7em 0 0;font-size:1rem}

.canal{background:var(--paper);border:1px solid var(--border);border-radius:var(--r16);padding:20px;display:flex;flex-direction:column;gap:9px}
.canal .ico{
  width:40px;height:40px;border-radius:var(--r10);display:grid;place-items:center;
  background:var(--primary-wash);color:var(--primary-d);flex:0 0 auto;
}
.canal .ico svg{width:21px;height:21px;display:block}
.canal.actif .ico{background:var(--primary);color:#fff}
.canal b{font-family:var(--display);font-size:1rem;font-weight:700}
.canal p{color:var(--text2);font-size:.9rem;margin:0;flex:1}
.canal .note{font-size:.78rem;font-weight:700;color:var(--primary);border-top:1px solid var(--border);padding-top:9px}
.canal.actif{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-wash)}

.etape{background:var(--paper);border:1px solid var(--border);border-radius:var(--r16);padding:22px;position:relative}
.etape .n{width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:.95rem;margin-bottom:12px}
.etape b{display:block;font-family:var(--display);font-size:1.02rem;font-weight:700;margin-bottom:6px}
.etape p{color:var(--text2);font-size:.9rem;margin:0}


.avis{background:var(--paper);border:1px solid var(--border);border-radius:var(--r16);padding:20px}
.avis q{display:block;font-size:.94rem;line-height:1.6;color:var(--ink);quotes:"«\00a0" "\00a0»"}
.avis .qui{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.avis .avatar{width:42px;height:42px;border-radius:50%;flex:0 0 auto;display:block}
.avis .qui b{display:block;font-size:.88rem}
.avis .qui span{display:block;font-size:.78rem;color:var(--text3)}
.avis .mesure{margin-left:auto;font-size:.74rem;font-weight:700;color:var(--teal);background:#ECFDF5;
  border-radius:999px;padding:3px 9px;white-space:nowrap}
/* Si la mesure ne tient plus à côté du nom, elle passe à la ligne entière
   plutôt que de se couper en deux mots empilés. */
.avis .qui{flex-wrap:wrap}

/* L'écran des offres : la liste à gauche, l'édition à droite — mais
   seulement quand il y a la place pour deux colonnes. En dessous, elles se
   suivent, comme partout ailleurs dans le produit. */
.offres-deux{align-items:start;grid-template-columns:minmax(240px,320px) 1fr}
@media (max-width:820px){
  .offres-deux{grid-template-columns:1fr}
}


details.qr{background:var(--paper);border:1px solid var(--border);border-radius:var(--r10);overflow:hidden;margin-bottom:9px}
details.qr summary{cursor:pointer;list-style:none;padding:15px 18px;font-family:var(--display);font-weight:700;font-size:.96rem;display:flex;gap:14px}
details.qr summary::-webkit-details-marker{display:none}
details.qr summary::after{content:"+";margin-left:auto;color:var(--text3);font-weight:400;font-size:1.25rem;transition:transform .15s}
details.qr[open] summary::after{transform:rotate(45deg)}
details.qr p{border-top:1px solid var(--border);padding:15px 18px;margin:0;color:var(--text2);font-size:.9rem;line-height:1.65}

.final{background:var(--primary);color:#fff;border-radius:var(--r24);padding:52px 26px;text-align:center;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;inset:0;opacity:.2;pointer-events:none;
  background:radial-gradient(circle at 30% 20%,#60A5FA 0%,transparent 55%)}
.final > *{position:relative}
.final h2{font-size:clamp(1.6rem,4.4vw,2.6rem);line-height:1.08;letter-spacing:-.03em;max-width:20ch;margin:0 auto}
.final p{color:rgba(255,255,255,.85);max-width:46ch;margin:16px auto 0}
.final .bouton{background:#fff;color:var(--primary-d)}
.final .bouton:hover{background:#EFF4FE}
.final .bouton.fant{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.final .bouton.fant:hover{background:rgba(255,255,255,.12);color:#fff}

/* Les cadres sont transparents en leur centre : sur fond blanc, une vignette
   paraît vide. Ce dégradé tient lieu de photo absente et donne à voir la
   forme du décor. */
.vignette img{
  background:linear-gradient(160deg,#DCE7FB 0%,#F1F5FC 45%,#FDE8D5 100%);
}

/* Cinq canaux dans une grille de trois : le dernier resterait orphelin.
   Celui qui existe vraiment occupe la largeur restante. */
.canaux{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
/* Les décors de la vitrine : quatre de front sur grand écran, mais UN SEUL
   par ligne sur téléphone. À deux, la vignette tombe à 170 px et le décor
   ne se voit plus — or c'est lui qu'on vient regarder. */
.vitrines{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

/* Le repli de suppression : un bouton qui ouvre sa propre confirmation. */
details > summary.bouton{cursor:pointer;display:inline-flex}
details > summary.bouton::-webkit-details-marker{display:none}
details[open] > summary.bouton{border-color:var(--rouge);color:var(--rouge)}

/* Le panneau de confirmation n'est pas une carte : c'en est le contraire,
   un avertissement. Lui donner sa propre classe évite aussi qu'un décor
   compte pour deux quand on énumère les cartes. */
.confirmation{
  margin-top:10px;background:var(--paper);border:1px solid var(--rouge);
  border-left-width:3px;border-radius:var(--r10);padding:16px;
}

/* ============ le téléphone ============
   La moitié des invités arrivent depuis un lien WhatsApp, donc depuis un
   écran de 390 px tenu à une main. Trois principes ici : des marges qui
   laissent respirer sans gaspiller la largeur, des cibles de 44 px (la
   pulpe d'un doigt), et des champs à 16 px — en dessous, iOS zoome tout
   seul sur le formulaire et l'utilisateur se retrouve perdu. */

@media(max-width:640px){
  .contenu{padding:0 16px 56px}
  .etroit{padding:30px 16px}
  section.bloc{padding:44px 0}
  .entete{padding:24px 0 16px}
  .tete{margin-bottom:22px}
  .grille{gap:12px}
  .carte{padding:16px}
  .stat{padding:12px 14px}
  .canal,.etape,.avis{padding:16px}
  .final{padding:38px 18px;border-radius:var(--r16)}
  .heros-in{padding:26px 16px 38px}
  .g4{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  footer{margin-top:34px}

  /* cibles tactiles */
  .bouton{min-height:44px;padding:12px 18px}
  .bouton.petit{min-height:38px}
  summary,details.qr summary{min-height:44px}

  /* Un tableau comprimé dans 358 px coupe les titres en colonnes d'une
     lettre. Il garde sa largeur utile et défile dans son cadre : lire en
     glissant vaut mieux que lire à la verticale. */
  .tableau table{min-width:560px}

  /* 16 px : le seuil en dessous duquel iOS zoome à la mise au point */
  /* 16 px, et pas un de moins : en dessous, iOS zoome la page dès qu'on
     touche le champ — et ne dézoome jamais. La même famille que ci-dessus,
     pour que « téléphone » et « nombre » n'y échappent pas. */
  input:where(:not([type=hidden],[type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=range],[type=file],[type=color])),
  select,textarea{font-size:16px;padding:12px 13px}
}

/* Le champ de fichier natif est minuscule et illisible au doigt : on lui
   donne l'allure d'un bouton de la charte. */
input[type=file]{
  width:100%;padding:9px;border:1px dashed var(--border);border-radius:var(--r10);
  background:var(--bg2);font:inherit;font-size:.88rem;color:var(--text2);
}
input[type=file]::file-selector-button{
  font:inherit;font-weight:700;font-size:.88rem;background:var(--primary);color:#fff;
  border:0;border-radius:var(--r6);padding:9px 14px;margin-right:11px;cursor:pointer;
}
input[type=file]::file-selector-button:hover{background:var(--primary-d)}

.tableau{-webkit-overflow-scrolling:touch}

/* Le choix de la photo, dans le Studio. Le champ natif reste en place mais
   invisible : c'est lui qui ouvre la galerie et que le clavier atteint.
   Ce qu'on voit et qu'on touche, c'est le <label>, écrit en français quelle
   que soit la langue du navigateur. */
.pas{font-size:.82rem;font-weight:600;color:var(--text2);margin:0 0 6px}
/* `input[type=file]` est plus spécifique que `.fichier-natif` : sans le
   sélecteur composé, la largeur du champ stylé l'emportait et le champ
   « caché » gardait 100 % de large — assez pour faire déborder la page
   de 130 px vers la droite, invisible mais bien là. */
input[type=file].fichier-natif{
  position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;
  opacity:0;overflow:hidden;clip-path:inset(50%);
}
.bouton.fichier{width:100%;justify-content:center;cursor:pointer}
.bouton.fichier svg{width:19px;height:19px;flex:0 0 auto}
.fichier-natif:focus-visible + .fichier{outline:2px solid var(--primary);outline-offset:2px}

/* ---- le Studio au doigt ----
   Sur un petit écran, la toile et les réglages ne tiennent pas ensemble :
   en faisant défiler pour attraper le zoom, on perdait de vue le badge
   qu'on est en train de régler. La toile reste donc collée sous la barre,
   et sa hauteur est bornée pour laisser la place aux réglages.

   Cette borne est posée par le Studio lui-même (`placeDisponible`), et non
   ici : `max-height` ne rabat qu'un côté, et un badge 9:16 s'affichait
   écrasé — large comme un carré, court comme un carré. */
@media(max-width:860px){
  .studio{gap:14px}
  .toile-boite{position:sticky;top:64px;z-index:10;padding:10px}
  #etat{margin-top:6px!important}
  input[type=range]{height:30px}
}

/* ============ le blog ============

   Une colonne de lecture, et rien autour. La largeur est plafonnée à ~68
   caractères : au-delà, l'œil perd la ligne suivante en revenant à gauche,
   et c'est la raison pour laquelle un journal a des colonnes étroites.
   Le corps monte à 1.05 rem, un cran au-dessus du reste du site : on lit
   ici, on ne remplit pas un formulaire. */

.lecture{max-width:780px}
.lecture .fil{margin:0 0 18px}

.lecture h1{
  font-family:var(--display);font-size:clamp(1.8rem,4.4vw,2.6rem);line-height:1.12;
  letter-spacing:-.03em;margin:0 0 12px;
}
.lecture .signature{font-size:.85rem;color:var(--text3);margin:0 0 22px}
.lecture .chapo-article{
  font-size:1.12rem;line-height:1.6;color:var(--text2);font-weight:500;
  margin:0 0 24px;padding-left:16px;border-left:3px solid var(--primary);
}
.lecture .couverture{
  width:100%;height:auto;display:block;border-radius:var(--r16);
  margin:0 0 28px;background:var(--bg2);
  /* `auto 16/9` : la proportion RÉELLE si le navigateur la connaît, sinon
     celle-ci. Nos images portent leurs dimensions et gardent donc la leur ;
     celles des articles repris du guide, non — le fichier n'est pas chez
     nous et on ne peut pas le mesurer. Sans cette ligne, leur boîte fait
     zéro pixel de haut puis saute à sa taille en arrivant, et l'article
     descend d'un écran sous les yeux de qui le lisait. */
  aspect-ratio:auto 16/9;
}

.corps-article{font-size:1.05rem;line-height:1.75;color:var(--ink)}
.corps-article p{margin:0 0 1.15em}
.corps-article h3{
  font-family:var(--display);font-size:1.35rem;letter-spacing:-.02em;
  margin:1.9em 0 .55em;line-height:1.25;
}
.corps-article h4{font-family:var(--display);font-size:1.08rem;margin:1.5em 0 .45em}
.corps-article ul{margin:0 0 1.15em;padding-left:1.25em}
.corps-article li{margin:0 0 .4em}
.corps-article blockquote{
  margin:1.6em 0;padding:14px 20px;background:var(--bg2);border-radius:var(--r10);
  border-left:3px solid var(--primary);font-size:1.05rem;color:var(--text2);
}
.corps-article code{
  background:var(--bg2);border:1px solid var(--border);border-radius:6px;
  padding:1px 6px;font-size:.9em;
}
.corps-article a{color:var(--primary-d);text-decoration:underline;text-underline-offset:2px}

/* Une vignette d'article n'a pas de format carré imposé : la couverture
   d'un article est un paysage, pas un badge. Sans couverture, la carte
   reste une carte de texte — et ne montre pas un trou gris. */
.vignette.article img{aspect-ratio:16/9}
/* Deux lignes, et pas une de plus.
   Les articles venus du guide n'ont pas de chapô : on prend alors leur
   début, et trois cartes côte à côte affichaient trois paragraphes de
   longueurs différentes — la grille en devenait bancale, et le titre de
   l'article se noyait. Deux lignes suffisent à donner envie ; la suite
   est dans l'article. */
.vignette.article .chapo{
  font-size:.85rem;color:var(--text2);line-height:1.5;margin-top:8px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
}

/* Visible d'un lecteur d'écran, invisible à l'œil : pour un champ dont
   l'étiquette ferait doublon avec le titre juste au-dessus. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Une étiquette d'état dans un tableau : « En ligne » se lit d'un coup
   d'œil, « Brouillon » reste discret. */
.etiquette.ok{border-color:#A7E3D2;background:#ECFDF7;color:#046C4E}

/* ============ la régie e-mail ============ */

/* Trois états de plus, dans la même grammaire que ceux des décors : on
   apprend une fois à lire une pastille, pas deux. */
.pastille.prete{background:#EFF6FF;color:#1D4ED8}
.pastille.envoi{background:#FFF7ED;color:#C2410C}
.pastille.envoye{background:#ECFDF5;color:#047857}

/* Une colonne de rédaction plus large que `.etroit` — on écrit un message,
   pas un formulaire de connexion — mais plus étroite que la pleine page :
   un champ de texte de 1200 px se relit très mal. */
.etroit-large{max-width:860px}

/* L'aperçu du message reprend EXACTEMENT le gabarit de `gabarit_courriel()`.
   Un aperçu qui ne ressemblerait pas au message reçu serait pire qu'aucun
   aperçu : on validerait quelque chose d'autre. */
.apercu-courriel{
  border:1px solid var(--border);border-radius:var(--r16);overflow:hidden;background:#fff;
  max-width:560px;box-shadow:var(--ombre);
}
.apercu-courriel .entete-courriel{
  background:#0F172A;color:#fff;padding:14px 20px;font-weight:800;letter-spacing:.02em;font-size:.86rem;
}
.apercu-courriel .corps-courriel{padding:20px;color:#0F172A}
.apercu-courriel h4{margin:0 0 12px;font-size:1.15rem;line-height:1.3;font-family:var(--display)}
.apercu-courriel p{margin:0 0 12px;line-height:1.6;font-size:.92rem}
.apercu-courriel .faux-bouton{
  display:inline-block;background:#2563EB;color:#fff;font-weight:700;
  padding:11px 20px;border-radius:10px;font-size:.9rem;
}

/* ============ les raccourcis du tableau de bord ============

   Une grille de destinations, rangée dans les mêmes familles que la barre :
   on n'apprend le rangement qu'une fois. Les cartes sont plates — sans
   ombre — parce qu'elles ne sont pas des données, seulement des portes :
   leur donner le même relief que les indicateurs mettrait sur le même plan
   ce qu'on lit et ce sur quoi on clique. */

.raccourcis{align-items:start;gap:14px}
.raccourcis .pas{
  font-family:var(--display);font-size:.68rem;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text3);
}
.raccourci{
  display:block;padding:9px 11px;margin:0 -11px;border-radius:var(--r10);
  text-decoration:none;color:inherit;
}
.raccourci:hover{background:var(--bg2)}
.raccourci b{display:block;font-size:.92rem;font-weight:650;color:var(--ink)}
.raccourci span{display:block;font-size:.79rem;color:var(--text3);margin-top:1px}
.raccourci:hover b{color:var(--primary-d)}

/* Les quatre jauges d'offre : DEUX colonnes fixes, pas un `auto-fit` qui en
   met trois puis une seule en dessous. Une rangée orpheline se lit comme un
   défaut d'affichage. */
.jauges{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:700px){.jauges{grid-template-columns:1fr}}

/* Le détail de l'offre, replié. Le résumé se comporte comme un lien discret :
   il ne doit pas rivaliser avec les jauges qui sont au-dessus. */
.detail-offre{margin-top:16px;border-top:1px solid var(--border);padding-top:14px}
.detail-offre > summary{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
  font-size:.86rem;font-weight:600;color:var(--text2);
}
.detail-offre > summary::-webkit-details-marker{display:none}
.detail-offre > summary:hover{color:var(--primary-d)}
.detail-offre > summary svg{width:15px;height:15px;stroke-width:2;transition:transform .15s}
.detail-offre[open] > summary svg{transform:rotate(180deg)}

/* ============ l'éditeur d'article ============

   La zone d'écriture porte `.corps-article` : elle hérite donc EXACTEMENT
   de la typographie de la page publiée — même taille, même interligne,
   mêmes titres. C'est tout l'intérêt de la chose : ce qu'on voit en
   écrivant est ce que le lecteur verra, à la largeur près. */

.editeur{
  border:1px solid var(--border);border-radius:var(--r10);background:var(--paper);
  overflow:hidden;
}
.editeur:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-wash)}

.editeur-barre{
  display:flex;gap:2px;flex-wrap:wrap;padding:6px;
  border-bottom:1px solid var(--border);background:var(--bg2);
}
.editeur-outil{
  min-width:34px;height:32px;padding:0 9px;border:0;border-radius:7px;cursor:pointer;
  background:transparent;color:var(--text2);font-family:var(--display);
  font-size:.86rem;font-weight:700;line-height:1;
}
.editeur-outil:hover{background:var(--paper);color:var(--primary-d)}
.editeur-outil:active{background:var(--primary-wash)}

.editeur-zone{
  min-height:340px;max-height:70vh;overflow-y:auto;padding:18px 20px;outline:none;
}
/* Les marges du premier et du dernier bloc feraient flotter le texte dans
   un cadre : dans un article elles séparent, dans un champ elles décalent. */
.editeur-zone > :first-child{margin-top:0}
.editeur-zone > :last-child{margin-bottom:0}
/* Le texte d'invite. Il suit `[data-vide]`, que le script pose quand le
   CONTENU est vide — `:empty` serait faux dès le premier `<br>`, et un
   `contenteditable` en garde toujours un. */
.editeur-zone[data-vide] > :first-child::before{
  content:"Racontez votre campagne : ce que vous avez fait, les chiffres, et ce qui n’a pas marché.";
  color:var(--text3);pointer-events:none;
}

/* Les intitulés écrits sont plus larges qu'un pictogramme : la barre les
   laisse respirer, et passe à la ligne plutôt que de déborder. */
.editeur-outil{padding:0 11px;font-size:.82rem}

/* ============ les images d'article ============

   Elles occupent la largeur de la colonne de lecture et respirent : une
   image collée au texte se lit comme une pièce jointe, pas comme une
   illustration. La légende est plus petite et grise — c'est un commentaire
   de l'image, pas la suite de l'article. */

/* Une figure plus étroite que la colonne se CENTRE : collée à gauche, elle
   ressemble à un défaut de mise en page plutôt qu'à une intention. */
.image-article{margin:1.9em auto;padding:0;max-width:100%}
.image-article img{
  width:100%;height:auto;display:block;border-radius:var(--r10);background:var(--bg2);
  /* Même raison que la couverture : une image du guide n'a pas de
     dimensions à annoncer, et le texte sauterait à son arrivée. */
  aspect-ratio:auto 3/2;
}
@media(max-width:640px){
  /* Sur un écran de téléphone, la colonne fait déjà 92 vw : y appliquer
     « 40 % » donnerait un timbre-poste illisible. La largeur choisie est
     une intention de mise en page de grand écran, pas une taille absolue. */
  .image-article{width:auto !important}
}
.image-article figcaption{
  margin-top:8px;font-size:.84rem;color:var(--text3);line-height:1.5;
}

/* Dans l'éditeur, la figure n'est pas modifiable — on ne tape pas DANS une
   image — mais elle doit se laisser sélectionner et supprimer comme un
   bloc. Le liseré au survol dit qu'elle est un objet, pas du texte. */
.editeur-zone .image-article{cursor:pointer;outline:1px solid transparent;border-radius:var(--r10)}
.editeur-zone .image-article:hover{outline-color:var(--border)}
.editeur-zone .image-article.choisie{outline:2px solid var(--primary);outline-offset:2px}

/* ---- la barre de l'image choisie ---- */
.editeur-image{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;
  border-bottom:1px solid var(--border);background:var(--primary-wash);
}
.editeur-image-titre{font-family:var(--display);font-weight:800;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.04em;color:var(--primary-d)}
.editeur-image-taille{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--text2)}
.editeur-image-taille input[type=range]{width:130px;accent-color:var(--primary)}
.editeur-image-taille output{font-variant-numeric:tabular-nums;min-width:44px;font-weight:700}
@media(max-width:640px){ .editeur-image-taille input[type=range]{width:90px} }

/* ============ la facture ============

   Un document, pas un écran de produit : elle s'imprime, et ce qui n'a
   rien à faire sur un papier disparaît alors. */
.facture{
  background:var(--paper);border:1px solid var(--border);border-radius:var(--r16);
  padding:28px;box-shadow:var(--ombre);
}
.facture-tete{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:2px solid var(--ink);margin-bottom:20px}
.facture-marque{font-family:var(--display);font-weight:800;font-size:1.25rem;margin:0}
.facture-numero{font-family:var(--mono);
  font-size:1.05rem;font-weight:700;margin:0}
.facture-parties{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;margin-bottom:22px}
.facture-etiquette{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text3);margin:0 0 4px;font-weight:700}
.facture tfoot th{font-size:1rem;border-top:2px solid var(--ink)}
.lien-bouton{background:none;border:0;padding:0;font:inherit;color:var(--primary);
  cursor:pointer;text-decoration:underline}

@media print{
  .barre, footer, .sans-impression{display:none !important}
  body{background:#fff}
  .facture{border:0;box-shadow:none;padding:0}
  .contenu{padding:0;max-width:none}
}

/* Un bloc de code qu'on recopie dans un terminal : il doit se sélectionner
   d'un geste et ne jamais déborder la page. */
.bloc-code{
  margin:0;padding:12px 14px;border-radius:var(--r10);overflow-x:auto;
  background:var(--bg2);border:1px solid var(--border);
  font-family:var(--mono);font-size:.82rem;
  line-height:1.65;white-space:pre;color:var(--ink);
}

/* ---- ce que l'éditeur a à dire ---- */
.editeur-note{
  margin:0;padding:8px 12px;font-size:.84rem;line-height:1.45;
  background:var(--bg2);color:var(--text2);border-bottom:1px solid var(--border);
}
.editeur-note.erreur{background:#FEF2F2;color:#B91C1C}

/* ---- le recadrage, en grand ---- */
.recadrage{
  position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(12,18,32,.72);
}
.recadrage-boite{
  background:var(--paper);border-radius:var(--r16);padding:16px;
  width:min(760px,100%);max-height:92vh;overflow:auto;box-shadow:0 24px 60px -20px rgba(15,23,42,.55);
}
.recadrage-aide{margin:0 0 12px;font-size:.86rem;color:var(--text2);line-height:1.5}
.recadrage-scene{
  position:relative;display:block;margin:0 auto;max-width:100%;
  background:var(--bg2);border-radius:var(--r10);overflow:hidden;
  touch-action:none;user-select:none;line-height:0;cursor:crosshair;
}
.recadrage-scene img{display:block;width:100%;height:auto;pointer-events:none}
/* Ce qui reste dehors est assombri par une ombre géante plutôt que par
   quatre volets : un seul élément à déplacer, aucun à désaligner. */
.recadrage-cadre{
  position:absolute;box-sizing:border-box;border:1px solid #fff;cursor:move;
  box-shadow:0 0 0 9999px rgba(12,18,32,.55);
}
.recadrage-cadre span{
  position:absolute;width:18px;height:18px;background:#fff;border-radius:4px;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.recadrage-cadre span[data-coin=ho]{left:-9px;top:-9px;cursor:nwse-resize}
.recadrage-cadre span[data-coin=hd]{right:-9px;top:-9px;cursor:nesw-resize}
.recadrage-cadre span[data-coin=bo]{left:-9px;bottom:-9px;cursor:nesw-resize}
.recadrage-cadre span[data-coin=bd]{right:-9px;bottom:-9px;cursor:nwse-resize}
.recadrage-pieds{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.recadrage-ratios{display:flex;gap:6px;flex-wrap:wrap}
.recadrage-ratios .bouton.actif{
  background:var(--primary);color:#fff;border-color:var(--primary);
}

/* L'attente pendant l'envoi. Une photo de cinq mégaoctets met du temps sur
   une connexion de Lomé : sans repère, le bouton se reclique. */
.editeur-attente{
  margin:1.5em 0;padding:14px 16px;border-radius:var(--r10);
  background:var(--bg2);color:var(--text2);font-size:.9rem;
}
.editeur-attente.erreur{background:#FEF2F2;color:#B91C1C}

/* ------------------------------------------------------------------ */
/* Le carnet d'adresses                                                */
/* ------------------------------------------------------------------ */

/* Les listes en pastilles plutôt qu'en menu déroulant : on en a trois ou
   quatre, on veut les compter d'un coup d'œil, et on clique dessus dix
   fois par session. Un déroulant cacherait derrière un clic ce qui est la
   navigation principale de l'écran. */
.etiquettes{flex-wrap:wrap;gap:8px;align-items:center}
.etiquettes .etiquette{text-decoration:none;transition:border-color .12s,color .12s}
.etiquettes .etiquette:hover{border-color:var(--primary);color:var(--primary-d)}
.etiquettes .etiquette.active{border-color:var(--primary);color:var(--primary-d);background:var(--primary-wash)}
.etiquettes .etiquette.active b{background:var(--primary-d)}
.etiquette.ajout{
  border-style:dashed;box-shadow:none;background:transparent;cursor:pointer;
  font:inherit;font-size:.76rem;font-weight:600;color:var(--text2);
}
.etiquette.ajout:hover{border-color:var(--primary);color:var(--primary-d)}

/* Un bloc replié n'a pas de décor propre : il emprunte celui de la carte
   où il s'ouvre, ou en est une. Le seul repère nécessaire est qu'il
   commence quelque part — d'où le filet quand il n'est pas déjà une carte. */
.bloc-repli:not(.carte){border-top:1px solid var(--border);padding-top:14px;margin-top:4px}
.bloc-repli .bouton{margin-top:4px}

/* Une grille de cases plutôt qu'une colonne : dix listes en colonne
   pousseraient le bouton « Enregistrer » hors de l'écran, et on ne
   l'enregistrerait pas. */
.champ-titre{display:block;font-weight:600;font-size:.88rem;margin-bottom:7px}
.cases{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.case{
  display:flex;align-items:center;gap:9px;padding:9px 12px;cursor:pointer;
  border:1px solid var(--border);border-radius:var(--r10);background:var(--paper);font-size:.9rem;
}
.case:hover{border-color:var(--primary)}
.case input{width:auto;margin:0;flex:none}
.case span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* La colonne des cases à cocher : aussi étroite que possible, parce que
   chaque pixel qu'elle prend est pris à l'adresse, qui est ce qu'on lit. */
th.mince,td.mince{width:1%;padding-right:0}
th.mince input,td.mince input{width:auto;margin:0}

/* Une ligne archivée reste lisible mais cesse de réclamer l'attention :
   elle est là pour l'historique, pas pour la campagne de demain. */
tr.pale td{opacity:.62}
tr.pale td a{color:inherit}

/* La barre d'actions groupées vit sous la table, où se trouve le pouce
   après avoir coché en descendant. */
.barre-lot{
  border:1px solid var(--border);border-radius:var(--r10);
  background:var(--bg2);padding:10px 13px;
}
/* Un bouton fantôme dangereux garde le fond blanc et prend la couleur du
   risque : rouge plein, il attirerait le clic qu'il cherche à retenir. */
.bouton.fant.danger{background:var(--paper);color:var(--rouge);border-color:#F3C2C2}
.bouton.fant.danger:hover{border-color:var(--rouge);color:var(--rouge);background:#FEF2F2}

/* ------------------------------------------------------------------ */
/* Le décor cité par un article, et le partage                         */
/* ------------------------------------------------------------------ */

/* La carte du décor n'est pas une carte comme les autres : elle porte
   l'image du cadre, qui est verticale. En colonne sur téléphone, côte à
   côte dès qu'il y a la place — une image verticale posée en pleine
   largeur pousserait le bouton hors de l'écran. */
.decor-lie{
  display:grid;grid-template-columns:minmax(0,220px) 1fr;gap:20px;align-items:center;
  margin:30px 0 0;padding:18px;border:1px solid var(--border);border-radius:var(--r16);
  background:linear-gradient(180deg,var(--primary-wash),var(--paper) 65%);
}
@media(max-width:660px){.decor-lie{grid-template-columns:1fr;gap:14px}}
.decor-lie-image{display:block;line-height:0;border-radius:var(--r10);overflow:hidden;box-shadow:var(--ombre)}
.decor-lie-image img{width:100%;height:auto;display:block}
.decor-lie-sur{
  margin:0 0 2px;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;
  font-weight:800;color:var(--primary-d);
}
.decor-lie-texte h3{margin:0 0 4px;font-size:1.35rem;line-height:1.15}
.decor-lie-texte .aide{margin:0}

/* Le partage : des liens qui ressemblent à des boutons, jamais les vrais
   boutons officiels — ceux-là pistent chaque lecteur de la page, qu'on
   clique ou non, et pèsent sur une connexion lente. */
.partage{margin:34px 0 0;padding-top:22px;border-top:1px solid var(--border)}
.partage h2{font-size:1rem;margin:0 0 12px;color:var(--text2)}
.partage-liens{display:flex;flex-wrap:wrap;gap:8px}
.partage-lien{
  display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;
  border:1px solid var(--border);background:var(--paper);color:var(--ink);
  font:inherit;font-size:.87rem;font-weight:700;text-decoration:none;cursor:pointer;
  transition:border-color .12s,color .12s,background .12s;
}
.partage-lien:hover{border-color:var(--primary);color:var(--primary-d);background:var(--primary-wash)}
/* Une pastille de la couleur du service : elle se reconnaît de loin, sans
   charger la moindre icône depuis un serveur tiers. */
.partage-lien::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--text3)}
.partage-lien.wa::before{background:#25D366}
.partage-lien.fb::before{background:#1877F2}
.partage-lien.x::before{background:#0F172A}
.partage-lien.tg::before{background:#2AABEE}
.partage-lien.ml::before{background:var(--orange)}
.partage-lien.copie::before,.partage-lien.natif::before{background:var(--primary)}
.partage-lien.fait{border-color:#6EE7B7;background:#ECFDF5;color:#065F46}
.partage-lien.fait::before{background:#059669}

/* ------------------------------------------------------------------ */
/* L'aperçu d'un partage, sur l'écran de référencement                 */
/* ------------------------------------------------------------------ */

/* La forme d'une carte WhatsApp : l'image en haut, le texte dessous, et
   le domaine en petit. Ce n'est pas une capture d'écran mais la vraie
   image et les vrais textes — l'intérêt est justement de voir ce qui
   partira, pas une maquette de ce qui pourrait partir. */
.apercu-partage{
  max-width:400px;border:1px solid var(--border);border-radius:var(--r10);
  overflow:hidden;background:var(--paper);box-shadow:var(--ombre);
}
.apercu-partage img{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;display:block;background:var(--bg2)}
.apercu-texte{padding:10px 13px}
.apercu-texte b{display:block;font-size:.92rem;line-height:1.3}
.apercu-texte span{display:block;font-size:.83rem;color:var(--text2);margin-top:3px;line-height:1.45}
.apercu-texte .apercu-hote{color:var(--text3);font-size:.78rem;margin-top:6px}

/* ============ le pied de page de la vitrine ============
   IL A DÉMÉNAGÉ, et c'est la fusion qui l'exige.

   Le même pied ferme maintenant toutes les pages publiques, y compris
   celles venues du guide — qui, elles, ne chargent pas cette feuille
   mais `guide.css`. Ses règles étaient donc invisibles là où on venait
   de le poser : quatre colonnes de liens sans mise en forme, empilées
   nues sous la page.

   Il vit dans `public/entete.css`, avec la barre, pour la même raison
   qu'elle : c'est la seule feuille servie SOUS LES DEUX. Ses couleurs y
   sont écrites en clair, faute de pouvoir dépendre des variables de
   l'une ou de l'autre. */

/* ============ le choix d'une couleur ============
   Une liste et une pipette, côte à côte, pour une seule valeur : la liste
   porte la charte et les teintes relevées sur le cadre, la pipette couvre
   tout le reste. Seule la liste est envoyée — voir la vue. */
.couleur-duo{display:flex;gap:8px;align-items:center}
.couleur-duo select{flex:1;min-width:0}
.pipette{flex:none;width:46px;height:40px;padding:0;border:1px solid var(--border);
  border-radius:var(--r10);background:var(--paper);cursor:pointer}
/* Sans ces trois lignes, les navigateurs cernent la pastille d'un liseré
   gris qu'aucune autre commande du formulaire ne porte. */
.pipette::-webkit-color-swatch-wrapper{padding:4px}
.pipette::-webkit-color-swatch{border:0;border-radius:6px}
.pipette::-moz-color-swatch{border:0;border-radius:6px}
.pipette:hover{border-color:var(--primary)}
.pipette:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
@media (max-width:620px){
  /* Au pouce, et non à la souris. */
  .pipette{width:52px;height:44px}
  /* Les puces de format et les commandes en forme de lien sont de VRAIS
     boutons : 23 et 29 px de haut, on les rate d'un doigt. Le rembourrage
     vertical suffit — leur dessin ne change pas. */
  .fmt-pas,.lien-bouton{min-height:40px;padding-top:9px;padding-bottom:9px}
}

/* ============ le retour en tête de page ============
   Il flotte au-dessus du contenu, mais du côté du pouce et jamais sur
   le texte : à droite, à la hauteur où la main tient le téléphone. */
.haut-de-page{position:fixed;right:18px;bottom:18px;z-index:40;
  width:46px;height:46px;border-radius:999px;border:1px solid var(--border);
  background:var(--paper);color:var(--primary);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--ombre);cursor:pointer;
  transition:transform .18s,box-shadow .18s,background .18s}
.haut-de-page svg{width:20px;height:20px}
.haut-de-page:hover{background:var(--primary);color:#fff;
  transform:translateY(-2px);box-shadow:0 6px 20px -6px rgba(37,99,235,.5)}
.haut-de-page:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.haut-de-page:active{transform:translateY(0)}

@media (max-width:620px){
  /* Plus bas et plus petit : le pouce y arrive sans traverser l'écran,
     et le bouton ne recouvre pas la dernière ligne du pied de page. */
  .haut-de-page{right:14px;bottom:14px;width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){
  .haut-de-page{transition:none}
  .haut-de-page:hover{transform:none}
}

/* ============ l'invitation aux notifications ============
   Elle partage ce bas d'écran avec le retour en tête : elle à gauche, lui
   à droite, et ils ne se croisent jamais sur un écran large. Sur
   téléphone, où elle prend toute la largeur, c'est elle qui le pousse
   vers le haut — le bouton reste atteignable au pouce, et la carte ne
   recouvre rien de ce qu'on lisait. */
.push-invite{position:fixed;left:18px;bottom:18px;z-index:39;width:380px;
  max-width:calc(100vw - 36px);background:var(--paper);border:1px solid var(--border);
  border-radius:var(--r16);padding:16px 16px 14px;
  box-shadow:0 24px 48px rgba(15,23,42,.16),0 8px 16px rgba(15,23,42,.07);
  opacity:0;transform:translateY(10px);transition:opacity .22s ease,transform .22s ease}
.push-invite.vue{opacity:1;transform:none}
.push-invite-h{display:flex;gap:12px;align-items:flex-start;padding-right:22px}
.push-invite-ico{flex:none;width:40px;height:40px;border-radius:12px;display:grid;
  place-items:center;background:var(--primary-wash);color:var(--primary)}
.push-invite b{display:block;font-size:.98rem;color:var(--ink);line-height:1.3}
.push-invite p{margin:4px 0 0;font-size:.84rem;line-height:1.5;color:var(--text2)}
.push-invite-b{display:flex;gap:8px;margin-top:14px}
.push-invite-b .bouton{flex:1 1 auto;justify-content:center;padding:10px 12px;
  font-size:.86rem;white-space:nowrap}
.push-invite-b .bouton.fant{flex:0 0 auto;padding:10px 14px}
.push-invite-x{position:absolute;top:8px;right:8px;width:28px;height:28px;border:0;
  border-radius:8px;background:transparent;color:var(--text3);cursor:pointer;
  display:grid;place-items:center;padding:0}
.push-invite-x svg{width:16px;height:16px}
.push-invite-x:hover{background:var(--bg2);color:var(--text2)}
.push-invite-x:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

@media (max-width:560px){
  .push-invite{left:12px;right:12px;bottom:12px;width:auto;max-width:none}
  /* La hauteur est posée par le script au moment où la carte s'ouvre :
     elle dépend du texte, qui dépend de la largeur de l'écran. */
  body.push-invite-ouverte .haut-de-page{bottom:calc(26px + var(--push-invite-h,180px))}
}
@media (prefers-reduced-motion:reduce){
  .push-invite{transition:none}
}

/* ---- le panneau de calques ---- */
.sd-calques{margin-bottom:6px}
.sd-liste-calques{list-style:none;margin:0;padding:0;border:1px solid var(--border);
  border-radius:var(--r10);overflow:hidden}
.sd-calque{display:flex;align-items:center;gap:9px;padding:8px 11px;font-size:.84rem;
  border-bottom:1px solid var(--border);cursor:pointer;background:var(--paper);
  transition:background .12s}
.sd-calque:last-child{border-bottom:0}
.sd-calque:hover{background:var(--bg2)}
.sd-calque.sel{background:var(--primary-wash);box-shadow:inset 3px 0 0 var(--primary);font-weight:700}
/* Un calque éteint : le nom s'estompe, comme il s'estompe sur l'aperçu.
   L'œil barré seul se remarque quand on le cherche ; la ligne pâle se
   remarque quand on ne le cherche pas. */
.sd-calque.masque .sd-cal-nom,.sd-calque.masque .sd-cal-eti{opacity:.45;
  text-decoration:line-through;text-decoration-color:var(--text3)}

/* Les trois objets qu'on ne peut ni ajouter ni retirer : hachurés, pour que
   leur nature se voie sans avoir à lire l'étiquette. */
.sd-calque.fixe{color:var(--text2);cursor:default;
  background:repeating-linear-gradient(45deg,transparent 0 6px,rgba(148,163,184,.06) 6px 12px)}
.sd-calque.fixe:hover{background:repeating-linear-gradient(45deg,var(--bg2) 0 6px,rgba(148,163,184,.1) 6px 12px)}
/* L'œil du calque : ouvert quand il se voit, barré quand il est masqué.
   Une cible de 22 px pour un dessin de 16 : sous le pouce, un bouton de la
   taille exacte de son icône se manque une fois sur trois. */
.sd-cal-oeil{border:0;background:none;padding:0;width:22px;height:22px;flex:0 0 auto;
  display:grid;place-items:center;cursor:pointer;color:var(--text3);
  border-radius:6px;transition:color .12s,background .12s}
.sd-cal-oeil:hover{color:var(--ink);background:var(--bg2)}
.sd-cal-oeil:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
/* Masqué : l'œil pâlit avec le calque qu'il éteint. */
.sd-cal-oeil[aria-pressed=true]{color:var(--text3);opacity:.45}
.sd-cal-oeil[aria-pressed=true]:hover{opacity:1}
/* Les trois objets fixes : le même dessin, mais rien à cliquer. */
.sd-cal-oeil.muet{cursor:default;opacity:.35}
.sd-cal-oeil.muet:hover{background:none;color:var(--text3)}
.sd-cal-nom{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-cal-eti{font-size:.7rem;color:var(--text3);flex:none}
.sd-libre{border-top:1px solid var(--border);padding-top:14px}

/* ---- la galerie de modèles ---- */
.sd-galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:11px}
.sd-modele{display:flex;flex-direction:column;gap:5px;padding:6px;border:1px solid var(--border);
  border-radius:var(--r10);background:var(--paper);cursor:pointer;font:inherit;text-align:left;
  transition:border-color .15s,box-shadow .15s}
.sd-modele:hover{border-color:var(--primary)}
.sd-modele:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.sd-modele.actif{border-color:var(--primary);border-width:2px;padding:5px;
  box-shadow:0 8px 18px -12px rgba(37,99,235,.7)}
/* Hauteur FIXE, forme réelle à l'intérieur : les vignettes vont du carré au
   9:16, et suivre chaque ratio donnerait une grille en dents de scie. La
   boîte est régulière, l'image y garde ses proportions. Sa hauteur est
   nommée une fois (`--h`) parce que l'image doit la reprendre : un
   pourcentage se résout contre la RANGÉE de la grille, qui grandit avec son
   contenu — donc contre l'image elle-même, et la contrainte ne contraignait
   rien. */
.sd-modele-image{--h:92px;position:relative;display:grid;place-items:center;height:var(--h);
  border-radius:7px;overflow:hidden;background:var(--bg2)}
/* `height:100%` et non `auto` : un `max-height:100%` ne résout à rien dans
   une zone de grille de hauteur indéfinie, si bien que l'image dépassait sa
   boîte — 181 px dans 92 — et `overflow:hidden` la rognait. L'aperçu d'un
   modèle 9:16 montrait donc une bande large : exactement ce qu'il devait
   aider à distinguer. Le commentaire ci-dessus décrivait l'intention ; ces
   deux valeurs l'appliquent. */
.sd-modele-image img{width:100%;height:var(--h);object-fit:contain;display:block}
.sd-modele-vide{font-size:.7rem;color:var(--text3);text-align:center;line-height:1.4}
.sd-modele-ratio{position:absolute;right:4px;top:4px;background:rgba(15,23,42,.78);color:#fff;
  font-size:.6rem;font-weight:700;padding:1px 5px;border-radius:4px}
.sd-modele-nom{font-size:.78rem;font-weight:600;line-height:1.25}
.sd-modele-nature{font-size:.66rem;color:var(--text3)}
/* Le menu reste là, pour le clavier et pour qui n'a pas de script — mais
   il n'a plus à occuper la place d'un champ principal. */
.sd-champ-disposition{margin-top:10px}
.sd-champ-disposition label{font-size:.8rem;color:var(--text2)}

/* ---- les formats d'un même décor ---- */
.formats-decor{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.format-choix{display:inline-flex;align-items:baseline;gap:6px;padding:6px 13px;
  border:1px solid var(--border);border-radius:999px;background:var(--paper);
  color:var(--text2);text-decoration:none;font-size:.86rem;font-weight:600;
  transition:border-color .15s,background .15s,color .15s}
.format-choix span{font-size:.72rem;font-weight:400;color:var(--text3)}
.format-choix:hover{border-color:var(--primary);color:var(--ink)}
.format-choix.actif{background:var(--primary);border-color:var(--primary);color:#fff}
.format-choix.actif span{color:rgba(255,255,255,.72)}

/* ---- les déclinaisons, dans l'atelier ---- */
.sd-formats{margin-bottom:14px}
.fmt-rangee{display:flex;gap:6px;flex-wrap:wrap}
.fmt-pas{padding:4px 10px;border-radius:999px;border:1px dashed var(--border);
  background:var(--paper);color:var(--text3);font:inherit;font-size:.73rem;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s}
.fmt-pas:hover{border-color:var(--primary);color:var(--primary)}
.fmt-pas:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* Le format du décor lui-même : plein, et non retirable. */
.fmt-pas.natif{background:var(--primary);border:1px solid var(--primary);color:#fff;
  font-weight:700;cursor:default}
.fmt-pas.declinee{border-style:solid;border-color:var(--primary);
  background:var(--primary-wash);color:var(--primary-d);font-weight:600}

/* ============ les canaux de diffusion ============
   Une carte par canal : ce qu'il est, où il écrit, et combien de
   personnes s'y trouvent. Le reste — brancher, vérifier — tient dans des
   formulaires ordinaires, parce que ce sont des formulaires ordinaires. */
.cx{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
/* Deux formulaires en carte, côte à côte, n'ont pas le même contenu : la
   grille les étire à la même hauteur, et leur bouton tombait là où leur
   texte s'arrêtait — celui de Telegram flottait cent pixels au-dessus de
   celui de WhatsApp, et la paire se lisait comme une erreur de mise en
   page. Le bouton se pose donc au bas de sa carte. */
.grille > form.carte{display:flex;flex-direction:column}
.grille > form.carte > .bouton{margin-top:auto;align-self:flex-start}

.cx-carte{background:var(--paper);border:1px solid var(--border);border-radius:var(--r16);
  padding:18px;box-shadow:var(--ombre);display:flex;flex-direction:column;gap:12px}
.cx-tete{display:flex;align-items:center;gap:11px}
.cx-rond{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;
  color:#fff;font-weight:800;font-size:.9rem}
.cx-telegram{background:#229ED9}
.cx-whatsapp{background:#25D366}
.cx-web{background:var(--primary)}
.cx-ml{background:var(--ink,#0F172A)}
.cx-nom{font-weight:700;line-height:1.25}
.cx-nom span{display:block;font-weight:400;font-size:.82rem;color:var(--text2)}
.cx-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.cx-liste li{display:flex;align-items:center;gap:9px;padding:9px 11px;background:var(--bg2);
  border-radius:var(--r10);font-size:.88rem}
.cx-liste b{margin-left:auto;font-variant-numeric:tabular-nums}
.cx-liste form{display:flex}
.cx-genre{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text2);
  border:1px solid var(--border);background:var(--paper);border-radius:99px;padding:1px 8px;flex:0 0 auto}
.etat{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  border-radius:99px;padding:3px 10px;margin-left:auto;flex:0 0 auto}
.etat.on{background:#DCFCE7;color:#166534}
.etat.att{background:#FEF3C7;color:#92400E}
.etat.off{background:var(--bg2);color:var(--text2)}

/* Le tableau des capacités : ce que chaque canal sait faire, sans détour.
   `.tab` et non `.tableau` : celle-là désigne depuis toujours le CADRE
   qui fait défiler un tableau trop large, et lui donner en plus les
   règles d'un tableau rapetissait le texte de tous les autres écrans. */
.tab{width:100%;border-collapse:collapse;font-size:.88rem}
.tab th{text-align:left;font-weight:600;color:var(--text2);padding:7px 10px}
.tab td{padding:9px 10px;border-top:1px solid var(--border)}
.tab td.oui{color:#166534}
.tab td.non{color:#B91C1C}

/* ============ la frise des rappels ============
   Le temps se lit de haut en bas, et l'on voit d'un coup ce qui est
   passé, ce qui vient, et ce qui attend son heure. */
.fr{position:relative;padding-left:30px}
.fr:before{content:'';position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:var(--border)}
.fr-e{position:relative;padding:13px 15px;background:var(--paper);border:1px solid var(--border);
  border-radius:var(--r10);margin-bottom:11px}
.fr-e:before{content:'';position:absolute;left:-25px;top:20px;width:11px;height:11px;border-radius:50%;
  background:var(--paper);border:2px solid var(--border)}
.fr-e.fait:before{background:var(--teal,#0D9488);border-color:var(--teal,#0D9488)}
.fr-e.suiv:before{background:var(--primary);border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(37,99,235,.16)}
.fr-q{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text2);font-weight:700}
.fr-t{font-weight:700;margin:2px 0 3px}
.puces{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:7px}
/* `flex:0 0 auto` n'est pas décoratif : un élément de boîte flexible
   rétrécit par défaut, et dans la colonne « Canaux » de la régie — qui
   tient sur une ligne — la troisième pastille étranglait les suivantes
   jusqu'à ce que leur texte en déborde. Quand la place manque, c'est le
   tableau qui défile de côté. La bordure transparente, elle, donne à
   toutes la même hauteur que `.puce.plus`, seule à en porter une. */
.puce{font-size:.72rem;font-weight:600;border-radius:99px;padding:2px 9px;color:#fff;
  flex:0 0 auto;white-space:nowrap;line-height:1.45;border:1px solid transparent}
.puce.telegram{background:#229ED9}
.puce.whatsapp{background:#25D366}
.puce.mail{background:var(--ink,#0F172A)}
.puce.web{background:var(--primary)}

/* ============ la régie, écran par écran ============
   Trois besoins qui ne se ressemblent pas : reconnaître une campagne dans
   une liste, comprendre un échec, et écrire pour plusieurs canaux à la
   fois. Chacun a sa poignée de classes, et aucune n'en réinvente une
   existante — les pastilles de canal, par exemple, sont les `.puce` de la
   frise des rappels. */

/* Au-delà de trois canaux, on compte plutôt que d'empiler. */
.puce.plus{background:var(--bg2);color:var(--text2);border-color:var(--border)}

/* Un envoi qui n'a pas abouti se voit, même de loin. */
.pastille.echec{background:#FEF2F2;color:#B91C1C}
.pastille.attente{background:#FEF3C7;color:#92400E}
.pastille.desabonne,.pastille.archive{background:var(--bg2);color:var(--text2)}

/* Supprimer, mais pas d'un seul clic : le repli demande de confirmer.
   Un panneau flottant plutôt qu'un dépliage, parce qu'une ligne de
   tableau qui grandit décale tout ce qui est en dessous. */
.sup{display:inline-block;position:relative}
.sup>summary{list-style:none;cursor:pointer}
.sup>summary::-webkit-details-marker{display:none}
/* Dans une liste, le repli n'offre qu'un bouton : il reste à côté de
   « Ouvrir » au lieu de le repousser sur une autre ligne. La phrase qui
   explique ce qu'on perd tient sur la fiche, où il y a la place. */
.sup-p{margin-top:6px;text-align:right}
.sup-p.mot{width:225px;margin-left:auto;text-align:left;white-space:normal;background:var(--bg2);
  border:1px solid var(--border);border-radius:var(--r10);padding:11px}
.sup-p.mot p{margin:0 0 10px;font-size:.8rem;line-height:1.45;color:var(--text2)}

/* La liste des échecs : le motif compte autant que le nombre. */
.ech{width:100%;border-collapse:collapse;font-size:.86rem}
.ech th{text-align:left;font-weight:600;color:var(--text2);padding:7px 10px;font-size:.8rem}
.ech td{padding:10px;border-top:1px solid var(--border);vertical-align:top}
.ech .motif{color:#B91C1C;font-size:.82rem;line-height:1.45}
/* `.mono` est défini plus haut, une seule fois. */

/* ============ l'atelier d'écriture ============
   Réglages à gauche, aperçu collé à droite : on écrit en voyant ce que
   la personne recevra, plutôt qu'en imaginant. */
.ec{display:grid;grid-template-columns:1fr 400px;gap:18px;align-items:start}
.ec-etapes{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.ec-etape{flex:1;min-width:150px;display:flex;align-items:center;gap:10px;padding:12px 14px;
  background:var(--paper);border:1px solid var(--border);border-radius:var(--r10);
  font-size:.88rem;text-decoration:none;color:inherit}
.ec-etape.actif{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.ec-etape i{width:24px;height:24px;border-radius:50%;background:var(--bg2);color:var(--text2);
  display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.78rem;flex:0 0 auto}
.ec-etape.actif i{background:var(--primary);color:#fff}
.ec-etape b{display:block;font-weight:600}
.ec-etape span{display:block;font-size:.76rem;color:var(--text2)}

/* Une carte par canal : on voit la portée AVANT de cocher. */
.ec-canaux{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.ec-cn{position:relative;display:flex;flex-direction:column;gap:7px;padding:13px;margin:0;
  border:1px solid var(--border);border-radius:var(--r10);background:var(--paper);cursor:pointer;
  font-weight:400}
/* `.on` est posée par le script, `:has()` par la feuille : les vieux
   navigateurs d'Android n'ont pas le second, et une case cochée qui n'a
   pas l'air cochée fait recommencer tout le formulaire. */
.ec-cn.on,.ec-cn:has(input:checked){border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.ec-cn:has(input:focus-visible){outline:2px solid var(--primary);outline-offset:2px}
.ec-cn input{position:absolute;opacity:0;width:0;height:0}
.ec-cn-h{display:flex;align-items:center;gap:9px}
.ec-cn-h b{font-weight:600;font-size:.9rem;line-height:1.2}
.ec-cn-h b span{display:block;font-weight:400;font-size:.76rem;color:var(--text2)}
.ec-rond{width:30px;height:30px;border-radius:9px;font-size:.68rem}
.ec-coche{margin-left:auto;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--border);
  display:grid;place-items:center;color:transparent;font-size:.7rem;flex:0 0 auto;line-height:1}
.ec-cn.on .ec-coche,.ec-cn:has(input:checked) .ec-coche{background:var(--primary);
  border-color:var(--primary);color:#fff}
.ec-cn-n{font-size:1.15rem;font-weight:800;font-variant-numeric:tabular-nums}
.ec-cn-n small{font-weight:400;font-size:.76rem;color:var(--text2);margin-left:4px}
.ec-cn-note{font-size:.76rem;line-height:1.4;color:var(--text2)}
.ec-cn-note.attention{color:#C2410C}
.ec-cn-note.stop{color:#B91C1C}

/* L'aperçu : ce que la personne recevra, pas une approximation. */
.ap-onglets{display:flex;gap:5px;margin-bottom:10px;flex-wrap:wrap}
.ap-o{border:1px solid var(--border);background:var(--paper);border-radius:99px;
  padding:4px 11px;font-size:.79rem;font-weight:600;color:var(--text2);cursor:pointer}
.ap-o.actif{background:var(--primary);border-color:var(--primary);color:#fff}
.tel{background:#17212B;border-radius:18px;padding:13px 11px;min-height:190px}
.bulle{background:#182533;border:1px solid #253544;border-radius:12px;padding:10px 12px;
  font-size:.84rem;line-height:1.5;color:#E9EDEF;overflow-wrap:anywhere}
.bulle b{color:#fff}
.bulle .bt{display:block;text-align:center;margin:9px -12px -10px;padding:9px;
  border-top:1px solid rgba(255,255,255,.14);color:#53BDEB;font-weight:600}
.bulle .h{opacity:.5;font-size:.7rem;text-align:right;margin-top:5px}
.notif{background:#F1F5F9;border-radius:14px;padding:12px;min-height:150px;display:grid;place-items:center}
.notif-c{background:#fff;border-radius:12px;padding:11px 13px;width:100%;
  box-shadow:0 4px 14px rgba(15,23,42,.13);font-size:.82rem;line-height:1.4;color:#0F172A;
  overflow-wrap:anywhere}
.notif-c .src{display:flex;align-items:center;gap:6px;color:#64748B;font-size:.72rem;margin-bottom:5px}
.notif-c .src i{width:14px;height:14px;border-radius:4px;background:var(--primary);font-style:normal}
.notif-c b{display:block;margin-bottom:2px}
.notif-c .coupe{color:#94A3B8}
.ml-p{background:#F1F5F9;border-radius:14px;padding:11px;min-height:190px}
.ml-c{background:#fff;border:1px solid #E2E8F0;border-radius:11px;overflow:hidden;font-size:.8rem;
  color:#0F172A}
.ml-t{background:#0F172A;color:#fff;padding:10px 13px;font-weight:800;font-size:.72rem;letter-spacing:.02em}
.ml-b{padding:13px;line-height:1.5;overflow-wrap:anywhere}
.ml-b h4{margin:0 0 8px;font-size:.92rem}
.ml-b p{margin:0 0 8px}
.ml-bt{display:inline-block;background:var(--primary);color:#fff;border-radius:8px;padding:8px 15px;
  font-weight:700;margin-top:6px;font-size:.78rem}
.ml-f{border-top:1px solid #E2E8F0;padding:9px 13px;color:#64748B;font-size:.66rem;line-height:1.4}
.wa-p{background:#ECE5DD;border-radius:14px;padding:13px;min-height:190px}
.wa-c{background:#fff;border-radius:10px;padding:10px 12px;font-size:.84rem;line-height:1.5;
  color:#111B21;box-shadow:0 1px 1px rgba(11,20,26,.13);overflow-wrap:anywhere}
.wa-c .h{opacity:.45;font-size:.7rem;text-align:right;margin-top:5px}

/* Tant que rien n'est saisi, l'aperçu montre l'exemple — en plus pâle,
   pour qu'on ne le prenne pas pour son propre texte. */
.ec-apercu.exemple .bulle,.ec-apercu.exemple .notif-c,.ec-apercu.exemple .ml-b,
.ec-apercu.exemple .wa-c{opacity:.55}

/* La portée, canal par canal, avant d'envoyer. */
.pt{display:flex;flex-direction:column;gap:7px;font-size:.86rem}
.pt-l{display:flex;align-items:center;gap:9px}
.pt-l i{width:8px;height:8px;border-radius:50%;flex:0 0 auto;font-style:normal}
.pt-l b{margin-left:auto;font-variant-numeric:tabular-nums}
.pt-tot{border-top:1px dashed var(--border);padding-top:8px;margin-top:2px;font-weight:700}

/* Sous 980 px l'aperçu passe dessous : coller une colonne qui occupe
   toute la largeur ne colle rien du tout. */
@media (max-width:980px){
  .ec{grid-template-columns:1fr}
  .ec-apercu{position:static!important}
}

/* ============ les rapports ============
   Un écran qu'on lit, qu'on imprime, et dont on transmet le PDF. D'où des
   nombres alignés au chiffre près et des colonnes qui ne bougent pas d'une
   ligne à l'autre : `tabular-nums` n'est pas cosmétique ici, c'est ce qui
   permet de comparer deux lignes d'un coup d'œil. */
.filtres-rapport{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;padding:14px 16px}
.puce-p{display:inline-block;font-size:.8rem;font-weight:600;border:1px solid var(--border);
  background:var(--paper);color:var(--text2);border-radius:99px;padding:5px 13px;text-decoration:none;
  white-space:nowrap}
.puce-p:hover{border-color:var(--primary);color:var(--primary-d)}
.puce-p.on{background:var(--primary);border-color:var(--primary);color:#fff}
.rap-champ{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;color:var(--text2);
  font-weight:600}
.rap-champ input,.rap-champ select{margin:0;padding:6px 10px;font-size:.84rem;border-radius:var(--r10);
  border:1px solid var(--border);background:var(--paper);color:var(--ink);font-family:inherit;
  max-width:230px}

/* La répartition des canaux : une seule barre, un segment par canal, et
   deux pixels de fond entre eux — sans quoi deux couleurs voisines se
   lisent comme une seule. Chaque segment est ÉTIQUETÉ dans la légende :
   la couleur ne porte jamais seule l'identité d'un canal. */
.rap-barre{display:flex;gap:2px;height:22px;margin:14px 0 9px;border-radius:6px;overflow:hidden}
.rap-barre i{display:block;height:100%;min-width:3px}
.rap-legende{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.8rem;color:var(--text2)}
.rap-legende span{display:flex;align-items:center;gap:7px;white-space:nowrap}
.pois{width:9px;height:9px;border-radius:2px;display:block;flex:0 0 auto}
.c-mail{background:var(--ink)} .c-web{background:var(--primary)}
.c-telegram{background:#229ED9} .c-whatsapp{background:#25D366}
.c-plus{background:var(--text3)}

.rap-preuve{display:block;font-size:.72rem;color:var(--text3);margin-top:3px}
.rap-brut{display:block;font-family:var(--mono);font-size:.72rem;
  color:var(--text3);margin-top:2px;overflow-wrap:anywhere}
.rap-vide{color:var(--text3)}
.rap-mortel{color:#B91C1C;font-weight:600;font-size:.82rem}
.rap-repris{color:#047857;font-weight:600;font-size:.82rem}
.rap-haut{color:#047857;font-weight:700} .rap-bas{color:#B91C1C;font-weight:700}
.rap-moment{display:inline-block;font-size:.72rem;font-weight:800;color:var(--primary-d);
  background:var(--primary-wash);border-radius:6px;padding:1px 7px;margin-right:6px}
.rap-quand{display:block;font-size:.75rem;color:var(--text3);margin-top:2px}
.rap-total td{font-weight:800;background:var(--bg2);border-top:2px solid var(--border)}

/* Les nombres à droite, la colonne qui les porte aussi : un en-tête
   centré au-dessus de chiffres alignés à droite donne un tableau qui
   tremble. */
table th.num,table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table td.num.rouge{color:#B91C1C;font-weight:700}
table td.num small{font-weight:400;margin-left:6px;color:var(--text3)}

@media (max-width:640px){
  .rap-champ{width:100%}
  .rap-champ input,.rap-champ select{flex:1 1 auto;max-width:none}
}

/* ==================================================================
   « À qui j'écris » : la règle à gauche, ce qu'elle donne à droite
   ================================================================== */

/* Deux colonnes égales sur grand écran, l'une sous l'autre en dessous :
   la liste des segments et son résultat se lisent dans cet ordre, et
   c'est aussi l'ordre du geste. */
.grille-seg{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}

.seg-liste{display:flex;flex-direction:column;gap:8px}

/* Une ligne de segment est un lien, pas un bouton radio : elle recharge
   l'écran avec ses nombres du moment. Un formulaire aurait fait croire
   qu'on choisit quelque chose qui s'enregistre. */
.seg{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:center;
  padding:12px 14px;border:1px solid var(--border);border-radius:var(--r10);
  background:var(--paper);color:inherit;text-decoration:none}
.seg:hover{border-color:var(--primary);background:var(--primary-wash)}
.seg.on{border-color:var(--primary);background:var(--primary-wash);box-shadow:inset 3px 0 0 var(--primary)}
.seg-nom{font-weight:700;font-size:.92rem}
.seg-aide{grid-column:1;font-size:.78rem;color:var(--text3)}
.seg-n{grid-column:2;grid-row:1 / span 2;text-align:right;white-space:nowrap}
.seg-n b{display:block;font-family:var(--display);font-size:1.3rem;font-weight:800;line-height:1.1}
.seg-n small{display:block;font-size:.72rem;color:var(--text3)}

.seg-phrase{font-size:1rem;line-height:1.55;margin:12px 0 0}
.seg-canaux{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.seg-canal{flex:1 1 140px;border:1px solid var(--border);border-radius:var(--r10);
  padding:11px 13px;background:var(--bg2)}
.seg-canal b{display:block;font-family:var(--display);font-size:1.3rem;font-weight:800;margin-top:6px}

@media (max-width:860px){
  .grille-seg{grid-template-columns:1fr}
}

/* Le bloc du sponsor, sous le badge : l'organisateur revend une audience,
   pas une bannière. Discret par construction — un sponsor qui fait fuir
   les invités détruit exactement ce qu'il a acheté. */
.sponsor-bloc{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px;
  padding:12px 16px;border:1px solid var(--border);border-radius:var(--r10);background:var(--bg2)}
.sponsor-mot{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);
  font-weight:700}
.sponsor-bloc img{max-height:38px;max-width:150px;border-radius:6px}
.sponsor-bloc a,.sponsor-bloc b{font-weight:700;font-size:.95rem}

/* ==================================================================
   Le sondage du lendemain : trois questions, et pas dix
   ================================================================== */
.sond-bloc{border:0;padding:0;margin:0 0 20px}
.sond-bloc legend{padding:0;font-weight:700;font-size:.95rem;margin-bottom:10px}
.sond-notes,.sond-ouinon{display:flex;gap:8px}

/* Le bouton radio lui-même est masqué, jamais retiré : c'est lui qui porte
   le nom, la valeur et le focus clavier. La pastille n'est que sa peau. */
.sond-note{flex:1 1 0;position:relative}
.sond-note input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.sond-note span{display:grid;place-items:center;height:46px;border-radius:var(--r10);
  border:1px solid var(--border);background:var(--paper);font-weight:700;color:var(--text2)}
.sond-note input:checked + span{background:var(--primary);border-color:var(--primary);color:#fff}
.sond-note input:focus-visible + span{outline:2px solid var(--primary);outline-offset:2px}

/* Les mots libres du sondage. Une colonne de citations, pas un tableau :
   ce sont des phrases, et un tableau les ferait lire comme des données. */
.sond-mots{display:grid;gap:10px}
.sond-mot{margin:0;padding:12px 14px;border-left:3px solid var(--primary);
  background:var(--bg2);border-radius:0 var(--r10) var(--r10) 0}
.sond-mot p{margin:0;font-size:.92rem;line-height:1.5}
.sond-mot footer{margin-top:6px;font-size:.74rem;color:var(--text3);font-weight:600}

/* ============ le tableau de bord ============
   Deux onglets : ce qu'on fait, et ce qu'on mesure. L'écran d'avant
   rangeait les deux ensemble sur 1 760 px de haut, si bien qu'on
   traversait cinq blocs d'analyse pour atteindre la file de relecture,
   vingt fois par jour. */

.bord{padding-top:26px}

/* ---- le rythme vertical ----

   Mesuré au navigateur : l'intertitre « LES 7 DERNIERS JOURS » touchait
   ses cartes à dix pixels, et la rangée de cartes touchait la rangée
   suivante à ZÉRO. Trois blocs qui parlent de trois choses différentes se
   lisaient comme un seul.

   L'espacement vit ici et non en styles écrits dans les gabarits : une
   marge posée à la main dans une vue se perd au premier bloc qu'on
   intercale, et c'est exactement ce qui venait d'arriver. */
.bord > .carte,
.bord > .grille,
.bord > .bord-pastilles,
.bord > .tableau{margin-bottom:24px}
.bord > :last-child{margin-bottom:0}

/* Un intertitre appartient à ce qui le SUIT : beaucoup d'air au-dessus,
   peu en dessous. L'inverse le fait flotter entre deux blocs sans qu'on
   sache lequel il annonce. */
.bord > .titre-bloc,
.bord > .bord-tete{margin:30px 0 12px}
.bord > .bord-onglets + .titre-bloc,
.bord > .bord-onglets + .bord-tete,
.bord > .bord-barre + .titre-bloc{margin-top:0}

/* La barre de commande : qui je suis, ce que je cherche, ce que je crée. */
.bord-barre{display:flex;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.bord-qui{flex:1 1 220px;min-width:0}
.bord-qui h1{margin:0;font-family:var(--display);font-size:1.65rem;letter-spacing:-.03em}
.bord-qui p{margin:2px 0 0;font-size:.86rem;color:var(--text2)}

.bord-chercher{flex:0 1 420px;min-width:220px;position:relative;display:flex;align-items:center}
.bord-chercher svg{position:absolute;left:12px;width:18px;height:18px;color:var(--text2);
  pointer-events:none}
.bord-chercher input[type=search]{
  width:100%;padding:11px 42px 11px 38px;border:1px solid var(--border);
  border-radius:var(--r10);background:var(--paper);font-size:.92rem;color:var(--ink);
}
.bord-chercher kbd{
  position:absolute;right:10px;padding:2px 7px;border:1px solid var(--border);
  border-radius:6px;background:var(--bg2);font-family:var(--mono);
  font-size:.75rem;color:var(--text2);pointer-events:none;
}
/* Le raccourci ne sert plus à rien une fois le champ saisi : l'indice
   s'efface pour ne pas flotter par-dessus le texte qu'on tape. */
.bord-chercher input[type=search]:focus ~ kbd{display:none}

/* « + Nouveau » emprunte l'allure d'un bouton, pas d'un lien de menu. */
.bord-nouveau > summary{
  padding:10px 16px;border-radius:var(--r10);background:var(--primary);
  color:#fff;font-size:.9rem;font-weight:700;
}
.bord-nouveau > summary:hover{background:var(--primary-d);color:#fff}
.bord-nouveau[open] > summary{background:var(--primary-d);color:#fff}

/* Les onglets. Une ligne, et la barre bleue dessous : c'est la forme que
   tout le monde connaît, et elle dit « il y a autre chose à côté ». */
.bord-onglets{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:20px}
.bord-onglets a{
  display:inline-flex;align-items:center;gap:7px;padding:10px 16px 12px;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  color:var(--text2);font-size:.92rem;font-weight:600;text-decoration:none;
}
.bord-onglets a:hover{color:var(--ink)}
.bord-onglets a[aria-current]{color:var(--ink);font-weight:700;border-bottom-color:var(--primary)}
.bord-compte{
  padding:1px 8px;border-radius:999px;background:var(--rouge);
  color:#fff;font-size:.75rem;font-weight:700;
}

/* Un intertitre et sa glose, sur la même ligne. */
.bord-tete{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.bord-tete h2{margin:0;font-family:var(--display);font-size:1.05rem}
.bord-tete > a{margin-left:auto;color:var(--primary-d);font-weight:600}

/* Sur la page de recherche, la note DIT le résultat — l'adresse du décor,
   l'e-mail du compte. Serrée dans la colonne d'auteur d'une file, elle se
   coupait juste avant ce qui la distingue de la ligne d'au-dessus. */
.bord-resultats .bord-auteur{width:auto;flex:0 1 auto;margin-left:auto;
  max-width:46%;text-align:right}

/* La file : une ligne par objet, le bouton au bout. */
.bord-file{padding:16px 18px}
.bord-ligne{
  display:flex;align-items:center;gap:14px;padding:11px 0;
  border-top:1px solid var(--bg2);
}
.bord-ligne:first-of-type{border-top:0}
.bord-titre{flex:1 1 auto;min-width:0;font-size:.92rem;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bord-auteur,.bord-age{flex:none;font-size:.84rem;color:var(--text2)}
.bord-auteur{width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bord-age{width:104px}
/* Ce qui attend depuis trop longtemps se voit SANS lire la date. */
.bord-age.vieux{color:var(--rouge);font-weight:700}
.bord-vide{margin:6px 0}
.bord-calme{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--bg2);
  font-size:.84rem;color:var(--text2)}
.bord-calme a{font-weight:600}

/* La pastille de genre : elle porte la couleur de sa famille, la même
   d'un bloc à l'autre, pour qu'on la reconnaisse sans la lire. */
.bord-genre{
  flex:none;display:inline-block;padding:3px 9px;border-radius:999px;
  font-size:.75rem;font-weight:700;background:var(--bg2);color:var(--text2);
}
.bord-genre.decor{background:var(--primary-wash);color:var(--primary-d)}
.bord-genre.article{background:#FFF4E8;color:#9A4A0B}
.bord-genre.regie,.bord-genre.campagne{background:#E6F6F3;color:#0B6157}
.bord-genre.compte{background:#FDECEC;color:#B91C1C}
.bord-genre.lien,.bord-genre.liste{background:#F3EEFE;color:#5B21B6}

/* « Reprendre » : quatre cartes, et leur genre en tête. */
.bord-reprendre{margin-bottom:22px}
.bord-reprendre a{display:flex;flex-direction:column;gap:5px;text-decoration:none;color:inherit}
.bord-reprendre a:hover{border-color:var(--primary)}
.bord-reprendre .bord-genre{align-self:flex-start}
.bord-reprendre b{font-size:.92rem;line-height:1.3}

/* « Où aller » : des pastilles, et leur chiffre. */
.bord-pastilles{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.bord-pastilles a{
  display:inline-flex;align-items:center;gap:7px;padding:9px 15px;
  background:var(--paper);border:1px solid var(--border);border-radius:999px;
  font-size:.86rem;font-weight:600;color:var(--ink);text-decoration:none;
  transition:border-color .15s,background .15s;
}
.bord-pastilles a:hover{border-color:var(--primary);background:var(--bg2)}
.bord-pastilles a span{color:var(--text2);font-weight:500;font-variant-numeric:tabular-nums}

/* La semaine, en une bande : elle dit si quelque chose a bougé, et mène
   au détail. Cinq cartes de statistiques coupaient l'écran d'action en
   deux pour dire la même chose. */
.bord-semaine{display:block;padding:14px 20px 16px;text-decoration:none;color:inherit}
.bord-semaine:hover{border-color:var(--primary)}
.bord-semaine-haut{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:10px}
.bord-semaine-titre{font-size:.78rem;font-weight:700;color:var(--text2);
  text-transform:uppercase;letter-spacing:.08em}
.bord-semaine-tout{font-size:.84rem;font-weight:700;color:var(--primary-d)}
/* Cinq colonnes, et les libellés ENTIERS. Sur une seule ligne, « Présences
   scannées » et « Nouveaux comptes » se coupaient au milieu d'un mot : un
   tableau de bord qui abrège les mots qu'il compte ne se lit plus. */
.bord-mesures{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.bord-mesure{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 7px;min-width:0}
.bord-mesure b{font-family:var(--display);font-size:1.2rem}
.bord-mesure > span:first-of-type{font-size:.82rem;color:var(--text2)}

@media(max-width:1000px){
  .bord-mesures{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .bord-qui{flex-basis:100%}
  .bord-chercher{flex-basis:100%}
}
@media(max-width:620px){
  .bord-mesures{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  /* Sur un téléphone, l'auteur et l'âge passent SOUS le titre : trois
     colonnes de 100 px chacune ne laissaient au titre que deux mots. */
  .bord-ligne{flex-wrap:wrap;gap:8px 12px}
  .bord-ligne .bord-titre{flex-basis:100%;order:2;white-space:normal}
  .bord-ligne .bord-genre{order:1}
  .bord-ligne .bord-auteur,.bord-ligne .bord-age{order:3;width:auto}
  .bord-ligne .bouton{order:4;margin-left:auto}
}

/* ================================================================
   LA PAGE D'ACCUEIL : LE SOCLE, L'APPLICATION, LES OFFRES COURTES
   ================================================================ */

/* ---- Les chiffres de l'écosystème, sous le héros ----------------
   Le même panneau que sur la page d'accueil du guide, aux mêmes
   mesures : trois colonnes séparées par un filet d'un pixel, le
   chiffre en bleu, son libellé en dessous. Le filet n'est pas dessiné,
   c'est le fond de la grille qu'on voit par un `gap` d'un pixel. Un
   trait qu'on ne dessine pas ne se décale jamais, et les coins arrondis
   le coupent proprement grâce à l'`overflow`.

   Le rembourrage du haut est plus généreux que les 60 px du guide : ici
   le héros finit sans aucune marge basse (`padding-bottom:0`, pour que
   le téléphone de la maquette descende jusqu'au bord), et le panneau se
   serait collé dessous. */
/* AUCUN fond propre : la section laisse passer celui de la page. Un
   blanc posé ici découpait une bande entre le héros et la suite, et le
   panneau se mettait à flotter dans un rectangle qui n'appartenait à
   rien. C'est le panneau qui est blanc, pas la section. */
.socle-chiffres{padding:78px 0 70px}
.socle-chiffres .contenu{padding-bottom:0}
.socle-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:var(--r24);overflow:hidden;
  box-shadow:0 1px 3px rgba(15,23,42,.07),0 1px 2px rgba(15,23,42,.04)}
.socle{background:var(--paper);padding:32px 28px;text-align:center;transition:background .2s}
.socle:hover{background:var(--bg)}
.socle b{display:block;font-family:var(--display);font-size:2.5rem;font-weight:800;
  color:var(--primary);line-height:1;margin-bottom:6px;letter-spacing:-.02em}
.socle span{font-size:13px;color:var(--text2);font-weight:500}
@media(max-width:900px){.socle-grille{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){
  .socle-chiffres{padding:52px 0 48px}
  .socle-grille{grid-template-columns:1fr}
  .socle{padding:22px 18px}
  .socle b{font-size:2rem}
}

/* ---- L'application, mise en avant -----------------------------
   Les visuels et le texte viennent de la page « L'Application » du
   guide, et les images sont les MÊMES fichiers, aux mêmes adresses :
   deux copies du même téléphone qui se mettraient à diverger seraient
   pires que la requête qu'on économiserait.

   Les images portent leur `width` et leur `height` : le bloc garde sa
   place même quand elles n'arrivent pas, et la page ne saute pas
   au moment où elles finissent par arriver. */
.bloc-app{background:var(--bg2)}
.app-duo{display:grid;grid-template-columns:minmax(0,470px) 1fr;gap:48px;align-items:center}
.app-tels{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:500px}
.app-tels img{width:auto;max-width:100%;height:auto}
.app-tel-un{max-height:500px;position:relative;z-index:2;
  filter:drop-shadow(0 26px 46px rgba(2,10,40,.26))}
.app-tel-cote{max-height:410px;position:relative;z-index:1;margin-right:-58px;
  transform:rotate(-6deg);filter:drop-shadow(0 16px 32px rgba(2,10,40,.18))}
.app-atouts{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px;list-style:none;padding:0}
.app-atouts li{display:inline-flex;align-items:center;gap:7px;background:var(--paper);
  border:1px solid var(--border);border-radius:999px;padding:7px 14px;
  font-size:.82rem;font-weight:500;color:var(--text2)}
.app-atouts li::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--primary);flex:0 0 auto}
.app-magasins{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.app-mag{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;
  border-radius:12px;padding:9px 16px;text-decoration:none}
.app-mag small{display:block;font-size:.62rem;opacity:.65;line-height:1.1}
.app-mag strong{display:block;font-size:.88rem;line-height:1.2}
.app-mag svg{width:17px;height:17px;flex:0 0 auto}
/* « Bientôt » : un bloc gris, et PAS un lien. Un bouton qui mène au
   magasin d'un système où l'application n'existe pas encore coûte une
   mauvaise note à qui l'y cherche. */
.app-mag.gris{background:var(--paper);color:var(--text3);border:1px solid var(--border)}
@media(max-width:860px){
  .app-duo{grid-template-columns:1fr;gap:34px}
  .app-tels{min-height:0}
  .app-tel-un{max-height:440px}
  .app-tel-cote{max-height:360px;margin-right:-50px}
}
@media(max-width:520px){
  .app-tel-un{max-height:330px}
  .app-tel-cote{max-height:270px;margin-right:-40px}
}


/* Le lien vers la page complète, à côté des deux magasins : qui veut
   les quatre niveaux d'explorateur et les six fonctionnalités les y
   trouve, sans que la page d'accueil les recopie. */
.lien-app{font-size:.86rem;font-weight:700;color:var(--primary-d);text-decoration:none}
.lien-app:hover{text-decoration:underline}