/* SAGAVIE V2 — surcouche du design system. Contrainte de conception : la cible peut voir difficilement et lire sur un iPad posé sur la table. Corps ≥ 20 px, boutons ≥ 56 px, aucun survol, aucun geste complexe, aucun menu déroulant. Un bouton trop petit, c'est un livre jamais terminé. */ .v2 { max-width: 34rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; } .v2.large { max-width: 60rem; } .v2 h1 { font-size: 1.9rem; font-style: italic; text-align: center; margin-bottom: .75rem; } .v2 h2 { font-size: 1.35rem; font-style: italic; margin-bottom: .5rem; } .v2 p { font-size: 1.15rem; line-height: 1.6; } /* ≈ 20.7 px */ .v2 .aide { color: var(--sepia-texte); font-size: 1.02rem; } .v2 .centre { text-align: center; } /* --- Boutons : 56 px minimum, jamais côte à côte sur mobile --- */ .v2 .btn-xl { display: block; width: 100%; min-height: 3.4rem; font-family: "Instrument Sans", system-ui, sans-serif; font-size: 1.2rem; font-weight: 600; border: none; border-radius: .5rem; cursor: pointer; padding: 1rem 1.25rem; margin: 1rem 0; text-align: center; text-decoration: none; background: var(--bic); color: var(--blanc-photo); } .v2 .btn-xl.secondaire { background: transparent; color: var(--bic); border: 2px solid var(--bic); font-weight: 400; } .v2 .btn-xl[disabled] { opacity: .45 } .v2 .btn-xl.rouge { background: #8A2E23 } /* --- Saisie du code --- */ .v2 input[type="text"], .v2 input[type="email"], .v2 input[type="tel"], .v2 textarea, .v2 input[type="file"] { width: 100%; font-size: 1.2rem; padding: .9rem 1rem; border: 2px solid var(--filet); border-radius: .5rem; background: var(--blanc-photo); color: var(--encre); font-family: "Instrument Sans", system-ui, sans-serif; } .v2 input.code { font-size: 2rem; text-align: center; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; } .v2 label { display: block; font-size: 1.1rem; margin: 1.25rem 0 .4rem; font-weight: 600; font-family: "Instrument Sans", system-ui, sans-serif; } .v2 .erreur { background: #F6E3DF; border-left: 4px solid #8A2E23; color: #6B241B; padding: .9rem 1rem; border-radius: .3rem; font-size: 1.05rem; margin-bottom: 1rem; } /* --- Progression --- */ .progression { margin: 1.5rem 0 1rem; text-align: center } .progression .compte { font-family: "Caveat", cursive; font-size: 1.7rem; color: var(--bic) } .progression .barre { height: .75rem; background: var(--filet); border-radius: .4rem; overflow: hidden; margin-top: .5rem; } .progression .barre span { display: block; height: 100%; background: var(--bic) } /* --- Liste des 12 questions --- */ .liste-q { list-style: none; margin-top: 1rem } .liste-q li { margin-bottom: .75rem } .liste-q a { display: flex; align-items: center; gap: .9rem; min-height: 3.4rem; background: var(--blanc-photo); border: 1.5px solid var(--filet); border-radius: .5rem; padding: .9rem 1rem; text-decoration: none; color: var(--encre); font-size: 1.08rem; line-height: 1.4; } .liste-q a .num { font-family: "Caveat", cursive; font-size: 1.6rem; color: var(--bic); min-width: 1.5rem; } .liste-q a.fait { border-color: var(--bic); background: #EFEAF4 } .liste-q a.fait .num::after { content: " ✓" } /* --- Enregistreur --- */ .q-texte { font-size: 1.5rem; line-height: 1.45; text-align: center; margin: 1.5rem 0 } .q-relance { font-family: "Caveat", cursive; font-size: 1.4rem; color: var(--bic); text-align: center; margin-bottom: 1.5rem } .minuteur { font-family: "Instrument Sans", system-ui, sans-serif; font-size: 2.2rem; text-align: center; color: var(--bic); font-weight: 600; margin: 1rem 0 } .etat { text-align: center; font-size: 1.1rem; color: var(--sepia-texte); min-height: 1.6rem } /* « .cache » seul (0,1,0) perdait contre « .v2 .btn-xl { display: block } » (0,2,0) : la classe qui masque ne masquait aucun bouton, et le narrateur voyait les quatre actions à la fois dans tous les états. Le second sélecteur remet les spécificités à égalité, et il passe en dernier. */ .cache, .v2 .cache { display: none } /* --- Admin (densité assumée : ce n'est pas la même cible) --- */ .adm { font-family: "Instrument Sans", system-ui, sans-serif; font-size: .95rem } .adm table { width: 100%; border-collapse: collapse; margin-top: 1rem } .adm th, .adm td { text-align: left; padding: .55rem .5rem; border-bottom: 1px solid var(--filet); vertical-align: top } .adm th { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sepia-texte) } .adm .tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem } .adm .tuile { background: var(--blanc-photo); border: 1px solid var(--filet); border-radius: .5rem; padding: 1rem; text-align: center; text-decoration: none; color: var(--encre) } .adm .tuile .n { font-size: 2rem; font-weight: 600; color: var(--bic); display: block } .adm .tuile .l { font-size: .85rem } .adm .relire { display: grid; gap: 1rem; grid-template-columns: 1fr } @media (min-width: 52rem) { .adm .relire { grid-template-columns: 1fr 1fr } } .adm .brut { background: #EFEAE0; border: 1px solid var(--filet); border-radius: .4rem; padding: .9rem; font-size: .95rem; line-height: 1.55; white-space: pre-wrap; max-height: 26rem; overflow: auto } .adm textarea { width: 100%; min-height: 26rem; font-size: 1rem; line-height: 1.6; font-family: "EB Garamond", Georgia, serif; padding: .9rem; border: 2px solid var(--filet); border-radius: .4rem; background: var(--blanc-photo) } .adm audio { width: 100%; margin: .5rem 0 } .adm .bouton { display: inline-block; background: var(--bic); color: var(--blanc-photo); border: none; border-radius: .4rem; padding: .6rem 1rem; font-size: .95rem; text-decoration: none; cursor: pointer; font-family: inherit } .adm .bouton.gris { background: transparent; color: var(--bic); border: 1.5px solid var(--bic) } .adm .rappel { background: #FFFDF8; border-left: 4px solid var(--bic); padding: .8rem 1rem; border-radius: .3rem; margin: 1rem 0; line-height: 1.5 } /* --- Page /offrir -------------------------------------------------------- La CSP du site est « style-src 'self' » : aucun attribut style= n'est appliqué par le navigateur. Ces classes remplacent ceux qui mettaient la page en forme — sans elles, la page de vente s'affichait déshabillée. */ .btn-hero { max-width: 22rem; margin: 1.5rem auto } .titre-section { font-size: 1.6rem } .liste-q.espacee { margin-bottom: 2rem } .q-ligne { display: flex; gap: .9rem; padding: .7rem 1rem; background: var(--blanc-photo); border: 1.5px solid var(--filet); border-radius: .5rem; font-size: 1.05rem } .q-ligne .num { font-family: "Caveat", cursive; font-size: 1.5rem; color: var(--bic) } .choix-offre { font-weight: 400; display: flex; gap: .75rem; align-items: flex-start; background: var(--blanc-photo); border: 1.5px solid var(--filet); border-radius: .5rem; padding: 1rem; margin-bottom: .6rem } .choix-offre input[type="radio"] { width: 1.5rem; height: 1.5rem; margin-top: .15rem } /* L'offre de lancement. Volontairement PAS un prix barré : le tarif reste affiché en pleine valeur au-dessus, parce que c'est le prix réellement demandé sans le code. Barrer un prix qu'on pratique vraiment le ferait passer pour un prix de référence périmé, ce qu'il n'est pas. */ .choix-offre .lancement { display: inline-block; margin: .3rem 0 .1rem; color: var(--bic); font-size: .95rem; line-height: 1.45 } /* L'option se distingue des offres : ce n'est pas un quatrième choix parmi deux, c'est un ajout. Une case, pas un bouton radio. */ .choix-offre.option { border-style: dashed; margin-top: 1rem } .choix-offre.option input[type="checkbox"] { width: 1.5rem; height: 1.5rem; margin-top: .15rem; flex-shrink: 0 } .section-espacee { margin-top: 2rem } .faq { margin-top: 1rem } .faq h2 { font-size: 1.15rem } .faq h2 + p + h2 { margin-top: 1.5rem } .pied-espace { margin-top: 3rem } .choix-offre.renonciation { align-items: flex-start; margin: 1.5rem 0 1rem; border-color: var(--bic); font-size: .95rem; line-height: 1.5 } .choix-offre.renonciation input[type="checkbox"] { width: 1.5rem; height: 1.5rem; margin-top: .15rem; flex-shrink: 0 } /* La fourche : pour qui, et quel type d'histoire. Deux rangées de boutons radio, avant les offres — c'est la première question qu'on se pose, pas la dernière. Les champs qui ne concernent que l'un des cas se replient en CSS pur (:has) : aucun script sur la page de vente, et sans :has tout reste visible, ce qui est le repli le moins dangereux. */ .fourche { display: flex; gap: .6rem; flex-wrap: wrap; margin: .3rem 0 1rem } .fourche label { flex: 1 1 9rem; display: flex; gap: .55rem; align-items: flex-start; background: var(--blanc-photo); border: 1.5px solid var(--filet); border-radius: .5rem; padding: .75rem .85rem; font-weight: 400; cursor: pointer } .fourche label:has(input:checked) { border-color: var(--bic) } .fourche input[type="radio"] { width: 1.3rem; height: 1.3rem; margin-top: .1rem; flex-shrink: 0 } .fourche strong { display: block } .fourche .aide { display: block; margin-top: .1rem } .si-moi, .si-titre { display: none } form:has(#pour-moi:checked) .si-quelquun { display: none } form:has(#pour-moi:checked) .si-moi { display: block } form:has(#type-moment:checked) .si-titre, form:has(#type-personne:checked) .si-titre, form:has(#type-autre:checked) .si-titre { display: block } /* Le régime de rétractation dépend de l'offre : un bien nettement personnalisé (L221-28 3°) pour les livres imprimés, un contenu numérique (L221-28 13°) pour le PDF seul. Les deux cases sont dans la page ; celle qui ne concerne pas l'offre choisie disparaît, sans une ligne de JavaScript — la CSP du site n'en autorise aucun sur les pages publiques. Un navigateur sans « :has() » les affiche toutes les deux : on informe alors trop plutôt que pas assez, et le serveur refuse de toute façon la mauvaise. */ form:has(#offre-numerique:checked) .regime-bien, form:has(#offre-signature:checked) .regime-numerique, form:has(#offre-famille:checked) .regime-numerique { display: none } /* --- Suivi de commande ----------------------------------------------------- Quatre étapes verticales. L'étape en cours est la seule mise en avant : on veut qu'un coup d'œil suffise à savoir qui doit agir. */ .suivi { list-style: none; margin: 1.5rem 0; padding: 0 } .suivi li { position: relative; padding: 0 0 1.6rem 2.6rem; border-left: 2px solid var(--filet); margin-left: .6rem } .suivi li:last-child { border-left-color: transparent; padding-bottom: 0 } .suivi li::before { content: ""; position: absolute; left: -.62rem; top: .15rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--papier); border: 2px solid var(--filet); } .suivi li.faite { border-left-color: var(--bic) } .suivi li.faite::before { content: "✓"; background: var(--bic); border-color: var(--bic); color: var(--blanc-photo); font-size: .72rem; line-height: 1.1rem; text-align: center; font-family: "Instrument Sans", system-ui, sans-serif } .suivi li.encours::before { border-color: var(--bic); border-width: 3px } .suivi li strong { display: block; font-size: 1.1rem; color: var(--encre) } .suivi li:not(.faite):not(.encours) strong { color: var(--sepia-texte) } .suivi li .aide { display: block; margin-top: .2rem } .adm form.en-ligne { display: inline } .adm .en-haut { margin-top: 1rem } .adm .suivi-saisie { width: 11rem; padding: .35rem; margin-top: .4rem } .adm .champ-large { width: 100%; padding: .6rem; font-size: 1rem } /* Information du narrateur (écran du code). Lisible d'abord : ce bloc est lu par quelqu'un peu à l'aise avec le numérique, sur un téléphone, et c'est là que se recueille le consentement à l'enregistrement de son récit. Corps de texte plein, pas de gris pâle, et de l'air entre les paragraphes. */ .v2 .encadre-info { margin-top: 1.6rem; padding: 1.1rem 1.2rem; border-left: 3px solid var(--bic); background: rgba(0, 0, 0, .022); text-align: left; } .v2 .encadre-info p { margin: 0 0 .8rem; line-height: 1.6 } .v2 .encadre-info p:last-child { margin-bottom: 0 } /* La case du consentement aux données sensibles (art. 9.2.a). Elle doit se voir : c'est la seule décision de l'écran, et la case n'est jamais pré-cochée. Corps de texte plein, case large — on la coche avec un doigt peu précis, sur un téléphone tenu d'une main. */ .v2 .consentement-sensible { align-items: flex-start; margin: 1.6rem 0 1.2rem; border-color: var(--bic); font-size: 1.02rem; line-height: 1.55; } .v2 .consentement-sensible input[type="checkbox"] { width: 1.7rem; height: 1.7rem; margin-top: .1rem; flex-shrink: 0; } /* --------------------------------------------------------------------------- LA RELECTURE PAR LE NARRATEUR Elle a remplacé la relecture par un opérateur. C'est le dernier écran avant la fabrication du livre : il doit se lire sur un téléphone, sans loupe. Corps de texte plein, champs hauts, un seul bouton par souvenir. --------------------------------------------------------------------------- */ .v2 .bloc-relire { margin: 1.6rem 0; padding: 1.2rem 1.3rem; border: 2px solid var(--bic); border-radius: 6px; background: rgba(45, 74, 138, .04); text-align: center; } .v2 .bloc-relire h2 { margin: 0 0 .6rem; font-size: 1.35rem } .v2 .bloc-relire p { margin: 0 0 1rem; line-height: 1.6 } .v2 .bloc-relire .btn-xl { margin: 0 } .v2 .souvenir-relu { margin: 2rem 0; padding-top: 1.4rem; border-top: 1px solid rgba(0, 0, 0, .1); } .v2 .souvenir-relu:first-of-type { border-top: 0; padding-top: 0 } .v2 .souvenir-relu h2 { margin: 0 0 .2rem; font-size: 1.3rem } .v2 .souvenir-relu .aide { margin: 0 0 .8rem } .v2 .souvenir-relu textarea { width: 100%; box-sizing: border-box; padding: .9rem 1rem; font: inherit; font-size: 1.05rem; line-height: 1.7; color: inherit; background: var(--blanc-photo, #fff); border: 1px solid rgba(0, 0, 0, .22); border-radius: 4px; resize: vertical; } .v2 .souvenir-relu textarea:focus { outline: 2px solid var(--bic); outline-offset: 1px } .v2 .souvenir-relu .btn-xl { margin-top: .7rem } .v2 .fin-relecture { margin-top: 2.6rem; padding: 1.4rem 1.3rem; border: 2px solid var(--bic); border-radius: 6px; background: rgba(45, 74, 138, .04); } .v2 .fin-relecture h2 { margin: 0 0 .6rem; font-size: 1.35rem } .v2 .fin-relecture p { line-height: 1.6 } /* Confirmation d'enregistrement. Verte, brève, jamais un pavé : elle dit que c'est pris, elle ne prend pas la place du texte. */ .v2 .succes { padding: .7rem 1rem; border-left: 3px solid #2E6B4A; background: rgba(46, 107, 74, .08); color: #23543A; } /* Étiquette lue par les lecteurs d'écran, invisible à l'œil. Sans elle, un textarea sans