/* Accueil, « Comment ça marche » et « L'offre » (03/11, version choisie par Aziz) : de grands objets posés sur le blanc, de très grands titres, un panneau qui se touche. */
/* Remise à plat : le site applique encore des marges et des fonds à #comment et #offre. */
#comment.matin,#offre.matin,section.matin{background-color:#fff!important;padding:72px 0}
.matin .wrap{display:block;max-width:1040px;margin:0 auto;padding:0 24px}
.matin h2,.matin h3,.matin h4{color:var(--ink);font-weight:700;letter-spacing:-.035em;line-height:1.06;margin:0}
.matin p,.matin ul,.matin ol,.matin dl,.matin figure{margin:0}
.matin ul,.matin ol{padding:0;list-style:none}
.matin svg{display:block}
.matin ::selection{background:var(--blue-soft)}
@media (max-width:860px){
  #comment.matin,#offre.matin,section.matin{padding:48px 0}
  .matin .wrap{padding:0 20px}
}

.matin{--mat-doux:cubic-bezier(.22,1,.36,1)}
.matin p{line-height:1.42}
.matin figure{margin:0}
.matin svg{display:block;width:100%;height:100%}
@media (min-width:1000px){#brancher.matin .wrap,#comment.matin .wrap,#offre.matin .wrap{width:calc(100% - 32px);max-width:1280px;padding:0 var(--marge)}}

/* ---------- Téléphone : une image, une phrase ---------- */
/* 05/11 (Aziz : « les titres la même taille », « les 3 ensemble harmonieux ») : au téléphone, les trois blocs ont le même titre, la même phrase, le même dessin et le même trait entre eux. */
#brancher.matin,#comment.matin,#offre.matin{padding:30px 0 28px;border-top:1px solid var(--line)}
/* Les lignes de construction du site, comme ses deux voisins (ordinateur et tablette seulement : accueil-tel.css les retire pour les autres au téléphone). */
#brancher{background-image:linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line));background-size:1px 100%,1px 100%;background-repeat:no-repeat;background-position:calc(50% - 639.5px) 0,calc(50% + 639.5px) 0}
@media (max-width:1311px){#brancher{background-position:16px 0,calc(100% - 16px) 0}}
@media (max-width:600px){#brancher{background-image:none!important}}
.matin .mat-pc{display:none}
.matin .mat-tete-txt h2,.matin .mat-offre-txt h2{font-size:clamp(27px,7.6vw,36px);line-height:1.08;letter-spacing:-.04em;text-wrap:balance}
.matin h2 span{color:var(--blue);display:block}
.matin .mat-formule,.matin .mat-offre-txt p{font-size:16px;line-height:1.38;letter-spacing:-.01em;color:#1D1D1F}
.matin .mat-offre-txt p{margin-top:4px}
.matin .mat-formule,.matin .mat-offre-txt h2 + p{margin-top:8px}
.matin .mat-formule b,.matin .mat-offre-txt b{font-weight:600}
.matin .mat-matin,.matin .mat-balance,.matin .mat-dessin{margin-top:12px;height:clamp(150px,44vw,300px)}
/* Sur téléphone, les étiquettes des images grandissent : rien sous 12 px. */
.matin .mat-matin .kit-etoile{display:none}
.matin .kit-pastille{transform-box:fill-box;transform-origin:50% 50%;transform:scale(1.22)}
@media (max-width:360px){
  .matin .kit-pastille{transform:scale(1.34)}
}
.matin .btn{display:flex;width:100%;touch-action:manipulation}

.matin .mat-cta-pc{display:none}
.matin .mat-cta-tel2{margin-top:12px}
.matin .mat-sous{display:block;margin-top:7px;text-align:center;font-size:13px;line-height:1.35;color:#6E6E73}
/* Sous 600 px, les plateaux grossissent : « Je continue » et « J'arrête » restent lisibles. */
@media (max-width:599px){
  .matin .mat-balance svg{overflow:visible}
  .matin .bal-g,.matin .bal-d{transform-box:fill-box;transform-origin:50% 50%}
  .matin .bal-g{transform:translateX(14px) scale(1.36)}
  .matin .bal-d{transform:translateX(-14px) scale(1.36)}
}
/* 06/11 (Aziz : « manque de cohérence entre chaque section », « B » parmi 10 variantes, Téléchargements\site\accueil-telephone-variantes ; l'alternance puis le texte à gauche ont été essayés et abandonnés : « sur tel y'a cet espace » à droite du titre) :
   au téléphone, les trois blocs dans le même ordre et centrés, titres et phrases compris (« soit tous à gauche soit au milieu ») : le titre, le dessin qui le montre, puis la phrase.
   Mêmes marges, mêmes écarts, même taille de dessin dans les trois. Remplace le côte à côte du 05/11. */
@media (max-width:599px){
  #brancher.matin,#comment.matin,#offre.matin{padding:36px 0 40px}
  #brancher .mat-offre,#comment .mat-tete,#offre .mat-offre{display:flex;flex-direction:column}
  #brancher .mat-offre-txt,#comment .mat-tete-txt,#offre .mat-offre-txt{display:contents}
  .matin .mat-tete-txt h2,.matin .mat-offre-txt h2{order:1;text-align:center}
  .matin .mat-matin,.matin .mat-balance,.matin .mat-dessin{order:2;width:100%;margin:20px 0 0;height:clamp(150px,46vw,300px)}
  .matin .mat-formule,.matin .mat-offre-txt p{order:3;max-width:34ch;margin-left:auto;margin-right:auto;text-align:center}
  .matin .mat-formule,.matin .mat-offre-txt h2 + p{margin-top:20px}
  .matin .mat-cta-tel2{order:4;margin-top:22px}
}


/* Dès 600 px, le site remet ses traits entre les sections : plus besoin des nôtres. Le dessin repasse à gauche du texte, d'un bloc. */
@media (min-width:600px){
  #brancher.matin,#comment.matin,#offre.matin{border-top:0}
  #offre.matin{padding-top:30px}
  .matin .mat-offre{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;align-items:center}
  .matin .mat-offre-txt{grid-column:2;grid-row:1}
  .matin .mat-balance,.matin .mat-dessin{grid-column:1;grid-row:1;margin:0;height:auto;aspect-ratio:640/400}
  .matin .mat-cta-tel2{grid-column:1/-1}
  .matin .mat-offre-txt h2{margin-bottom:10px}
  .matin .mat-offre-txt h2 + p{margin-top:4px}
}

/* ---------- Ordinateur (04/11, Aziz : « allège comme la deuxième », version 5) : une idée, un dessin, un grand titre, une phrase, comme l'offre. Les clés ont été retirées partout le 05/11 (« enlève ça »). ---------- */
@media (min-width:861px){
  #brancher.matin,#comment.matin{padding:40px 0}
  #offre.matin{padding:30px 0 40px}
  .matin .mat-pc{display:inline}
  .matin .mat-cta-tel2{display:none}

  /* 05/11 (Aziz : « y a un espace là ») : le titre tient en moins large, le dessin prend la place. */
  .matin .mat-tete{display:grid;grid-template-columns:minmax(0,.66fr) minmax(0,1fr);gap:48px;align-items:center}
  .matin .mat-tete-txt h2{font-size:clamp(38px,3.9vw,54px);line-height:1.01;letter-spacing:-.045em}
  .matin .mat-formule{margin-top:16px;font-size:19px;line-height:1.42;letter-spacing:-.012em;text-wrap:balance}
  .matin .mat-formule b{font-weight:600}
  .matin .mat-matin{margin:0;height:auto;aspect-ratio:640/400}
  .matin .kit-pastille{transform:none}

  .matin .mat-offre{padding:0;border:0;column-gap:48px}
  .matin .mat-offre-txt h2{font-size:clamp(38px,3.9vw,54px);line-height:1.01;letter-spacing:-.045em;margin-bottom:16px}
  .matin .mat-offre-txt p{margin-top:6px;font-size:19px;line-height:1.42;letter-spacing:-.012em}
  .matin .mat-offre-txt h2 + p{margin-top:6px}
  .matin .mat-cta-pc{display:block;margin-top:24px}
  .matin .btn{display:inline-flex;width:auto}
  .matin .mat-sous{margin-top:10px;text-align:left;font-size:13.5px}

  /* Une seule entrée, quand l'image arrive à l'écran : la pile « avec Bluo » apparaît, et Bluo regarde le désordre qu'il laisse derrière lui. Sans script, tout est déjà là. */
  .matin.mat-js .mat-matin .kit-apres{opacity:0;transform:translateY(8px);transition:opacity .7s ease .15s,transform .7s var(--mat-doux) .15s}
  .matin.mat-js .mat-matin.est-vu .kit-apres{opacity:1;transform:none}
  .matin.mat-js .mat-matin .bluo-yeux{transform:translateX(-9px);transition:transform .42s var(--mat-doux) 1.3s}
  .matin.mat-js .mat-matin.est-vu .bluo-yeux{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .matin *,.matin *::before,.matin *::after{transition:none!important;animation:none!important}
  .matin.mat-js .mat-matin .kit-apres,.matin.mat-js .mat-matin .bluo-yeux{opacity:1!important;transform:none!important}
}
/* 06/11 (audit du site, carte blanche d'Aziz : « un 10 sur 10 ») :
   - à l'ordinateur, les titres des blocs passent de 68 à 54 px au plus : le grand titre du haut (56 px) redevient le plus gros de la page, vu de loin ;
   - sous la phrase de « Enfin réunies », une petite ligne répond à la peur n° 1 (mes mails ?) là où elle arrive, du même gris que la ligne sous les boutons. */
.matin .mat-offre-txt p.mat-donnees{margin-top:12px;font-size:13.5px;line-height:1.4;letter-spacing:0;color:#6E6E73}
/* Pas de mot seul en fin de phrase (« côté. », « accès. ») : les lignes s'équilibrent. */
.matin .mat-offre-txt p{text-wrap:pretty}
/* 07/11 : « vous recevrez un mail dès l'ouverture » passe sur deux lignes à l'ordinateur ; deux lignes égales plutôt que « dès l'ouverture. » seul. */
.matin .mat-sous{text-wrap:balance}
@media (max-width:599px){.matin .mat-formule,.matin .mat-offre-txt p,.matin .mat-sous{text-wrap:balance}.matin .mat-offre-txt p.mat-donnees{max-width:44ch}}
@media (min-width:861px){.matin .mat-offre-txt p.mat-donnees{margin-top:14px;font-size:14px}}

/* ——— Tarifs (07/11, Aziz) : 4 cartes, Bluo et les mails en orbite. Téléphone : un rail qui glisse, avec ses points. ——— */
section#tarifs.t8.matin{padding:80px 0 84px;background-color:#fff!important;background-image:radial-gradient(ellipse 70% 46% at 50% 0%,rgba(37,99,235,.08),transparent 72%),linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line))!important;background-size:100% 100%,1px 100%,1px 100%;background-repeat:no-repeat;background-position:0 0,calc(50% - 639.5px) 0,calc(50% + 639.5px) 0}
@media (max-width:1311px){section#tarifs.t8.matin{background-position:0 0,16px 0,calc(100% - 16px) 0}}
#tarifs.t8 .wrap{max-width:1180px}
#tarifs.t8 .t8-tete{max-width:760px;margin:0 auto;text-align:center}
#tarifs.t8 .t8-tete h2{text-align:center}
#tarifs.t8 .t8-tete .mat-formule{margin:16px auto 0;max-width:46ch;text-align:center;text-wrap:balance}
#tarifs.t8 .t8-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:48px}
#tarifs.t8 .t8-carte{display:flex;flex-direction:column;padding:22px 22px 24px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px rgba(15,17,20,.07),0 1px 2px rgba(15,17,20,.04),0 20px 44px -28px rgba(15,17,20,.24)}
#tarifs.t8 .t9-dessin{margin:0 -4px 10px}
#tarifs.t8 .t9-dessin svg{display:block;width:100%;max-width:236px;height:auto;margin:0 auto}
#tarifs.t8 .t8-nom{font-size:26px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
#tarifs.t8 .t8-pour{margin-top:3px;font-size:14px;color:var(--muted)}
#tarifs.t8 .t8-prix{display:flex;align-items:baseline;gap:7px;margin-top:20px;font-size:40px;line-height:1;font-weight:700;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
#tarifs.t8 .t8-prix small{font-size:13px;font-weight:500;letter-spacing:0;color:var(--muted)}
#tarifs.t8 .t8-devis{font-size:30px;line-height:40px}
#tarifs.t8 .t8-btn{width:100%;height:46px;margin-top:22px;padding:0 16px;font-size:15px}
#tarifs.t8 .t8-trait{height:1px;margin:22px 0 18px;background:var(--line)}
#tarifs.t8 .t8-coches{list-style:none;margin:0;padding:0}
#tarifs.t8 .t8-coches li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.4;color:#1D1D1F}
#tarifs.t8 .t8-coches li + li{margin-top:9px}
#tarifs.t8 .t8-coches li::before{content:"";position:absolute;left:2px;top:5px;width:10px;height:5px;border:solid var(--blue);border-width:0 0 2px 2px;transform:rotate(-45deg)}
#tarifs.t8 .t8-coches li.t8-vol{font-weight:600;color:var(--ink)}
#tarifs.t8 .t8-coches + .t8-coches{margin-top:9px}
#tarifs.t8 .t8-plus{margin:16px 0 10px;font-size:13.5px;font-weight:600;color:var(--muted)}
#tarifs.t8 .t8-points{display:none}
#tarifs.t8 .t8-pied{max-width:620px;margin:26px auto 0;text-align:center;font-size:13.5px;line-height:1.45;color:var(--muted);text-wrap:balance}
@media (max-width:980px){#tarifs.t8 .t8-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){section#tarifs.t8.matin{background-image:radial-gradient(ellipse 90% 30% at 50% 0%,rgba(37,99,235,.08),transparent 72%)!important;background-size:100% 100%}}
@media (max-width:599px){
  section#tarifs.t8.matin{padding:44px 0 48px}
  #tarifs.t8 .t8-tete .mat-formule{max-width:34ch;margin-top:14px}
  #tarifs.t8 .t8-rail{margin:28px -20px 0;padding:6px 0 30px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  #tarifs.t8 .t8-rail::-webkit-scrollbar{display:none}
  #tarifs.t8 .t8-grille{display:flex;align-items:stretch;gap:12px;width:max-content;margin:0;padding:0 20px}
  #tarifs.t8 .t8-carte{width:calc(100vw - 76px);scroll-snap-align:center}
  #tarifs.t8 .t9-dessin svg{max-width:218px}
  #tarifs.t8 .t8-points{display:flex;justify-content:center;gap:7px;margin-top:-12px}
  #tarifs.t8 .t8-points i{width:7px;height:7px;border-radius:50%;background:#D5D9E0}
  #tarifs.t8 .t8-points i.on{background:var(--blue)}
  #tarifs.t8 .t8-pied{max-width:34ch;margin-top:18px}
}
/* Tarifs (07/11, audit des prix) : « dès » devant le prix de la formule Personnalisé. */
#tarifs.t8 .t8-prix .t8-des{font-size:15px;font-weight:600;letter-spacing:0;color:var(--muted);margin-right:-1px}
/* Tarifs sans titre (07/11, Aziz : « essaye 4 ») : les cartes arrivent directement sous l'offre. */
section#tarifs.t8.matin.sans-titre{padding-top:56px}
#tarifs.t8.sans-titre .t8-grille{margin-top:0}
@media (max-width:599px){section#tarifs.t8.matin.sans-titre{padding-top:28px}#tarifs.t8.sans-titre .t8-rail{margin-top:0}}
/* Tarifs : un titre seul, « Tarifs » (07/11, Aziz : « mets un titre »). */
#tarifs.t8 .t8-tete.seul h2{margin:0}
/* 07/11 (Aziz : « les 3 sections, fais en sorte qu'elles soient de la même longueur ») : à l'ordinateur, les trois blocs ont la même grille
   (moitié dessin, moitié texte), les mêmes marges et la même hauteur minimale, donc la même hauteur. « La réponse est prête » quitte son 0,66 / 1. */
@media (min-width:861px){
  #brancher.matin,#comment.matin,#offre.matin{padding:40px 0}
  .matin .mat-tete{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .matin .mat-offre,.matin .mat-tete{min-height:344px}
}
/* 07/11 : les tarifs ont leur page ; le lien « Voir les tarifs » de l offre est bleu, comme les liens du site. */
.matin .mat-offre-txt a[href="/prix/"]{color:var(--blue);font-weight:600;text-decoration:none;white-space:nowrap}
.matin .mat-offre-txt a[href="/prix/"]:hover{text-decoration:underline}
/* 08/11 (Aziz : « ajoute du bleu dans le titre ») : la deuxième ligne du grand titre en bleu, comme « Selon vos mails. » sur la page Tarifs. */
.hero h1 .h1-bleu{color:var(--blue)}

/* 08/11 (Aziz) : la balance tangue doucement (le fléau penche de 2°, chaque plateau suit son bout). */
.matin .bal-fleau{transform-box:view-box;transform-origin:320px 106px;animation:balFleau 4.2s ease-in-out infinite alternate}
.matin .bal-tangue-g{animation:balGauche 4.2s ease-in-out infinite alternate}
.matin .bal-tangue-d{animation:balDroite 4.2s ease-in-out infinite alternate}
@keyframes balFleau{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
@keyframes balGauche{from{transform:translateY(7px)}to{transform:translateY(-7px)}}
@keyframes balDroite{from{transform:translateY(-7px)}to{transform:translateY(7px)}}
/* « Un client écrit » : la commande Shopify flotte comme les autres pancartes */
#comment .mat-matin .sr-5{animation-duration:5.2s;animation-delay:-.6s} /* même rythme que Colissimo : les deux pancartes du bas bougent ensemble */
@media (prefers-reduced-motion: reduce){.matin .bal-fleau,.matin .bal-tangue-g,.matin .bal-tangue-d{animation:none}}
/* 08/11 (Aziz) : plus d'air entre la barre du haut et le grand titre, à l'ordinateur */
@media (min-width:861px){body .hero{padding-top:92px}}

/* 09/11, nuit (Aziz, en direct : « on reprend depuis le début ») : fond pixel (ciel, Bluo, mails), textes et bouton aux couleurs
   d’origine (titre entier foncé, bouton bleu), et un NUAGE blanc doux par-dessus le bas, comme l’exemple Crisp : l’image reste
   normale, seul le voile blanc s’épaissit progressivement sur 490 px jusqu’au début de « Derrière Bluo ». */
.scene-haut{background:#fff}
.scene-haut::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-97px;z-index:-1;pointer-events:none;background:linear-gradient(to top,#fff 0,rgba(255,255,255,.96) 60px,rgba(255,255,255,.86) 140px,rgba(255,255,255,.66) 220px,rgba(255,255,255,.42) 300px,rgba(255,255,255,.22) 370px,rgba(255,255,255,.08) 430px,rgba(255,255,255,0) 490px),url("/assets/fond-haut.webp?v=5") center top/cover no-repeat,#BFE3F8}
.scene-haut > .source{display:none}
/* Empilé (sous 1 280 px) : le fond suit le texte, le nuage commence sous les garanties, derrière la démo (méthode du QG). */
@media (max-width:1279px){
  .scene-haut::before{display:none}
  .hero-gauche{position:relative}
  .hero-gauche::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:calc(50% - 50vw);right:calc(50% - 50vw);top:-170px;bottom:-280px;background:linear-gradient(to top,#fff 0,rgba(255,255,255,.96) 60px,rgba(255,255,255,.86) 140px,rgba(255,255,255,.66) 220px,rgba(255,255,255,.42) 300px,rgba(255,255,255,.22) 370px,rgba(255,255,255,.08) 430px,rgba(255,255,255,0) 490px),url("/assets/fond-haut.webp?v=5") center top/cover no-repeat,#BFE3F8}
}
@media (max-width:999px){.hero-gauche::before{top:-92px}}
@media (max-width:860px){.hero-gauche::before{top:-56px}}
@media (max-width:600px){.hero-gauche::before{top:-26px}}
/* la barre du menu flotte par-dessus le fond (78 px) */
@media (min-width:1000px){.scene-haut{margin-top:-78px;padding-top:78px}}
/* la démo sans cadre d’écran (Aziz : « pas d’écran ») */
.hero .db-ecran{padding:0;border-radius:16px;background:none;box-shadow:none}
.hero .db-camera{display:none}
.hero .db-ecran .db-fen{border-radius:16px;box-shadow:0 0 0 1px rgba(15,23,42,.08)} /* 09/11 (Aziz) : plus d’ombre derrière la démo, juste son fin contour */
@media (max-width:600px){.hero .db-ecran{padding:0}.hero .db-ecran .db-fen{border-radius:14px}}
/* tout le titre dans le foncé d’origine (Aziz : « Vos mails clients, répondus sans vous en noir, la même couleur que le noir actuel ») ; le reste et le bouton bleu restent ceux d’origine */
.scene-haut .hero h1,.scene-haut .hero h1 .h1-bleu{color:var(--ink)}
/* 09/11 (Aziz) : la démo reste entière, sans effacement en bas ; le nuage par-dessus fait la transition */
.hero .db-masque{-webkit-mask-image:none;mask-image:none}
/* 09/11 (Aziz : « les deux doivent être centrés ») : à l'ordinateur, le texte de gauche est centré sur la hauteur de la démo */
@media (min-width:1280px){.hero .wrap > .hero-gauche{grid-row:1 / span 5;align-self:center}}
/* le nuage passe PAR-DESSUS le bas de la démo (seulement les 280 derniers px, sous le formulaire) */
.scene-haut::after{content:"";position:absolute;left:0;right:0;bottom:-97px;height:280px;z-index:3;pointer-events:none;background:linear-gradient(to top,#fff 0,rgba(255,255,255,.95) 70px,rgba(255,255,255,.75) 130px,rgba(255,255,255,.45) 185px,rgba(255,255,255,.18) 235px,rgba(255,255,255,0) 280px)}
@media (max-width:860px){.scene-haut::after{bottom:-30px;height:200px}}
/* 09/11 (Aziz : « souligne en bleu de manière stylée le mot le plus important ») : « sans vous » souligné d'un trait bleu un peu courbé, comme au feutre, dans le bleu de la marque */
.hero h1 .h1-trait{white-space:nowrap;padding-bottom:.13em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 28' preserveAspectRatio='none'%3E%3Cpath d='M6 19C80 9 170 6 294 13' fill='none' stroke='%232563EB' stroke-width='11' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100%/100% .3em}

/* ===== 09/11 (Aziz : « Version A ») : « Bluo écrit. Il retient. Il repère. » (#gains) et « Un client écrit » (#comment, devenue .mat-offre)
   suivent exactement le gabarit de « Enfin réunies » : mêmes colonnes, mêmes marges, mêmes traits de cadre, dessin à gauche. ===== */
#gains{background-image:linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line));background-size:1px 100%,1px 100%;background-repeat:no-repeat;background-position:16px 0,calc(100% - 16px) 0}
@media (min-width:1472px){#gains{background-position:calc(50% - 719.5px) 0,calc(50% + 719.5px) 0}}
@media (max-width:600px){#gains{background-image:none!important}}
#gains.matin{padding:30px 0 28px;border-top:1px solid var(--line)}
@media (min-width:1000px){#gains.matin .wrap{width:calc(100% - 32px);max-width:1440px;padding:0 var(--marge)}}
@media (max-width:599px){
  #gains.matin{padding:36px 0 40px}
  #comment .mat-offre,#gains .mat-offre{display:flex;flex-direction:column}
  #comment .mat-offre-txt,#gains .mat-offre-txt{display:contents}
}
@media (min-width:600px){#gains.matin{border-top:0}}
@media (min-width:861px){#gains.matin{padding:40px 0}}
/* 09/11 (Aziz : « alterne gauche droite gauche droite ») : dessin à gauche pour « Enfin réunies » et « Il repère », à droite pour « Où est mon colis ? » et l'offre */
@media (min-width:600px){
  #comment .mat-offre > .mat-dessin,#offre .mat-offre > .mat-dessin{grid-column:2}
  #comment .mat-offre-txt,#offre .mat-offre-txt{grid-column:1}
}
/* 09/11 (Aziz : « oui, remets-le ») : la nouvelle balance tangue doucement, pivot au centre de son fléau (320, 133) */
#offre .bal-fleau{transform-origin:320px 133px}
/* 09/11 (Aziz) : le bas de la démo disparaît entièrement dans le nuage (on voyait encore ses côtés) : un nuage blanc posé sur la démo elle-même, qui déborde en bas et rejoint celui de la page ; le formulaire et les garanties ne changent pas */
.hero .db-ecran::after{content:"";position:absolute;left:-110px;right:-110px;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 110px,#000 calc(100% - 110px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 110px,#000 calc(100% - 110px),transparent 100%);bottom:-110px;height:225px;z-index:5;pointer-events:none;background:linear-gradient(to top,#fff 0,#fff 110px,rgba(255,255,255,.5) 132px,rgba(255,255,255,.22) 158px,rgba(255,255,255,.07) 186px,rgba(255,255,255,0) 212px)}
@media (max-width:860px){.hero .db-ecran::after{bottom:-60px;height:220px;background:linear-gradient(to top,#fff 0,#fff 80px,rgba(255,255,255,.6) 110px,rgba(255,255,255,.25) 150px,rgba(255,255,255,0) 195px)}}
/* 09/11 (Aziz) : dans la démo, la croix d'annulation en bleu, et la bulle envoyée ne garde que les doubles coches et l'heure */
.hero .db-x{color:#2563EB}
.hero .db-x-anneau circle{stroke:#60A5FA}
.hero [data-pied] .db-coches{font-size:0;gap:0}
/* 09/11 (Aziz) : la double coche et l heure plus serrées, sans le point entre les deux */
.hero [data-pied]{gap:3px}
.hero [data-pied] .db-pt{display:none}

/* 10/11 (Aziz : « bien, améliore juste la qualité ») : fond = ciel bleu avec nuages et enveloppes qui volent (image refaite en 2 560 px, adoucie, sans bandes),
   à la largeur de la page, collée en haut ; son bas est déjà blanc, un fondu supplémentaire fait la jonction avec la page. Le texte est dans le ciel.
   Sous 1 280 px et au téléphone : bleu ciel seul (le texte passe avant). */
.scene-haut{background:#fff}
@media (min-width:1280px){
  .scene-haut::before{left:0;right:0;top:0;bottom:-97px;width:auto;height:auto;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff) 0 calc(56.28vw - 13.8vw)/100% 14vw no-repeat,url("/assets/fond-ciel-accueil.svg?v=2") center top/100% auto no-repeat,#fff}
}
@media (max-width:1279px){
  .hero-gauche::before{background:linear-gradient(to top,#fff 0,#fff 40px,rgba(255,255,255,.7) 110px,rgba(255,255,255,0) 300px),#a9c9fb}
}