/* =========================================================================
   ARTIS VALORISATION, REFONTE : FAMILLE LE CONTACT ET LA COMMANDE (p-contact.css)
   Pages : contact.html, commande.html, commande-confirmee.html, depot.html,
   merci.html, et 404.html (rattachee a cette famille par la mission du
   30/09/2026 : elle charge cette feuille par un chemin absolu).
   Chargee en dernier, apres socle.css et pages.css. Ce que ces pages seules
   demandent, en sections numerotees, commentaires sans accents. Seule la
   mission de cette famille ecrit ici ; un composant utile a deux
   familles va dans pages.css. Reference : REFONTE-GABARIT.md.
   Rien ici ne touche aux classes que lisent artis.js et les scripts des
   pages (dr-*, dp-*, data-*) autrement que pour les habiller.
   ------------------------------------------------------------------------- */

/* =========================================================================
   1. LA COUVERTURE COURTE (.p-couv)
   Ces pages sont des pages d'action : le titre sur l'image de verre, puis
   tout de suite la bulle qui porte l'action (formulaire, paiement, depot,
   suite), dans la meme section. La couverture des pages de lecture
   (pages.css, section 6) occupe l'ecran jusqu'a 900 px ; ici elle
   s'arrete sous le chapo. L'image garde sa regle : 980 px au plus, fondue
   dans le bleu a partir de 55 % de sa hauteur.
   ------------------------------------------------------------------------- */
.k-couv.p-couv{ padding-bottom:64px; }
@media (min-width: 761px){ .k-couv.p-couv{ padding-bottom:96px; } }
@media (min-width: 1000px){
  .k-couv.p-couv{ display:block; min-height:0; padding-top:176px; }
}
.p-couv-titre{ max-width:920px; }
/* Le titre passe a la ligne avant la partie claire de l'image, a droite
   (a 1024 px, "490 EUR" tombait a 87 % de la largeur, sur les lames). */
.p-couv-titre .k-titre-affiche{ max-width:12.5em; }
/* Paysage (image verre-paysage.webp) : la couverture courte pose le titre
   plus haut que les pages de lecture, sur la partie claire de la sphere et
   des lames (azur 1,8:1 a 2,7:1, chapo blanc 4,2:1 mesures a 1440 et 1024
   sans voile). Le voile de pages.css est remplace, pour ces pages seules,
   par un voile marine qui part de la gauche, sous le titre, et s'efface
   vers la droite : l'image reste lisible a droite du texte. Le masque de
   pages.css (fondu a partir de 55 % de la hauteur) s'applique toujours.
   04/10/2026 : meme dessin, couleur des voiles de l'accueil (--k-voile,
   pages.css section 1) au lieu du marine de la nuit. */
@media (min-aspect-ratio: 11/10){
  .k-couv.p-couv::after{
    background:linear-gradient(90deg, rgba(var(--k-voile),.62) 0%, rgba(var(--k-voile),.55) 50%, rgba(var(--k-voile),.46) 70%, rgba(var(--k-voile),.10) 100%);
  }
}
/* Ce qui suit le titre (la grille, la suite ; sur le depot, le refus ou le
   formulaire, l'un des deux seulement etant visible). */
.p-couv-titre ~ *{ margin-top:36px; }
@media (min-width: 761px){ .p-couv-titre ~ *{ margin-top:56px; } }
.p-couv .k-etiquette{ margin-bottom:16px; }

/* Texte courant pose sur le bleu, sous le titre ou sous les bulles : blanc
   a 80 % (7,9:1 sur le bleu milieu), liens blancs soulignes. */
.p-note{ margin:0; max-width:46em; font-size:16px; line-height:1.5; letter-spacing:0; color:var(--k-attenue); text-wrap:pretty; }
.p-note a, .p-couv-titre a:not(.f-bouton){ color:var(--f-texte); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; overflow-wrap:anywhere; }
.p-couv-titre .k-fil a{ text-decoration:none; }
.p-couv-titre .p-note{ margin-top:16px; }

/* =========================================================================
   2. LA GRILLE : L'ACTION A GAUCHE, LES REPERES A DROITE (.p-deux)
   Une colonne au telephone et a la tablette ; a partir de 1180 px, huit
   douziemes pour la grande bulle, quatre pour la colonne de bulles (le
   rapport de .k-c8 et .k-c4). Sous 1180 px, les quatre douziemes ne
   laissaient que 265 px a la liste des forfaits.
   ------------------------------------------------------------------------- */
.p-deux{ display:grid; gap:var(--k-ecart); grid-template-columns:minmax(0,1fr); align-items:start; }
@media (min-width: 1180px){
  .p-deux{ grid-template-columns:minmax(0,8fr) minmax(0,4fr); }
}
.p-colonne{ display:grid; gap:var(--k-ecart); align-content:start; min-width:0; }
/* Tablette : deux bulles cote a cote, la troisieme (.p-large) sur toute la
   largeur ; l'ordre de lecture ne change pas. */
@media (min-width: 761px) and (max-width: 1179px){
  .p-colonne{ grid-template-columns:repeat(2, minmax(0,1fr)); align-items:stretch; }
  .p-colonne > .p-large{ grid-column:1 / -1; }
  /* --pile : bulles de hauteurs trop inegales pour aller par deux (le delai
     et les quatre etapes de la commande) : une sous l'autre. */
  .p-colonne.p-colonne--pile{ grid-template-columns:minmax(0,1fr); }
}

/* Le formulaire dans sa grande bulle : les deux mentions finales ensemble,
   serrees sous le bouton. */
.p-mentions{ display:grid; gap:6px; }
.p-mentions .dr-mention{ margin:0; }

/* En tete de la bulle du formulaire (brief du 04/10/2026, UI08) : la phrase
   de reassurance, lue avant toute saisie, puis, quand le visiteur vient
   d'une page d'offre, le rappel de cette offre. Un filet les separe des
   champs. */
.p-rassurance{ font-size:17px; line-height:1.45; font-weight:500; color:var(--k-encre); letter-spacing:var(--f-serre); text-wrap:pretty; }
.p-origine{ font-size:var(--k-t-petit); line-height:1.45; color:var(--k-gris); letter-spacing:0; }
.p-formulaire > .k-formulaire{ margin-top:10px; padding-top:24px; border-top:1px solid var(--k-trait); }

/* Le lien de la page courante dans la barre : sur la page de contact, c'est
   le bouton sombre lui-meme ; la regle du socle (soulignement des liens
   courants) le laisse souligne, discret dans la pilule. */
.f-liens-contact .f-bouton[aria-current="page"]{ text-decoration-color:rgba(255,255,255,.55); }

/* =========================================================================
   3. LES BULLES DE LA COLONNE
   ------------------------------------------------------------------------- */
/* Le delai de reponse et l'interlocuteur : le portrait de 48 px, le nom,
   la qualite. */
.p-qui{ display:grid; grid-template-columns:48px minmax(0,1fr); align-items:center; gap:14px;
  padding-top:14px; border-top:1px solid var(--k-trait); }
.p-qui img{ width:48px; height:48px; border-radius:50%; object-fit:cover; }
.p-qui p{ margin:0; font-size:14px; line-height:1.4; color:var(--k-gris); letter-spacing:0; }
.p-qui b{ display:block; font-size:16px; font-weight:500; color:var(--k-encre); letter-spacing:var(--f-serre); }
.p-delai .k-bulle-note a{ white-space:nowrap; }
/* Depuis le 04/10/2026, l'interlocuteur ouvre la bulle (plus de titre
   au-dessus) : pas de filet en tete. Puis l'e-mail et le telephone, sous un
   filet, chacun sur sa ligne, cible de 44 px. */
.p-delai > .p-qui:first-child{ padding-top:0; border-top:0; }
.p-coord{ list-style:none; margin:0; padding:8px 0 0; border-top:1px solid var(--k-trait); display:grid; }
.p-coord > li{ margin:0; padding:0; }
.p-coord a{ display:inline-flex; align-items:center; min-height:44px; font-size:16px; line-height:1.3; letter-spacing:0; overflow-wrap:anywhere; }
.p-coord a[href^="tel:"]{ white-space:nowrap; }

/* Les etapes : numeros Klein (.k-liste--num), le titre puis la phrase. */
.p-etapes > li > div{ min-width:0; }
.p-etapes h3{ margin:0; font-size:16px; line-height:1.35; font-weight:500; letter-spacing:var(--f-serre); color:var(--k-encre); }
.p-etapes p{ margin:4px 0 0; font-size:15px; line-height:1.45; color:var(--k-gris); letter-spacing:0; }

/* Les forfaits dans la colonne etroite (1180 px et plus) et au telephone :
   le montant au-dessus de son seuil. A la tablette, la bulle prend toute la
   largeur et garde la liste de pages.css (montant a gauche). */
.p-forfaits .k-offre-prix{ margin-top:0; }
@media (min-width: 1180px){
  .p-colonne .k-offre-prix li{ grid-template-columns:minmax(0,1fr); gap:6px; padding:14px 0; }
  .p-colonne .k-offre-prix li:first-child{ padding-top:2px; }
  .p-colonne .k-offre-montant{ font-size:clamp(32px, 1.2vw + 20px, 40px); }
  .p-colonne .k-offre-montant--mot{ font-size:clamp(26px, .8vw + 18px, 32px); }
}

/* =========================================================================
   4. MERCI ET COMMANDE CONFIRMEE : LE SCEAU, LA SIGNATURE, LA SUITE
   ------------------------------------------------------------------------- */
/* Le sceau : le dessin de la page en ligne, en azur sur le bleu. Il se
   trace une fois ; en mouvement reduit, il est pose trace. */
.p-sceau{ display:block; width:64px; height:64px; margin:0 0 24px; color:var(--k-azur); overflow:visible; }
.p-sceau circle, .p-sceau path{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
@media (prefers-reduced-motion: no-preference){
  .p-sceau circle{ stroke-dasharray:214; stroke-dashoffset:214; animation:p-trace 1.1s cubic-bezier(.2,.7,.2,1) .25s forwards; }
  .p-sceau path{ stroke-dasharray:44; stroke-dashoffset:44; animation:p-trace .5s cubic-bezier(.2,.7,.2,1) 1.05s forwards; }
}
@keyframes p-trace{ to{ stroke-dashoffset:0; } }

/* L'adresse du visiteur, lue dans l'onglet, peut etre longue. */
#mrcAdresse{ overflow-wrap:anywhere; }

/* La signature : un filet court, le nom, la maison en capitales. */
.p-signature{ position:relative; margin:28px 0 0; padding-top:18px; line-height:1.35; }
.p-signature::before{ content:""; position:absolute; top:0; left:0; width:40px; height:1px; background:rgba(255,255,255,.45); }
.p-signature-nom{ display:block; font-size:17px; font-weight:500; color:var(--f-texte); letter-spacing:var(--f-serre); }
.p-signature-maison{ display:block; margin-top:6px; font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--k-attenue); }

/* La suite en trois bulles, numerotees par la liste. A partir de 761 px,
   deux colonnes : la bulle la plus longue occupe seule une colonne, les
   deux autres s'empilent dans l'autre (sur trois colonnes egales, la bulle
   courte restait blanche aux deux tiers). --droite : la troisieme bulle a
   droite (plus utilise depuis le 04/10/2026, merci passe en une colonne,
   voir .p-merci) ; --gauche : la premiere a gauche (commande confirmee).
   L'ordre de lecture reste 01, 02, 03. */
.p-suite > .k-etiquette{ margin:0 0 20px; }
.p-trois{ list-style:none; margin:0; padding:0; }
.p-trois > li{ list-style:none; }
@media (min-width: 761px){
  .k-grille.p-trois{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .p-trois--droite > li:nth-child(1), .p-trois--droite > li:nth-child(2){ grid-column:1; }
  .p-trois--droite > li:nth-child(3){ grid-column:2; grid-row:1 / span 2; }
  .p-trois--gauche > li:nth-child(1){ grid-column:1; grid-row:1 / span 2; }
  .p-trois--gauche > li:nth-child(2), .p-trois--gauche > li:nth-child(3){ grid-column:2; }
}
@media (min-width: 1180px){
  .k-grille.p-trois{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
  .k-grille.p-trois--gauche{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
}
.p-trois .k-bulle-texte + .k-postes, .p-trois .k-bulle-texte + .k-liste{ margin-top:2px; }
.p-trois .k-liste > li{ font-size:15px; }
.p-trois .k-bulle-note{ padding-top:4px; }
.p-suite > .f-boutons{ margin-top:28px; }
.p-suite > .p-note{ margin-top:28px; }

/* Merci (Raphael, 04/10/2026) : le message centre, puis la suite en une
   seule colonne centree, 01, 02 et 03 l'une sous l'autre. La signature
   garde son filet, centre lui aussi. Sur l'image paysage, le voile qui
   partait de la gauche devient egal sur toute la largeur : le texte
   centre passe sur la partie claire de l'image. Depuis le 09/10/2026
   (audit telephone du 8 octobre), sous 761 px, la page est au fer a
   gauche comme les autres : section 9f. */
.p-merci .p-couv-titre{ max-width:760px; margin-inline:auto; text-align:center; }
.p-merci .p-couv-titre .k-titre-affiche{ max-width:none; }
.p-merci .p-sceau{ margin:0 auto 24px; }
.p-merci .k-chapo, .p-merci .p-note{ margin-inline:auto; text-wrap:balance; }
.p-merci .p-signature::before{ left:50%; transform:translateX(-50%); }
.p-merci .p-suite{ max-width:760px; margin-inline:auto; }
.p-merci .p-suite > .k-etiquette{ text-align:center; }
.p-merci .k-grille.p-trois{ grid-template-columns:minmax(0,1fr); gap:16px; }
.p-merci .p-suite > .f-boutons{ justify-content:center; }
@media (min-aspect-ratio: 11/10){
  .k-couv.p-couv.p-merci::after{ background:linear-gradient(90deg, rgba(var(--k-voile),.52) 0%, rgba(var(--k-voile),.58) 50%, rgba(var(--k-voile),.52) 100%); }
}

/* =========================================================================
   5. COMMANDE : LE PRIX, CE QUI EST INCLUS, LE PAIEMENT
   ------------------------------------------------------------------------- */
.p-commande .commande-prix{ margin:0; }
.p-commande .k-bulle-titre{ margin-top:12px; }
.p-commande .k-liste > li{ padding-left:26px; position:relative; }
.p-commande .k-liste > li::before{ content:""; position:absolute; left:2px; top:calc(12px + .62em); width:7px; height:7px; border-radius:50%; background:var(--k-klein); }
.p-commande .k-liste > li:first-child::before{ top:calc(4px + .62em); }
/* Le paiement (masque tant que le lien est vide, artis.js) et la demande
   qui le remplace : sous un filet, le texte puis le bouton. */
.p-payer{ display:grid; gap:14px; justify-items:start; margin-top:12px; padding-top:22px; border-top:1px solid var(--k-trait); }
.p-payer > p{ margin:0; font-size:16px; line-height:1.5; color:var(--k-encre); letter-spacing:0; text-wrap:pretty; }
.p-payer > p.aide{ font-size:14px; line-height:1.45; color:var(--k-gris); }
.p-payer a:not(.f-bouton){ color:var(--k-klein); text-underline-offset:3px; }
@media (max-width: 760px){ .p-payer .f-bouton{ justify-self:stretch; } }

/* =========================================================================
   6. DEPOT : TROIS BULLES DANS LE FORMULAIRE
   Le formulaire (#dpForm, masque tant que le code n'est pas verifie) porte
   trois bulles : les documents, les dix questions, l'envoi. A partir de
   1000 px, chaque bulle met son intitule a gauche et ses champs a droite.
   ------------------------------------------------------------------------- */
.p-depot{ display:grid; gap:var(--k-ecart); }
.p-refus{ max-width:760px; }
.p-refus p{ margin:0; font-size:16px; line-height:1.5; letter-spacing:0; }
.p-refus strong{ font-weight:500; }
.p-depot .dp-resume{ margin:0; font-size:15px; line-height:1.45; color:var(--k-gris); letter-spacing:0; }
.p-depot .dp-resume strong{ font-weight:500; color:var(--k-encre); }
.p-depot-intro{ display:grid; gap:12px; align-content:start; min-width:0; }
.p-depot-intro > *{ margin:0; }
.p-depot-intro .aide{ font-size:15px; }
.p-depot-champs{ display:grid; gap:22px; min-width:0; }
.p-depot textarea[rows="2"]{ min-height:84px; }
/* Deux questions par rangee : les zones de saisie s'alignent par le bas,
   quand l'un des deux libelles passe sur deux lignes. */
.p-depot-champs--deux > .dr-champ{ align-content:end; }
@media (min-width: 761px){
  .p-depot-champs--deux{ grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:24px; }
  .p-depot-champs--deux > .p-plein{ grid-column:1 / -1; }
}
@media (min-width: 1000px){
  .p-depot .p-cote-a-cote{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); column-gap:48px; }
}
/* Le bouton "Retirer" qu'ajoute le script devant chaque fichier retenu :
   un lien Klein, cible de 44 px sans agrandir la ligne. */
.p-depot .dp-liste li{ align-items:center; }
.dp-retirer{ flex:none; min-height:44px; margin-block:-10px; padding:0 4px; border:0; background:transparent; cursor:pointer;
  font:500 14px/1 var(--f-police); letter-spacing:0; color:var(--k-klein); text-decoration:underline; text-underline-offset:3px; }
.dp-retirer:focus-visible{ outline:2px solid var(--k-klein); outline-offset:0; }

/* =========================================================================
   7. 404 : LES QUATRE DESTINATIONS
   Quatre cartes (.k-carte-article de pages.css) : une colonne au telephone,
   deux a partir de 640 px, quatre a partir de 1180 px.
   ------------------------------------------------------------------------- */
.p-destinations{ list-style:none; margin:0; padding:0; display:grid; gap:var(--k-ecart); grid-template-columns:minmax(0,1fr); }
.p-destinations > li{ display:grid; min-width:0; }
@media (min-width: 640px){ .p-destinations{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width: 1180px){ .p-destinations{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.p-destinations .k-carte-article{ grid-template-rows:auto auto 1fr; align-items:start; }
.p-destinations .k-carte-article .f-pastille{ align-self:end; }
.p-destinations + .p-note{ margin-top:32px; }

/* =========================================================================
   8. MOUVEMENT REDUIT ET IMPRESSION
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .p-sceau circle, .p-sceau path{ animation:none; stroke-dashoffset:0; }
}
@media print{
  .k-couv.p-couv{ padding:0; }
  .p-colonne, .p-deux{ display:block; }
}

/* =========================================================================
   9. LE TELEPHONE (audit telephone du 8 octobre, lot 5, 09/10/2026)
   Tout est sous 761 px, et chaque regle est attachee a une page de cette
   famille qui en a besoin (le formulaire de contact, le depot, le merci,
   la 404) : la commande et la commande confirmee, qui chargent aussi cette
   feuille, ne changent pas. A partir de 761 px, rien ne bouge. Au premier
   passage, rien n'etait masque ni replie et aucun texte n'etait ajoute :
   les replis et masquages proposes par l'audit sur ces pages n'avaient pas
   ete retenus par Raphael. Seconde passe telephone (09/10/2026, delegation
   de Raphael : « fais ce qui te semble etre le mieux pour faciliter les
   conversions ») : sur la page de contact, le fil d'Ariane est masque et
   le titre remonte (9d), la mission en quatre etapes se replie sous son
   titre (9h). Restent affiches comme avant : la mention sous le bouton
   d'envoi, les dix questions et le titre de la bulle du depot, la barre
   d'appel de la 404. Aucun texte n'est ajoute.
   ------------------------------------------------------------------------- */
@media (max-width: 760px){
  /* 9a. Le formulaire de contact. 16 px entre les champs au lieu de 22, et
     la zone « Votre projet » a 96 px au lieu de 128 (trois lignes, un texte
     plus long defile dans la zone) : avec le bouton de 52 px (9b), le
     bouton d'envoi remonte de 80 px a 393 px (de 1 592 a 1 512 px du haut
     de la page), sans retirer un champ. Le message d'erreur de la case
     garde 6 px sous elle, comme avec l'ecart de 22 px. */
  .p-formulaire > .k-formulaire{ gap:16px; }
  .p-formulaire .dr-case + .dr-champ-erreur{ margin-top:-10px; }
  .p-formulaire textarea{ height:96px; min-height:96px; }
  /* Les deux listes deroulantes. Une liste fermee ne peut pas replier son
     texte : a 393 px, quatre objets sur onze depassaient la zone utile de
     245 px (« Entree d'un associe ou ouverture du capital », 322 px) et
     etaient coupes net au milieu d'un mot, sept sur onze a 320 px. La
     coupure devient une ellipse, et le chevron passe a 14 px du bord avec
     40 px reserves a droite au lieu de 48 : 8 px de texte en plus. Les
     libelles ne changent pas, la liste ouverte les montre en entier. */
  .p-formulaire .k-formulaire select{
    padding-right:40px; background-position:right 14px center;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* La case de consentement passe de 22 a 24 px, cible minimale d'une
     case seule. Le libelle autour garde ses 44 px de haut, et le message
     d'erreur reste aligne sur le texte du libelle (24 + 12 = 36 px). */
  .p-formulaire .dr-case{ grid-template-columns:24px minmax(0,1fr); }
  .p-formulaire .dr-case input{ width:24px; height:24px; }
  .p-formulaire .dr-case + .dr-champ-erreur{ padding-left:36px; }

  /* 9b. Les deux boutons d'envoi, du contact et du depot : 16 px et 52 px
     de haut, comme les champs et la saisie qu'ils concluent (14 px dans un
     bouton de 48 px avant, plus petit que les libelles de 15 px). */
  #ctEnvoyer, #dpEnvoyer{ min-height:52px; font-size:16px; }

  /* 9c. Les aides sous les champs et la mention sous le bouton, au contact
     et au depot. Le socle (socle.css, section 13, point 5) les laisse en
     retour equilibre (pretty), et Safari raccourcissait leurs dernieres
     lignes : 89 px de vide sur 309 a la deuxieme ligne de l'aide du chiffre
     d'affaires, 81 px sous la mention. Elles vont au bout de leur bulle. La
     mention passe de 13 a 14 px avec un interligne de 1,45, comme les aides
     (le seul texte de phrase en 13 px de la page). */
  .p-formulaire .aide, .p-depot .aide{ text-wrap:wrap; }
  .p-formulaire .dr-mention, .p-depot .dr-mention{ font-size:14px; line-height:1.45; text-wrap:wrap; }

  /* 9d. La tete de la page de contact (.p-contact, sa couverture). Au
     premier passage, son fil d'Ariane passait en 14 px (pages.css, section
     6, le fait depuis pour tous les fils). Depuis la seconde passe
     telephone (09/10/2026, delegation de Raphael, constat 95), il est
     masque, nav comprise : le visiteur arrive d'une annonce, d'une offre
     ou d'un mail et n'a rien a remonter, et la barre garde le lien de
     l'accueil. La couverture passe de 104 a 96 px en haut (pages.css,
     section 6). Le titre et le premier champ remontent de 52 px (44 px du
     fil et de ses marges, 8 px de couverture), a toutes les largeurs du
     telephone : de 524 a 472 px du haut de la page a 393 px, de 562 a
     510 px a 320 px, ou le champ tient entier au-dessus du pli de 568 px.
     Le fil des autres pages ne change pas. A l'ecran seulement (screen,
     reprise du meme jour) : imprimee depuis un ordinateur, sur A4 ou
     Letter (boite de 718 a 739 px), la page passait sous ce seuil et
     perdait son fil. Depuis le 10/10/2026 (audit UI/UX du 9 octobre,
     point A12), la couverture part a 88 px : section 10a. */
  @media screen{
    .k-couv.p-couv.p-contact{ padding-top:96px; }
    .p-contact .p-couv-titre > nav{ display:none; }
  }

  /* 9e. Le depot. Le script de la page lit le champ de fichier puis le
     vide pour tenir sa propre liste, avec un bouton Retirer : le champ
     natif continuait d'afficher « aucun fichier selectionne » au-dessus des
     fichiers ajoutes et de l'etat « 3 fichiers ajoutes ». Le texte du
     navigateur est rendu transparent (le bouton garde son encre, posee par
     ::file-selector-button) et la case garde sa largeur de champ : la
     liste et l'etat restent la seule information sur les fichiers. Les
     zones de texte des dix questions (rows 2) passent de 84 a 56 px, la
     place d'une reponse courte (une reponse plus longue defile dans sa
     zone) : le bouton d'envoi remonte de 280 px a 393 px. */
  .p-depot input[type="file"]{ color:transparent; }
  .p-depot textarea[rows="2"]{ height:56px; min-height:56px; }

  /* 9f. Merci au fer a gauche, comme toutes les autres pages (audit, constat
     de coherence) : le sceau, le titre, le texte, le filet de la signature,
     l'etiquette « La suite » et le bouton. Le texte va au bout de sa
     colonne, comme le texte courant des autres pages (socle.css, section
     13, point 5, qui laisse de cote les blocs centres de cette page). Au
     centre a partir de 761 px, comme le 04/10/2026. */
  .p-merci .p-couv-titre{ margin-inline:0; text-align:left; }
  .p-merci .p-sceau{ margin:0 0 24px; }
  .p-merci .k-chapo, .p-merci .p-note{ margin-inline:0; text-wrap:wrap; }
  /* Au fer a gauche, l'adresse electronique de la note se coupait a son
     trait d'union (« contact@artis- » puis « valorisation.com ») : elle
     reste d'un seul tenant (236 px, la colonne en fait 288 a 320 px). */
  .p-merci .p-note a{ white-space:nowrap; }
  .p-merci .p-signature::before{ left:0; transform:none; }
  .p-merci .p-suite{ margin-inline:0; }
  .p-merci .p-suite > .k-etiquette{ text-align:left; }
  .p-merci .p-suite > .f-boutons{ justify-content:flex-start; }
  .p-merci .k-bulle-texte, .p-merci .k-bulle-note{ text-wrap:wrap; }

  /* 9g. La 404 : les resumes des quatre cartes au fer a gauche, sans
     cesure automatique. Le socle (section 13, point 2c) justifie les
     resumes des cartes d'analyse de 390 a 639 px, et ceux-ci, de deux ou
     trois lignes, coupaient « be-soin » et « fi-nale » et ecartaient leurs
     espaces. A 320 px et a partir de 640 px ils etaient deja a gauche. */
  .p-destinations .k-carte-article-resume{ text-align:left; -webkit-hyphens:manual; hyphens:manual; }

  /* 9h. La mission en quatre etapes, repliee sous son titre (09/10/2026,
     seconde passe telephone, delegation de Raphael, constat 90). Sous le
     bouton d'envoi, la bulle mesurait 477 px a 393 px et se lisait apres
     l'envoi. Le script de contact.html glisse dans son h2 un bouton qui
     porte le titre (aria-expanded, aria-controls vers #ctEtapes) et pose
     .p-repli sur la bulle, fermee au chargement. Le dessin des depliants
     du telephone (piliers de l'accueil, schema.css 9, et onglets des
     offres, offre.css 5) : un chevron Klein de 2 px dans un rond de papier
     de 32 px, vers le bas ferme, vers le haut ouvert. Le bouton couvre
     toute la largeur de la bulle et 64 px de haut (66 quand le titre tient
     sur deux lignes), comme le lien-bulle « Voir l'offre et les
     honoraires » qui la suit, dont la pastille a le meme centre (32 px du
     bord droit). Le titre garde son dessin
     d'etiquette et sa place a gauche. Ouverte, la liste reprend sous le
     titre avec le pied de bulle de 28 px (24 px a 360 px et moins). Sans
     script, la bulle n'a pas .p-repli : la liste reste ouverte. A l'ecran
     seulement (screen), comme la requete du script (reprise du meme jour) :
     une page imprimee, meme etroite, garde la liste ouverte sous son titre,
     sans bouton. Le repli garde l'etat choisi d'un passage du seuil a
     l'autre. */
  @media screen{
    .p-etapes-bulle.p-repli{ padding-top:0; padding-bottom:0; gap:0; }
    .p-etapes-bulle.p-repli--ouvert{ padding-bottom:28px; }
    .p-repli > .k-bulle-etiquette{ display:block; margin-inline:-22px; }
    .p-repli-bouton{
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      width:100%; min-height:64px; margin:0; padding:16px 16px 16px 22px;
      border:0; border-radius:var(--k-r-bulle); background:none; color:inherit;
      font:inherit; letter-spacing:inherit; text-transform:inherit; text-align:left;
      cursor:pointer; -webkit-tap-highlight-color:transparent;
    }
    .p-repli--ouvert .p-repli-bouton{ border-radius:var(--k-r-bulle) var(--k-r-bulle) 0 0; }
    .p-repli-bouton:focus-visible{ outline:2px solid var(--k-klein); outline-offset:-3px; }
    .p-repli-nom{ min-width:0; }
    .p-repli-rond{ position:relative; flex:none; width:32px; height:32px; border-radius:50%; background:var(--k-teinte); }
    .p-repli-rond::before{
      content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-6px 0 0 -4px;
      border-right:2px solid var(--k-klein); border-bottom:2px solid var(--k-klein);
      transform:rotate(45deg); transition:transform .2s ease, margin-top .2s ease;
    }
    .p-repli-bouton[aria-expanded="true"] .p-repli-rond::before{ transform:rotate(-135deg); margin-top:-2px; }
    .p-repli:not(.p-repli--ouvert) > .p-etapes{ display:none; }
  }
}
@media screen and (max-width: 760px) and (hover:hover){ .p-repli-bouton:hover .p-repli-rond{ background:#dbe5fa; } }
@media screen and (max-width: 360px){
  .p-etapes-bulle.p-repli--ouvert{ padding-bottom:24px; }
  .p-repli > .k-bulle-etiquette{ margin-inline:-18px; }
  .p-repli-bouton{ padding-left:18px; }
}
/* Le titre du depliant, de 361 a 400 px : son interlettrage passe de
   .22em a .16em, celui des etiquettes sous 360 px (pages.css 14), sans
   quoi « La mission en quatre etapes » (269 px) laissait « etapes » seul
   sur une deuxieme ligne a 390 et 375 px. Il tient ainsi sur une ligne a
   cote du rond a partir de 371 px, et a 359 et 360 px. Plus etroit, il se
   coupe en deux lignes egales. */
@media screen and (max-width: 400px){
  .p-repli-bouton{ letter-spacing:.16em; }
  .p-repli-nom{ text-wrap:balance; }
}
/* A l'impression : 9d et 9h ne valent qu'a l'ecran, et le script ne pose
   son bouton qu'a l'ecran de 760 px et moins (reprise du 09/10/2026, seconde
   passe telephone, delegation de Raphael). La page s'imprime comme avant,
   le fil, le titre et la liste des etapes a leur place : les regles
   d'impression qui rouvraient la liste ici ne servent plus. */

/* =========================================================================
   10. L'AUDIT UI/UX DU 9 OCTOBRE (10/10/2026), PAGE DE CONTACT
   Comme la section 9 : a l'ecran de 760 px et moins seulement (screen,
   la requete des replis du telephone), rien ne change a partir de 761 px
   ni a l'impression. Aucun texte n'est masque ni ajoute, sinon l'echo du
   libelle choisi (10b), qui reprend mot pour mot une option de la liste.
   ------------------------------------------------------------------------- */
@media screen and (max-width: 760px){
  /* 10a. Le haut de la page (audit UI/UX du 9 octobre, point A12 : « le
     contact peut commencer plus tot »). Le premier champ commencait a
     472 px du haut a 393 px, apres le titre, le chapo et la reassurance.
     Rien n'est masque, les champs gardent leur texte de 16 px et leurs
     52 px de haut, seuls les vides se resserrent :
     - La couverture part a 88 px au lieu de 96 (9d), comme celle du
       rapport d'exemple (p-rapport.css 13). Sans fil d'Ariane, le titre
       commence a 91 px du haut, 31 px sous les bulles de la barre.
     - Le chapo suit le titre a 14 px au lieu de 20, la bulle du
       formulaire suit le chapo a 24 px au lieu de 36.
     - La bulle part a 22 px de son bord au lieu de 28, comme sur ses
       cotes (18 px a 360 px et moins, ses cotes aussi).
     - La reassurance passe de 17 a 16 px, interligne 1,4 au lieu de
       1,45, graisse et encre gardees, en retour equilibre (balance) :
       deux lignes, une par phrase, de 305 a 537 px de large, une seule
       ligne de 538 a 760 px. En 17 px, elle prenait trois lignes sous
       337 px, et de 422 a 566 px sa seconde phrase se coupait entre ses
       deux lignes.
     - Le filet suit la reassurance a 14 px (l'ecart de la bulle, 24
       avant) et le premier libelle suit le filet a 16 px au lieu de 24.
     Le premier champ remonte de 54 a 55 px, et de 82 px a 320 px ou la
     reassurance tient sur deux lignes au lieu de trois : de 472 a 417 px
     du haut a 393 px, de 462 a 408 a 375 px, de 510 a 428 a 320 px
     (WebKit et Chromium). A 393 x 659 (Safari sur iPhone 15), les champs
     du nom et de l'e-mail tiennent entiers au premier ecran, et a la
     premiere visite le champ du nom finit 18 px au-dessus du bandeau de
     consentement, qui en couvrait le bas (REFONTE-GABARIT.md, 14). */
  .k-couv.p-couv.p-contact{ padding-top:88px; }
  .p-contact .k-chapo{ margin-top:14px; }
  .p-contact .p-couv-titre ~ *{ margin-top:24px; }
  .p-contact .p-formulaire{ padding-top:22px; }
  .p-contact .p-rassurance{ font-size:16px; line-height:1.4; text-wrap:balance; }
  .p-contact .p-formulaire > .k-formulaire{ margin-top:0; padding-top:16px; }

  /* 10b. Le libelle entier du choix, sous la liste (audit UI/UX du
     9 octobre, point A06). Une liste fermee coupe son texte d'une ellipse
     (9a) : « Entree d'un associe ou ouverture du capital » ou « Je
     prefere le preciser lors de l'echange » ne se relisaient qu'en
     rouvrant la liste. Le script de contact.html pose sous chaque liste,
     au telephone, un paragraphe .p-choix qui reprend le libelle de
     l'option choisie quand il est coupe, et rien sinon (masque, sans
     place prise). Gris de 14 px comme les aides, decale de 16 px pour
     partir sous le texte de la liste, a 6 px d'elle au lieu des 8 de la
     grille du champ : il se lit comme la suite de la liste, l'aide qui
     suit garde son bord. aria-hidden, la liste dit deja son choix. */
  .p-formulaire .p-choix{ margin:-2px 0 0; padding-left:16px; font-size:14px; line-height:1.45; color:var(--k-gris);
    letter-spacing:0; text-wrap:pretty; overflow-wrap:anywhere; }
}
/* 10a, a 360 px et moins : la bulle part a 18 px de son bord, comme sur
   ses cotes (pages.css, --k-pad-bulle et .k-bulle--large). */
@media screen and (max-width: 360px){
  .p-contact .p-formulaire{ padding-top:18px; }
}
/* 10a, de 320 a 359 px : la reassurance en 15 px. En 16, « Premier
   echange sans engagement. » (252 px) manquait la ligne de 252 px a 320 px
   d'un tiers de pixel, et la reassurance passait sur trois lignes. */
@media screen and (max-width: 359px){
  .p-contact .p-rassurance{ font-size:15px; }
}