/* ADP Peinture — ajouts au CSS de la maquette (site.css, repris tel quel).
   Rien ici ne change le rendu de la maquette sur ordinateur : seulement ce
   que le site a en plus (pages d'information, formulaire réel, mentions
   « à compléter ») et les corrections pour téléphone. */

/* Mentions [à compléter] de la console : visibles, à remplir avant la mise en ligne. */
.attente{background:#fff3c4;color:#7a5b00;border-radius:4px;padding:0 4px}

/* Numéros de téléphone jamais coupés en fin de ligne. */
.adp-tel{white-space:nowrap}

/* Logo vectoriel (assets/img/logo.svg) : transparent, plus besoin du
   « multiply » qui effaçait le fond crème du JPEG de la maquette. */
.logo img{mix-blend-mode:normal}

/* ── Formulaire « Votre projet » : champ piège, message d'erreur, reCAPTCHA ── */
.adp-piege{display:none}
.adp-erreur{margin-top:14px;color:#f0a48c;font-weight:700;font-size:15px;line-height:1.45}
.recaptcha-mention{margin-top:12px;font-size:12px;line-height:1.45;color:#9fb1b8}
.recaptcha-mention a{color:inherit}
.grecaptcha-badge{visibility:hidden}
#f button[disabled]{opacity:.6;cursor:wait}

/* ── Pied de page : liens ── */
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}

/* ── Pages d'information (mentions légales, confidentialité) et 404 ── */
.adp-info{min-height:50vh}
.adp-info .tete{grid-template-columns:minmax(0,1fr)}
.adp-info h1{font-size:clamp(40px,5vw,70px)}
.adp-404 .tete{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.adp-404 .h-bt{pointer-events:auto}
.adp-404{min-height:calc(100vh - 162px)}
.adp-texte{max-width:52em}
.adp-texte h2{font-size:clamp(28px,3vw,40px);margin:46px 0 14px}
.adp-texte h2:first-child{margin-top:0}
.adp-texte h3{font-size:19px;margin:28px 0 8px}
.adp-texte p,.adp-texte ul{margin-bottom:14px;color:#33505c}
.adp-texte ul{padding-left:1.3em}
.adp-texte li{margin-bottom:6px}
.adp-texte a{color:var(--eau);font-weight:600}
@media (max-width:980px){.adp-404 .tete{grid-template-columns:minmax(0,1fr)}}

/* ── Responsive (rien ne change au-dessus de 1100 px) ── */
/* Boutons « Essayer une teinte » : sur 3 colonnes, la colonne de gauche est
   trop étroite entre 981 et 1100 px (« Moutarde » dépassait de son bouton à
   992 px) : 2 colonnes. Un nom très long passe à la ligne au lieu de déborder. */
.teintes button{min-width:0;overflow-wrap:anywhere}
@media (min-width:981px) and (max-width:1100px){.teintes{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Pastilles du haut de page : sur téléphone et entre 981 et 1023 px, la phrase
   « Passez la souris, vous peignez : » et les pastilles ne tiennent pas sur une
   ligne (une pastille restait seule, comme dans la maquette) : la phrase passe
   au-dessus, les pastilles restent ensemble. */
@media (max-width:559px),(min-width:981px) and (max-width:1023px){.nuancier small{flex-basis:100%}}
/* Cartes « Nos métiers » : le numéro (01, 02…) est posé en haut de la carte ;
   sur un écran étroit, un titre de deux lignes remontait dessous (320 px).
   Place réservée sous le numéro : rien ne bouge tant que le texte tient
   dans la hauteur de la carte (cas de l'ordinateur). */
.service{padding-top:84px}
/* Case colorée du collage : une seule rangée de haut ; sur téléphone, son texte
   de trois mots était coupé (jusqu’à 480 px). */
@media (max-width:480px){.c4{font-size:12px;line-height:1.2;padding:4px}}