/*
Theme Name: Pas ici
Description: Thème du site « Violences — Pas ici » de la Ville de Vernier, au pixel de la maquette Figma V3 de Margaux Michel (alveo.design). Interactions subtiles et modernes dans l'esprit de la maquette (règle gravée 28/07 : 100 %, pas 99 %).
Author: alveo.design
Version: 1.0.0
Text Domain: pasici
*/
:root{
	/* palette V3 (relevé Figma + écrans) */
	--prune:#5A1C3A;--prune-2:#541F39;--prune-3:#4C1530;
	--menthe:#A0DBC4;--vert:#C8EFAE;
	--rose:#FCC8D7;--rose-btn:#FACDE1;--mauve:#D6C0CD;--bleu:#CCE3FF;
	--jaune:#FEEFAC;--jaune-2:#F3EBA7;--jaune-vif:#FFD60A;--orange:#FFC48C;
	--brun:#621E01;--blanc:#FFFFFF;--noir:#111111;
	--r-btn:10px;--r-chip:14px;--r-carte:14px;
	--contenu:1080px;--gouttiere:20px;
	--police:'Nohemi',-apple-system,'Segoe UI',Roboto,Arial,sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--police);background:var(--blanc);color:var(--prune);line-height:1.4}
a{color:var(--prune)}
img,svg{max-width:100%;height:auto;display:block}
.cadre{max-width:var(--contenu);margin-inline:auto;padding-inline:22px}

/* ═══ barre haute menthe ═══ */
.topbar{background:var(--menthe)}
.topbar .cadre{display:flex;justify-content:flex-end;gap:26px;padding-block:6px}
.topbar a{color:var(--prune);text-decoration:none;font-weight:700;font-size:12px;
	letter-spacing:.07em;text-transform:uppercase;transition:opacity .15s ease}
.topbar a:hover{opacity:.65}

/* ═══ chapeau prune ═══ */
.chapeau{background:var(--prune)}
.chapeau .cadre{display:flex;align-items:center;gap:24px;padding-block:16px}
.marque{display:inline-flex;align-items:center;text-decoration:none;
	color:var(--menthe);font-weight:800;font-size:34px;letter-spacing:.01em;line-height:1}
.marque .sticker{width:56px;margin-inline-start:-14px;margin-block-start:10px}
.sticker{display:inline-block;transform:rotate(-12deg);transition:transform .25s ease}
.marque:hover .sticker{transform:rotate(-4deg) scale(1.06)}
.chapeau nav{margin-inline-start:auto}
.chapeau nav ul{display:flex;gap:34px;list-style:none;flex-wrap:wrap}
.chapeau nav a{color:var(--menthe);text-decoration:none;font-weight:600;font-size:17px;
	line-height:21px;letter-spacing:1.4px;text-transform:uppercase;position:relative;padding-block:6px}
.chapeau nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
	background:var(--vert);border-radius:2px;transform:scaleX(0);transform-origin:left;
	transition:transform .22s ease}
.chapeau nav a:hover::after,.chapeau nav .current-menu-item a::after,
.chapeau nav .current_page_item a::after{transform:scaleX(1)}

/* ═══ bandeau titre de page (pages interieures) ═══ */
.bandeau-titre{background:var(--prune);text-align:center;padding:56px 22px 72px}
.bandeau-titre h1{color:var(--vert);font-weight:700;text-transform:uppercase;
	font-size:clamp(56px,11.6vw,149px);line-height:.997;letter-spacing:.03em}
.bandeau-titre .intro{color:var(--blanc);max-width:640px;margin:28px auto 0;
	font-size:20px;line-height:26px;font-weight:500}
.bandeau-titre .intro b,.bandeau-titre .intro strong{font-weight:700}

/* ═══ heros accueil ═══ */
/* titre geant : encre #6E5362 MESUREE dans HP.png (plus claire que le fond, pas plus
   foncee — lecon recette 28/07 : une couleur ne se juge pas a l'oeil, elle s'echantillonne) */
.heros-hp{background:var(--prune);padding:48px 22px 108px}
.heros-hp .geant{position:relative;max-width:1080px;margin-inline:auto}
.heros-hp h1{color:#6E5362;font-weight:800;text-transform:uppercase;
	font-size:clamp(72px,15.3vw,196px);line-height:.92;letter-spacing:0}
.heros-hp .sticker{position:absolute;right:.5%;top:9%;width:clamp(120px,14.5vw,186px);
	filter:drop-shadow(0 6px 18px rgba(0,0,0,.18))}
.heros-hp .colonnes{max-width:1080px;margin:56px auto 0;display:grid;
	grid-template-columns:1fr 1fr;gap:48px}
.heros-hp .accroche{color:var(--vert);font-weight:600;font-size:clamp(20px,2.2vw,27px);line-height:1.22}
.heros-hp .detail{color:var(--blanc);font-size:19px;line-height:25px}

/* ═══ bandeau defilant ═══ */
.marquee{background:var(--menthe);overflow:hidden;padding-block:12px;white-space:nowrap}
.marquee__piste{display:inline-flex;animation:defile 28s linear infinite}
.marquee__piste span{display:inline-flex;align-items:center}
.marquee b{color:var(--prune);font-weight:700;font-size:16px}
.marquee i{color:var(--prune);font-style:normal;font-size:14px;margin-inline:22px}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee:hover .marquee__piste{animation-play-state:paused}

/* ═══ titres de section ═══ */
.section-titre{color:var(--prune);font-weight:700;text-transform:uppercase;
	font-size:clamp(34px,4.9vw,62px);line-height:1.02;letter-spacing:.005em}
.section-blanc{padding-block:64px}

/* ═══ boutons & chips ═══ */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:10px 18px;
	border:0;cursor:pointer;border-radius:var(--r-btn);font-weight:700;text-decoration:none;
	font-size:15px;letter-spacing:2px;text-transform:uppercase;font-family:var(--police);
	transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(90,28,58,.55)}
.btn:active{transform:translateY(0)}
.btn--rose{background:var(--rose-btn);color:var(--prune)}
.btn--prune{background:var(--prune);color:var(--blanc)}
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-block:26px}
.chip{display:inline-block;padding:9px 17px;border-radius:var(--r-chip);cursor:pointer;
	background:var(--rose);color:var(--prune);font-weight:700;font-size:12px;
	letter-spacing:.05em;text-transform:uppercase;text-decoration:none;border:0;
	font-family:var(--police);transition:transform .15s ease,background-color .15s ease}
.chip:hover{transform:translateY(-1px)}
.chip.actif{background:var(--prune);color:var(--blanc)}
.chips-rang{display:flex;align-items:center;justify-content:space-between;gap:16px}
.fleches{display:flex;gap:8px}
.fleche{width:38px;height:32px;border:0;border-radius:var(--r-btn);background:var(--prune);
	color:var(--blanc);font-size:16px;font-weight:700;cursor:pointer;
	transition:transform .15s ease,background-color .15s ease}
.fleche:hover{transform:translateY(-1px);background:var(--prune-3)}
.vignettes--fil{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,258px);
	overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-block-start:34px;gap:var(--gouttiere)}
.vignettes--fil::-webkit-scrollbar{display:none}
.vignettes--fil .vignette{scroll-snap-align:start}

/* ═══ cartes vignettes (reconnaitre) ═══ */
.vignettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
	gap:var(--gouttiere);margin-block-start:34px}
.vignette{background:var(--menthe);border-radius:var(--r-carte);padding:10px 12px 16px;
	transition:transform .22s ease,box-shadow .22s ease}
.vignette:hover{transform:translateY(-4px);box-shadow:0 16px 34px -20px rgba(90,28,58,.5)}
.vignette img{border-radius:10px;width:100%}
/* tags empiles UN PAR LIGNE comme la maquette (lecon recette 28/07) */
.vignette .tags{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-block:10px 8px}
.vignette .tags b{background:var(--prune-3);color:var(--blanc);border-radius:999px;
	padding:3px 9px;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.vignette h3{color:var(--prune);font-weight:700;font-size:17px;line-height:1.15}
.centre{text-align:center;margin-block-start:36px}

/* ═══ section « comment agir » (fond prune + blob vert) ═══ */
.agir-hp{background:var(--prune);position:relative;overflow:hidden;padding-block:72px}
.agir-hp::before{content:"";position:absolute;right:-12%;top:18%;width:56%;height:120%;
	background:var(--menthe);border-radius:48% 52% 46% 54%/58% 44% 56% 42%}
.agir-hp .cadre{position:relative}
.agir-hp .entete{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.agir-hp .section-titre{color:var(--blanc)}
.agir-hp .chapo{color:var(--blanc);max-width:380px;margin-block:22px 40px;font-size:17px;line-height:22px}
.cartes-agir{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gouttiere)}
.carte-agir{border-radius:var(--r-carte);padding:26px 24px 22px;background:var(--blanc);
	display:flex;flex-direction:column;gap:16px;
	transition:transform .22s ease,box-shadow .22s ease}
.carte-agir:hover{transform:translateY(-4px);box-shadow:0 16px 34px -18px rgba(0,0,0,.35)}
.carte-agir h3{color:var(--prune);font-weight:700;font-size:21px;line-height:1.15}
.carte-agir p{color:var(--prune);font-size:17px;line-height:22px}
.carte-agir .btn{margin-block-start:auto;align-self:flex-start;min-height:36px;padding:7px 14px;font-size:13px}
.carte-agir--jaune{background:var(--jaune)}
.carte-agir--orange{background:var(--orange)}
.carte-agir--mauve{background:var(--mauve)}

/* ═══ CTA « tu cherches de l'aide ? » ═══ */
.cta-aide{background:var(--prune);display:grid;grid-template-columns:1.2fr 1fr;overflow:hidden}
.cta-aide__gauche{padding:72px 22px 72px;max-width:640px;margin-inline-start:max(22px,calc((100vw - 1280px)/2 + 78px))}
.cta-aide__gauche h2{color:var(--blanc);font-weight:800;text-transform:uppercase;
	font-size:clamp(34px,4.9vw,62px);line-height:1.02}
.cta-aide__gauche p{color:var(--blanc);margin-block:26px 34px;font-size:clamp(19px,2.1vw,26px);line-height:1.25}
.cta-aide__droite{position:relative;background:var(--vert);display:flex;flex-direction:column;
	justify-content:center;align-items:center;gap:22px;padding:56px 44px;text-align:center}
.cta-aide__droite::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:46px;
	background:var(--prune);
	clip-path:path("M0 0 H46 C8 60,44 110,14 170 C-8 230,40 290,12 350 C-6 410,38 470,10 530 C-4 590,34 650,8 710 L8 2000 H0 Z")}
.cta-aide__droite p{color:var(--prune);font-size:19px;line-height:25px;max-width:340px}
.badge142{width:132px;transform:rotate(3deg);transition:transform .25s ease}
.cta-aide__droite:hover .badge142{transform:rotate(-2deg) scale(1.05)}

/* ═══ section signalement (hp) ═══ */
.signal-hp{background:var(--prune);padding-block:84px}
.signal-hp h2{color:var(--blanc);font-weight:800;text-transform:uppercase;
	font-size:clamp(34px,4.9vw,62px);line-height:1.02;max-width:720px}
.signal-hp p{color:var(--blanc);margin-block:22px 32px;max-width:420px;font-size:17px;line-height:22px}

/* ═══ pastilles urgence ═══ */
.pastilles{display:grid;grid-template-columns:repeat(3,minmax(180px,240px));
	justify-content:center;gap:60px;margin-block:44px}
.pastilles figure{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.pastille{width:150px;transition:transform .25s ease}
.pastilles figure:hover .pastille{transform:rotate(6deg) scale(1.05)}
.pastilles figcaption{font-size:19px;line-height:24px;font-weight:500}
.peau-prune{background:var(--prune)}
.peau-prune .pastilles figcaption{color:var(--blanc)}
.peau-menthe{background:var(--menthe);padding-block:56px}
.peau-menthe .pastilles figcaption{color:var(--prune)}
.peau-menthe .section-titre{text-align:center}

/* ═══ cartes structures d'aide ═══ */
.structures{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
	gap:var(--gouttiere);margin-block-start:30px}
.structure{background:var(--menthe);border-radius:var(--r-carte);padding:22px 22px 24px;
	display:flex;flex-direction:column;gap:12px;transition:transform .22s ease,box-shadow .22s ease}
.structure:hover{transform:translateY(-4px);box-shadow:0 16px 34px -20px rgba(90,28,58,.5)}
.structure .tags{display:flex;flex-wrap:wrap;gap:6px}
.structure .tags b{background:var(--rose-btn);color:var(--prune);border-radius:999px;
	padding:4px 11px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.structure h3{color:var(--prune);font-weight:700;font-size:21px;line-height:1.12}
.structure p{color:var(--prune);font-size:16px;line-height:21px}
.structure .adresse{display:flex;gap:8px;font-weight:600}
.structure .adresse::before{content:"📍"}
.structure .btn{align-self:flex-start;min-height:32px;padding:5px 12px;font-size:12px;margin-block-start:auto}

/* ═══ accordeons (signaler) ═══ */
.accordeons{max-width:820px;margin-block:36px}
.accordeons details{border-bottom:0;padding-block:14px}
.accordeons summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:14px;
	color:var(--prune);font-weight:500;font-size:clamp(24px,2.8vw,34px);line-height:1.15;
	transition:color .15s ease}
.accordeons summary::-webkit-details-marker{display:none}
.accordeons summary::after{content:"∨";font-weight:700;font-size:.65em;
	transition:transform .22s ease}
.accordeons details[open] summary::after{transform:rotate(180deg)}
.accordeons summary:hover{color:var(--prune-3);text-decoration:underline;text-decoration-thickness:2px}
.accordeons details>div{padding:14px 4px 10px;font-size:18px;line-height:24px;max-width:720px}

/* ═══ pied de page ═══ */
.pied{padding-block:64px 40px}
.pied .cadre{display:grid;grid-template-columns:1.1fr .9fr 1.1fr;gap:44px;align-items:start}
.pied .logo-pied{display:inline-flex;align-items:center;color:var(--prune);
	font-weight:800;font-size:30px;letter-spacing:.01em;text-decoration:none;line-height:1}
.pied .logo-pied .sticker{width:48px;margin-inline-start:-10px;margin-block-start:8px}
.pied .porteur{margin-block-start:14px;font-size:15px;line-height:20px}
.pied nav{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.pied nav a{color:var(--prune);text-decoration:none;font-weight:600;font-size:15px;
	letter-spacing:.05em;text-transform:uppercase;transition:opacity .15s ease}
.pied nav a:hover{opacity:.65}
.pied nav .btn{text-transform:none;letter-spacing:.02em;font-size:16px;min-height:40px}
.carte-vernier{background:var(--prune);color:var(--blanc);border-radius:var(--r-carte);
	padding:26px 28px;font-size:16px;line-height:22px}
.carte-vernier .vlogo{font-size:26px;font-weight:500;letter-spacing:.12em;display:flex;align-items:center;gap:8px}
.carte-vernier .vlogo::after{content:"◳";font-size:18px}
.carte-vernier .vsous{font-size:12px;opacity:.75;margin-block:2px 16px}
.carte-vernier a{color:var(--blanc);text-decoration:none}
.carte-vernier a:hover{text-decoration:underline}
.barre-basse{background:var(--menthe)}
.barre-basse .cadre{display:flex;justify-content:space-between;gap:16px;padding-block:10px}
.barre-basse,.barre-basse a{color:var(--prune);font-size:15px;text-decoration:none}
.barre-basse a:hover{text-decoration:underline}

/* ═══ contenu generique (page.php, tutoriel...) ═══ */
.contenu{max-width:var(--contenu);margin-inline:auto;padding:48px 22px}
.contenu p,.contenu li{font-size:18px;line-height:24px;max-width:760px}
.contenu p+p{margin-block-start:12px}
.contenu h2{margin-block:36px 14px}
.contenu ul{padding-inline-start:22px;margin-block:12px}
.contenu .avalider{opacity:.7;font-size:14px}
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(242px,1fr));gap:var(--gouttiere);margin-block:18px}
.carte{border-radius:var(--r-carte);padding:24px 22px;background:var(--menthe)}
.carte h3{margin-block-end:8px}
.carte.rose{background:var(--rose)}
.carte.vert{background:var(--vert)}
.carte.baie{background:var(--prune);color:var(--blanc)}
.carte.baie h3{color:var(--blanc)}
.urgence{background:var(--prune);color:var(--blanc);border-radius:var(--r-carte);padding:24px;margin-block:24px}
.urgence ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;padding:0}
.urgence li{background:rgba(255,255,255,.12);border-radius:10px;padding:12px}
.urgence b{font-size:30px;display:block}

/* ═══ vignette cliquable & fiche vignette ═══ */
a.vignette{text-decoration:none;display:block}
.bandeau-fiche{background:var(--prune);overflow:hidden}
.bandeau-fiche .cadre{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;padding-block:34px 0}
.chip-cat{display:inline-block;background:var(--menthe);color:var(--prune);border-radius:var(--r-chip);
	padding:8px 16px;font-weight:700;font-size:13px;letter-spacing:.05em;margin-block-end:16px}
.bandeau-fiche h1{color:var(--menthe);font-weight:700;font-size:clamp(30px,3.8vw,44px);line-height:1.1;padding-block-end:40px}
.fiche-blob{background:var(--jaune);border-radius:50% 50% 0 0/100% 100% 0 0;padding:36px 46px 0;align-self:end}
.fiche-blob img{max-height:300px;width:auto;margin-inline:auto}
.bandeau-stat{background:var(--menthe);padding-block:26px}
.bandeau-stat p{color:var(--prune);font-size:clamp(19px,2.2vw,26px);line-height:1.25;font-weight:500;max-width:860px}
.fiche-corps h2{color:var(--prune);font-weight:700;text-transform:uppercase;font-size:clamp(30px,4vw,52px);line-height:1.03;margin-block:26px 18px}
.fiche-corps p,.fiche-corps li{font-size:18px;line-height:24px;max-width:760px}

/* ═══ sous-pages agir (teintes jaune/orange/mauve) ═══ */
.sp-jaune{--sp:var(--jaune);--sp-titre:var(--jaune-2)}
.sp-orange{--sp:var(--orange);--sp-titre:var(--orange)}
.sp-mauve{--sp:var(--mauve);--sp-titre:var(--mauve)}
.bandeau-split{background:var(--prune);padding-block:56px 84px}
.bandeau-split .cadre{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:start}
.bandeau-split h1{color:var(--sp-titre);font-weight:700;font-size:clamp(32px,4.4vw,50px);line-height:1.1}
.bandeau-split p{color:var(--blanc);font-size:18px;line-height:23px;padding-block-start:8px}
.sp-corps{padding-block:64px 0;overflow:hidden}
.sp-corps .cadre{display:grid;grid-template-columns:1.05fr .95fr;gap:44px}
.sp-texte p{font-size:18px;line-height:24px}
.sp-texte p+p{margin-block-start:16px}
.sp-blob{background:var(--sp);border-radius:46% 54% 48% 52%/60% 52% 48% 40%;min-height:420px;
	display:flex;align-items:center;justify-content:center;text-align:center;
	margin-block-end:-80px;transform:translateY(-40px)}
.sp-blob span{color:var(--prune);font-weight:800;font-size:clamp(26px,3.2vw,40px);line-height:1.15}
.sp-quefaire{background:var(--sp);padding-block:64px;margin-block-start:80px}
.sp-quefaire .accordeons details{border:0}

/* ═══ a propos / partenaires / question ═══ */
.lead{color:var(--prune);font-weight:700;font-size:clamp(22px,2.6vw,30px);line-height:1.25;max-width:820px}
.apropos{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:start}
.apropos-sticker .sticker{width:clamp(180px,22vw,270px);margin-inline:auto;display:block}
.bandeau-citation{background:var(--prune);padding-block:44px}
.bandeau-citation p{color:var(--blanc);font-weight:600;font-size:clamp(22px,2.8vw,32px);line-height:1.25;max-width:1000px}
.bandeau-question{background:var(--prune);padding-block:40px}
.bandeau-question .cadre{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.bandeau-question p{color:var(--blanc);font-size:clamp(20px,2.4vw,28px);line-height:1.3}
.contrib{background:var(--menthe);padding-block:56px}
.contrib h2{color:var(--prune);font-weight:600;font-size:clamp(24px,2.8vw,32px);margin-block-end:20px}
.contrib li{font-size:18px;line-height:26px;max-width:640px;margin-block-end:10px}
.contrib ul{padding-inline-start:20px}
.logos-rangs{display:grid;grid-template-columns:1fr 2fr;gap:44px;margin-block-start:30px}
.logos-rangs h3{margin-block-end:16px}
.logos{display:flex;gap:34px;align-items:center;flex-wrap:wrap}
.logos img{height:96px;width:auto;transition:transform .2s ease}
.logos img:hover{transform:scale(1.04)}

/* ═══ formulaire contact ═══ */
.formulaire{max-width:700px;margin-inline:auto}
.formulaire label{display:block;color:var(--brun);font-weight:600;font-size:20px;margin-block-end:8px}
.formulaire input,.formulaire textarea{width:100%;border:2px solid var(--brun);border-radius:var(--r-btn);
	padding:13px 14px;font-family:var(--police);font-size:17px;color:var(--noir);background:var(--blanc);
	transition:border-color .15s ease,box-shadow .15s ease}
.formulaire input:focus,.formulaire textarea:focus{outline:none;border-color:var(--prune);
	box-shadow:0 0 0 3px var(--rose-btn)}
.formulaire p{margin-block-end:22px}

/* ═══ bandeau dev ═══ */
.bandeau-dev{background:var(--brun);color:var(--blanc);text-align:center;padding:6px 12px;
	font-size:12px;font-weight:600;letter-spacing:.5px}

/* ═══ accessibilite & mouvement ═══ */
:focus-visible{outline:3px solid var(--vert);outline-offset:2px;border-radius:4px}
@media(prefers-reduced-motion:reduce){
	*,*::before,*::after{transition:none!important;animation:none!important}
	html{scroll-behavior:auto}
}

/* ═══ responsive (mobile 390, pad 20 — derive du systeme desktop) ═══ */
@media(max-width:900px){
	.cartes-agir{grid-template-columns:1fr}
	.bandeau-fiche .cadre,.bandeau-split .cadre,.sp-corps .cadre,.apropos,.logos-rangs{grid-template-columns:1fr}
	.sp-blob{min-height:300px;margin-block-end:0;transform:none}
	.sp-quefaire{margin-block-start:44px}
	.cta-aide{grid-template-columns:1fr}
	.cta-aide__gauche{margin-inline:0;padding-inline:20px}
	.cta-aide__droite::before{display:none}
	.pied .cadre{grid-template-columns:1fr;gap:32px}
	.pastilles{grid-template-columns:1fr;gap:32px}
	.heros-hp .colonnes{grid-template-columns:1fr;gap:22px}
}
@media(max-width:640px){
	.cadre,.contenu{padding-inline:20px}
	.chapeau .cadre{flex-wrap:wrap;gap:12px}
	.chapeau nav{margin-inline-start:0;width:100%}
	.chapeau nav ul{gap:18px}
	.topbar .cadre{justify-content:center;gap:18px}
	.bandeau-titre{padding:36px 20px 48px}
	.barre-basse .cadre{flex-direction:column;align-items:center}
}