). La question
héritait donc du style h3 global (marges, line-height) au lieu du style
accordéon, d'où le décalage vertical avec le rond +/-.
Correctif : passage en flexbox sur le
pour un centrage vertical
automatique entre la question et l'icône, sans valeurs "top" calculées
à la main. Le sélecteur couvre h2 ET h3 pour rester robuste si le CMS
change de balise.
============================================================ */
ul#qtag {
list-style: none;
padding: 0;
margin: 0;
perspective: 900px;
}
ul#qtag li {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 1.5rem;
border-top: 1px solid #e5e9ee;
padding: 1.5rem 0;
height: auto;
animation: flipdown 0.5s ease both;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
ul#qtag li::before { display: none; }
ul#qtag li:last-of-type { border-bottom: 1px solid #e5e9ee; }
ul#qtag li:nth-of-type(1) { animation-delay: 0.5s; }
ul#qtag li:nth-of-type(2) { animation-delay: 0.75s; }
ul#qtag li:nth-of-type(3) { animation-delay: 1s; }
/* Neutralise le généré entre l'icône et la question : inutile
(et perturbant pour l'alignement) une fois le li passé en flex. */
ul#qtag li br { display: none; }
/* Question — couvre h2 ET h3, quelle que soit la balise réellement générée */
ul#qtag li h2,
ul#qtag li h3 {
order: 1;
/* CORRIGÉ (18/08/2026) : flex:1 1 auto forçait le navigateur à évaluer la
largeur "auto" (= la question sur une seule ligne, sans retour à la ligne)
pour décider si la question et le rond +/- tenaient sur la même ligne flex.
Sur mobile, cette largeur "idéale" dépassait la largeur du conteneur, donc
le rond +/- était rejeté sur sa propre ligne, sous la question — d'où le
texte collé à gauche pleine largeur et l'icône affichée en dessous au lieu
d'à droite. flex-basis:0 + min-width:0 fait partir le calcul d'une largeur
nulle : le navigateur peut alors placer la question ET l'icône sur la même
ligne, puis flex-grow:1 étend la question pour occuper l'espace restant
(qui se répartit alors sur plusieurs lignes de texte à l'intérieur de sa
propre colonne, normalement, comme prévu). */
flex: 1 1 0%;
min-width: 0;
margin: 0;
padding: 0;
font-size: 1.15rem;
line-height: 1.4;
color: #1f2731;
font-family: itc_avant_garde_gothic_stdemi, sans-serif;
cursor: pointer;
}
/* Réponse — passe systématiquement à la ligne sous la question */
ul#qtag li p {
order: 3;
flex: 1 1 100%;
color: #4a6080;
font-size: 1rem;
line-height: 1.65;
margin-top: 1rem;
position: relative;
overflow: hidden;
opacity: 1;
z-index: 2;
transition: all 0.25s ease-in-out;
}
/* Bouton rond +/- — centré verticalement avec la question via align-items du li */
ul#qtag li i {
order: 2;
position: relative;
top: auto; right: auto; left: auto; bottom: auto; /* neutralise les offsets de l'ancien bloc "ACCORDÉON" (top:2rem;right:0) s'il n'a pas été supprimé */
transform: none; /* neutralise le translate(-6px,0) de l'ancien bloc */
flex-shrink: 0;
width: 28px;
height: 28px;
box-sizing: border-box;
border: 2px solid #cc3366;
border-radius: 50%;
background-color: #cc3366; /* plein par défaut = déplié → "−" */
transition: background-color 0.2s;
}
ul#qtag li i::before,
ul#qtag li i::after {
content: "";
position: absolute;
top: 50%; left: 50%;
background-color: #fff;
transition: all 0.25s ease-in-out;
}
ul#qtag li i::before { width: 11px; height: 2px; transform: translate(-50%, -50%); } /* barre horizontale */
ul#qtag li i::after { width: 2px; height: 11px; transform: translate(-50%, -50%) scaleY(0); } /* verticale masquée → "−" */
/* Case à cocher — overlay cliquable sur tout le li */
ul#qtag li input[type=checkbox] {
position: absolute;
inset: 0;
cursor: pointer;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
z-index: 1;
opacity: 0;
}
/* État replié (coché) : réponse masquée, cercle vidé, "+" rose */
ul#qtag li input[type=checkbox]:checked ~ p {
max-height: 0;
overflow: hidden;
opacity: 0;
margin: 0;
padding: 0;
}
ul#qtag li input[type=checkbox]:checked ~ i { background-color: transparent; }
ul#qtag li input[type=checkbox]:checked ~ i::before,
ul#qtag li input[type=checkbox]:checked ~ i::after { background-color: #cc3366; }
ul#qtag li input[type=checkbox]:checked ~ i::before { transform: translate(-50%, -50%); } /* neutralise le rotate(45deg) de l'ancien bloc */
ul#qtag li input[type=checkbox]:checked ~ i::after { transform: translate(-50%, -50%) scaleY(1); } /* réaffiche la verticale → "+" */
@keyframes flipdown {
0% { opacity: 0; transform-origin: top center; transform: rotateX(-90deg); }
5% { opacity: 1; }
80% { transform: rotateX(8deg); }
83% { transform: rotateX(6deg); }
92% { transform: rotateX(-3deg); }
100% { transform-origin: top center; transform: rotateX(0deg); }
}
/* ============================================================
17. COMPOSANTS — LAB / BLOG — RÉVISÉS
============================================================ */
.lab { align-items: center; justify-content: center; display: flex; flex-direction: column; }
.lab article { font-size: 0.95rem; margin:0; flex: 1; background:#ffffff;} /* réduit : était 1rem */
.lab .row { min-height: 100%; }
.lab article p { font-size: 0.95rem; line-height: 1.2rem; min-height: 10rem; margin: 0 1rem; } /* réduit : était 1rem */
.lab article h3 { color: #cc3366; font-size: 1.15rem; margin:1rem 0; line-height: 1.4rem; text-align:left; min-height:5rem; } /* réduit : était 1.3rem */
.lab article.aguide h3 { color: #cc3366; font-size: 2.4rem; margin: 1rem auto; } /* réduit : était 3rem */
.lab article.aguide h3 > a { font-size: 2.4rem; } /* réduit : était 3rem */
.lab article a { text-align: center; text-decoration: none; }
.lab article a:hover { color: #cc3366; }
.lab article figure { margin: 0 1rem; text-align: center; }
.lab article figure img { width: 100%; height: auto; }
.lab article span.date { display:block; font-size: 0.75rem; color: #1f2731; padding: 1rem; text-align:left; font-style: italic; } /* réduit : était 0.8rem */
.lab hr { border: none; height: 1px; width: 100%; background: #F2F4F7; margin-top: 2rem; }
section.lab article a.butblue { display: block; width: 40%; margin: auto; text-align: center; }
.lab ul.page-numbers { margin: auto; }
.lab ul.page-numbers li { display: block; float: left; padding: 0; }
.lab ul.page-numbers li::before { display: none; }
.lab ul.page-numbers li a { text-decoration: none; margin: 0; padding: 1rem; }
.lab ul.page-numbers li a:hover { color: #fff; background: #cc3366; }
.lab ul.page-numbers li span.current { color: #fff; background: #cc3366; display: block; padding: 0 1rem; }
.laber article { padding: 1rem 0; }
.laber article h3, .lab article span.date { text-align: center; padding: 0 0.8rem; }
.lcab h2 { text-transform: uppercase; font-size: 1.8rem; } /* réduit : était 2rem */
.h3.know { font-size: 1.6rem; } /* réduit : était 1.8rem */
.sectionviol .s30 article h3 { min-height: 6rem; }
.sectionviol .s30 article p { min-height: 10rem; }
/* ============================================================
18. COMPOSANTS — EXPERTISE / CLIENTS
============================================================ */
#expertise h3, #expertise figure, #expertise img { text-align: center; }
#expertise h3 { color: #1f2731; font-size: 1.4rem; } /* réduit : était 1.6rem */
#clients td, #clients td figure, #clients td figure img { text-align: center; }
#clients table { width: 90%; margin: 1rem auto; padding: 1rem; border-radius: 0.8rem; }
#clients table td p { text-align: center; }
#clients .row div.colonne { text-align: center; margin: 0 auto; }
/* ============================================================
19. COMPOSANT — CITATION
============================================================ */
cite {
display: block; font-size: 2.6rem; text-align: left; /* réduit : était 3rem */
padding: 0 14rem 0 0; margin: 12rem 6rem 0;
color: #cc3366;
font-family: itc_avant_garde_gothic_stdemi, sans-serif;
line-height: 2.8rem; /* réduit : était 3rem */
}
cite::before { display: block; content: url('images/cite-l.jpg'); float: left; margin-left: -6rem; }
cite::after { display: block; content: url('images/cite-r.jpg'); width: 34%; float: right; margin-top: -6rem; }
cite span { display: block; font-size: 1rem; line-height: 1.8rem; color: #1f2731; position: absolute; bottom: 13rem; z-index: 1000; margin: 0 0 0 2rem; } /* réduit : était 1.1/2rem */
/* .primo — carte « encadré / cas » façon capture 2 :
fond quasi blanc, rail rose à gauche, corps atténué. */
.primo {
background-color: #fdf4f6; /* rose très clair — ou #fff pour du blanc pur */
border-left: 4px solid #cc3366; /* rail rose AEP */
border-radius: 0 8px 8px 0; /* arrondi à droite, plat côté rail */
padding: 1.75rem 2rem;
}
.primo h2, .primo h3 { color: #1f2731; } /* titre navy, bien lisible */
.primo p, .primo li { color: #4a6080; } /* corps atténué gris-bleu */
.primo ul li::before { color: #cc3366; } /* puces rose conservées */
/* --- Sur-titre « CAS CLIENT — … » ------------------------------------- */
.primo .eyebrow {
display: block;
font-family: 'itc_avant_garde_gothicbold', sans-serif;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #cc3366;
margin-bottom: 0.75rem;
}
.primo .eyebrow::before { content: "\25C6"; margin-right: 0.5rem; font-size: 0.7rem; }
/* --- Mots-clés cités en vraie italique Inter -------------------------- */
.primo em { font-family: 'Inter', sans-serif; font-style: italic; }
/* --- Rangée de statistiques ------------------------------------------- */
.primo .stats {
display: flex;
flex-wrap: wrap;
gap: 2.5rem;
margin-top: 1.75rem;
padding-top: 1.5rem;
border-top: 1px solid #e6dce0; /* filet discret */
}
.primo .stat { display: flex; flex-direction: column; }
.primo .stat b {
font-family: 'itc_avant_garde_gothicbold', sans-serif;
font-weight: 800; /* Inter ExtraBold */
font-size: 1.9rem;
line-height: 1.1;
color: #1f2731; /* navy par défaut */
}
.primo .stat.green b { color: #3ea76a; } /* variante verte : métrique positive */
.primo .stat span {
font-family: 'product_sansregular', sans-serif;
font-size: 0.8rem;
color: #8a9bb5; /* label discret */
margin-top: 0.35rem;
}
/* .primo2 — bloc encadré neutre (rappel, synthèse, transition),
même famille que .primo mais en version sobre : fond gris-bleu clair,
rail rose à gauche, sans eyebrow ni stats. */
.primo2 {
background-color: #f2f4f7;
border-left: 4px solid #cc3366; /* rail rose AEP, identique à .primo */
border-radius: 0 8px 8px 0; /* arrondi à droite, plat côté rail */
padding: 1.5rem 1.75rem;
margin: 1.5rem 0;
}
.primo2 p, .primo2 li { color: #33414f; margin: 0; }
.primo2 p + p { margin-top: 0.75rem; }
/* ============================================================
20. COMPOSANTS — GUIDE / SOMMAIRE
============================================================ */
.guidelist { width: 90%; margin: 0 auto; padding: 0.6rem; box-shadow: rgba(0,0,0,0.35) 0 5px 15px; background: #ffffff;}
.guidelist table {width: 90%; margin: 0 auto; color: #1f2731;}
.guidelist table tr:first-of-type td, .guidelist table tr:last-of-type td { background: #fff; }
.guidelist table tr.tend { height: 28rem; }
.guidelist table td h2 { color: #1f2731;font-size: 1.4rem; text-align: left; line-height: 1.8rem; padding: 0 1rem; margin: 0; } /* réduit : était 1.6/2rem */
.guidelist table h2::before { display: none; }
.guidelist table p { color: #1f2731;padding: 1rem; }
.guidelist hr { border: none; height: 1px; width: 80%; background:#1f2731; margin-top: 2rem; }
.guidelist table td { padding: 0; }
.guidesection h3 { font-family: itc_avant_garde_gothic_stdemi, sans-serif; font-size: 1.4rem; line-height: 1.8rem; margin: 2rem 0; color: #cc3366; } /* réduit : était 1.6/2rem */
.guidesection p { margin-left: 0; }
.guide-form .wpcf7-form { background: #fff; padding: 0.4rem; flex: 1; }
.guidesection .wpcf7-response-output { color: #0f1318; }
/* ============================================================
21. CONTENU ARTICLE (#scontent) — RÉVISÉ
============================================================ */
#scontent h2::before { display: none; }
#scontent h2 { font-size: 1.5rem; background: transparent; line-height: 1.9rem; padding: 1.4rem; font-family: itc_avant_garde_gothic_stdemi, sans-serif; color: #cc3366; } /* réduit : était 1.8rem */
#scontent h2:first-of-type { font-family: itc_avant_garde_gothicbold, sans-serif; font-size: 2.2rem; line-height: 3rem; margin: 2rem 0; color: #1f2731; text-align: center; } /* réduit : était 2.6/3.6rem */
/* #scontent h2:first-of-type::before { display: inline; content: "/"; color: #cc3366; } */ /* "/" supprimé devant le titre principal de #scontent */
#scontent h3 { color: #1f2731; margin: 2rem 1rem; display: block; width: 90%; font-size: 1.35rem; } /* réduit : était 1.6rem */
#scontent h3::after { display: block; }
#scontent .image { display: flex; justify-content: center; margin: 0 auto; }
#scontent img { display: block; margin: 2rem auto; width: 99%; border-radius: 16px; }
#scontent p { margin: 0.6rem; font-size: 1rem; } /* réduit : était 1.1rem */
#scontent .row:first-of-type h2 { margin-top: 1rem; }
/* .aep-stats — version améliorée
Changements par rapport à l'existant (lignes 1315-1345 de style4.css) :
1) Suppression du soulignement plein sur .stat-label : sur 2-3 lignes,
un texte entièrement souligné se lit comme un lien cliquable qui ne
mène nulle part — mauvais signal pour l'utilisateur. Le poids de
police (stdemi) suffit à créer la hiérarchie.
2) Ajout d'un cadre (bordure + ombre légère + coins arrondis) sur le
conteneur .aep-stats, pour l'aligner visuellement sur les autres
composants du site (.aep-cards-dark, .aep-phases) qui sont tous
encadrés — actuellement .aep-stats flotte seul sur fond blanc.
3) text-wrap: balance sur le label pour éviter les retours à la ligne
déséquilibrés (ex. un mot seul sur la dernière ligne).
4) Rythme vertical resserré entre nombre / label / source. */
.aep-stats {
border: 1px solid rgba(31, 39, 49, 0.12);
border-radius: 12px;
overflow: hidden;
background: #fff;
box-shadow: 0 2px 10px rgba(31, 39, 49, 0.05);
}
.aep-stats .sor {
text-align: center;
padding: 2.25rem 2rem 2rem;
}
.aep-stats .sor:not(:last-child) {
border-right: 1px solid rgba(31, 39, 49, 0.12);
}
.aep-stats .stat-nb {
display: block;
font-family: itc_avant_garde_gothicbold, sans-serif;
font-size: 3rem;
line-height: 1;
color: var(--aep-rose);
margin-bottom: 1rem;
}
.aep-stats .stat-label {
display: block;
font-family: itc_avant_garde_gothic_stdemi, sans-serif;
font-size: 0.9rem;
line-height: 1.5rem;
color: var(--aep-dark);
text-decoration: none;
text-wrap: balance;
}
.aep-stats .stat-source {
display: block;
font-family: product_sansregular, sans-serif;
font-size: 0.78rem;
color: #888;
font-style: italic;
margin-top: 0.85rem;
}
.aep-kpi { padding: 0; overflow: hidden; }
.aep-kpi__row {
display: flex;
align-items: stretch;
border-bottom: 1px solid #e0e0e0;
}
.aep-kpi__row:last-child { border-bottom: none; }
.aep-kpi__badge {
min-width: 120px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: itc_avant_garde_gothicbold, sans-serif;
font-size: 1.4rem;
padding: 1.25rem 1rem;
border-radius: 0;
}
.aep-kpi__text {
margin: 0;
padding: 1.25rem 1.5rem;
display: flex;
align-items: center;
font-family: product_sansregular, sans-serif;
font-size: 1rem;
line-height: 1.5rem;
color: var(--aep-dark);
}
.aep-cards { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
.aep-cards .row { width: 100%; margin: 0; background: #F2F4F7; }
.aep-cards .s50 {
background: #fff;
padding: 1.75rem 2rem;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.aep-cards .s50:nth-child(even) { border-right: none; }
.aep-cards .s50:nth-last-child(-n+2) { border-bottom: none; }
.aep-cards .card-num {
display: block;
font-family: itc_avant_garde_gothicbold, sans-serif;
font-size: 2rem;
color: var(--aep-rose);
line-height: 1;
margin-bottom: 0.5rem;
}
.aep-cards .card-title {
display: block;
font-family: itc_avant_garde_gothicbold, sans-serif;
font-size: 0.85rem;
color: var(--aep-dark);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.75rem;
}
/* .aep-cards-dark — variante de .aep-cards avec bandeau titre bleu marine
pleine largeur (numéro + premier mot du titre en rose souligné) et
corps de texte clair en dessous. Réutilise les variables de marque
déjà définies (--aep-dark, --aep-rose). */
.aep-cards-dark { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
.aep-cards-dark .row { width: 100%; margin: 0; }
.aep-cards-dark .s50 {
background: #fff;
padding: 0;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.aep-cards-dark .s50:nth-child(even) { border-right: none; }
.aep-cards-dark .s50:nth-last-child(-n+2) { border-bottom: none; }
.aep-cards-dark .card-header {
background: var(--aep-dark);
color: #fff;
padding: 1rem 1.5rem;
font-family: itc_avant_garde_gothicbold, sans-serif;
font-size: 1.05rem;
line-height: 1.4rem;
}
.aep-cards-dark .card-num,
.aep-cards-dark .card-header strong {
color: var(--aep-rose);
text-decoration: underline;
text-underline-offset: 3px;
}
.aep-cards-dark .card-body {
padding: 1.25rem 1.5rem;
color: #6b7280;
font-size: 0.95rem;
line-height: 1.5rem;
}
.aep-cards-dark .card-body p { margin: 0; }
.aep-steps { border-top: 3px solid var(--aep-dark); }
.aep-steps .row { width: 100%; margin: 0; background: #f5f5f5; }
.aep-steps .col {
flex: 1 1 33.333%;
padding: 2rem 2.25rem;
border-right: 1px solid #ddd;
}
.aep-steps .col:last-child { border-right: none; }
.aep-steps .step-num {
display: block;
font-family: 'product_sansbold_italic', sans-serif;
font-size: 2.6rem;
line-height: 1;
color: rgba(204, 51, 102, 0.4);
margin-bottom: 0.5rem;
}
.aep-steps .step-title {
display: block;
font-family: itc_avant_garde_gothicbold, sans-serif;
font-size: 1.1rem;
line-height: 1.4rem;
color: var(--aep-dark);
margin-bottom: 0.75rem;
}
.aep-steps .col p {
margin: 0;
font-family: product_sansregular, sans-serif;
font-size: 0.95rem;
line-height: 1.5rem;
color: #6b7280;
}
.aep-phases { border: 1px solid #eee; border-radius: 8px; overflow: hidden; }
.aep-phases .phase {
padding: 1.25rem 1.5rem;
font-family: product_sansregular, sans-serif;
font-size: 1rem;
line-height: 1.6rem;
color: var(--aep-dark);
border-bottom: 1px solid #eee;
}
.aep-phases .phase:last-child { border-bottom: none; }
.aep-phases .phase:nth-child(even) { background: #f5f5f5; }
.aep-phases .phase strong { font-family: itc_avant_garde_gothicbold, sans-serif; }
.aep-phases .phase-num,
.aep-phases .phase-lead {
color: var(--aep-rose);
text-decoration: underline;
text-underline-offset: 3px;
}
/* ============================================================
PAGE AUTEUR (author.php)
============================================================ */
.site-author .author-header { padding: 3rem 0 2.5rem; }
.author-header__top {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 2rem;
}
.author-avatar img { border-radius: 50%; display: block; }
.author-header__id { display: flex; flex-direction: column; }
.author-name { color: #fff; margin: 0; }
.author-role { color: rgba(255, 255, 255, 0.65); font-size: 0.95rem; margin-top: 0.35rem; }
.author-bio p { color: rgba(255, 255, 255, 0.85); font-size: 1rem; line-height: 1.6rem; margin: 0 0 0.75rem; }
.author-meta { list-style: none; margin: 0; padding: 0; }
.author-meta li { margin-bottom: 0.5rem; }
.author-meta a {
color: #fff;
font-size: 0.95rem;
text-decoration: none;
padding-left: 1rem;
position: relative;
}
.author-meta a::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--aep-rose);
}
.author-meta a:hover { color: var(--aep-rose); }
.author-posts { padding: 3rem 0; }
.author-posts h2 { color: var(--aep-dark); margin-bottom: 2rem; }
.author-post-card {
display: block;
border: 1px solid #eee;
border-radius: 8px;
padding: 1.5rem;
background: #fff;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.author-post-card:hover { box-shadow: 0 4px 16px rgba(31, 39, 49, 0.08); transform: translateY(-2px); }
.author-post-card h3 { margin: 0 0 0.5rem; font-size: 1.1rem; line-height: 1.5rem; }
.author-post-card h3 a { color: var(--aep-dark); text-decoration: none; }
.author-post-card h3 a:hover { color: var(--aep-rose); }
.author-post-card__date { display: block; font-size: 0.8rem; color: #888; font-style: italic; margin-bottom: 0.75rem; }
.author-post-card__excerpt p { color: #666; font-size: 0.95rem; line-height: 1.5rem; margin: 0; }
.author-empty { color: #666; font-style: italic; padding: 2rem 0; text-align: center; }
.author-pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 2rem; }
.author-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.25rem;
height: 2.25rem;
padding: 0 0.5rem;
border: 1px solid #eee;
border-radius: 6px;
color: var(--aep-dark);
text-decoration: none;
font-size: 0.9rem;
}
.author-pagination .page-numbers.current { background: var(--aep-rose); border-color: var(--aep-rose); color: #fff; }
.author-pagination .page-numbers:hover:not(.current) { border-color: var(--aep-rose); color: var(--aep-rose); }
/* ============================================================
22. ÉLÉMENTS DE PAGE SPÉCIFIQUES
============================================================ */
article h4 { margin: 0 auto; padding: 0 1rem; text-align: left; display: table-cell; vertical-align: middle; line-height: 1.6rem; font-size: 1.6rem; } /* réduit : était 1.8rem */
.colonne h3:first-of-type { margin-top: 0; }
.article_image img { width: 100%; display: block; }
.bwhiter img { display: block; width: 99%; border-radius: 16px; }
.containerf { position: relative; overflow: hidden; width: 100%; padding-top: 100%; }
.responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; }
.splus p, .splus p a { font-size: 0.95rem; text-align: left; } /* réduit : était 1rem */
.splus p a {
font-size: 1.15rem; text-decoration: none; margin-top: 1em; /* réduit : était 1.3rem */
display: inline-block; font-weight: bold; padding: 0.5em; margin-left: -0.5em;
position: relative; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.splus p a::before, .splus p a::after { position: absolute; content: ''; border-bottom: 3px solid #cc3366; border-radius: 1em; bottom: 0.3em; transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); }
.splus p a::before { width: 1em; transform-origin: left; }
.splus p a::after { width: 82%; left: 1em; transform: translateX(110%); }
.splus p a:hover::before { transform: scaleX(0.3); }
.splus p a:hover::after { transform: translateX(0); }
#business div p { padding: 0 2rem; min-height: 6.4rem; }
#lospeack { padding: 2rem 0; }
.lospeack::first-line { font-weight: bold; }
/* NOTE (17/08/2026) : la maquette comportait aussi
"#ccontent { background: url(images/rose-right.png) ..., url(images/rose-left.png) ... }".
Vérifié et volontairement NON réintégré ici — décision confirmée avec l'agence. */
.circle { display: none; }
.custom-avatar-class { margin: 0 auto; }
main .sectionrose div.row p, main .sectionblue2 div.row p { margin: 2rem auto; width: 90%; }
main .sectionrose div.row, main .sectionblue2 div.row { margin: 0; padding: 1rem 0; }
main .sectionrose, main .sectionblue2 { padding: 0; }
/* ---------------------------------------------------------------
Hub thématique GEO / HUB PAGES — voir bloc canonique en fin de fichier.
Les règles hub avec spécificité renforcée (.aep-hub préfixé) sont placées
APRÈS les media queries pour garantir la priorité de cascade.
--------------------------------------------------------------- */
/* ============================================================
23. RESPONSIVE — MOBILE (≤ 1000px)
============================================================ */
@media screen and (max-width: 1000px) {
.row, .colonne,
.s75, .s70, .s60, .s50, .s40 { display: block; width: 100%; padding: 0; }
/* Restitue le layout natif pour les grilles de cartes bwhite.
Sans ce bloc, nos règles flex (spécificité 0-3-0) écraseraient
le display:block (0-1-0) ci-dessus et casseraient la mise en page mobile. */
.section.bwhite .row .colonne.s30,
.section.bwhite .row .colonne.s50 { display: block; }
.section.bwhite .row .colonne.s30 article.aguide,
.section.bwhite .row .colonne.s50 article { display: block; }
/* Les images reprennent leur hauteur naturelle sur petits écrans. */
.section.bwhite .colonne.s30 article.aguide figure img { height: auto; }
/* Les séparateurs latéraux deviennent des séparateurs horizontaux en mobile. */
.section.bwhite .row .colonne.s50,
.section.bwhite .row .colonne.s50:nth-child(even) { border-right: none; border-bottom: 1px solid #efefef; }
footer div ul { width: 80%; margin: 1rem auto; }
footer div ul.linn { text-align: center; }
footer > div.container:first-child { display: none; }
#teltext { display: none; }
.aep-cards-dark .s50 { border-right: none; border-bottom: 1px solid #ddd; }
.aep-cards-dark .s50:last-child { border-bottom: none; }
.aep-steps .col { border-right: none; border-bottom: 1px solid #ddd; }
.aep-steps .col:last-child { border-bottom: none; }
#CybotCookiebotDialog {
max-height: 85vh !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important; /* iOS */
top: 50% !important;
transform: translateY(-50%) !important;
}
#CybotCookiebotDialogBody {
max-height: 60vh !important;
overflow-y: auto !important;
}
#CybotCookiebotDialogBodyContent {
overflow-y: auto !important;
}
/* S'assurer que le footer avec les boutons reste visible */
#CybotCookiebotDialogFooter {
position: sticky !important;
bottom: 0 !important;
background: #fff !important; /* adapter à ta charte */
z-index: 999999 !important;
}
.aep-stats .sor {
display: block;
width: 100%;
border-right: none !important;
border-bottom: 1px solid rgba(31, 39, 49, 0.12);
padding: 1.75rem 1.25rem;
}
.aep-stats .sor:last-child { border-bottom: none; }
.aep-kpi__row { flex-direction: column; }
.aep-kpi__badge { min-width: auto; width: 100%; padding: 1rem; }
.aep-cards .s50:last-child { border-bottom: none; }
section h2 { padding: 1.2rem; font-size: 1.7rem; text-align: center; line-height: 2.2rem; } /* réduit : était 2/2.6rem */
section p { font-size: 1.1rem; text-align: justify; padding: 0 2rem; }
section h3, section span.date { padding: 0 0.4rem; }
main section .bwhite .row h3 { font-size: 0.95rem; line-height: 1.3rem; padding: 0; margin: 0; text-align: center; } /* réduit : était 1/1.4rem */
section article h3 { line-height: 1.8rem; } /* réduit : était 2rem */
main h1, main h2, main h3, main h4, main h5, main h6, main h7 { text-align: center; }
/* Correctif : le h3 sous le h1 (sous-titre de héros) reste en bleu marine
par défaut (couleur de base, ligne ~119) car la règle qui le passe en
rose n'existait que dans le média desktop (≥1000px, ligne ~1670).
Sur fond sombre (.section, .lab, .sectionviol), le texte devenait
invisible en mobile. Même couleur qu'en desktop pour rester lisible. */
.section h3,
.lab h3,
.sectionviol h3 { color: #cc3366; }
figure.article_image img { margin: 0 auto; }
.sectionrose, .sectionblue2 { margin: 3rem 1rem; padding: 2rem; }
.splus h5 { text-align: center; }
.sectiongray p { font-size: 1rem; margin: 0; padding: 1rem; font-weight: 300; text-align: left; } /* réduit : était 1.1rem */
ul.linn { display: block; margin: 0 auto; }
ul.linn li { line-height: 2rem; }
.row .bwhiter { width: 90%; margin: 1rem auto; padding: 1rem; }
.bwhiter h6 { text-align: center; font-size: 1.7rem; margin: 1rem; display: block; } /* réduit : était 2rem */
.bwhiter figure { width: 60%; margin: 0 auto; }
section.bwhite { background-color: #ffffff; }
cite::before, cite::after { display: none; }
cite { display: block; font-size: 2.4rem; text-align: center; padding: 1rem; margin: 1rem auto; } /* réduit : était 2.8rem */
cite span { display: block; font-size: 1.1rem; padding-top: 3rem; line-height: 1.7rem; color: #1f2731; position: static; } /* réduit : était 1.2/1.8rem */
h4 { font-size: 1.05rem; margin: 1rem 0; text-align: center; padding: 0; } /* réduit : était 1.2rem */
.author-header__top { flex-direction: column; text-align: center; }
#imgbg { text-align: center; padding: 0; }
#imgbg img { width: 100%; }
.article_image, .article_image2, .article_image3 { width: auto; margin: auto; }
.article_image2 img, .article_image3 img { width: 90%; display: block; margin: 2rem auto; }
.article_image img { width: 92%; display: block; margin: 0 auto; padding: 0; }
.laber article { padding: 2rem 0; }
#sommaire { display: none; }
.guidelist { width: 80%; margin: 2rem auto; padding: 1rem; box-shadow: rgba(0,0,0,0.35) 0 5px 15px; }
.guidelist table { color: #fff; width: 90%; margin: 0 auto; background: #fff; }
.guidelist table tr.tend { height: 16rem; background: #cc3366; }
.guidelist table p { padding: 0.4rem; }
.guidelist hr { border: none; height: 1px; width: 80%; background: #fff; margin: 2rem 0; }
.guidelist table td h2 { width: 80%; text-align: center; padding: 1rem; margin: 1rem auto; display: block; }
.sectionhome h1 { font-size: 2.2rem; line-height: 2.6rem; margin: 0 auto; width: 80%; text-align: center; } /* réduit : était 2.6/3rem */
main section.sectionhome .row h3 { font-size: 2.4rem; line-height: 3.2rem; margin: 1rem; text-align: center; } /* réduit : était 3/4rem */
main .sectionoffre .row h3, main .sectionguide .row h3, main .sectionagence .row h3, .sectionblue .row h3 { font-size: 0.95rem; line-height: 1.3rem; padding: 0.2rem; } /* réduit : était 1/1.4rem */
.full { min-width: auto; }
.center { min-width: 50%; }
figure.somicon { display: none; }
div.ariane { width: 90%; margin: 0 auto; }
.sectionpost h3, .sectionrosebg h3 { font-size: 0.95rem; line-height: 1.6rem; } /* réduit : était 1/1.8rem */
.sectionpost h1 { font-size: 2.2rem; line-height: 2.6rem; margin: 0; padding: 0; } /* réduit : était 2.6/3rem */
span.post { text-align: center; width: 80%; margin: 0 auto; padding: 0; }
.sectionrose a.butblue { margin: 1rem auto; }
.sectiongray div.bwhite { width: 90%; margin: 1rem auto; }
#scontent .row:first-of-type h2 { margin-top: 0; }
.butcenter { padding-bottom: 0.5rem; width: 90%; margin: 0 auto; }
.advice figure { display: none; }
/* Correctif : boutons alignés à gauche en mobile (héros et ailleurs).
display:inline-block ne respecte pas margin:auto — on passe en
block + largeur au contenu pour permettre le centrage horizontal. */
a.butrose, a.butblue, a.butwhite {
display: block;
width: fit-content;
margin: 0.5rem auto;
}
/* Correctif : cartes CMS harmonisées (.sectionviol .colonne.s30 > .arrow_box)
empilées en pleine largeur en mobile. Sans ça, .s30 garde son
flex-basis desktop (~30%) et les 3 cartes restent écrasées
côte à côte. Même logique que .section.bwhite .row .colonne.s30
un peu plus haut dans ce média. */
.sectionviol .colonne.s30:has(> .arrow_box) {
width: 100%;
margin-right: 0;
}
main .sectionrose div.row p.h8, main .sectionblue2 div.row p.h8 { text-align: center; font-size: 1.7rem; line-height: 2rem; } /* réduit : était 2/2.4rem */
nav#desk { display: none; }
nav#mobile { display: flex; }
/* Tables : pas de largeur minimale forcée sur mobile — c'est .table-wrapper qui gère le scroll */
table { min-width: auto; }
@media screen and (max-width: 550px) {
body { transform: translate(0,0); max-width: 100%; min-height: 100%; margin: 0; left: 0; }
}
}
/* ============================================================
24. DESKTOP (≥ 1000px) — RÉVISÉ
============================================================ */
@media screen and (min-width: 1000px) {
header { position: sticky; top: 0; z-index: 999; }
nav#desk { display: flex; }
nav#mobile { display: none; }
/* h1 desktop — RÉVISÉ */
h1 { font-size: 3rem; line-height: 4rem; margin: 2rem 1rem; } /* réduit : était 3.8/5rem */
h1 span { position: absolute; top: -6rem; font-size: 1.4rem; border-radius: 8px; box-shadow: 3px 3px 3px 3px #0f1318; transform: rotate(-3deg); } /* réduit : était 1.6rem */
.section h3,
.lab h3,
.sectionviol h3 { color: #cc3366; }
main .sectionoffre h3, main .sectionguide h3, main .sectionagence h3, .sectionblue h3 { font-size: 1.4rem; line-height: 1.8rem; padding: 1rem; } /* réduit : était 1.6/2rem */
/* Paragraphes desktop dans sections roses/bleues — RÉVISÉS */
main .sectionrose div.row p.h8, main .sectionblue2 div.row p.h8 { text-align: center; font-size: 2.4rem; line-height: 3rem; } /* réduit : était 3/3.6rem */
main .sectionviol div.row span.h9 { font-size: 2.8rem; text-align: left; line-height: 3.2rem; } /* réduit : était 3.6/4rem */
/* blockblue desktop — RÉVISÉ */
main .blockblue p.h6 { font-size: 2.2rem; line-height: 2.6rem; } /* réduit : était 2.6/3rem */
main .blockblue p { font-size: 1.4rem; } /* réduit : était 1.6rem */
.icon { height: auto; width: auto; background: #fff; padding: 2rem 10rem 0 0; margin: 0 auto; }
figure.somicon { width: 130px; height: 130px; position: absolute; top: 16px; right: 16px; }
#imgbg { display: none; }
.advice { min-height: 5rem; }
.sectionrbbg h1 { font-size: 4rem; padding: 0; margin: 0; line-height: 5rem; float: left; width: auto; } /* réduit : était 5/6rem */
.sectionrbbg h1 i { font-size: 1rem; text-transform: none; color: #cc3366; font-style: normal; } /* réduit : était 1.1rem */
.article_image2 { position: relative; }
.article_image2 img { width: auto; display: block; margin-bottom: 2rem; position: absolute; left: -11rem; }
.article_image3 img { width: auto; display: block; margin-bottom: 2rem; position: absolute; }
.section div.butcenter { padding: 1rem 1.2rem; }
/* Backgrounds offres */
.ogads { background-image: url(images/gads-element.png), linear-gradient(to bottom, rgb(247,241,243) 40%, #fff 40%); background-repeat: no-repeat; background-position: top left; }
.oacseo { background-image: url(images/lem-seo.png), linear-gradient(to bottom, rgb(247,241,243) 40%, #fff 40%); background-repeat: no-repeat; background-position: 20% 90%; }
.oarseo { background-image: url(images/refonte-seo.png), linear-gradient(to bottom, rgb(247,241,243) 40%, #fff 40%); background-repeat: no-repeat; background-position: 20% 70%; }
.oalseo { background-image: url(images/local-seo.png), linear-gradient(to bottom, rgb(247,241,243) 40%, #fff 40%); background-repeat: no-repeat; background-position: 20% 70%; }
.ofads { background-image: url(images/fads-element.png), linear-gradient(to bottom, rgb(247,241,243) 40%, #fff 40%); background-repeat: no-repeat; background-position: 20% 80%; }
.olads { background-image: url(images/linkedin-tokamak.png),linear-gradient(to bottom, rgb(247,241,243) 40%, #fff 40%); background-repeat: no-repeat; background-position: 20% 80%; }
.ob2b { background-image: url(images/b2b-bg.png), linear-gradient(to bottom, rgb(247,241,243) 40%, #fff 40%); background-repeat: no-repeat; background-position: 20% 80%; }
}
/* ============================================================
25. TRÈS GRANDS ÉCRANS (≥ 2000px)
============================================================ */
@media screen and (min-width: 2000px) {
.section { min-height: 40vh; }
}
/* =============================================================
Hub thématique GEO — AEP Digital
PLACEMENT OBLIGATOIRE : coller EN TOUTE FIN de style4.css,
après la section @media screen and (min-width: 2000px).
Raison : les media queries du thème (≤1000px, lignes 1378+)
contiennent des règles qui overrident les propriétés non
déclarées explicitement. Placer ce bloc après garantit la
priorité par ordre de cascade (spécificité augmentée en
complément).
Corrections vs v1 :
— Spécificité augmentée (.aep-hub préfixé sur tous les
sélecteurs enfants) pour battre section p, section h3,
main h3, ul.linn du media query ≤1000px du thème
— display:flex !important sur ul.linn (ligne 1442 du thème)
— text-align:left explicite sur h3 et p des cartes
— padding:0 explicite sur h3 et p des cartes
— Overrides déplacés hors du bloc