/*
 * Accueil public « Le carnet » (spec 2026-10-15, §3.6, §3.7, §4 ; maquettes v4).
 * Chargé par public/accueil.html seulement (décision D-b). Jetons, polices, .conteneur,
 * .masque, .icone, .vue-large et .vue-etroite viennent de public.css.
 * Téléphone d’abord : chaque section donne ses règles mobiles, puis ses blocs 768 px et 1024 px.
 * Règles courtes sur une ligne : le fichier reste sous 1 000 lignes (tâches 9 à 12).
 */

/* ===== 1. Utilitaires et composants ===== */
.insecable { white-space: nowrap; }
.raye { text-decoration-line: line-through; text-decoration-color: var(--crayon-rouge); text-decoration-thickness: 2px; }
.fond-papier { background: var(--papier); }
.fond-blanc { background: var(--blanc); }
.feuille {
  background: var(--feuille); border: 1px solid var(--bord-feuille); border-radius: 3px;
  box-shadow: 0 1px 0 var(--reglure), 0 10px 22px rgba(29, 40, 48, .10);
}

.btn-principal {
  box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 56px; padding: 0 24px; border-radius: 12px; background: var(--canard); color: var(--blanc);
  font-weight: 700; font-size: 18px; line-height: 1; text-decoration: none;
}
.btn-principal:hover { background: var(--canard-fonce); color: var(--blanc); }
.btn-principal .icone { flex: 0 0 auto; }
.zone-bouton { margin-top: 20px; }
.mention { margin: 4px 0 0; font-size: 14.5px; line-height: 21px; color: var(--encre-2); }
.zone-bouton + .mention { margin-top: 10px; }

.pilule {
  box-sizing: border-box; display: inline-flex; align-items: center; height: 20px; padding: 0 7px;
  margin-left: 6px; vertical-align: 1px; border-radius: 999px;
  font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: .02em; white-space: nowrap;
}
.pilule-gratuit { background: var(--blanc); border: 1.5px solid var(--encre); color: var(--encre); }
.pilule-pro { background: var(--canard); color: var(--blanc); }
.pilule-premium { background: var(--encre); color: var(--blanc); }

.capture { margin: 0; }
.capture-cadre {
  padding: 8px; border: 1px solid var(--bord-carte); border-radius: 14px; background: var(--blanc);
  box-shadow: 0 10px 28px rgba(29, 40, 48, .10);
}
.capture img { display: block; width: 100%; height: auto; border-radius: 8px; }
.capture figcaption { margin-top: 8px; font-style: italic; font-size: 13px; line-height: 19px; color: var(--encre-2); }
.capture-telephone { width: 214px; margin: 0 auto; }
.capture-telephone .capture-cadre { padding: 6px; border-radius: 18px; }
.capture-telephone img { border-radius: 12px; }
.capture-telephone figcaption { text-align: center; font-size: 12.5px; line-height: 18px; }

.numero {
  box-sizing: border-box; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1.5px solid var(--encre); border-radius: 50%;
  font-weight: 700; font-size: 16px; line-height: 1;
}
.numero.numero-petit { width: 28px; height: 28px; font-size: 14px; }

@media (min-width: 768px) {
  .btn-principal { display: inline-flex; height: 60px; padding: 0 28px; font-size: 19px; line-height: 1.2; }
  .mention { max-width: 30em; font-size: 15px; line-height: 22px; }
  .capture-widget { max-width: 418px; }
  .numero { width: 40px; height: 40px; }
}

/* ===== 2. Gabarit commun des 4 blocs (article Avant / Avec) ===== */
.bloc { padding: 0 0 56px; }
.bloc-entete { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.bloc-entete h3 { margin: 0; font-weight: 600; font-size: 24px; line-height: 30px; text-wrap: balance; }
.panneau-avant { padding: 16px; border-radius: 6px; background: var(--papier); overflow: hidden; }
.libelle-avant { margin: 0 0 8px; line-height: 1; }
.libelle-avant span {
  display: inline-block; border-bottom: 2px solid var(--crayon-rouge); transform: rotate(-2deg);
  font-family: var(--main); font-weight: 700; font-size: 28px; line-height: 1.1; color: var(--crayon-rouge);
}
.legende-avant { margin: 10px 0 0; font-style: italic; font-size: 16px; line-height: 24px; color: var(--encre-2); }
.passage { display: flex; justify-content: center; padding: 8px 0; color: var(--canard-fonce); }
.passage .icone { display: block; }
.panneau-avec { padding: 16px; border-radius: 16px; background: var(--froid); }
.libelle-avec {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--canard-fonce);
  font-weight: 700; font-size: 13px; line-height: 18px; letter-spacing: .12em; text-transform: uppercase;
}
.libelle-avec .icone { display: none; flex: 0 0 auto; }
.puces { margin: 16px 0 0; padding: 0; list-style: none; }
.puces li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; margin-bottom: 12px; }
.puces li > .icone { display: block; margin-top: 3px; color: var(--canard-fonce); }
.puces li > span { font-size: 16.5px; line-height: 1.5; }

@media (min-width: 768px) {
  .bloc { padding-bottom: clamp(56px, 6.67vw, 96px); }
  .bloc-entete { gap: 14px; margin-bottom: 24px; }
  .bloc-entete h3 { font-size: clamp(24px, 0.8vw + 20px, 32px); line-height: 1.25; }
  .panneau-avant, .panneau-avec { padding: 24px; }
  .legende-avant { margin-top: 12px; font-size: 17px; line-height: 26px; }
  .panneau-avec .puces li > .icone { margin-top: 4px; }
  .panneau-avec .puces li > span { font-size: 18px; }
}

@media (min-width: 1024px) {
  .bloc-panneaux { display: grid; grid-template-columns: 1fr 1.7fr; gap: 32px; align-items: start; }
  .libelle-avec .icone { display: block; }
  .panneau-avec .puces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
  .panneau-avec .puces li { margin: 0; }
}

/* ===== 3. Dessin « tableur » (bloc 1, héros ; mini-tableur du bloc 2) ===== */
.tableur { box-sizing: border-box; overflow: hidden; transform: rotate(-1.5deg); }
.tableur-onglet {
  display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border-bottom: 1px solid var(--bord-feuille); background: var(--papier-fonce);
  font-weight: 500; font-size: 12px; line-height: 1; color: var(--encre-2);
}
.tableur-onglet .icone { flex: 0 0 auto; }
.tableur-grille { display: grid; grid-template-columns: 64px repeat(6, 1fr); font-size: 11px; line-height: 14px; text-align: center; color: var(--encre); }
.tableur-grille > * {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 36px;
  border-right: 1px solid var(--reglure); border-bottom: 1px solid var(--reglure);
}
.tableur-grille > :nth-child(7n) { border-right: 0; }
.tableur-grille > :nth-last-child(-n + 7) { border-bottom: 0; }
.tableur-grille > .tableur-jour { min-height: 30px; background: var(--papier-fonce); font-weight: 600; font-size: 11.5px; line-height: 1; color: var(--encre-2); }
.tableur-grille > .tableur-role { background: var(--papier-fonce); font-weight: 600; font-size: 11.5px; line-height: 1; color: var(--encre); }
.tableur-barre { position: relative; }
.tableur-note, .tableur-manuscrit { font-family: var(--main); font-weight: 600; font-size: 16px; line-height: 1; color: var(--stylo); }
.tableur-note { position: absolute; top: -11px; left: 50%; transform: translateX(-50%) rotate(-4deg); white-space: nowrap; }
.tableur-doute {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px;
  border: 2px solid var(--crayon-rouge); border-radius: 50%;
  font-family: var(--main); font-weight: 700; font-size: 18px; line-height: 1; color: var(--crayon-rouge);
}
.tableur-heros { grid-area: 1 / 1; justify-self: start; align-self: start; width: 100%; max-width: 440px; transform: rotate(-2deg); }
.tableur-heros .tableur-onglet { min-height: 34px; font-size: clamp(12px, 0.1vw + 11.6px, 13px); }
.tableur-avant { margin-left: auto; font-family: var(--main); font-weight: 700; font-size: 30px; line-height: 1; color: var(--crayon-rouge); }

@media (min-width: 768px) {
  .tableur-onglet { height: auto; min-height: 30px; font-size: 13px; line-height: 1.2; }
  .tableur-grille { font-size: clamp(11px, 0.4vw + 9.5px, 13px); line-height: clamp(14px, 0.4vw + 12.5px, 16px); }
  .tableur-grille > * { min-height: 40px; }
  .tableur-grille > .tableur-jour, .tableur-grille > .tableur-role { font-size: inherit; line-height: inherit; }
  .tableur-note, .tableur-manuscrit { font-size: 18px; }
  .tableur-doute { width: 34px; height: 28px; font-size: 20px; }
}

/* ===== 4. Héros ===== */
.heros { padding: 24px 0 20px; }
.surtitre {
  display: flex; align-items: center; gap: 6px; margin: 0;
  font-weight: 600; font-size: 15px; line-height: 20px; letter-spacing: .02em; color: var(--canard-fonce);
}
.surtitre .icone { flex: 0 0 auto; }
.heros h1 { margin: 12px 0 0; font-weight: 600; font-size: 34px; line-height: 38px; letter-spacing: -0.01em; color: var(--encre); text-wrap: balance; }
.heros mark { padding: 0 .12em; background: var(--surligneur); color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.chapo { margin: 14px 0 0; font-size: 18px; line-height: 27px; }
.ligne-prix { margin: 10px 0 0; }
.lien-prix { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 15px; line-height: 22px; text-underline-offset: 3px; }
.lien-prix .icone { vertical-align: -3px; margin-left: 6px; }
.heros-composition { display: grid; padding: 8px 20px 36px 8px; overflow: hidden; }
.heros-avec { position: relative; grid-area: 1 / 1; justify-self: end; align-self: start; width: min(500px, 92%); margin-top: 238px; }
.heros-avec-libelle { margin: 0 0 8px; text-align: right; }
.heros-avec-libelle .libelle-avec { display: inline-flex; margin: 0; padding: 4px 8px; border-radius: 6px; background: var(--papier); }

@media (min-width: 768px) {
  .heros { padding: clamp(32px, 5vw, 72px) 0 clamp(40px, 5.56vw, 80px); }
  .surtitre { font-size: 16px; line-height: 22px; text-wrap: balance; }
  .heros h1 { margin-top: 14px; max-width: 11.5em; font-size: clamp(34px, 2.6vw + 22px, 60px); line-height: 1.05; }
  .chapo { margin-top: 18px; max-width: 31em; font-size: clamp(18px, 0.3vw + 17px, 21px); line-height: 1.5; }
  .heros .zone-bouton { margin-top: 28px; }
  .heros .zone-bouton + .mention { margin-top: 12px; }
  .ligne-prix { margin-top: 12px; }
  .lien-prix { font-size: 16px; }
}

@media (min-width: 1024px) {
  .heros-grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 3.9vw, 56px); align-items: center; }
}

/* ===== 5. « Vous vous reconnaissez ? » : le carnet ===== */
.reconnaissance { padding: 20px 0 40px; }
.reconnaissance h2 { margin: 0; font-weight: 600; font-size: 26px; line-height: 32px; text-wrap: balance; }
.carnet-cadre { margin: 4px -8px -20px; padding: 8px 8px 28px; overflow: hidden; }
.carnet {
  padding: 17px 16px 17px 52px; border: 1px solid var(--bord-feuille); border-radius: 3px; line-height: 34px;
  background-color: var(--feuille); background-position: 0 17px;
  background-image: repeating-linear-gradient(transparent 0 33px, var(--reglure) 33px 34px);
  box-shadow: inset 40px 0 0 var(--feuille), inset 44px 0 0 -2px var(--crayon-rouge), 0 1px 0 var(--reglure), 0 10px 22px rgba(29, 40, 48, .10);
  transform: rotate(-0.8deg);
}
.carnet ol { margin: 0; padding: 0; list-style: none; }
.carnet li { position: relative; }
.carnet-numero { position: absolute; left: -36px; top: 0; font-family: var(--main); font-weight: 700; font-size: 25px; line-height: 34px; color: var(--crayon-rouge); }
.carnet a { display: block; min-height: 68px; font-family: var(--main); font-weight: 600; font-size: 25px; line-height: 34px; color: var(--stylo); text-decoration: none; }
.carnet a:hover { color: var(--stylo); text-decoration: underline; }
.carnet a .icone { vertical-align: -5px; margin-left: 2px; }
.reconnaissance-sortie { position: relative; margin: 4px 0 0; font-size: 17px; line-height: 26px; color: var(--encre-2); }

@media (min-width: 768px) {
  .reconnaissance { padding: clamp(56px, 6.67vw, 96px) 0; }
  .reconnaissance h2 { font-size: clamp(28px, 1.9vw + 17px, 44px); line-height: 1.15; }
  .carnet-cadre { margin: 4px -16px -16px; padding: 12px 16px 32px; }
  .carnet {
    padding: 20px 24px 20px 64px; line-height: 40px; background-position: 0 20px;
    background-image: repeating-linear-gradient(transparent 0 39px, var(--reglure) 39px 40px);
    box-shadow: inset 48px 0 0 var(--feuille), inset 52px 0 0 -2px var(--crayon-rouge), 0 1px 0 var(--reglure), 0 10px 22px rgba(29, 40, 48, .10);
  }
  .carnet li, .carnet a { min-height: 80px; }
  .carnet-numero { left: -42px; font-size: clamp(25px, 0.5vw + 23px, 30px); line-height: 40px; }
  .carnet a { font-size: clamp(25px, 0.5vw + 23px, 30px); line-height: 40px; }
  .carnet a .icone { width: 24px; height: 24px; margin-left: 6px; }
  .reconnaissance-sortie { margin-top: 16px; font-size: 20px; line-height: 30px; }
}

@media (min-width: 1024px) {
  .reconnaissance-grille {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: ". carnet" "titre carnet" "sortie carnet" ". carnet"; column-gap: clamp(24px, 4.45vw, 64px);
  }
  .reconnaissance h2 { grid-area: titre; }
  .carnet-cadre { grid-area: carnet; margin: 0; }
  .reconnaissance-sortie { grid-area: sortie; }
}

/* ===== 6. « Avant, avec PharmaShift » ===== */
.solutions { padding: 56px 0 32px; }
.solutions h2 { margin: 0; font-weight: 600; font-size: 30px; line-height: 36px; text-wrap: balance; }
.sous-titre { margin: 8px 0 0; font-size: 17px; line-height: 26px; color: var(--encre-2); }

@media (min-width: 768px) {
  .solutions { padding: clamp(56px, 6.67vw, 96px) 0 40px; }
  .solutions h2 { font-size: clamp(28px, 1.9vw + 17px, 44px); line-height: 1.15; }
  .sous-titre { margin-top: 12px; max-width: 38em; font-size: 20px; line-height: 30px; }
}

/* ===== 7. Bloc 1 : carte « Et sur téléphone » ===== */
.telephone-carte { margin-top: 8px; padding: 12px; border-radius: 12px; background: var(--blanc); }
.telephone-texte h4 { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font-weight: 600; font-size: 17px; line-height: 24px; }
.telephone-texte h4 .icone { flex: 0 0 auto; color: var(--canard-fonce); }
.telephone-texte p { margin: 6px 0 0; font-size: 15px; line-height: 22px; }
.telephone-paliers { margin: 8px 0 0; padding: 0; list-style: none; }
.telephone-paliers li { display: flex; align-items: center; min-height: 28px; font-size: 13px; line-height: 18px; color: var(--encre-2); }

@media (min-width: 768px) {
  .telephone-carte { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 20px; padding: 16px; }
  .telephone-carte .capture-telephone { flex: 0 0 214px; }
  .telephone-texte { flex: 1 1 240px; min-width: 0; }
  .telephone-texte h4 { margin-top: 0; font-size: 19px; line-height: 26px; }
  .telephone-texte p { font-size: 16px; line-height: 24px; }
}

/* ===== 8. « Pour démarrer » ===== */
.demarrer { padding: 0 0 40px; }
.demarrer-carte { padding: 20px; border: 1px solid var(--bord-carte); border-radius: 16px; background: var(--blanc); }
.demarrer h2, .demarrer h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
.demarrer h2 { font-size: 26px; line-height: 32px; }
.demarrer h3 { font-size: 19px; line-height: 26px; }
.demarrer h2 .icone, .demarrer h3 .icone { flex: 0 0 auto; color: var(--canard-fonce); }
.demarrer-grille { margin-top: 12px; }
.etapes { margin: 8px 0 0; padding: 0; list-style: none; }
.etapes li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; margin-bottom: 10px; font-size: 17px; line-height: 26px; }
.demarrer-tutoriels, .demarrer-excel, .demarrer-question { font-size: 16px; line-height: 24px; }
.demarrer-tutoriels { margin: 12px 0 0; }
.demarrer-excel { margin: 8px 0 0; color: var(--encre-2); }
.demarrer-equipe { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--bord-carte); }
.demarrer-question { margin: 6px 0 0; color: var(--encre-2); }
.demarrer .puces { margin-top: 10px; }

@media (min-width: 768px) {
  .demarrer { padding-bottom: 48px; }
  .demarrer-carte { padding: 32px clamp(20px, 3vw, 40px); }
  .demarrer h2 { gap: 12px; font-size: clamp(28px, 1.9vw + 17px, 44px); line-height: 1.15; }
  .demarrer h2 .icone { width: 32px; height: 32px; }
  .demarrer h3 { font-size: 22px; line-height: 30px; }
  .demarrer h3 .icone { width: 22px; height: 22px; }
  .demarrer-grille { margin-top: 24px; }
  .demarrer .puces li > span { font-size: 17px; }
}

@media (min-width: 1024px) {
  .demarrer-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
  .demarrer-equipe { margin-top: 0; padding-top: 0; border-top: 0; }
}

/* ===== 9. Bandeau d’action ===== */
.bandeau-action { padding: 0 0 48px; }
.bandeau-carte { padding: 24px 20px; border-radius: 16px; background: var(--papier); }
.bandeau-phrase { margin: 0; font-weight: 600; font-size: 21px; line-height: 28px; }
.bandeau-appel { margin-top: 16px; }
.bandeau-appel .mention { margin-top: 10px; }

@media (min-width: 768px) {
  .bandeau-action { padding-bottom: clamp(56px, 6.67vw, 96px); }
  .bandeau-carte { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 32px clamp(20px, 3vw, 40px); }
  .bandeau-phrase { flex: 1 1 auto; max-width: 24em; font-size: 26px; line-height: 34px; }
  .bandeau-appel { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; gap: 10px; margin-top: 0; }
  .bandeau-appel .mention { margin: 0; }
}

/* ===== 10. Bloc 2 : dessin « post-it sur planning » ===== */
.post-it-planning { display: grid; }
.post-it-planning .tableur { grid-area: 1 / 1; transform: rotate(-1deg); }
.tableur-absent { font-family: var(--main); font-weight: 700; font-size: 18px; line-height: 1; color: var(--crayon-rouge); }
.post-it {
  grid-area: 1 / 1; justify-self: end; align-self: start; width: 150px; margin: -10px -4px 0 0; padding: 12px;
  background: var(--post-it); box-shadow: 0 6px 12px rgba(29, 40, 48, .15); transform: rotate(3deg);
  font-family: var(--main); font-weight: 700; font-size: 22px; line-height: 1.15; color: var(--encre);
}

@media (min-width: 768px) {
  .post-it-planning { padding-top: 10px; }
  .post-it-planning .tableur { transform: rotate(-1.5deg); }
  .tableur-absent { font-size: 20px; }
  .post-it { width: 170px; padding: 14px; font-size: 24px; }
}

/* ===== 11. Bloc 3 : dessin « feuille d’heures », paire de captures, note ===== */
.feuille-heures { padding: 14px 16px; transform: rotate(1.2deg); font-family: var(--main); color: var(--stylo); }
.feuille-heures p { min-height: 30px; border-bottom: 1px solid var(--reglure); font-weight: 600; font-size: 20px; line-height: 30px; }
.feuille-heures .feuille-heures-titre { min-height: 0; margin-bottom: 4px; border-bottom: 0; font-weight: 700; font-size: 22px; line-height: 1.2; }
.feuille-heures-doute { color: var(--crayon-rouge); }
.feuille-heures-oubli { display: inline-block; padding: 0 7px; border: 2px solid var(--crayon-rouge); border-radius: 50%; line-height: 1.15; }
.feuille-heures-total { text-decoration-line: underline; text-decoration-style: double; text-decoration-color: var(--crayon-rouge); text-underline-offset: 3px; }
.captures-paire + .capture { margin-top: 16px; }
.note-bloc { margin-top: 4px; font-style: italic; font-size: 14.5px; line-height: 22px; color: var(--encre-2); }

@media (min-width: 768px) {
  .feuille-heures { padding: 18px 20px; }
  .feuille-heures p { min-height: 40px; font-size: 24px; line-height: 39px; }
  .feuille-heures .feuille-heures-titre { font-size: 26px; }
  .feuille-heures-oubli { padding: 0 10px; }
  .note-bloc { margin-top: 16px; font-size: 16px; line-height: 24px; }
}

@media (min-width: 1024px) {
  .captures-paire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
}

/* ===== 12. Bloc 4 : dessin « porte-bloc », lien vers les offres ===== */
.porte-bloc { padding: 18px 12px 12px; border-radius: 8px; background: var(--planche); transform: rotate(-1deg); }
.porte-bloc-pince { position: relative; width: 72px; height: 16px; margin: -26px auto -4px; border-radius: 4px; background: var(--encre-2); }
.porte-bloc-feuille { display: grid; grid-template-columns: 1fr 44px 52px; padding: 0 8px; border-radius: 3px; background: var(--feuille); }
.porte-bloc-feuille > * {
  display: flex; align-items: center; min-height: 32px; padding: 4px 0; border-bottom: 1px solid var(--reglure);
  font-family: var(--main); font-weight: 600; font-size: 19px; line-height: 1.2; color: var(--stylo);
}
.porte-bloc-feuille > .porte-bloc-entete { padding: 0; font-family: var(--serif); font-size: 12px; line-height: 1; color: var(--encre-2); }
.porte-bloc-feuille > .porte-bloc-centre { justify-content: center; }
.porte-bloc-feuille > .porte-bloc-doute { color: var(--crayon-rouge); }
.porte-bloc-paraphe { display: block; }
.lien-offres { padding: 32px 16px 48px; text-align: center; }
.lien-offres a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; font-size: 17px; line-height: 1.3; }

@media (min-width: 768px) {
  .bloc.bloc-avant-lien { padding-bottom: 0; }
  .porte-bloc { margin-top: 14px; }
  .porte-bloc-pince { margin-bottom: 10px; }
  .porte-bloc-feuille { padding: 4px 10px; border-radius: 2px; }
  .porte-bloc-feuille > * { min-height: 40px; padding: 0; font-size: clamp(18px, 0.38vw + 16.5px, 22px); }
  .porte-bloc-feuille > .porte-bloc-entete { min-height: 32px; font-size: 13px; line-height: 1.2; }
}

@media (min-width: 1024px) {
  .captures-paire.captures-paire-telephone { grid-template-columns: minmax(0, 1fr) 214px; align-items: center; }
}

/* ===== 13. « Ce que vous coûtent déjà Excel et le papier » : le ticket ===== */
.cout { padding: 48px 0; border-top: 1px solid var(--reglure); }
.cout h2 { font-weight: 600; font-size: 28px; line-height: 34px; text-wrap: balance; }
.ticket-cadre { margin: 12px -8px -20px; padding: 8px 8px 28px; overflow: hidden; }
.ticket { padding: 24px 20px; border-top: 2px dashed var(--bord-feuille); border-bottom: 2px dashed var(--bord-feuille); border-radius: 0; transform: rotate(0.6deg); }
.ticket-entete { text-align: center; font-weight: 700; font-size: 13px; line-height: 18px; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-2); text-wrap: balance; }
.ticket-filet { margin: 12px 0; border-top: 1px dashed var(--bord-feuille); }
.ticket-lignes { padding: 0; list-style: none; }
.ticket-lignes li { display: grid; grid-template-columns: 1fr 36px; padding: 12px 0; border-bottom: 1px dotted var(--bord-feuille); }
.ticket-lignes p { font-size: 15px; line-height: 22px; color: var(--encre-2); }
.ticket-lignes .ticket-titre { font-weight: 600; font-size: 17px; line-height: 24px; color: var(--encre); }
.ticket-doute { text-align: right; font-family: var(--main); font-weight: 700; font-size: 30px; line-height: 1; color: var(--crayon-rouge); }
.ticket-pied { margin-top: 16px; text-align: center; font-family: var(--main); font-weight: 600; font-size: 23px; line-height: 28px; color: var(--stylo); text-wrap: balance; }

@media (min-width: 768px) {
  .cout { padding: clamp(56px, 6.67vw, 96px) 0; }
  .cout h2 { font-size: clamp(28px, 1.9vw + 17px, 44px); line-height: 1.15; }
  .ticket-cadre { margin: clamp(24px, 4.45vw, 64px) 0 0; padding: 12px 16px 32px; }
  .ticket { max-width: 440px; margin: 0 auto; transform: rotate(0.8deg); }
  .ticket-pied { font-size: 26px; line-height: 32px; }
}

@media (min-width: 1024px) {
  .cout-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4.45vw, 64px); align-items: center; }
  .ticket-cadre { margin-top: 0; }
}

/* ===== 14. « Quelle offre pour quelle corvée ? » : un seul balisage, matrice à partir de 1024 px ===== */
.offres { padding: 56px 0; border-top: 1px solid var(--bord-carte); }
.offres h2 { font-weight: 600; font-size: 28px; line-height: 34px; text-wrap: balance; }
.offres-titre .sous-titre { margin-top: 12px; }
.offres-prix { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100px, 100%), 1fr)); gap: 8px; margin-top: 24px; padding: 0; list-style: none; }
.offres-prix li { padding: 12px 10px; border: 1px solid var(--bord-carte); border-radius: 12px; background: var(--blanc); text-align: center; }
.offres-prix .pilule { height: 28px; padding: 0 11px; margin-left: 0; vertical-align: baseline; font-size: 15px; }
.offres-montant { margin-top: 8px; font-weight: 700; font-size: 30px; line-height: 34px; font-variant-numeric: lining-nums; }
.offres-suffixe { font-size: 13px; line-height: 18px; color: var(--encre-2); text-wrap: balance; }
.offres-commun { margin-top: 12px; font-size: 16px; line-height: 24px; }
.offre-corvee { margin-top: 12px; padding: 16px; border: 1px solid var(--bord-carte); border-radius: 16px; background: var(--blanc); }
.offres-commun + .offre-corvee { margin-top: 20px; }
.offre-corvee-entete { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.offre-corvee h3 { font-weight: 600; font-size: 19px; line-height: 26px; }
.offre-corvee h3 a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.offre-cellules { padding: 0; list-style: none; }
.offre-cellules li { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding: 10px 0; }
.offre-cellules li + li { border-top: 1px solid var(--bord-carte); }
.offre-cellules .pilule { justify-self: start; align-self: start; margin: 2px 0 0; }
.offre-cellules p { font-size: 15.5px; line-height: 23px; }
.offre-cellules .non-inclus { color: var(--encre-2); }
.essai { display: flex; align-items: flex-start; gap: 12px; margin-top: 24px; padding: 16px; border-radius: 12px; background: var(--papier); }
.essai > .icone { margin-top: 1px; color: var(--canard-fonce); }
.essai-texte { flex: 1 1 auto; min-width: 0; }
.essai-texte p { font-size: 16px; line-height: 24px; }
.essai-conditions { margin-top: 12px; }
.essai-conditions p + p { margin-top: 8px; }

@media (min-width: 768px) {
  .offres { padding: clamp(56px, 6.67vw, 96px) 0; }
  .offres h2 { font-size: clamp(28px, 1.9vw + 17px, 44px); line-height: 1.15; }
}

@media (min-width: 1024px) {
  .offres-titre { max-width: 40em; margin: 0 auto; text-align: center; }
  .offres-titre .sous-titre { margin-right: auto; margin-left: auto; }
  .offres-matrice { display: flex; flex-direction: column; margin-top: 40px; }
  .offres-prix { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 0; border: 1px solid var(--bord-carte); border-radius: 16px 16px 0 0; overflow: hidden; }
  .offres-prix li { padding: 24px 16px; border: 0; border-radius: 0; text-align: left; }
  .offres-prix .offres-coin { display: flex; align-items: center; background: var(--papier); font-size: 15px; line-height: 22px; color: var(--encre-2); }
  .offres-montant { font-size: 48px; line-height: 1.1; }
  .offres-suffixe { margin-top: 4px; font-size: 15px; line-height: 22px; }
  .offre-corvee, .offres-commun + .offre-corvee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); margin-top: 0; padding: 0; border-width: 0 1px 1px; border-radius: 0; }
  .offre-corvee:last-of-type { border-radius: 0 0 16px 16px; overflow: hidden; }
  .offre-corvee-entete { align-items: flex-start; margin: 0; padding: 18px 16px; background: var(--papier); }
  .offre-corvee-entete .numero.numero-petit { width: 32px; height: 32px; margin-top: 6px; font-size: 15px; }
  .offre-corvee h3 { font-size: 20px; line-height: 28px; text-wrap: balance; }
  .offre-corvee h3 a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .offre-cellules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .offre-cellules li { display: block; padding: 18px 16px; }
  .offre-cellules li + li { border-top: 0; }
  .offre-cellules .pilule { margin: 0; }
  .offre-cellules p { margin-top: 8px; font-size: 16px; line-height: 24px; }
  .offres-commun { order: 1; max-width: 44em; margin: 24px auto 0; text-align: center; font-size: 17px; line-height: 26px; }
  .essai { max-width: 760px; margin: 24px auto 0; padding: 24px; }
  .essai-conditions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .essai-conditions p + p { margin-top: 0; }
}

/* ===== 15. Action finale : le carnet rayé ===== */
.action-finale { padding: 56px 0; border-top: 1px solid var(--reglure); }
.carnet-raye-cadre { margin: -8px -8px -20px; padding: 8px 8px 28px; overflow: hidden; }
.carnet-raye {
  padding: 16px 20px; background-position: 0 16px; transform: rotate(0.8deg);
  background-image: repeating-linear-gradient(transparent 0 39px, var(--reglure) 39px 40px);
}
.carnet-raye ul { padding: 0; list-style: none; font-family: var(--main); font-weight: 600; font-size: 25px; line-height: 40px; color: var(--stylo); }
.action-finale h2 { position: relative; margin-top: 16px; font-weight: 600; font-size: 30px; line-height: 36px; text-wrap: balance; }
.deja-compte { margin-top: 12px; font-size: 16px; line-height: 24px; }
.deja-compte a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

@media (min-width: 768px) {
  .action-finale { padding: clamp(56px, 6.67vw, 96px) 0; }
  .carnet-raye-cadre { margin: 0; padding: 12px 16px 32px; }
  .carnet-raye {
    padding: 22px clamp(20px, 1.95vw, 28px); background-position: 0 22px;
    background-image: repeating-linear-gradient(transparent 0 43px, var(--reglure) 43px 44px);
  }
  .carnet-raye ul { font-size: clamp(25px, 0.5vw + 23px, 30px); line-height: 44px; }
  .action-finale h2 { font-size: clamp(30px, 2vw + 19px, 48px); line-height: 1.15; }
}

@media (min-width: 1024px) {
  .action-finale-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4.45vw, 64px); align-items: center; }
  .action-finale h2 { margin-top: 0; }
}