/* © 2026 DRAK Infinity (NEQ 2281240509), Montréal (Québec), Canada. Feuille de l'accueil seulement (mission 31,
   lot B, fait 180). Écrite à la main, jamais générée. Règles PROPRES à la racine : tout ce qui est générique vient
   de site/commun/v4.css (.v4-wrap, .v4-sec, .v4-tete, .v4-eti, .v4-trois, .v4-carte, .v4-note, .v4-btns), de
   site/site.css (.bouton, .bouton.contour) ou de site/commun/avis.css (habillage intérieur du bloc Avis) : rien de
   tout cela n'est redéfini ici. Couleurs : jetons du thème courant seulement (--fond, --fond2, --surface, --texte,
   --texte2, --trait, --or, --or-texte), posés par site/commun/v3-habillage.mjs et déjà chargés sur toutes les
   pages (règle 1 de site/REGLES-SITE.md) : clair et nuit s'appliquent sans aucune bande sombre résiduelle. */

/* ── Bandeau (fait 180, 179k) : pleine largeur, deux colonnes sur ordinateur, une sur téléphone. Le canevas
   (site/commun/bandeau-accueil.js) dessine par-dessus .acc-cadre; sous prefers-reduced-motion ce script ne
   s'exécute jamais (le canevas reste vide, invisible, aucune requête d'icône). */
html[data-theme] .acc-bandeau{position:relative;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--trait)}
html[data-theme] .acc-bandeau-canevas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
/* CORRECTION mission 31-BIS, lot B (fait 192 b) : la maison occupe maintenant un quart de la largeur (au plus
   360 px à 1 366 px, contre 420 px avant et une colonne presque à 50/50), le texte les trois quarts — plus de
   plafond de 640 px sur le texte, qui profite donc de toute la largeur disponible pour tenir sur une ligne. */
html[data-theme] .acc-bandeau-in{position:relative;z-index:1;padding-block:clamp(40px,6vw,64px);display:grid;grid-template-columns:3fr 1fr;gap:32px;align-items:center}
html[data-theme] .acc-bandeau-txt{display:grid;gap:18px;min-width:0}
/* « Taille réduite d'un cran si besoin » (fait 192 b) pour que le mantra tienne sur une ligne à 1 366 px : plafond
   du clamp abaissé de 72 à 60px (mesuré : 60px suffit avec la colonne élargie ci-dessus). */
html[data-theme] .acc-bandeau-txt h1{font-family:var(--serif-titres);font-weight:600;line-height:1.08;font-size:clamp(36px,4.6vw,60px);margin:0;white-space:nowrap}
/* :not(.v4-eti) : CORRECTION (fait 191 b) — un simple « .acc-bandeau-txt p » écrasait aussi le sur-titre
   (<p class="v4-eti">), qui doit garder le style de .v4-eti (12 px, lettres espacées, or sombre, une seule ligne) ;
   bogue réel trouvé en vérifiant : le sur-titre s'affichait à 17,76px, couleur --texte2, pas --or-texte. */
html[data-theme] .acc-bandeau-txt p:not(.v4-eti){color:var(--texte2);font-size:clamp(16px,1.3vw,19px);max-width:56ch;margin:0}
html[data-theme] .acc-bandeau-txt .v4-eti{white-space:nowrap}
html[data-theme] .acc-cadre{position:relative;display:grid;place-items:center;min-width:0}
html[data-theme] .acc-cadre::before{content:"";position:absolute;inset:-6% -10%;border-radius:50%;background:radial-gradient(closest-side,rgba(200,150,43,.22),transparent 72%);filter:blur(6px);z-index:0}
html[data-theme] .acc-maison{position:relative;z-index:1;width:min(100%,360px);height:auto;display:block;filter:drop-shadow(0 24px 34px rgba(0,0,0,.22))}
html[data-theme] .acc-cadre img.nuit{display:none}
html[data-theme="nuit"] .acc-cadre img.clair{display:none}
html[data-theme="nuit"] .acc-cadre img.nuit{display:block}
@media (max-width:900px){
  /* CORRECTION mission 31-BIS, lot B (retour du contrôleur) : padding-top séparé du padding-bottom — la barre de
     navigation est TOUJOURS fixe sur l'accueil (outils/barre-donnees.mjs, classe .barre-fixe posée seulement ici),
     jamais en flux normal, donc rien ne réserve sa hauteur (mesurée à 54,8 px à 390 px dans un navigateur réel) :
     avec l'ancien padding-top de 32 px (clamp(32px,8vw,48px) appliqué aux deux côtés), le sur-titre (.v4-eti,
     top:32px à bottom:71,6px) se faisait couvrir sur 22,8 px par la barre. 72 px dégage la barre avec ~17 px de
     respiration, sans toucher le padding-bottom (resté à l'ancien clamp). */
  html[data-theme] .acc-bandeau-in{grid-template-columns:1fr;padding-top:72px;padding-bottom:clamp(32px,8vw,48px)}
  /* Fait 192 b, volet téléphone : texte puis maison SOUS le texte (déjà l'ordre du DOM, une seule colonne ici),
     maison réduite à 60 % de la largeur. */
  html[data-theme] .acc-maison{width:60%}
  html[data-theme] .acc-bandeau-txt h1{white-space:normal}
  /* CORRECTION (retour de qa-site après ce lot) : le sur-titre en nowrap (ligne 26, pour qu'il tienne sur une ligne à
     1 366 px) forçait sa propre largeur (581 px pour ses 74 caractères) sur TOUT .acc-bandeau-txt (grid item, pas de
     min-width:0) à 390 px — .acc-bandeau{overflow:hidden} masquait le débordement sans page défilante (scrollWidth
     restait égal à clientWidth), mais le titre et le chapeau, eux, se faisaient couper visuellement sur la droite.
     Fait 192 b ne demande la ligne unique qu'à 1 366 px ; sur téléphone, elle revient au retour à la ligne normal. */
  html[data-theme] .acc-bandeau-txt .v4-eti{white-space:normal}
}
@media (prefers-reduced-motion:reduce){html[data-theme] .acc-bandeau-canevas{display:none}html[data-theme] .acc-cadre::before{display:none}}
@media print{.acc-bandeau-canevas{display:none!important}}

/* ── Deux offres symétriques (fait 179b, 180). CORRECTION mission 31-BIS, lot B (fait 191 g, 192 c) : l'ordre vivait
   image+titre d'abord, texte ensuite ; le visiteur doit comprendre avant de regarder, donc l'ordre est maintenant
   étiquette, titre, phrase, PUIS l'image, PUIS le prix et les boutons — même gabarit des deux côtés (étiquette,
   titre sur une ligne, paragraphe, image 4:3, prix, deux boutons) quelle que soit la longueur réelle du texte. */
html[data-theme] .acc-offres{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-block:clamp(36px,6vw,56px)}
/* .acc-offre-corps (flex:1) absorbe toute la différence de longueur de texte entre les deux offres : les boutons
   (frère suivant, pas étiré) restent ancrés au bas de la carte, à la MÊME hauteur des deux côtés, quelle que soit
   la longueur réelle du paragraphe ou de la ligne de prix d'un côté ou de l'autre (fait 179b, mesuré au navigateur :
   écart de boutons de 34 px avant cette règle, 0 px après, avec grid-template-rows seul, un contenu plus long
   qu'un autre poussait les boutons sans que les deux rangées de boutons restent à la même hauteur absolue). */
html[data-theme] .acc-offre{display:flex;flex-direction:column;gap:10px;padding:0}
html[data-theme] .acc-offre-corps{display:flex;flex-direction:column;gap:10px;flex:1}
/* Toutes les petites mentions (légende de la photo, reste du prix, mention des montants, « Rencontre découverte »)
   sont maintenant réunies en UN SEUL <span class="v4-note"> sous les boutons (fait 191 d, 192 c), toujours sorti du
   flux (position absolute) pour qu'il n'ajoute JAMAIS de hauteur à .v4-btns — sinon, plus long d'un côté que de
   l'autre, il décalait les boutons entre les deux offres (mesuré au navigateur). `.acc-offre-corps` (flex:1) garde
   l'entière responsabilité d'égaliser la hauteur des deux cartes; `.v4-btns` a la même hauteur des deux côtés. */
html[data-theme] .acc-offre .v4-btns{position:relative}
html[data-theme] .acc-offre .v4-btns .v4-note{position:absolute;top:100%;left:20px;right:20px;margin:6px 0 0}
/* CORRECTION mission 31-BIS, lot B (retour du contrôleur) : la mention du Serveur maison (deux lignes, 30,8 px de
   haut, mesurée au navigateur) dépassait de 12 px sous le bord de la carte — .acc-offre n'avait aucun padding-bottom
   pour réserver la place de la mention sortie du flux (ligne ci-dessus). 40 px couvre la mention la plus haute des
   deux offres (6 px de marge + jusqu'à deux lignes) avec une marge de sécurité, sans toucher à l'alignement des
   boutons (inchangé, lignes 60-71 ci-dessus) ni à la version téléphone (mention déjà dans le flux là, ligne 126). */
@media (min-width:901px){
  html[data-theme] .acc-offre{padding-bottom:40px}
}
html[data-theme] .acc-offre-eti{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--texte);padding:0 20px}
/* Couleur fixe (#0b1a3a, la marine du site, identique à --texte en clair et à --fond en nuit) plutôt que var(--fond) : --or
   est LA MÊME teinte dans les deux thèmes, donc un texte clair-ou-sombre selon le thème donnait un contraste correct en
   nuit (texte marine sur or) mais insuffisant en clair (texte pâle sur or, 2,25:1 au lieu de 4,5:1 exigé, trouvé par
   tester-contraste.mjs, mission 31 lot B, vague 2). */
html[data-theme] .acc-offre-eti .v4-eti{background:var(--or);color:#0b1a3a;border-radius:999px;padding:2px 10px;letter-spacing:.06em}
/* Mission 31, lot D (3 novembre 2026) : min-width:0 — sans lui, le titre anglais le plus long (« Facturier Québec
   online ») forçait son conteneur à s'élargir jusqu'à la largeur de son texte non coupé (white-space:nowrap du h2),
   ce qui faisait déborder toute la page de 16 px à 360 px EN seulement. Hérité par .acc-offre-corps (flex-colonne). */
html[data-theme] .acc-offre-corps{min-width:0}
html[data-theme] .acc-offre-titre{text-decoration:none;color:var(--texte)}
html[data-theme] .acc-offre-titre:hover,html[data-theme] .acc-offre-titre:focus-visible{text-decoration:underline;text-decoration-color:var(--or);text-underline-offset:6px}
/* Mission 31, lot D : plancher du clamp abaissé de 26 à 21px — à 26px, le titre EN le plus long ne tenait pas sur
   une ligne à 360 px (269 px de texte pour 286 px disponibles une fois min-width:0 posé ci-dessus, contre 318 px de
   texte pour 318 px disponibles à 26px, sans marge); à 21px, 257 px de texte pour 286 px disponibles, avec marge
   réelle. Le FR (toujours plus court) n'est pas affecté sous 1000 px (le clamp y vaut déjà 26px ou plus par le
   terme en vw); seules les largeurs intermédiaires (environ 580 à 1000 px) affichent un titre un peu plus petit
   qu'avant, jamais en dessous de 21px. */
html[data-theme] .acc-offre-corps h2{font-size:clamp(21px,2.6vw,36px);white-space:nowrap;margin:0;padding:0 20px}
/* .acc-offre-vis : l'image seule (fait 191 g, plus le titre qui vivait ici avant cette mission) — même retrait que
   le reste du texte (20 px de chaque côté), un cadre discret (bordure, coins arrondis) puisqu'elle n'est plus accolée
   au bord de la carte (elle l'était quand elle en était le tout premier enfant, avant cette mission). */
html[data-theme] .acc-offre-vis{display:block;padding:0 20px}
/* display:block nécessaire ici (fait 191 g) : .acc-offre-cadre est un <span>, inline par défaut — avant cette mission
   il devenait un item de grille (.acc-offre-vis{display:grid}), blocifié automatiquement par la grille elle-même ;
   .acc-offre-vis est maintenant un simple display:block (il ne contient plus que l'image), donc sans cette règle
   aspect-ratio ne s'appliquait plus de façon fiable sur un élément resté inline. */
html[data-theme] .acc-offre-cadre{display:block;aspect-ratio:4/3;border-radius:12px;border:1px solid var(--trait);overflow:hidden;background:var(--fond2)}
/* CORRECTION mission 31-BIS, lot B (fait 191 f) : object-fit:cover rognait la photo du Serveur maison (1050×1150, presque
   carrée) dans ce cadre 4:3 (format paysage) — remplacé par contain, cohérent avec .acc-offre-facture ci-dessous qui
   faisait déjà ce choix pour l'autre offre. */
html[data-theme] .acc-offre-cadre img{width:100%;height:100%;object-fit:contain;display:block}
html[data-theme] .acc-offre-cadre img.acc-offre-facture{background:#fff;padding:10px}
/* Couleur fixe (#0b1a3a, la marine du site, identique à --texte en clair et à --fond en nuit) plutôt que var(--fond) : --or
   est LA MÊME teinte dans les deux thèmes, donc un texte clair-ou-sombre selon le thème donnait un contraste correct en
   nuit (texte marine sur or) mais insuffisant en clair (texte pâle sur or, 2,25:1 au lieu de 4,5:1 exigé, trouvé par
   tester-contraste.mjs, mission 31 lot B, vague 2). */
html[data-theme] .acc-offre-eti .v4-eti{background:var(--or);color:#0b1a3a;border-radius:999px;padding:2px 10px;letter-spacing:.06em}
html[data-theme] .acc-offre p{padding:0 20px;margin:0;color:var(--texte2);max-width:52ch}
/* Mission 31-BIS, lot B (fait 191 b) : le prix (une seule phrase courte, pas un paragraphe de lecture) n'a pas besoin
   d'une colonne de 52ch — ce plafond la faisait justement passer sur deux lignes avant « l'heure ». Sélecteur aussi
   précis que .acc-offre p ci-dessus (une classe + l'élément p), sans quoi .acc-offre-prix seul ne l'emporterait pas. */
html[data-theme] .acc-offre p.acc-offre-prix{max-width:none}
html[data-theme] .acc-offre-prix{color:var(--texte);font-size:15px}
html[data-theme] .acc-offre .v4-btns{padding:4px 20px 20px;flex:none}
@media (max-width:900px){
  html[data-theme] .acc-offres{grid-template-columns:1fr}
  /* Sous 900 px, les deux offres sont empilées (plus côte à côte) : la sortie de flux de la légende (ligne ci-dessus,
     nécessaire pour la symétrie des boutons en 2 colonnes) n'a plus de raison d'être — sans elle, la carte suivante
     remonte par-dessus le texte de la légende, chevauchement trouvé par tester-chevauchement-360.mjs à 360 px FR
     (mission 31, lot B, vague 2). En une seule colonne, chaque carte est pleine largeur : aucune asymétrie possible
     entre deux cartes empilées, la légende peut donc revenir dans le flux normal sans jamais rien décaler. */
  html[data-theme] .acc-offre .v4-btns .v4-note{position:static;margin:6px 20px 0}
}

/* ── Bande « Maison 3D connectée » (fait 180). CORRECTION mission 31-BIS, lot B (fait 192 d) : le titre vivait dans la
   colonne de l'image (260 px), trop étroite pour tenir sur une ligne ; il rejoint maintenant .acc-m3d-txt (colonne plus
   large), l'image devient son propre lien, réduite à 220 px au plus — tout reste sur une seule rangée. */
html[data-theme] .acc-m3d{background:var(--surface)}
html[data-theme] .acc-m3d-in{display:grid;grid-template-columns:220px 1fr auto;gap:28px;align-items:center}
html[data-theme] .acc-m3d-vis{display:block;max-width:220px}
html[data-theme] .acc-m3d-vis picture{display:block}
html[data-theme] .acc-m3d-vis img{width:100%;height:auto;border-radius:12px;display:block}
html[data-theme] .acc-m3d-txt{display:grid;gap:8px;min-width:0}
html[data-theme] .acc-m3d-txt h2{font-size:clamp(24px,2.4vw,30px);margin:0;white-space:nowrap}
html[data-theme] .acc-m3d-titre{text-decoration:none;color:var(--texte)}
html[data-theme] .acc-m3d-titre:hover,html[data-theme] .acc-m3d-titre:focus-visible{text-decoration:underline;text-decoration-color:var(--or);text-underline-offset:6px}
html[data-theme] .acc-m3d-txt p{margin:0;color:var(--texte2);max-width:56ch}
/* CORRECTION mission 31-BIS, lot B (retour du contrôleur, fait 191 b) : la phrase d'accroche (maintenant seule
   dans ce <p>, voir outils/v2-donnees.mjs) doit tenir sur une ligne à 1 366 px, comme le titre (ligne 146) et le
   sur-titre « Bientôt · … » (.v4-eti) — même procédé : nowrap + max-width:none ici (56ch ci-dessus la coupait
   avant la fin), retour à la normale sous 900 px (média ci-dessous). La nouvelle mention « Tourne sur votre
   Serveur maison. » (.v4-note, 11 px italique, fait 191 d) garde le max-width de la règle générale ci-dessus. */
html[data-theme] .acc-m3d-txt p:not(.v4-note){white-space:nowrap;max-width:none}
@media (max-width:900px){
  html[data-theme] .acc-m3d-in{grid-template-columns:1fr}
  html[data-theme] .acc-m3d-bouton{justify-self:start}
  html[data-theme] .acc-m3d-txt p:not(.v4-note){white-space:normal}
}

/* ── « Pas de promesse, des preuves. » (fait 180) : carte entière = un seul lien (179e), image en haut pleine largeur
   (marge négative sur .acc-preuve-img pour sortir des 20 px de marge intérieure de .v4-carte, SEULE l'image en sort),
   corps en dessous dans les 20 px de marge intérieure normaux de .v4-carte.
   CORRECTION mission 31-BIS, lot B (fait 191 a, retour de Yannick) : .acc-preuve mettait padding:0 sur TOUTE la carte
   (pas seulement l'image), donc .acc-preuve-corps (le texte, dont « Regarder la vidéo ») touchait les bords et se
   faisait couper par l'arrondi de .v4-carte. padding:0 retiré : la carte garde le padding:20px hérité de .v4-carte,
   seule l'image en sort encore (sa propre marge négative, ci-dessous). */
html[data-theme] .acc-preuves-tete{text-align:center;justify-items:center}
/* Mission 32, lot A (fait A5, ordre du 6 novembre 2026) : la règle de la mission 31-BIS (fait 192 e), qui mettait « Trois
   choses à regarder avant de m'écrire. » en 13 px italique au lieu du style générique de .v4-tete p (18px, pas italique),
   est RETIRÉE — ce n'est pas une précision (il n'y en a aucune autre à cet endroit, c'est la seule phrase sous le titre),
   c'est la sous-phrase de section comme les autres pages V4 en ont une partout; fait A5 demande que l'italique reste
   réservé aux précisions, en 11 px (.v4-note). .acc-preuves-tete p retombe donc sur le style générique, hérité, jamais
   redéfini ici. */
html[data-theme] .acc-preuve{text-decoration:none;color:var(--texte);display:grid;gap:0;overflow:hidden}
html[data-theme] .acc-preuve-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--fond2);margin:-20px -20px 14px}
/* CORRECTION mission 31-BIS, lot B (fait 191 f, retour de qa-site après ce lot) : les trois photos de ce cadre 16:10
   (1280×720, 1024×688, et la photo personnelle déjà traitée par .acc-preuve-img-sm ci-dessous) ont toutes un ratio
   un peu différent de 16:10 — contain pour les trois, plus de .acc-preuve-img-sm à part (devient un alias sans
   effet, gardé pour ne rien casser côté appelant). */
html[data-theme] .acc-preuve-img img{width:100%;height:100%;object-fit:contain;display:block}
/* CORRECTION mission 31-BIS, lot B (fait 191 f) : la carte « Serveur maison » (photo personnelle 1050×1150, presque
   carrée) se faisait rogner en haut et en bas dans le cadre 16:10 (format très paysage) des cartes Preuves ; .acc-preuve-
   img-sm est déjà posée spécifiquement sur cette image (outils/accueil-donnees.mjs) : object-fit:contain réservé à elle
   seule, les deux autres cartes (captures d'écran, déjà proches du 16:10) gardent cover sans régression. */
html[data-theme] .acc-preuve-img-sm{object-fit:contain}
html[data-theme] .acc-preuve-corps{display:grid;gap:6px}
html[data-theme] .acc-preuve-corps b{font-family:var(--serif-titres);font-size:20px;font-weight:600}
html[data-theme] .acc-preuve-texte{font-size:14.5px;color:var(--texte2)}
html[data-theme] .acc-preuve-voir{font-size:14px;font-weight:600;color:var(--or-texte);text-decoration:underline;text-decoration-color:var(--or);text-underline-offset:3px}
html[data-theme] a.acc-preuve:hover b,html[data-theme] a.acc-preuve:focus-visible b{text-decoration:underline;text-decoration-color:var(--or);text-underline-offset:5px}

/* ── Avis clients (fait 180, point 6) : bloc existant (outils/avis-donnees.mjs, sectionAvis()) conservé presque
   intact (fonctionnement et textes INCHANGÉS, fait 180); les classes historiques .block/.wrap/.glass/.title/.lead/
   .cta/.visuel/.buynote n'existaient que dans l'habillage « maison » de l'ancienne racine (jamais dans un fichier
   partagé) : rendues ici en jetons V4 pour la structure pleine largeur, sans toucher au balisage de la section.
   .avis-cta, .avis-liste, .avis-carte, etc. restent entièrement du ressort de site/commun/avis.css (inchangé). */
html[data-theme] #avis.block.wrap{padding-block:clamp(36px,6vw,56px);background:var(--fond2);border-top:1px solid var(--trait)}
html[data-theme] #avis.block.wrap{padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
html[data-theme] #avis .glass{max-width:760px;margin:0 auto;display:grid;gap:14px;justify-items:center;text-align:center}
html[data-theme] #avis .visuel{width:52px;height:52px;color:var(--or-texte)}
html[data-theme] #avis .title{font-family:var(--serif-titres);font-size:clamp(26px,3vw,38px);font-weight:600;margin:0}
html[data-theme] #avis .lead{color:var(--texte2);font-size:17px;margin:0;max-width:54ch}
html[data-theme] #avis .cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:6px 0 0}
html[data-theme] #avis .btn{display:inline-block;font-weight:700;font-size:15px;letter-spacing:.03em;padding:13px 24px;border-radius:999px;cursor:pointer;text-decoration:none;border:1px solid var(--trait);background:transparent;color:var(--texte)}
html[data-theme] #avis .btn.g{background:linear-gradient(135deg,var(--or-texte),var(--or));color:var(--fond);border-color:transparent}
html[data-theme] #avis .btn:hover,html[data-theme] #avis .btn:focus-visible{border-color:var(--or)}
html[data-theme] #avis .buynote{color:var(--texte2);font-size:11px;line-height:1.4;font-style:italic;margin:4px 0 0}
@media (max-width:640px){
  html[data-theme] #avis.block.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
}

/* ── Sélecteur de langue du pied (fait 180 : la bascule ?lang=en reste un bouton, comme #lang de la barre; le pied
   a besoin d'un second bouton, id distinct, même mécanisme générique data-drk-v2-en de langue-accueil.js). */
html[data-theme] #lang-pied{font:inherit;background:transparent;border:1px solid var(--trait);color:var(--texte2);border-radius:999px;padding:3px 10px;cursor:pointer}
html[data-theme] #lang-pied:hover,html[data-theme] #lang-pied:focus-visible{border-color:var(--or)}