/* ==========================================================================
   La publicite : les annonces (carte de la grille, panneau de la fiche, bande),
   leur etiquette, et la page /annoncer/. Les jetons et les composants du site :
   la typographie, les rayons, les boutons. Rien ne bouge une fois la page
   affichee : chaque annonce garde sa place avant que son image n'arrive.
   ========================================================================== */

.wa-root .wa-pub{position:relative;color:var(--ink);min-width:0}
.wa-root .wa-pub-label{display:block;max-width:100%;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* La marque maison, sobre : WautoParc, sans capitales criardes. */
.wa-root .wa-pub-maison .wa-pub-label{letter-spacing:.02em;text-transform:none;font-size:12.5px;color:var(--ink-soft)}
.wa-root .wa-pub-ic{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:50%;background:rgba(223,41,46,.09);background:oklch(0.585 0.215 26/.09);color:var(--red)}
.wa-root .wa-pub-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wa-root .wa-pub-logo{background:#fff;border:1px solid var(--line);overflow:hidden}
.wa-root .wa-pub-logo img{width:100%;height:100%;object-fit:contain;display:block}
/* Le titre (60 caracteres au plus, la console le borne) se lit en entier : coupe a deux lignes, il perdait sa fin au telephone etroit ou avec un espacement force (acces#8). */
.wa-root .wa-pub .wa-pub-titre{margin:0;font-family:var(--fd,inherit);font-weight:700;font-size:19px;line-height:1.22;letter-spacing:-.015em;color:var(--ink);overflow-wrap:anywhere}
.wa-root .wa-pub .wa-pub-texte{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
/* Le bouton : cerne d'encre, comme sur le site de reference ; tout le cadre est cliquable. */
.wa-root .wa-pub .wa-pub-btn{border:1.5px solid var(--ink);color:var(--ink);background:transparent;padding:12px 22px;font-size:15px;max-width:100%;white-space:normal;text-align:center;line-height:1.2}
.wa-root .wa-pub-natif .wa-pub-btn::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;border-radius:inherit}
.wa-root .wa-pub a:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.wa-root .wa-pub-natif:focus-within{box-shadow:var(--focus-halo,0 0 0 3px rgba(223,41,46,.13))}@supports (color:oklch(0 0 0)){.wa-root .wa-pub-natif:focus-within{box-shadow:var(--focus-halo,0 0 0 3px oklch(0.585 0.215 26/.13))}}
@media (hover:hover) and (pointer:fine){
	.wa-root .wa-pub .wa-pub-btn{transition:background .2s,color .2s}
	.wa-root .wa-pub-natif:hover .wa-pub-btn{background:var(--ink);color:#fff}
}
/* L'etiquette posee sur un visuel : une pastille blanche, lisible sur toute image. */
.wa-root .wa-pub-image .wa-pub-label{position:absolute;top:12px;left:12px;z-index:2;max-width:calc(100% - 24px);width:max-content;padding:4px 10px;border-radius:100px;background:rgba(255,255,255,.95);background:oklch(1 0 0/.95);color:var(--ink-soft);pointer-events:none}
.wa-root .wa-pub-image .wa-pub-lien{display:block;overflow:hidden;background:var(--paper-2)}
.wa-root .wa-pub-image img{display:block;width:100%;height:auto}

/* ---- La carte de la grille : une cellule, jamais plus haute qu'une annonce ----
   Un carre en plancher (le ::before) : dans une rangee de voitures, la carte prend
   la hauteur de la rangee sans jamais la grandir (une annonce est toujours plus
   haute que large, jusqu'a 400 px de large) ; seule sur sa rangee, sur telephone,
   elle reste un carre. Le contenu est pose par-dessus. */
.wa-root .wa-pub-carte{display:block;border-radius:18px;background:#fff;box-shadow:0 0 0 1px rgba(11,13,19,.06),0 2px 4px -2px rgba(11,13,19,.1),0 10px 24px -16px rgba(11,13,19,.22);box-shadow:0 0 0 1px oklch(0.16 0.012 265/.06),0 2px 4px -2px oklch(0.16 0.012 265/.10),0 10px 24px -16px oklch(0.16 0.012 265/.22)}
.wa-root .wa-pub-carte::before{content:"";display:block;padding-top:100%}
.wa-root .wa-pub-carte .wa-pub-in{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;padding:40px 20px 20px;text-align:center;overflow:hidden;border-radius:inherit;container-type:size}
.wa-root .wa-pub-carte .wa-pub-in .wa-pub-label{position:absolute;top:16px;left:16px;right:16px;text-align:center}
/* Le contenu au centre, sans jamais rogner son haut : la marge automatique s'annule quand la place manque. */
.wa-root .wa-pub-carte .wa-pub-groupe{margin:auto 0;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.wa-root .wa-pub-carte .wa-pub-ic{width:48px;height:48px}
.wa-root .wa-pub-carte .wa-pub-titre{font-size:20px}
.wa-root .wa-pub-carte .wa-pub-btn{margin-top:4px}
/* Une cellule basse (grille serree ; la hauteur mesuree est celle du contenu, sans les 60 px de marge) :
   le texte sur deux lignes et l'icone plus petite, puis sans icone. */
@container (max-height:270px){
	.wa-root .wa-pub-carte .wa-pub-texte{-webkit-line-clamp:2}
	.wa-root .wa-pub-carte .wa-pub-ic{width:40px;height:40px}
	.wa-root .wa-pub-carte .wa-pub-ic svg{width:22px;height:22px}
}
@container (max-height:230px){
	.wa-root .wa-pub-carte .wa-pub-ic{display:none}
}
.wa-root .wa-pub-carte.wa-pub-image .wa-pub-lien{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit}
.wa-root .wa-pub-carte.wa-pub-image img{height:100%;object-fit:cover}

/* ---- Le panneau de la fiche : sous le contact, dans la colonne ---- */
.wa-root .wa-pub-panneau.wa-pub-natif{display:flex;flex-direction:column;gap:12px}
.wa-root .wa-pub-panneau .wa-pub-tete{display:flex;align-items:center;gap:14px}
.wa-root .wa-pub-panneau .wa-pub-titre{font-size:18px}
.wa-root .wa-pub-panneau.wa-pub-natif .wa-pub-btn{width:100%;justify-content:center;margin-top:4px}
.wa-root .wa-pub-panneau.wa-pub-image .wa-pub-lien{border-radius:18px;border:1px solid var(--line)}

/* ---- La bande : accueil, haut de la liste, magazine ---- */
.wa-root .wa-pub-bande.wa-pub-natif{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px 28px}
.wa-root .wa-pub-bande .wa-pub-corps{flex:1 1 240px;min-width:0;display:grid;gap:5px}
.wa-root .wa-pub-bande .wa-pub-titre{font-size:21px}
.wa-root .wa-pub-bande .wa-pub-texte{-webkit-line-clamp:2}
.wa-root .wa-pub-bande .wa-pub-btn{flex:none}
.wa-root .wa-pub-bande.wa-pub-image .wa-pub-lien{border-radius:20px}
@media (max-width:680.98px){
	.wa-root .wa-pub-bande.wa-pub-natif{flex-direction:column;align-items:flex-start;padding:20px 18px;gap:14px}
	.wa-root .wa-pub-bande.wa-pub-natif .wa-pub-corps{flex:none;width:100%}
	.wa-root .wa-pub-bande.wa-pub-natif .wa-pub-btn{width:100%;justify-content:center}
	.wa-root .wa-pub-bande .wa-pub-titre{font-size:19px}
}
/* L'air autour d'une bande : elle se pose entre deux sections, jamais collee. */
.wa-root .wa-pub-e-home{margin:clamp(8px,2vw,20px) 0 0}
.wa-root .wa-pub-e-magazine{margin:clamp(34px,5vw,60px) 0 clamp(8px,2vw,16px)}
.wa-root .wa-pub-e-liste-haut{margin:0 0 20px}
.wa-root .wa-pub-e-liste-haut.wa-pub-natif{padding:18px 22px}
.wa-root .wa-pub-e-liste-haut .wa-pub-titre{font-size:19px}
@media (max-width:680.98px){
	.wa-root .wa-pub-e-liste-haut.wa-pub-natif{padding:16px}
	.wa-root .wa-pub-e-liste-haut .wa-pub-ic{display:none}
}
@media (prefers-reduced-motion:reduce){
	.wa-root .wa-pub .wa-pub-btn{transition:none}
}

/* ==========================================================================
   La page /annoncer/ : les emplacements dessines, les formats, les regles.
   ========================================================================== */
.wa-root .wa-an-emps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.wa-root .wa-an-emp{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:10px}
.wa-root .wa-an-emp h3{margin:6px 0 0;font-size:18px;letter-spacing:-.01em}
.wa-root .wa-an-emp p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
.wa-root .wa-an-emp .wa-an-taille{font-size:13px;color:var(--muted)}
/* Les maquettes : des blocs du papier, l'emplacement en rouge. Decoratives. */
.wa-root .wa-an-maq{aspect-ratio:16/10;border-radius:12px;background:var(--paper);border:1px solid var(--line);padding:10px;display:grid;gap:6px;overflow:hidden}
.wa-root .wa-an-maq i{display:block;border-radius:5px;background:var(--paper-2)}
.wa-root .wa-an-maq i.pub{background:rgba(223,41,46,.14);background:oklch(0.585 0.215 26/.14);box-shadow:inset 0 0 0 1.5px var(--red)}
.wa-root .wa-an-maq-liste{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}
.wa-root .wa-an-maq-haut{grid-template-columns:repeat(3,1fr);grid-template-rows:.55fr 1fr 1fr}
.wa-root .wa-an-maq-haut i.pub{grid-column:1/-1}
.wa-root .wa-an-maq-fiche{grid-template-columns:1.7fr 1fr;grid-template-rows:1.2fr .8fr 1fr}
.wa-root .wa-an-maq-fiche i:first-child{grid-row:1/-1}
.wa-root .wa-an-maq-accueil{grid-template-rows:1.2fr .6fr 1fr}
.wa-root .wa-an-maq-magazine{grid-template-columns:1fr;grid-template-rows:.35fr 1fr .5fr .4fr}
.wa-root .wa-an-formats{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.wa-root .wa-an-format{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.wa-root .wa-an-format h3{margin:0 0 6px;font-size:16px}
.wa-root .wa-an-format p{margin:0;font-size:14px;line-height:1.5;color:var(--ink-soft)}
.wa-root .wa-an-format .dim{display:block;margin-top:8px;font-weight:600;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums}
.wa-root .wa-an-exemple{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:18px;align-items:start;margin-top:18px}
.wa-root .wa-an-exemple .wa-pub-carte{max-width:300px}
@media (max-width:760.98px){.wa-root .wa-an-exemple{grid-template-columns:1fr}}