.elementor-kit-447{--e-global-color-primary:#495721;--e-global-color-secondary:#6A4835;--e-global-color-text:#321A0F;--e-global-color-accent:#C99766;--e-global-color-02ec97b:#8BA245;--e-global-color-5c3e9db:#495721;--e-global-color-328896d:#C99766;--e-global-color-9ec09b2:#6A4835;--e-global-color-a403a44:#321A0F;--e-global-typography-primary-font-family:"Playfair Display";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Playfair Display";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Open Sans";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Open Sans";--e-global-typography-accent-font-weight:600;}.elementor-kit-447 button,.elementor-kit-447 input[type="button"],.elementor-kit-447 input[type="submit"],.elementor-kit-447 .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );color:var( --e-global-color-text );border-radius:50px 50px 50px 50px;padding:14px 30px 14px 30px;}.elementor-kit-447 button:hover,.elementor-kit-447 button:focus,.elementor-kit-447 input[type="button"]:hover,.elementor-kit-447 input[type="button"]:focus,.elementor-kit-447 input[type="submit"]:hover,.elementor-kit-447 input[type="submit"]:focus,.elementor-kit-447 .elementor-button:hover,.elementor-kit-447 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-kit-447 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================================
Cartes "Journées Pêche & Animations" — style affiche
Appliquer la classe .moulin-anim-card au conteneur de carte.
============================================================ */
.moulin-anim-card{
--anim-gold:#C9A46A;
--anim-gold-soft:rgba(201,164,106,.38);
--anim-gold-faint:rgba(201,164,106,.22);
background-color:#16381F;
border:1px solid var(--anim-gold-faint);
text-align:center;
gap:18px;
}
/* --- badge --- */
.moulin-anim-card .anim-badge .elementor-button-wrapper{ text-align:center; }
.moulin-anim-card .anim-badge .elementor-button{
background-color:transparent;
border:1px solid var(--anim-gold-soft);
color:var(--anim-gold);
font-family:"Open Sans",sans-serif;
font-size:10px;
font-weight:600;
letter-spacing:.22em;
text-transform:uppercase;
padding:8px 18px;
}
/* le badge est un libellé (date / public), pas un lien : rendu inerte comme .moulin-tag */
.moulin-anim-card .anim-badge .elementor-button{
pointer-events:none;
cursor:default;
}
/* --- titre --- */
.moulin-anim-card .anim-title .elementor-heading-title{
font-family:"Playfair Display",serif;
font-weight:600;
color:#FFFFFF;
text-transform:uppercase;
letter-spacing:.045em;
line-height:1.06;
font-size:clamp(1.55rem,2.4vw,2.1rem);
text-wrap:balance;
}
/* --- ornement + eyebrow (widgets divider) --- */
.moulin-anim-card .anim-orn,
.moulin-anim-card .anim-eyebrow,
.moulin-anim-card .anim-rule{ margin-block:2px; }
.moulin-anim-card .elementor-divider{ padding-block:0; }
.moulin-anim-card .elementor-widget-divider{
--divider-color:var(--anim-gold-soft);
--divider-border-width:1px;
--divider-border-style:solid;
--divider-icon-size:18px;
--divider-element-spacing:14px;
}
.moulin-anim-card .elementor-divider__text{
font-family:"Open Sans",sans-serif;
font-size:10px;
font-weight:600;
letter-spacing:.26em;
text-transform:uppercase;
color:var(--anim-gold);
white-space:nowrap;
}
.moulin-anim-card .elementor-divider__element svg{ fill:var(--anim-gold); }
.moulin-anim-card .elementor-divider__element i{ color:var(--anim-gold); }
.moulin-anim-card .anim-orn .elementor-divider__element svg,
.moulin-anim-card .anim-orn .elementor-divider__element i{ font-size:19px; width:19px; height:19px; }
/* filet de clôture : dégradé vers les extrémités */
.moulin-anim-card .anim-rule .elementor-divider-separator{
border:0;
height:1px;
background-image:linear-gradient(90deg,transparent,var(--anim-gold-soft) 22%,var(--anim-gold-soft) 78%,transparent);
}
/* --- étapes numérotées --- */
.moulin-anim-card .anim-step{ text-align:left; }
.moulin-anim-card .anim-step .elementor-icon-box-wrapper{
display:flex;
align-items:flex-start;
gap:0;
text-align:left;
}
.moulin-anim-card .anim-step .elementor-icon-box-icon{
flex:0 0 auto;
margin:0 18px 0 0;
}
.moulin-anim-card .anim-step .elementor-icon{
display:flex;
align-items:center;
justify-content:center;
width:52px;
height:52px;
padding:0;
border:1px solid var(--anim-gold-soft);
border-radius:50%;
background:transparent;
color:var(--anim-gold);
font-size:20px;
}
.moulin-anim-card .anim-step .elementor-icon svg{ fill:var(--anim-gold); width:21px; height:21px; }
.moulin-anim-card .anim-step .elementor-icon i{ color:var(--anim-gold); }
.moulin-anim-card .anim-step .elementor-icon-box-content{
flex:1 1 auto;
min-height:52px;
padding-left:20px;
border-left:1px solid var(--anim-gold-soft);
}
.moulin-anim-card .anim-step .elementor-icon-box-title{
margin:0 0 5px;
font-family:"Open Sans",sans-serif;
font-size:13.5px;
font-weight:700;
letter-spacing:.07em;
text-transform:uppercase;
line-height:1.3;
color:var(--anim-gold);
}
.moulin-anim-card .anim-step .elementor-icon-box-title span{ color:inherit; }
.moulin-anim-card .anim-step .elementor-icon-box-description{
margin:0;
font-family:"Open Sans",sans-serif;
font-size:15px;
line-height:1.55;
color:rgba(255,255,255,.86);
}
/* --- mobile --- */
@media (max-width:767px){
.moulin-anim-card .anim-step .elementor-icon-box-wrapper{ flex-direction:row; align-items:flex-start; }
.moulin-anim-card .anim-step .elementor-icon-box-content{ text-align:left; }
.moulin-anim-card .anim-step .elementor-icon{ width:44px; height:44px; font-size:17px; }
.moulin-anim-card .anim-step .elementor-icon svg{ width:18px; height:18px; }
.moulin-anim-card .anim-step .elementor-icon-box-icon{ margin-right:14px; }
.moulin-anim-card .anim-step .elementor-icon-box-content{ padding-left:14px; min-height:44px; }
.moulin-anim-card .elementor-divider__text{ letter-spacing:.18em; }
}
.moulin-anim-card .elementor-divider__element .elementor-icon,
.moulin-anim-card .elementor-divider__element i,
.moulin-anim-card .elementor-divider__element svg{ color:var(--anim-gold); fill:var(--anim-gold); }
/* sous-titre de carte */
.moulin-anim-card .anim-sub .elementor-heading-title{
font-family:"Playfair Display",serif;
font-style:italic;
font-weight:400;
font-size:16px;
line-height:1.5;
color:rgba(255,255,255,.72);
}
.moulin-anim-card .anim-sub{ margin-top:-8px; }
/* le filet de clôture reste collé au bas de la carte, quelle que soit la hauteur */
.moulin-anim-card .anim-rule{ margin-top:auto; padding-top:8px; }
/* ============================================================
En-tête — compactage mobile (template #1921)
============================================================ */
@media (max-width:767px){
.moulin-header.moulin-header{
--flex-direction:row;
--flex-wrap:nowrap;
--justify-content:space-between;
--align-items:center;
--gap:10px;
}
/* logo : largeur pilotée par le réglage natif du widget (50px) */
.moulin-header .elementor-widget-theme-site-logo{ width:auto; flex:0 0 auto; }
/* groupe burger + CTA : collé à droite, pas de retour à la ligne */
.moulin-header > .e-con{
width:auto; flex:0 0 auto;
--flex-direction:row; --flex-wrap:nowrap;
--align-items:center; --justify-content:flex-end; --gap:12px;
}
.moulin-header .elementor-widget-navigation-menu{ width:auto; flex:0 0 auto; }
.moulin-header .elementor-widget-button{ width:auto; flex:0 0 auto; }
/* CTA compact : le libellé reste, l'encombrement diminue */
.moulin-header .elementor-widget-button .elementor-button{
padding:9px 15px;
font-size:12px;
letter-spacing:.06em;
white-space:nowrap;
}
}
/* ============================================================
Système de boutons — 2 styles + 1 libellé
Primaire = style par défaut du kit (or plein, encre foncée)
Secondaire= .moulin-btn-secondary (contour vert)
Libellé = .moulin-tag (non cliquable)
============================================================ */
.moulin-btn-secondary .elementor-button{
background-color:transparent;
color:var(--e-global-color-primary,#495721);
border:1px solid var(--e-global-color-primary,#495721);
}
.moulin-btn-secondary .elementor-button:hover,
.moulin-btn-secondary .elementor-button:focus{
background-color:var(--e-global-color-primary,#495721);
color:#FFFFFF;
}
/* variante fond sombre : le vert de marque tombe à 1,03:1 sur la photo du hero.
Voile translucide + or => 5,22:1, quelle que soit la photo derrière. */
.moulin-btn-on-dark .elementor-button{
background-color:rgba(0,0,0,.45);
color:var(--e-global-color-accent,#C99766);
border:1px solid var(--e-global-color-accent,#C99766);
}
.moulin-btn-on-dark .elementor-button:hover,
.moulin-btn-on-dark .elementor-button:focus{
background-color:var(--e-global-color-accent,#C99766);
color:var(--e-global-color-text,#321A0F);
border-color:var(--e-global-color-accent,#C99766);
}
/* libellés : ce n'est pas un bouton, ça ne doit pas en avoir l'air */
.moulin-tag .elementor-button{
background-color:transparent;
color:var(--e-global-color-secondary,#6A4835);
border:1px solid rgba(106,72,53,.45);
font-size:11px;
font-weight:600;
letter-spacing:.14em;
text-transform:uppercase;
padding:6px 14px;
cursor:default;
pointer-events:none;
}
.moulin-tag .elementor-button:hover{
background-color:transparent;
color:var(--e-global-color-secondary,#6A4835);
}
/* widget Call to Action (les 3 « Télécharger » de la Boutique) aligné sur le secondaire */
.elementor-widget-call-to-action .elementor-cta__button{
background-color:transparent;
color:var(--e-global-color-primary,#495721);
border:1px solid var(--e-global-color-primary,#495721);
border-radius:50px;
font-family:"Open Sans",sans-serif;
font-size:14px;
font-weight:600;
text-transform:uppercase;
letter-spacing:1px;
padding:14px 30px;
}
.elementor-widget-call-to-action .elementor-cta__button:hover{
background-color:var(--e-global-color-primary,#495721);
color:#FFFFFF;
}
/* libellé sur fond sombre : le noyer tombe à 1,07:1 sur #375237.
Crème = 7,94:1, marge confortable pour du 11px. L'or n'atteindrait que 3,34:1. */
.moulin-tag-on-dark .elementor-button,
.moulin-tag-on-dark .elementor-button:hover{
background-color:transparent;
color:#FAF5E5;
border:1px solid rgba(201,151,102,.55);
}
/* ============================================================
Héros — lisibilité du titre sur photo texturée
Re-calibre le 22/08/2026 pour la photo de facade (plus claire que
la precedente : p95 de luminance 0,50 sous le sous-titre, soit 1,92:1
sans voile). Le ratio WCAG suppose un fond uni : ici il passait (4,86:1)
alors que le texte reste pénible à lire, car le fond varie de
4,86 à 14,7 sur une même ligne. D'où un voile concentré derrière
le texte plutôt qu'un assombrissement uniforme de la photo.
============================================================ */
.moulin-hero::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
z-index:1;
background:radial-gradient(ellipse 94% 70% at 50% 48%,
rgba(6,14,8,.62) 0%,
rgba(6,14,8,.56) 50%,
rgba(6,14,8,0) 84%);
}
.moulin-hero > *{ position:relative; z-index:2; }
.moulin-hero .elementor-heading-title{
text-shadow:0 1px 2px rgba(0,0,0,.38), 0 4px 22px rgba(0,0,0,.40);
}
/* ============================================================
En-tete - recentrage du bouton menu (burger)
Ferme, le menu deroulant reste dans le flux avec une largeur
intrinseque (258px en mobile, 500px en tablette) alors qu il est
deja invisible (hauteur 0, visibility:hidden, opacity:0). Cette
largeur fantome decalait le burger de 51px vers la gauche et
poussait le CTA hors de l ecran en tablette (bord droit a 788px
pour une fenetre de 768px).
Ouvert, HFE repasse le menu en position:absolute : on applique
donc la meme chose a l etat ferme, ce qui ne change rien de
visible mais le sort du flux.
============================================================ */
@media (max-width:1024px){
/* referent de positionnement avant que le sticky ne passe en fixed */
.moulin-header{ position:relative; }
/* le menu ferme ne reclame plus de largeur */
.moulin-header .hfe-nav-menu nav.hfe-dropdown:not(.menu-is-active){
position:absolute;
}
.moulin-header .hfe-nav-menu{ width:auto; }
/* le widget est desormais large de 0px : il ne doit pas servir de
referent de positionnement, sinon left:50% vaut 50% de 0. */
.moulin-header .elementor-widget-navigation-menu,
.moulin-header .e-con.e-child{ position:static; }
/* Panneau ouvert : place par le JS de HFE a partir de l offset du
widget, qui n est plus le referent de positionnement. On le
rattache explicitement a la barre. */
.moulin-header .hfe-nav-menu nav.hfe-dropdown.menu-is-active{
left:0 !important;
right:auto !important;
width:100% !important;
}
/* burger centre sur la barre */
.moulin-header .hfe-nav-menu__toggle{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
margin:0;
}
/* Panneau ouvert : libelles centres.
Les liens sont en flex/space-between (libelle a gauche, fleche a
droite). On centre le libelle et on sort la fleche du flux, sinon
sa largeur decale le texte hors du centre. */
.moulin-header .hfe-nav-menu nav.hfe-dropdown ul li a.hfe-menu-item{
position:relative;
justify-content:center;
text-align:center;
}
.moulin-header .hfe-nav-menu nav.hfe-dropdown .hfe-menu-toggle.sub-arrow{
position:absolute;
right:15px;
top:50%;
transform:translateY(-50%);
padding:0;
}
/* les entrees de sous-menu sont indentees a 35px a gauche :
on retablit la symetrie pour que le centrage soit reel */
/* les liens de sous-menu portent la classe hfe-sub-menu-item (et non
hfe-menu-item) et sont indentes de 35px a gauche : on retablit la
symetrie pour que le centrage soit reel */
.moulin-header .hfe-nav-menu nav.hfe-dropdown .sub-menu li a.hfe-sub-menu-item{
justify-content:center;
text-align:center;
padding-left:15px;
padding-right:15px;
}
}
/* ============================================================
Cartes Seminaires - meme habillage que les cartes Animations.
Le corps reste aligne a gauche : une liste a puces centree se
lit mal. Les cartes Animations ne contiennent aucun widget
text-editor (badge, titre, dividers, icon-box uniquement),
donc cette regle ne peut pas les affecter.
============================================================ */
.moulin-anim-card .elementor-widget-text-editor{ text-align:left; }
/* Les cartes ne doivent pas deborder de leur rangee. Un conteneur flex
Elementor est en flex:0 0 auto avec min-width:auto : il refuse donc de
descendre sous la largeur de son contenu, et deux cartes cote a cote
depassaient de 21px vers 900px de large. min-width:0 + flex-shrink
laissent la carte se comprimer et le texte se replier. */
.e-con.moulin-anim-card{ min-width:0; }
/* ============================================================
Tableaux WP Table Builder
Le tableau des tarifs porte un min-width de 813px alors que son
conteneur n'en fait que 656 a 768px de large : il poussait la page
de 101px et provoquait un defilement horizontal sur tout le site.
On le laisse defiler a l'interieur de sa boite.
============================================================ */
.wptb-table-container{ overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; }
/* ============================================================
Coordonnees cliquables (telephone, e-mail, adresse)
Le dore de marque #C99766 tombe a 2,41:1 sur la carte creme
#FAF6F1, sous le minimum WCAG AA de 4,5:1. Le brun de marque
#8D6136 atteint 5,01:1. Comme le lien prend alors la meme
couleur que son libelle, le soulignement retablit l'affordance
que la couleur seule n'assure plus.
============================================================ */
.moulin-contact-link a{ text-decoration:underline; text-underline-offset:2px; }
/* ============================================================
Liens dans le contenu des pages classiques (mentions legales...)
La couleur de lien globale d'Astra est #FFFFFF : c'est voulu pour
le pied de page sombre (#321A0F), mais invisible sur fond blanc.
On ne touche donc pas la variable globale : on corrige uniquement
le contenu des pages non-Elementor. Vert de marque sur blanc =
7,87:1. Soulignement conserve : la couleur seule ne doit pas
distinguer un lien (WCAG 1.4.1).
============================================================ */
body:not(.elementor-page) .entry-content a:not(.elementor-button):not(.wp-block-button__link){
color:var(--ast-global-color-1,#495721);
text-decoration:underline;
text-underline-offset:2px;
}
body:not(.elementor-page) .entry-content a:not(.elementor-button):not(.wp-block-button__link):hover,
body:not(.elementor-page) .entry-content a:not(.elementor-button):not(.wp-block-button__link):focus{
color:var(--ast-global-color-2,#321A0F);
text-decoration:underline;
}
/* ============================================================
Parcours du Moulin (page Peche, conteneur 1gnnosp) — ordre mobile
Bureau : 3 colonnes (intro 40 % | 2 plans d'eau | 2 plans d'eau).
Empilees telles quelles, on lit "En 2026" AVANT les plans d'eau, et
les quatre plans d'eau sortent dans l'ordre des colonnes et non dans
l'ordre de lecture. display:contents aplatit les conteneurs-colonnes
pour que chaque widget devienne enfant direct du flex et puisse etre
ordonne individuellement. Bureau totalement intact.
REECRIT LE 10 SEPTEMBRE 2026. La version du 22 aout visait
.elementor-container / .elementor-column / .elementor-widget-wrap :
la conversion en conteneurs du 31 aout a supprime ce balisage, donc
la regle ne s'appliquait plus a rien. Consequence observee : les trois
colonnes restaient cote a cote en mobile (le conteneur est en row sans
variante mobile), la colonne d'intro s'etirait sur la hauteur de ses
voisines et laissait un vide enorme entre les deux paragraphes.
La direction mobile est desormais un reglage Elementor du conteneur
(flex_direction_mobile:column), pas du CSS : elle survivra a une
prochaine reecriture du balisage.
La bande 768-1024 px etait le vrai angle mort : la regle du 22 aout
comme sa reecriture du 10 septembre s'arretaient a 767 px, si bien que
sur tablette (et sur les telephones larges, l'en-tete Astra passant en
menu burger vers 921 px) les trois colonnes restaient cote a cote.
C'est ce que voyait le client. Portee etendue a 1024 px, et la
direction tablette est un reglage Elementor du conteneur.
12 SEPTEMBRE 2026. Le reglage annonce ci-dessus n'avait en fait
jamais ete enregistre : _elementor_data ne portait ni
flex_direction_tablet ni flex_wrap_* sur 1gnnosp, et post-1394.css
ne posait --flex-direction:column que sous 767 px. A 900 px le
.e-con-inner restait donc en row + nowrap ; comme les quatre
image-box portent --flex-shrink:0, les sept widgets aplatis par le
display:contents ci-dessous tenaient une seule rangee de 2997 px,
soit 2112 px de debordement horizontal (96f44df et pmintro2 ecrases
a 0 px de large au passage). Corrige en posant pour de bon
flex_direction_tablet:column, et flex_wrap_mobile:nowrap avec lui --
Elementor reecrit --flex-wrap-mobile:wrap dans le groupe de
selecteurs de flex_direction, ce qui faisait rendre 96f44df sur
6884 px au lieu de 294 et la page sur 24852 px au lieu de 18263.
A RETENIR : cette regle display:contents ne tient qu'avec la
direction tablette du conteneur. Les deux vont ensemble ; retirer
l'une sans l'autre ramene le debordement.
============================================================ */
@media (max-width:1024px){
.elementor-element-1gnnosp > .e-con-inner > .e-con{ display:contents !important; }
.elementor-element-1gnnosp .elementor-element-71d33c0{ order:1 }
.elementor-element-1gnnosp .elementor-element-96f44df{ order:2 }
.elementor-element-1gnnosp .elementor-element-2ce1fb0{ order:3 }
.elementor-element-1gnnosp .elementor-element-4cd2a7e{ order:4 }
.elementor-element-1gnnosp .elementor-element-48015ab{ order:5 }
.elementor-element-1gnnosp .elementor-element-3eca1f0{ order:6 }
.elementor-element-1gnnosp .elementor-element-pmintro2{ order:7; margin-top:14px }
/* ce
ne sert qu'a aligner les colonnes en bureau */
.elementor-element-48015ab .elementor-image-box-title br{ display:none }
}
/* ============================================================
Les Especes (page Peche) — cadre 3:2, poisson entier
Les trois photos ont des rapports differents (1206x898, 1206x780,
1206x786). Le cadre carre en masquait 25 a 35 % de la largeur et
coupait les poissons. Cadre commun 3:2 (proche du rapport reel de
deux des trois photos) + object-fit:contain : plus aucun recadrage.
Le cadre reste identique pour les trois, donc les cartes gardent
la meme hauteur. Le fichier n'est pas modifie et la lightbox ouvre
toujours la photo d'origine.
============================================================ */
/* la lightbox enveloppe l'image dans un inline-block qui se retrecit
sur son contenu : width:100% n'a alors rien a resoudre. On le passe en
block avant de recadrer. */
.elementor-element-a7d2807 .elementor-widget-container a,
.elementor-element-c091ec8 .elementor-widget-container a,
.elementor-element-fa696b9 .elementor-widget-container a{
display:block;
width:100%;
}
.elementor-element-a7d2807 img,
.elementor-element-c091ec8 img,
.elementor-element-fa696b9 img{
display:block;
width:100%;
height:auto;
aspect-ratio:3/2;
object-fit:contain;
}
/* ============================================================
Titres de cartes — un seul traitement (7 septembre 2026)
Remplace trois correctifs distincts :
— .moulin-stage-title container query (Stages, page Pêche)
— margin-right:-30px (« Qu'est-ce que la pêche », Pêche)
— margin-inline:-20px (« Le Concept », Accueil)
Les trois sont retirés. Vérifié sur le rendu le 7 sept. 2026 : l'ancre
de visionneuse suit bien la nouvelle taille (33,33 px à 1440, 24,97 à 921),
et « Art de vivre normand » tient désormais sur une ligne À 921 PX AUSSI,
ce que la marge négative, limitée à min-width:1025px, ne faisait pas.
Pourquoi les remplacer, et pas seulement les regrouper : les deux
marges négatives étaient en @media (min-width:1025px). Mesuré le
7 sept. à 921 px, LES MÊMES TITRES REPASSAIENT À LA LIGNE — le
correctif ne couvrait qu'un point de rupture sur trois. La
container query, elle, les couvre tous les trois d'un coup.
MÉCANISME
font-size = min(plafond, K × 1cqi), où 1cqi = 1 % de la largeur
de la carte. Un titre tient sur une ligne tant que
K ≤ 100 / (largeur du titre en em)
— rapport INDÉPENDANT de la largeur de la carte, donc du point de
rupture : un seul K par famille vaut pour les trois. min() ne
grossit jamais : l'échelle Astra est conservée partout où elle
tient déjà, et n'est réduite que là où il le faut.
CALIBRER : sur le titre le plus long de la famille, jamais sur le
cas signalé, et garder ~4 % de marge pour une réécriture du texte.
Mesures du 7 sept. 2026, titre le plus long de chaque famille :
mtc-duo « Pêche sportive et respectueuse » 14,005 em → K ≤ 7,14
(défaut) « Location de matériel » 9,404 em → K ≤ 10,63
mtc-concept « Art de vivre normand » 9,736 em → K ≤ 10,27
mtc-h2 « Le Parcours du Moulin » 10,411 em → K ≤ 9,61
UN CINQUIÈME CAS : poser .moulin-titre-carte sur le widget, relever
la largeur en em du titre le plus long de sa rangée, et prendre
K = 0,96 × 100/em. Ne pas ajouter de marge négative.
NE PAS OUBLIER : container-type va sur le CONTENEUR du widget, pas
sur le titre — c'est la moitié qu'on oublie, et sans elle cqi se
résout sur le viewport.
============================================================ */
.moulin-titre-carte > .elementor-widget-container{
container-type: inline-size;
}
/* Le « a » n'est pas décoratif : dans un image-box, Elementor enveloppe
le texte du titre dans un lien de visionneuse, et Astra le dimensionne
à part — « h3, .entry-content :where(h3), .entry-content :where(h3) a
{ font-size: 2.25rem } ». Ne viser que le h3 réduit donc le bloc SANS
réduire le texte. Les icon-box, eux, ont un et ne sont pas
concernés. */
.moulin-titre-carte :is(.elementor-icon-box-title,.elementor-image-box-title),
.moulin-titre-carte :is(.elementor-icon-box-title,.elementor-image-box-title) a{
font-size: min(var(--mtc-max, 36px), calc(var(--mtc-k, 10.2) * 1cqi));
overflow-wrap: normal; /* interdit la coupure au milieu d'un mot */
}
@media (max-width:921px){ .moulin-titre-carte{ --mtc-max: 26px } }
@media (max-width:544px){ .moulin-titre-carte{ --mtc-max: 22px } }
/* Rangée de deux cartes larges (490 px) à fond crème : titres longs,
donc K bas. L'élargissement était exclu — une paire 55/45 se serait
vue sur le fond visible à 8 px de rayon. */
.moulin-titre-carte.mtc-duo{ --mtc-k: 7 }
/* « Le Concept » (Accueil). La vignette est en image_size 35 %, donc
proportionnelle à la carte : élargir l'aurait déformée. Une
container query ne touche pas à la largeur, elle. */
.moulin-titre-carte.mtc-concept{ --mtc-k: 10 }
/* Carte d'introduction en H2 — échelle Astra 42 / 32 / 28. */
.moulin-titre-carte.mtc-h2{ --mtc-k: 9.4; --mtc-max: 42px }
@media (max-width:921px){ .moulin-titre-carte.mtc-h2{ --mtc-max: 32px } }
@media (max-width:544px){ .moulin-titre-carte.mtc-h2{ --mtc-max: 28px } }
/* ------------------------------------------------------------
.moulin-stage-title ne garde QUE son calage vertical : le
d'espacement avait été retiré de ces trois titres, cette marge le
remplace (hauteur de la ligne vide − 25 px). Le dimensionnement
est passé à .moulin-titre-carte ci-dessus.
------------------------------------------------------------ */
.moulin-stage-title > .elementor-widget-container{ margin-top: 21.8px }
@media (max-width:921px){ .moulin-stage-title > .elementor-widget-container{ margin-top: 8.8px } }
@media (max-width:544px){ .moulin-stage-title > .elementor-widget-container{ margin-top: 3.6px } }
/* ============================================================
Pied de page — menu sur une seule ligne (desktop)
Astra donne width:100% aux trois colonnes du pied ; elles se
compressent donc à parts égales (400 px chacune sur 1200). Les
cinq items du menu en demandent 412 : « Contact » retombait à la
ligne. La colonne du menu prend désormais la largeur de son
contenu, les deux autres se partagent le reste — le logo reste
collé à gauche et les icônes à droite (bord droit inchangé).
Rien n'est réduit : ni la taille du texte, ni les espacements.
Sous 922 px Astra empile le menu verticalement (classes
astra-footer-tablet/mobile-vertical-menu) : la règle ne s'y
applique pas.
============================================================ */
@media (min-width:922px){
.site-footer-above-section-1{ flex-wrap:nowrap }
.site-footer-above-section-1 > [data-section="section-footer-menu"]{
width:auto;
flex:0 0 auto;
}
#astra-footer-menu{ flex-wrap:nowrap }
#astra-footer-menu > li > .menu-link{ white-space:nowrap }
}
/* ============================================================
En-tête — menu sur une seule ligne (desktop, en-tête)
Le menu demande exactement la largeur qu'on lui accorde
(595,8 px pour 595,8 px) : à la fraction de pixel près, il
repassait à la ligne et « Contact » tombait sous les autres.
Il reste pourtant ~310 px de vide à gauche du menu dans la
barre. On interdit donc le retour à la ligne et on empêche le
widget d'être compressé : un libellé plus long mordra sur ce
vide au lieu de casser la ligne. Rien n'est réduit.
⚠ Borné à min-width:1025px : en dessous, le menu est le panneau
déroulant vertical du burger (CSS .moulin-header du 17 août,
en @media max-width:1024px). Le forcer en nowrap l'y casserait.
============================================================ */
@media (min-width:1025px){
.moulin-header ul.hfe-nav-menu{ flex-wrap:nowrap }
.moulin-header .elementor-element-988ee5c{ flex-shrink:0 }
.moulin-header ul.hfe-nav-menu > li > a{ white-space:nowrap }
}
/* ============================================================
Galeries en grille (plats — page Restaurant, salle — page
Séminaires) — colonnes responsives
Le widget Galerie d'images rend le markup classique de
WordPress (.gallery-columns-N / .gallery-item) : les réglages
responsives de colonnes d'Elementor n'y changent rien, la classe
reste celle du desktop à toutes les tailles. Les colonnes sont
donc pilotées ici. Attention : c'est max-width qui plafonne la
largeur, pas width — régler width seul ne change rien, et il faut
4 classes pour passer devant la règle d'Elementor (3 classes).
Elementor gère déjà 2 colonnes de 480 à 767 px et 1 colonne en
dessous ; seule la bande 768-1024 px manquait.
Aucun ratio n'est forcé : les photos gardent leur cadrage.
============================================================ */
@media (min-width:768px) and (max-width:1024px){
.moulin-galerie .elementor-image-gallery .gallery .gallery-item{
width:50%;
max-width:50%;
}
}
/* ============================================================
Liens externes dans une liste (moniteurs diplomes)
Astra met les liens en blanc : illisibles sur fond clair.
============================================================ */
.moulin-lien-ext a{
color:#8C6034;
text-decoration:underline;
text-underline-offset:3px;
text-decoration-thickness:1px;
text-decoration-color:rgba(140,96,52,.45);
transition:color .15s ease, text-decoration-color .15s ease;
}
.moulin-lien-ext a:hover,
.moulin-lien-ext a:focus{
color:#1A5FB4;
text-decoration-color:#1A5FB4;
}
.moulin-lien-ext ul{ list-style:none; padding-left:0; margin-left:0; }
.moulin-lien-ext li{ margin-bottom:.9em; line-height:1.45; }
.moulin-lien-ext li:last-child{ margin-bottom:0; }
.moulin-lien-ext a{ font-size:.84em; word-break:normal; overflow-wrap:break-word; }
/* Galerie "chambre attenante" : 2 photos, centrées sous la galerie principale.
Depuis le passage au widget Galerie d'images (markup .gallery-columns-N de
WordPress), il n'y a plus de grille CSS : les règles grid-column ne
s'appliquent plus. La paire est donc centrée en bridant la largeur de la
galerie à 50 % — deux colonnes dans la moitié du bloc donnent la même
vignette que quatre colonnes dans le bloc entier (188 px), donc l'option
ne s'affiche pas plus grande que la chambre qu'on loue.
Uniquement au-dessus de 1024 px : entre 768 et 1024, .moulin-galerie passe
la galerie principale à 2 colonnes sur toute la largeur, et la paire doit
suivre au lieu de rétrécir. */
@media (min-width:1025px){
.elementor-element-attgal .elementor-image-gallery .gallery{
max-width:50%;
margin-left:auto;
margin-right:auto;
}
}
/* ============================================================
Carrousel « Pêche » de l'Accueil — vignette carrée, photo entière au clic
Les huit fichiers sont désormais les originaux non recadrés (jusqu'à
2048x1365) et non plus des carrés de 400 px, pour que la visionneuse
ouvre la photo complète : avec link_to=file, Elementor pointe le lien
sur le fichier pleine taille de la pièce jointe, donc c'est le fichier
qui décide de ce qu'on voit au clic.
L'affichage, lui, doit rester la rangée de carrés d'origine — c'est le
recadrage carré qui la rendait régulière, et les originaux vont du
portrait 1200x1600 au paysage 2048x1365. object-fit:cover refait ce
carré côté navigateur, sans toucher aux fichiers.
Pourquoi pas une taille d'image carrée sur mesure : add_image_size()
demande du PHP, qui ne peut vivre que dans le bac à sable Novamira et
ne survivrait donc pas à la migration. Le CSS du kit, si.
============================================================ */
.elementor-element-7d54611 .swiper-slide-image{
aspect-ratio:1 / 1;
object-fit:cover;
width:100%;
height:auto;
display:block;
}
/* ============================================================
Formulaire de contact (widget 30a8f4a)
1. Lien de la case de consentement. Astra impose du blanc aux liens
(même cause que .moulin-lien-ext) : le lien vers la politique de
confidentialité était rendu en rgb(255,255,255) sans soulignement,
soit 199 px de texte invisible sur fond clair. Vérifier la couleur
calculée, pas la seule présence de la balise dans le HTML.
2. Rangée Date souhaitée / Date de fin / Nombre de personnes : le
libellé le plus long passe sur deux lignes et décalait son champ
de 8 px vers le bas. Aligner les groupes par le bas garde les
champs sur une même ligne quelle que soit la longueur des libellés
— et le restera si un libellé change.
============================================================ */
.elementor-element-30a8f4a .elementor-field-type-acceptance label a{
color:#8C6034;
text-decoration:underline;
text-underline-offset:3px;
text-decoration-thickness:1px;
text-decoration-color:rgba(140,96,52,.45);
transition:color .15s ease, text-decoration-color .15s ease;
}
.elementor-element-30a8f4a .elementor-field-type-acceptance label a:hover,
.elementor-element-30a8f4a .elementor-field-type-acceptance label a:focus{
color:#1A5FB4;
text-decoration-color:#1A5FB4;
}
@media (min-width:768px){
.elementor-element-30a8f4a .elementor-form-fields-wrapper{ align-items:flex-end; }
}
/* ============================================================
.moulin-lien-brun — lien brun souligné, couleur seule
Astra impose du blanc à tous les liens (voir .moulin-lien-ext et la
case de consentement du formulaire). .moulin-lien-ext ne convient pas
partout : elle supprime aussi les puces des listes et réduit le lien
à .84em, réglages faits pour la carte des moniteurs. Cette classe-ci
ne fait que rendre le lien visible, sans toucher à la mise en forme.
============================================================ */
.moulin-lien-brun a{
color:#8C6034;
text-decoration:underline;
text-underline-offset:3px;
text-decoration-thickness:1px;
text-decoration-color:rgba(140,96,52,.45);
transition:color .15s ease, text-decoration-color .15s ease;
}
.moulin-lien-brun a:hover,
.moulin-lien-brun a:focus{
color:#1A5FB4;
text-decoration-color:#1A5FB4;
}
/* ============================================================
Tableau des tarifs individuels (/peche/) — largeur minimale
La table 2358 (« Tarif New » dans WP Table Builder, affichée sous le
titre « Tarifs Pêche ») porte un min-width de 813 px. Son enveloppe
mesure 788 px à 900 px de large et 755 px à 767 px : il en résultait
un défilement horizontal interne de 25 px puis de 5 px, pour rien.
740 px supprime ces deux cas et laisse le défilement là où la place
manque vraiment (< 740 px). Mesuré : aucune hauteur de ligne ne change
entre 813 et 720 px, donc aucun retour à la ligne supplémentaire.
Pourquoi en CSS et pas dans le plugin : la valeur est écrite dans le
style inline puis recalculée par le JavaScript de WP Table Builder
au chargement, à partir des largeurs de cellules. Modifier les méta
_wptb_content_ n'a eu aucun effet — essayé, puis annulé. D'où le
!important, qui bat le style inline posé par ce script.
Borné à 1024 px : au-delà la table fait déjà plus large que 813.
============================================================ */
@media (max-width:1024px){
.wptb-table-2358 table{ min-width:740px !important; }
}
/* ============================================================
Formulaire de contact - champ "Votre demande" en cases a cocher
Les lignes natives font 22 px de haut pour ~29 px d'interligne :
sous le seuil tactile de 44 px, avec un risque de tap sur l'option
voisine. On aere la ligne et on grossit la case, sans toucher au
balisage genere par Elementor.
============================================================ */
.elementor-field-group-field_108b410 .elementor-field-option{
display:flex;
align-items:flex-start;
gap:10px;
padding:7px 0;
}
.elementor-field-group-field_108b410 .elementor-field-option label{
line-height:1.4;
cursor:pointer;
margin:0;
}
.elementor-field-group-field_108b410 .elementor-field-option input[type="checkbox"]{
width:18px;
height:18px;
margin:2px 0 0;
flex:0 0 auto;
cursor:pointer;
accent-color:#B07F45;
}
/* ============================================================
Champ « Votre demande » : déroulant à cases à cocher
Onze cases empilées allongeaient trop le formulaire. Le script
du champ HTML « moulin_ms » les replie derrière un bouton qui
résume la sélection (« Plusieurs choix possibles » / « X choix »).
Amélioration progressive : ces règles ne s'appliquent qu'une
fois la classe .moulin-ms-ready posée par le script. Sans
JavaScript, les cases restent affichées et le formulaire marche.
============================================================ */
.elementor-field-type-html.elementor-field-group-moulin_ms{
padding:0 !important;
margin:0 !important;
}
.elementor-field-group-field_108b410.moulin-ms-ready{
position:relative;
}
.elementor-field-group-field_108b410 .moulin-ms-toggle{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
background:#fff;
/* aligne sur les autres champs du formulaire : mesure 2px de rayon,
11.25px de padding, bordure #69727d. Le selecteur est prefixe par le
groupe car .elementor-kit-447 button imposait 50px de rayon. */
border:1px solid #69727d;
border-radius:2px;
padding:11.25px;
/* le bouton heritait du style des boutons du theme : capitales et
interlettrage de 2px. On l'aligne sur les autres champs du formulaire. */
font-family:inherit;
font-size:15px;
font-weight:400;
line-height:1.4;
text-transform:none;
letter-spacing:normal;
color:#7a7a7a;
text-align:left;
cursor:pointer;
transition:border-color .15s;
}
.elementor-field-group-field_108b410 .moulin-ms-toggle:hover{ border-color:#B07F45; }
.elementor-field-group-field_108b410 .moulin-ms-toggle:focus-visible{ outline:2px solid #B07F45; outline-offset:2px; }
.elementor-field-group-field_108b410.moulin-ms-chosen .moulin-ms-toggle{ color:#1A1F16; border-color:#B07F45; }
.moulin-ms-caret{
flex:0 0 auto;
width:0; height:0;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:6px solid currentColor;
transition:transform .15s ease;
}
.moulin-ms-open .moulin-ms-caret{ transform:rotate(180deg); }
.moulin-ms-panel{
position:absolute;
left:0; right:0; top:100%;
z-index:30;
margin-top:4px;
background:#fff;
border:1px solid #C6CCB8;
border-radius:2px;
box-shadow:0 8px 22px rgba(26,31,22,.14);
max-height:262px;
overflow-y:auto;
padding:4px 14px;
-webkit-overflow-scrolling:touch;
}
.moulin-ms-panel[hidden]{ display:none; }
/* Formulaire : ligne Date / Date de fin / Nombre de personnes.
Le libelle "Nombre de personnes" demandait 168px et n'en avait que 165 :
il passait a la ligne. Largeurs portees a 25 / 33 / 40, seule combinaison
des presets Elementor ou les trois libelles tiennent. Ces presets totalisent
98,33%, d'ou 9px de vide a droite : le dernier champ absorbe le reste. */
.elementor-field-group-nb_personnes{ flex-grow:1; }
/* ============================================================
Carte « Massages bien-etre » (/hebergement/, conteneur masscard)
13 SEPTEMBRE 2026. Les deux cartes de la rangee sont etirees a la
meme hauteur et c'est la carte Petit-dejeuner qui l'impose :
871 px de contenu contre 601 pour Massages, soit 290 px de surplus.
Avec justify-content:space-around, ces 290 px etaient repartis
AUTOUR des quatre widgets — 36,3 px de chaque cote de chacun, donc
92,6 px entre chaque paire — ce qui se lisait comme un defaut de
marge sur le paragraphe « Sur reservation, au Moulin. » alors que
celui-ci n'a aucune marge propre. Le conteneur est passe en
flex-start (reglage Elementor, pas CSS). Reste a renvoyer le bouton
en bas pour qu'il s'aligne avec celui de la carte voisine :
margin-top:auto n'est pas exprimable dans le controle de marge
d'Elementor, qui est numerique — d'ou cette regle, sur le modele de
.anim-rule{margin-top:auto} des cartes d'animation.
============================================================ */
.elementor-element-massbtn{ margin-top:auto; }
/* ============================================================
« Nos Menus Surprises » (/restaurant/, titre 3078929) — une ligne
13 SEPTEMBRE 2026. Le titre tenait sur deux lignes au bureau :
397 px de texte pour 326,7 px de carte, soit 70,3 px de trop.
POURQUOI PAS .moulin-titre-carte : son selecteur ne vise que
.elementor-icon-box-title et .elementor-image-box-title. Ici le
widget est un HEADING, donc .elementor-heading-title — poser la
classe n'aurait tout simplement rien fait. Et son K s'applique a
toutes les largeurs, ce qui n'est pas voulu ici (voir ci-dessous).
POURQUOI BUREAU SEULEMENT : a 900 px, DEUX des trois titres de la
rangee passent deja a la ligne — « Bar & Boissons » comme celui-ci,
les cartes ne faisant que 200 px. Forcer celui-ci seul sur une
ligne le ramenerait a 17,4 px a cote d'un voisin a 26 px. Deux
lignes y sont la norme de la rangee, pas un defaut.
K = 0,96 x 100 / 11,028 em = 8,7 (methode de .moulin-titre-carte).
A 326,7 px de carte : 28,4 px, soit 313 px de texte et 13 px de
marge. cqi plutot qu'une taille fixe parce que la carte retrecit
entre 1025 et 1200 px : une valeur en px calee sur 1440 y deborderait.
============================================================ */
@media (min-width:1025px){
/* Les trois titres de la rangee a la MEME taille. Demande du 13 sept. 2026.
La containment est sur les CARTES, pas sur les widgets, et c'est le point
a retenir : les cartes sont en align-items:center, donc leurs widgets sont
en largeur ajustee au contenu (align-self:flex-start, width:auto). Poser
container-type:inline-size sur un widget le fait contribuer 0 au
max-content : il s'effondre a 0, 1cqi vaut 0, font-size vaut 0 et LE
TITRE DISPARAIT — constate en ligne ce jour-la. Les cartes, elles, ont
une largeur definie par la rangee : pas d'effondrement, et aucun widget
elargi, donc « Lodge » (text-align:center dans une boite ajustee au
texte) ne se recentre pas sur toute la carte.
Les trois cartes ont exactement la meme largeur utile — 326,66 px a 1440,
268,33 a 1025 — donc un K unique donne bien la MEME taille aux trois.
Ne pas se fier a la largeur des h3 : elles sont ajustees au contenu
(302 / 327 / 150 px), ce qui fait croire a des cartes inegales.
K = 0,96 x 100 / 11,026 em (« Nos Menus Surprises », le plus long) = 8,7.
Mesure : 28,42 px a 1440 et 1200, 23,34 px a 1025 ; une ligne partout,
10,9 px de reste au plus serre.
BUREAU SEULEMENT : sous 1025 px les cartes tombent a 200 px et les trois
titres partagent deja la meme taille (26 px, puis 22) sans cette regle.
Deux d'entre eux y passent a la ligne : c'est la norme de la rangee a
cette largeur, pas un defaut. */
.elementor-element-6645d05,
.elementor-element-8585b8f,
.elementor-element-e2f5fb8{ container-type: inline-size; }
.elementor-element-f002dca .elementor-heading-title,
.elementor-element-3078929 .elementor-heading-title,
.elementor-element-e0a1155 .elementor-heading-title{
font-size: min(36px, calc(8.7 * 1cqi));
overflow-wrap: normal;
}
}
/* ============================================================
Boutique (/boutique/) - les deux cartes finissent sur la meme ligne
« En Boutique » et « Service Personnalise » sont deux enfants d'un
conteneur en ligne : etires a la meme hauteur, mais de hauteurs de
contenu differentes. Depuis l'ajout de « Voir occasion ou demarquees »
la carte de gauche est la plus haute : sans regle, sa derniere ligne
tombait 69 px sous « Faire la demande » (mesure a 1440 px).
Les deux dernieres lignes sont donc ancrees au bas de leur carte, la
ou la hauteur est commune ; les deux paragraphes portant la meme marge
basse (25,6 px), leurs lignes de base coincident.
A gauche le widget est seul et dernier : margin-top:auto suffit.
A droite le widget porte les DEUX paragraphes - le pousser en bloc
creuserait un trou sous le titre. Il est donc etire sur la hauteur
disponible et ses deux paragraphes ecartes aux extremites, ce qui
laisse la description ou elle etait.
Sans effet la ou les cartes s'empilent (mobile) : la hauteur y est
naturelle, il n'y a aucun espace libre a absorber.
============================================================ */
.moulin-carte-bas{ margin-top:auto; }
.moulin-carte-bas-duo{ flex-grow:1; }
.moulin-carte-bas-duo > .elementor-widget-container{
height:100%;
display:flex;
flex-direction:column;
justify-content:space-between;
}/* End custom CSS */